Adds Stylable lint rules that warn about usages of unknown stylesheet locals (classes, css vars, Stylable vars and keyframes).
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>)
npm install eslint-plugin-stylable --save-dev
or
yarn add eslint-plugin-stylable --dev
.eslintrc
config
"extends": ["plugin:stylable/recommended"]
Option | Type | Default | Description |
---|---|---|---|
resolveOptions |
object |
{} |
Stylable resolver options |
exposeDiagnosticsReports |
boolean |
false |
expose Stylable transpilation diagnostics on the import statement |
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.
Copyright (c) 2021 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a MIT license.