diff --git a/.stylelintrc b/.stylelintrc index e8b21a0052..a51422732d 100644 --- a/.stylelintrc +++ b/.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" ] } diff --git a/lib/stylelint/processorRemoveMixins.js b/lib/stylelint/processorRemoveMixins.js new file mode 100644 index 0000000000..c795fb77c9 --- /dev/null +++ b/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 */`), +}); diff --git a/lib/stylelint/processorRemoveMixins.test.js b/lib/stylelint/processorRemoveMixins.test.js new file mode 100644 index 0000000000..ff0c2ef41f --- /dev/null +++ b/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); +}); diff --git a/package-lock.json b/package-lock.json index ec31f2eed1..b4a99869b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18843,6 +18843,33 @@ "integrity": "sha512-z5Xz/9GmvxO6e/DLzBMwkB85zHxEEjN6K7Cj80Bi+o/9vR9eS3GX3E9VuMnX9WLFYulqbqLtTapGGY28JBiy9Q==", "dev": true }, + "stylelint-csstree-validator": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/stylelint-csstree-validator/-/stylelint-csstree-validator-1.5.2.tgz", + "integrity": "sha512-EweV7qnGyymZ95HYosX+nEi0ummTqxgox8icjp+R5dgaPLkXEWSmwFOrj2jtofkFkUOhm4ZCAO58QnJGTMggwA==", + "dev": true, + "requires": { + "css-tree": "1.0.0-alpha.33" + }, + "dependencies": { + "css-tree": { + "version": "1.0.0-alpha.33", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.33.tgz", + "integrity": "sha512-SPt57bh5nQnpsTBsx/IXbO14sRc9xXu5MtMAVuo0BaQQmyf0NupNPPSoMaqiAF5tDFafYsTkfeH4Q/HCKXkg4w==", + "dev": true, + "requires": { + "mdn-data": "2.0.4", + "source-map": "^0.5.3" + } + }, + "mdn-data": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", + "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==", + "dev": true + } + } + }, "stylelint-processor-styled-components": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/stylelint-processor-styled-components/-/stylelint-processor-styled-components-1.8.0.tgz", diff --git a/package.json b/package.json index a96656266e..15edc6ae90 100644 --- a/package.json +++ b/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": { diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx index f3d5ce9f66..3fbd05eefa 100644 --- a/packages/components/psammead-brand/src/index.jsx +++ b/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}; diff --git a/packages/components/psammead-navigation/src/index.jsx b/packages/components/psammead-navigation/src/index.jsx index 5195b7898f..4ab2f633d7 100644 --- a/packages/components/psammead-navigation/src/index.jsx +++ b/packages/components/psammead-navigation/src/index.jsx @@ -101,7 +101,7 @@ const StyledListItem = styled.li` ` : css` right: 0; - `}; + `} } `; diff --git a/packages/components/psammead-story-promo/src/index.jsx b/packages/components/psammead-story-promo/src/index.jsx index 2bc9af77b5..38f928d7f9 100644 --- a/packages/components/psammead-story-promo/src/index.jsx +++ b/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)}