linaria
linaria copied to clipboard
callstack
@linaria/stylelint does not work with stylelint ^14.0.0
Environment
Linaria's website
- Linaria version: 2.3.1
- Bundler (+ version): webpack 4.46.0
- Node.js version: v14.18.1
- OS: MacOS BigSur v11.6.2
Description
Stylelint 14 brought breaking changes that remove the syntax command in the Stylelint config.
This should be replaced with the customSyntax option, i'm not sure if such an option is available that would
work with linaria. But currently all linting fails with Unknown word CssSyntaxError errors.
In any case the LINTING documentation does not work out of the box, rolling back to Stylelint 13 fixes the issue.
https://stylelint.io/migration-guide/to-14/
Reproducible Demo
git clone [email protected]:callstack/linaria.git
cd website/ && npm install
npm install [email protected]
npm run-script lint:css
Thanks for the amazing lib!
For stylelint 13, @linaria/stylelint uses a preprocessor to create a css-ish file before running linting tests on it.
For stylelint 14, stylelint discourages using a (pre)processor in favor of a custom syntax that essentially tells stylelint how to work with a non-css file.
postcss-lit seems to be one of the more promoted css-in-js custom syntax packages that's making use of new features in Postcss 8.3 (Document nodes). After a quick prototype, it doesn't seem to work for linaria completely out of the box but we could likely base a custom syntax off of that package.
How does a @linaria/postcss-linaria package sound that could be used for stylelint 14? There is also additional discussion of stylelint deprecating its @stylelint/postcss-css-in-js package in favor of individual css-in-js libraries.
