StyleX Intellisense enhances your StyleX development experience by providing advanced features such as autocomplete, hover previews, and color decorators.

Install via the Visual Studio Code Marketplace →

In order for this extension to work, make sure you have @stylexjs/stylex installed in your workspace.

See the generated CSS for a CSS property by hovering over it.

Change values of colors using a color picker.

Autocomplete styles

Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language.

{
  "stylex.includedLanguages": {
    "plaintext": "javascriptreact"
  }
}

List of custom module names that should be considered as the StyleX package for detecting StyleX workspaces and imports.

{
  "stylex.aliasModuleNames": ["@stylexjs/stylex", "stylex", "@my-org/stylex"]
}

Should px values for fontSize be converted to rem? It is considered a best practice to use rem for font sizes to allow users to scale the font size up or down.

{
  "stylex.useRemForFontSize": false
}

Enable/disable hover support for StyleX classes and keyframes.

{
  "stylex.hover": true
}

Enable/disable autocomplete suggestions.

{
  "stylex.suggestions": true
}

Enable/disable whether the editor should render color decorators for styles.

{
  "stylex.colorDecorators": true
}