Remove or rename invalid `-styled-mixin0` CSS properties caused by using mixins
jroebu14 opened this issue · comments
Would it be possible to prevent outputting invalid CSS properties that would fail a CSS syntax validation plugin such as csstree/stylelint-validator?
An example of this would be when using a mixin:
const example = css`
${({ height }) => height ? `height: ${height};` : ''}
width: 100%;
`;
which the processor might output
.selector1 {
-styled-mixin0: dummyValue;
width: 100%;
}
My suggestion would be to wrap -styled-mixin0: dummyValue;
in a CSS comment or prefix it with one more dash to turn it into a custom property e.g. --styled-mixin0: dummyValue;
Yes, I have also received this selector-type-no-unknown
error...
Here is my work around:
"rules": {
"selector-type-no-unknown": [true, {
"ignoreTypes": ["/^-styled-mixin/"]
}]
},
My suggestion would be to wrap -styled-mixin0: dummyValue; in a CSS comment or prefix it with one more dash to turn it into a custom property e.g. --styled-mixin0: dummyValue;
@jroebu14 Thanks for your suggestions. Sorry we didn't find a perfect solution. Comments may also introduce comment-related false-positive errors. Adding one more dash can't solve the problem from the root, either. And it can also break something like @leoyli's workaround.
Currently, @leoyli's workaround is one of the best ideas.
@chinesedfan, can be considered to add my workaround into the recommended setup? I mean people using it expect it can also take care about all valid use case.
@leoyli @chinesedfan thanks for responding to my issue. Leoyli's is a good solution but unfortunately it won't work in our specific case where we're also using the csstree/stylelint-validator plugin. This plugin has it's own ignore option which doesn't support regular expressions. I have suggested this functionality in csstree/stylelint-validator.
For now my workaround looks like this which is a custom stylelint processor we use in the processor pipeline after stylelint-processor-styled-components
. As you can see it's not ideal but it works for us in the short term.
Hi, I'm running into the same issue with stylelint-order
.
Related issue: hudochenkov/stylelint-order#63
Suggestion:
What about adding a configuration to give a custom name for mixins. Default would still be -styled-mixin${id}
, but in some cases we could make it whatever we want (such as --styled-mixin
or zz-styled-mixin
in my case to solve sorting ;) )
Thanks