Support for regular expressions in ignore

[jroebu14]

Hi, thanks for creating this useful plugin!

Is there any chance of passing in a regular expression to the ignore option?

My reason for doing so is that stylelint-processor-styled-components outputs styled-components mixins as invalid properties e.g. -styled-mixin0, -styled-mixin1,-styled-mixin2 which then fails validation when using this plugin.

If I could do something like below that would be great

  "rules": {
    "csstree/validator": {
      "ignore": ["/-styled-mixin/"]
    }
  }

[lahmatiy]

Thank you for your support!
I will think about your proposal. Probably, we can add support for vendor prefix to ignore or some sort of marks, i.e. "ignore": ["-styled-"] or "ignore": ["-styled-mixin*"]...
And just in case, can you customize the naming pattern for properties in stylelint-processor-styled-components? Maybe you can turn them in custom properties as workaround by adding one more leading dash?

[jroebu14]

Great, thanks!

Maybe you can turn them in custom properties as workaround by adding one more leading dash?

Ah I didn't think of that. I'll investigate this.

[brandonkal]

@jroebu14 If you are unaware, you no longer need to use stylelint-processor-styled-components. Stylelint now supports css-in-js syntax by default.

Some thoughts:

It would be nice to have regex but in the value location. Example:

width: 10emin;

This is a shorthand for:

width: calc(10 * var(--emin));

This is a very simple postcss plugin to make using the various element units more enjoyable.
It would nice to be able to perform this regex replacement before checking if the syntax is valid with csstree. Or even just to call a postcss plugin before passing the result to csstree. I understand linting should normally be done on unprocessed contents, but in this case, it could be useful.

[jroebu14]

Hi @brandonkal I think I still need to use stylelint-processor-styled-components to parse css containing js variables and mixins though e.g.

const example = css`
  ${({ height }) => height ? `height: ${height};` : ''}
  width: ${width};
`;

[brandonkal]

That looks quite verbose. Styled Components already handles falsish values so I would write the above like this:

const example = css`
  height: ${({ height }) => height};
  width: ${width};
`;

I haven't had any issues with the above. Stylelint will see that last declaration value as "${width}" rather than some placeholder provided by stylelint-processor-styled-components.

However, even with stylelint-processor-styled-components it does not really parse the Javascript so you won't see errors if height or width is not a valid value. For instance, props.height may have two possible values, and one of them is invalid.

For that, I would recommend my csstyper eslint plugin which uses csstree and Typescript to infer and validate values in css and styled templates.

You can also see I've made some minor changes to allow stylelint-validator to play nice with css-in-js and not attempt to parse values with ${, or identifiers and numeric literals in style objects.

For instance, switching to css-in-js will allow you to use this plugin (and the rest of stylelint) in style objects as well:

const hVar = '100%'
<Component style={{ color: 'whiteee', fontSize: 12, height: hVar }}

(one error reported above)
You also get the benefit of being able to use stylelint --fix on your JSX/TSX files.

[notethis]

Hi there! My team is using a Less @plugin to fetch values from our Design Token maps, so we're starting to get errors about invalid values. We'd find benefit from support regex in the ignore array, because then we'd just be able to pass in /get-token\(.+\)/ to silence warning about our @plugin. We've had to add plugin to the ignore list for the at-rule-no-unknown stylelint rule, and that supports RegEx within it's ignore array: https://github.com/kristerkari/stylelint-scss/tree/master/src/rules/at-rule-no-unknown

[lahmatiy]

Fixed in 2.1.0