Remove or rename invalid `-styled-mixin0` CSS properties caused by using mixins

[jroebu14]

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;

[leoyli]

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

[chinesedfan]

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.

[leoyli]

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

[jroebu14]

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

[PierreGUI]

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