CSS tree validator with custom processor

[jroebu14]

Resolves bbc/simorgh#2189

Overall change: Adds the stylelint-csstree-validator plugin to catch invalid CSS properties and values.

A custom stylelint processor in the processors pipeline after stylelint-processor-styled-components comments out styled-components mixins so they don't fail stylelint-csstree-validator plugin validation.

Code changes:

• Updates stylelint config to add custom style processor processorRemoveMixins
• processorRemoveMixins uses a regex to match and replace any styled-components mixin with the CSS comment /* styled-mixin */ because CSS comments are ignored by stylelint
• Fixes stylelint validation errors
• Adds the test:lint:css script inside of the test script to prevent committing invalid CSS.
• Includes unit tests for the custom processor
• Includes comment about removing the custom processor if proposed functionality in stylelint-processor-styled-components is added

---

Testing notes
This doesn't require any testing because stylelint is developer dependency and doesn't modify any code used in production.

• I have assigned myself to this PR and the corresponding issues
• Tests added for new features
• Test engineer approval

[pjlee11]

Was there any particular reason/preference why we are commenting out rather than removing the styled-mixin?

[jroebu14]

Yeh there is. By removing the line with the styled-mixin it can open a can of worms of linting errors such as having a selector with no styles e.g.

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

would produce

.selector1 {
}

and also having a semi-colon where you don't need one e.g.

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

would produce

.selector1 {
  width: 100%; <--- semi colon not needed
}

[pjlee11]

The empty selector makes sense, that's not ideal. On the semi-colon is that suggesting the semi-colon's are only needed in CSS if there is a trailing statement?

[jroebu14]

Yes, that's true but after investigation I realised it's bad practice to do that and the semi-colon error must have been related to something else.

[dr3]

Does styled-components/stylelint-processor-styled-components#271 (comment) not work?

[jroebu14]

Unfortunately it doesn't tell the CSS validator plugin to ignore those custom properties and rules. That's why the plugin has it's own ignore option which doesn't support regular expressions like stylelint's rules do. I have suggested this functionality in csstree/stylelint-validator

[PriyaKR]

Doesn't require a testing from a tester.

[staylos92]

@jroebu14 please update and merge this. Thanks