postcss-lit
postcss-lit copied to clipboard
[Bug] stylelint customSyntax postcss-lit deletes custom variables
First of all big thanks for fixing the main issue with variables inside string literals in css files for lit components.
The bug happens when you are using both a linter (to cut long lines of css into multiple lines) and stylelint with customSyntax postcss-lit in the following scenario:
let's assume we have the following css (single line css selector): .long-class-name-container.${veryLongVariableNameAddedHere} .small-image-container span ${anotherVeryLongVariableNameAddedHere} img { width: 100%; height: 100%; }
This will get parsed after linting into: .long-class-name-container.${veryLongVariableNameAddedHere} .small-image-container span ${anotherVeryLongVariableNameAddedHere} img { width: 100%; height: 100%; }
And after stylelint into: .general-takeover-container./* missing variable veryLongVariableNameAddedHere here*/ .small-image-container span /* missing variable anotherVeryLongVariableNameAddedHere here*/ img { width: 100%; height: 100%; }
This is not happening when for example we have only one ${variable} at the end with "{" and gets parsed on the last line like: .long-class-name-container .small-image-container span ${anotherVeryLongVariableNameAddedHere} {
into .long-class-name-container .small-image-container span ${anotherVeryLongVariableNameAddedHere} { width: 100%; height: 100%; }
do you happen to know which stylelint rule does that for you?
we do have some stylelint tests already so i can probably reproduce it fairly easily once i know which rule you're using inside stylelint.
I think it is the following rule from prettier (https://prettier.io/docs/en/options.html), "printWidth": 120.