vs code and intellisense for CSS Grid and CSS Modules

Question

I am using VS code for a project using CSS Grid and CSS Modules. However when I try something like this

.loginRegisterDiv {
  composes: loginDiv;
  margin: 0px;
  width: 100%;
}

I get an error saying composes "unknown property" for composes. Plus I am using css grid and there does not seem to be any intellisense for this in VS code. Do I need to install an extension?

I am using rallycoding rulesets.

Answer 1

You can add to the VSC CSS linter an exception to the rule css.lint.unknownProperties (or set this to ignore). Open the VSC settings, search for css.lint.validProperties and add 'composes' to the list. The error/warning will go away.

Answer 2

To make the VS Code recognise these custom CSS directive/properties, you can provide custom data for VS Code's CSS Language Service as mentioned here - https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md.

Create a CSS custom data set file with the following info. Place it at location .vscode/custom.css-data.json relative to the project root.

{
  "version": 1.1,
  "properties": [
    {
      "name": "composes",
      "description": "css modules compose"
    }
  ],
  "atDirectives": [
    {
      "name": "@value",
      "description": "css modules value import"
    }
  ],
  "pseudoClasses": [],
  "pseudoElements": []
}

Now, if you don't have already, create a .vscode\settings.json file relative to project root. Add a field with key "css.customData" and value as the path to custom data set. For example,

{
  "css.customData": ["./.vscode/custom.css-data.json"]
}

Now, you will no longer get "Unknown property" warning. When you hover over "composes", you will see the description you set for it in custom.css-data.json

Answer 3

This works to me, in your settings.json file add "css.lint.validProperties": ["composes"],

Answer 4

I use extensions to help with this particular problem. The extension system is excellent in VS Code, and there are a lot of really high quality extensions built by the community that greatly improve the quality and feature set of the editor.

Here are a few extensions that I use for writing SASS in VS Code. One or a couple of these should fix the problems you are having (and maybe even a few you didn't know you were having).

• SCSS Grammar Extended by Danny McGee
  • Features:
    • Fixes content and cursor property names being tokenized as tag selectors
    • Fixes background being tokenized as an invalid/deprecated keyword in certain contexts
    • Fixes color being tokenized as a property value keyword instead of a property name in certain contexts
    • null and boolean values tokenized as language constants
    • BEM-style __element and --modifier fragments tokenized as class names
    • Added recognition for Angular-specific pseudo-selectors :host-context and ::ng-deep
• Sass by Syler
  • Features:
    • Upgraded syntax highlighting
    • AutoCompletions / Intellisense
    • Formatter

• CSS Modules Syntax Highlighter by Andrew Leedham

  • Features:
    • @value variable decleration: regular and namespaced.
    • composes: attribute: local and imports.
    • :global and :local pseudo classes.

• SCSS IntelliSense by mrmlnc

  • Features:
    • Code Completion Proposals (variables, mixins, functions)
    • Hover (variables, mixins, functions)
    • Code navigation

Install one or several of those in VS Code, restart the editor, and then let me know if that doesn't fix your issue.