Editor support for Stylina — the in-* attributes that style HTML elements directly.
Features
Attribute completion: every in-* CSS property, in-on-* pseudo selector, in-def-class and in-use-class.
Value completion: CSS keywords and named colors, also after each < in responsive values and inside in-on-*="property: value".
Class completion: in-use-class suggests every in-def-class declared in the workspace.
Hover: the CSS property behind the attribute, an MDN link and, for responsive values, which value applies at each breakpoint:
Breakpoint
Value
xs (default)
4rem
sm (≥ 36em)
6rem
md (≥ 48em)
8rem
Go to definition: Ctrl+click a class in in-use-class to jump to its in-def-class.
Diagnostics with quick fixes:
unknown attribute (in-colr → "Did you mean in-color?"), which Stylina silently ignores at runtime;
unknown property or missing : in in-on-* values (a missing : makes the runtime throw);
more than 6 responsive values, or an empty one (red < < blue);
spaces in in-use-class="a, b" (Stylina does not trim class names);
in-use-class names with no in-def-class anywhere in the workspace.
Snippets: stylina (adds the runtime script), in-flex-center, in-on-hover.
Settings
Setting
Default
Description
stylina.languages
["html", "php"]
Language ids where the extension is enabled.
stylina.validate
true
Show diagnostics.
stylina.checkUndefinedClasses
true
Report in-use-class names that are never defined.
stylina.include
**/*.{html,htm}
Files scanned for in-def-class.
Development
cd packages/vscode
npm install
npm test # unit tests (Node test runner)
npm run test:integration # runs inside VS Code; set VSCODE_PATH to use an installed Code.exe
npm run package # builds stylina-vscode-<version>.vsix
Press F5 with packages/vscode open to launch a VS Code window with the extension and the example/ folder.
The list of attributes in src/data.ts is generated from packages/stylina/src/constants. After changing those constants run:
