Remove or rename invalid `-styled-mixin0` CSS properties caused by using mixins about stylelint-processor-styled-components HOT 5 OPEN

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/"]
    }]
  },

from stylelint-processor-styled-components.

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.

from stylelint-processor-styled-components.

@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.

from stylelint-processor-styled-components.

@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.

from stylelint-processor-styled-components.

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

from stylelint-processor-styled-components.