CSS tree validator with custom processor

.stylelintrc

@@ -1,15 +1,24 @@
 {
   "rules": {
-    "declaration-no-important": true
+    "declaration-no-important": true,
+    "csstree/validator": true
   },
-  "processors": [["stylelint-processor-styled-components", {
-      "parserPlugins": [
-        "jsx",
-        "exportDefaultFrom"
-      ]
-    }]],
+  "processors": [
+    [
+      "stylelint-processor-styled-components", {
+        "parserPlugins": [
+          "jsx",
+          "exportDefaultFrom"
+        ]
+      }
+    ],
+    "./lib/stylelint/processorRemoveMixins.js"
+  ],
   "extends": [
     "stylelint-config-recommended",
     "stylelint-config-styled-components"
+  ],
+  "plugins": [
+    "stylelint-csstree-validator"
   ]
 }

lib/stylelint/processorRemoveMixins.js

@@ -0,0 +1,7 @@
+// If this proposed functionality ever gets added https://github.com/styled-components/stylelint-processor-styled-components/issues/271
+// then please delete this processor and any use of it.
+
+module.exports = () => ({
+  code: input =>
+    input.replace(/-styled-mixin\d+:\s.+(?!{|,).$/gm, `/* styled-mixin */`),
+});

lib/stylelint/processorRemoveMixins.test.js

@@ -0,0 +1,111 @@
+const processorRemoveMixins = require('./processorRemoveMixins');
+
+it('should comment out styled-components mixin styles', () => {
+  const input = `
+  .selector78 {
+    list-style-type: none;
+    margin: $dummyValue 0 0 0;
+    -styled-mixin1: dummyValue;
+    -styled-mixin2: dummyValue;
+    padding: 0;
+  }
+  `;
+  const actual = processorRemoveMixins().code(input);
+  const expected = `
+  .selector78 {
+    list-style-type: none;
+    margin: $dummyValue 0 0 0;
+    /* styled-mixin */
+    /* styled-mixin */
+    padding: 0;
+  }
+  `;
+
+  expect(actual).toEqual(expected);
+});
+
+it('should comment out styled-components mixins styles in media queries', () => {
+  const input = `
+  .selector78 {
+    list-style-type: none;
+    margin: $dummyValue 0 0 0;
+    -styled-mixin1: dummyValue;
+    -styled-mixin2: dummyValue;
+    padding: 0;
+
+    @media (min-width: $dummyValue) {
+      margin: $dummyValue 0 0 0;
+      -styled-mixin3: dummyValue;
+    }
+  }
+  `;
+  const actual = processorRemoveMixins().code(input);
+  const expected = `
+  .selector78 {
+    list-style-type: none;
+    margin: $dummyValue 0 0 0;
+    /* styled-mixin */
+    /* styled-mixin */
+    padding: 0;
+
+    @media (min-width: $dummyValue) {
+      margin: $dummyValue 0 0 0;
+      /* styled-mixin */
+    }
+  }
+  `;
+
+  expect(actual).toEqual(expected);
+});
+
+it('should comment out styled-components mixins styles without semi-colons', () => {
+  const input = `
+  .selector78 {
+    list-style-type: none;
+    margin: $dummyValue 0 0 0;
+    -styled-mixin1: dummyValue;
+    -styled-mixin2: dummyValue;
+    -styled-mixin3: dummyValue
+    padding: 0;
+    -styled-mixin4: dummyValue
+  }
+  `;
+  const actual = processorRemoveMixins().code(input);
+  const expected = `
+  .selector78 {
+    list-style-type: none;
+    margin: $dummyValue 0 0 0;
+    /* styled-mixin */
+    /* styled-mixin */
+    /* styled-mixin */
+    padding: 0;
+    /* styled-mixin */
+  }
+  `;
+
+  expect(actual).toEqual(expected);
+});
+
+it('should not comment out styled-components mixins selectors', () => {
+  const input = `
+  -styled-mixin1:hover &,
+  -styled-mixin4:focus & {
+    -styled-mixin5: dummyValue
+    text-decoration: none;
+    border-bottom: $dummyValue solid $dummyValue;
+    -styled-mixin1: 0;
+  }
+  `;
+  const actual = processorRemoveMixins().code(input);
+  const expected = `
+  -styled-mixin1:hover &,
+  -styled-mixin4:focus & {
+    /* styled-mixin */
+    text-decoration: none;
+    border-bottom: $dummyValue solid $dummyValue;
+    /* styled-mixin */
+  }
+  `;
+
+  expect(actual).toEqual(expected);
+});

package.json

@@ -94,6 +94,7 @@
     "stylelint": "^10.1.0",
     "stylelint-config-recommended": "^2.1.0",
     "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-csstree-validator": "^1.5.2",
     "stylelint-processor-styled-components": "^1.8.0"
   },
   "config": {

packages/components/psammead-brand/src/index.jsx

@@ -20,7 +20,7 @@ const PADDING_AROUND_SVG_ABOVE_400PX = 56;
 const PADDING_AROUND_SVG_BELOW_400PX = 32;
 
 const conditionallyRenderHeight = (svgHeight, padding) =>
-  svgHeight ? `height: ${(svgHeight + padding) / 16}rem` : '';
+  svgHeight ? `height: ${(svgHeight + padding) / 16}rem;` : '';
 
 const TRANSPARENT_BORDER = `0.0625rem solid transparent`;
 
@@ -32,13 +32,13 @@ const SvgWrapper = styled.div`
 const Banner = styled.div`
   background-color: ${C_POSTBOX};
   ${({ svgHeight }) =>
-    conditionallyRenderHeight(svgHeight, PADDING_AROUND_SVG_BELOW_400PX)};
+    conditionallyRenderHeight(svgHeight, PADDING_AROUND_SVG_BELOW_400PX)}
   width: 100%;
   padding: 0 ${GEL_SPACING};
 
   @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) {
     ${({ svgHeight }) =>
-      conditionallyRenderHeight(svgHeight, PADDING_AROUND_SVG_ABOVE_400PX)};
+      conditionallyRenderHeight(svgHeight, PADDING_AROUND_SVG_ABOVE_400PX)}
     padding: 0 ${GEL_SPACING_DBL};
   }
   border-top: ${({ borderTop }) => borderTop && TRANSPARENT_BORDER};
@@ -78,7 +78,7 @@ const BrandSvg = styled.svg`
 
   /* stylelint-disable */
   /* https://www.styled-components.com/docs/advanced#referring-to-other-components */
-    ${StyledLink}:hover &,
+  ${StyledLink}:hover &,
     ${StyledLink}:focus & {
     text-decoration: none;
     border-bottom: ${GEL_SPACING_HLF} solid ${C_WHITE};

packages/components/psammead-navigation/src/index.jsx

@@ -101,7 +101,7 @@ const StyledListItem = styled.li`
           `
         : css`
             right: 0;
-          `};
+          `}
   }
 `;
 

packages/components/psammead-story-promo/src/index.jsx

@@ -138,7 +138,7 @@ export const Headline = styled.h3`
     }
 
     return topStory ? getParagon(script) : getPica(script);
-  }};
+  }}
 
   color: ${C_EBON};
   ${({ service }) => getSerifBold(service)}