eslint-plugin-stylable

Stylable eslint plugin

Adds Stylable lint rules that warn about usages of unknown stylesheet locals (classes, css vars, Stylable vars and keyframes).

Example

Trying to access an unknown class from the comp.st.css stylesheet:

/* comp.st.css */
.root {}
.part {}

import { classes } from './comp.st.css';

// ...

const render = (<div className={classes.root} >
  <div className={classes.missing} /> // unknown local class "missing" used from stylesheet ./comp.st.css
</div>)

Install

npm install eslint-plugin-stylable --save-dev or yarn add eslint-plugin-stylable --dev

Config

.eslintrc config

  "extends": ["plugin:stylable/recommended"]

Options

Option	Type	Default	Description
resolveOptions	object	{}	Stylable resolver options
exposeDiagnosticsReports	boolean	false	expose Stylable transpilation diagnostics on the import statement

Known issue

ESLint is not intended for multi-file operations, such as validating your TS when an .st.css files changes. This means that the plugin might lose track of stylesheet changes and work with stale data.

This behavior will show out-of-date errors or will miss new errors in your TS files. Manually triggering a change in the stylesheet file will sync ESlint and update the diagnostics.

License

Copyright (c) 2021 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a MIT license.