[core] Lint CSS (mui#22976)

andriy-shymkiv · Oct 14, 2020 · 1261e18 · 1261e18
1 parent 58ff09c
commit 1261e18
Show file tree

Hide file tree

Showing 19 changed files with 466 additions and 61 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -143,8 +143,11 @@ jobs:
           name: '`yarn workspace framer build` changes committed?'
           command: git diff --exit-code
       - run:
-          name: Lint
+          name: Eslint
           command: yarn lint:ci
+      - run:
+          name: Stylelint
+          command: yarn stylelint
       - run:
           name: Lint JSON
           command: yarn jsonlint

diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -0,0 +1,12 @@
+module.exports = {
+  processors: ['stylelint-processor-styled-components'],
+  extends: 'stylelint-config-standard',
+  rules: {
+    'value-no-vendor-prefix': true,
+    'property-no-vendor-prefix': true,
+    'no-empty-source': null,
+    'no-missing-end-of-source-newline': null,
+    'declaration-colon-newline-after': null,
+    'value-keyword-case': null,
+  },
+};
diff --git a/docs/src/pages/components/slider-styled/CustomizedSlider.tsx b/docs/src/pages/components/slider-styled/CustomizedSlider.tsx
@@ -54,15 +54,13 @@ const IOSSlider = styled(Slider)({
   color: '#3880ff',
   height: 2,
   padding: '15px 0',
-
   '& .MuiSlider-thumb': {
     height: 28,
     width: 28,
     backgroundColor: '#fff',
     boxShadow: iOSBoxShadow,
     marginTop: -14,
     marginLeft: -14,
-
     '&:focus, &:hover, &.Mui-active': {
       boxShadow:
         '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)',
@@ -72,7 +70,6 @@ const IOSSlider = styled(Slider)({
       },
     },
   },
-
   '& .MuiSlider-valueLabel': {
     left: 'calc(-50% + 12px)',
     top: -22,
@@ -81,17 +78,14 @@ const IOSSlider = styled(Slider)({
       color: '#000',
     },
   },
-
   '& .MuiSlider-track': {
     height: 2,
   },
-
   '& .MuiSlider-rail': {
     height: 2,
     opacity: 0.5,
     backgroundColor: '#bfbfbf',
   },
-
   '& .MuiSlider-mark': {
     backgroundColor: '#bfbfbf',
     height: 8,
@@ -121,12 +115,10 @@ const PrettoSlider = styled(Slider)({
   '& .MuiSlider-valueLabel': {
     left: 'calc(-50% + 4px)',
   },
-
   '& .MuiSlider-track': {
     height: 8,
     borderRadius: 4,
   },
-
   '& .MuiSlider-rail': {
     height: 8,
     borderRadius: 4,
@@ -137,7 +129,6 @@ const AirbnbSlider = styled(Slider)({
   color: '#3a8589',
   height: 3,
   padding: '13px 0',
-
   '& .MuiSlider-thumb': {
     height: 27,
     width: 27,
@@ -158,11 +149,9 @@ const AirbnbSlider = styled(Slider)({
       marginRight: 1,
     },
   },
-
   '& .MuiSlider-track': {
     height: 3,
   },
-
   '& .MuiSlider-rail': {
     color: '#d8d8d8',
     opacity: 1,

diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js
@@ -13,6 +13,7 @@ export default function EmotionCSS() {
           box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
             0 1px 3px rgba(0, 0, 0, 0.08);
           padding: 7px 14px;
+
           &:hover {
             background-color: #5469d4;
           }

diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx
@@ -13,6 +13,7 @@ export default function EmotionCSS() {
           box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
             0 1px 3px rgba(0, 0, 0, 0.08);
           padding: 7px 14px;
+
           &:hover {
             background-color: #5469d4;
           }

diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js
@@ -29,9 +29,11 @@ export default function EmotionTheme() {
               0 1px 3px rgba(0, 0, 0, 0.08);
             padding: 4px 10px;
             font-size: 13px;
+
             &:hover {
               background-color: ${darken(theme.palette.primary.main, 0.2)};
             }
+
             ${theme.breakpoints.up('sm')} {
               font-size: 14px;
               padding: 7px 14px;

diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.tsx b/docs/src/pages/guides/interoperability/EmotionTheme.tsx
@@ -29,9 +29,11 @@ export default function EmotionTheme() {
               0 1px 3px rgba(0, 0, 0, 0.08);
             padding: 4px 10px;
             font-size: 13px;
+
             &:hover {
               background-color: ${darken(theme.palette.primary.main, 0.2)};
             }
+
             ${theme.breakpoints.up('sm')} {
               font-size: 14px;
               padding: 7px 14px;

diff --git a/docs/src/pages/guides/interoperability/StyledComponents.js b/docs/src/pages/guides/interoperability/StyledComponents.js
@@ -8,6 +8,7 @@ const StyledButton = styled(Button)`
   color: #fff;
   box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
   padding: 7px 14px;
+
   &:hover {
     background-color: #5469d4;
   }

diff --git a/docs/src/pages/guides/interoperability/StyledComponents.tsx b/docs/src/pages/guides/interoperability/StyledComponents.tsx
@@ -8,6 +8,7 @@ const StyledButton = styled(Button)`
   color: #fff;
   box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
   padding: 7px 14px;
+
   &:hover {
     background-color: #5469d4;
   }

diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js
@@ -7,9 +7,11 @@ const StyledButton = styled(Button)`
   background-color: #6772e5;
   box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
   padding: 7px 14px;
+
   &:hover {
     background-color: #5469d4;
   }
+
   & .MuiButton-label {
     color: #fff;
   }

diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx
@@ -7,9 +7,11 @@ const StyledButton = styled(Button)`
   background-color: #6772e5;
   box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
   padding: 7px 14px;
+
   &:hover {
     background-color: #5469d4;
   }
+
   & .MuiButton-label {
     color: #fff;
   }

diff --git a/docs/src/pages/styles/advanced/GlobalClassName.js b/docs/src/pages/styles/advanced/GlobalClassName.js
@@ -6,13 +6,16 @@ const StyledTextField = styled(TextField)`
   label.Mui-focused {
     color: green;
   }
+
   .MuiOutlinedInput-root {
     fieldset {
       border-color: red;
     }
+
     &:hover fieldset {
       border-color: yellow;
     }
+
     &.Mui-focused fieldset {
       border-color: green;
     }

diff --git a/docs/src/pages/styles/advanced/GlobalClassName.tsx b/docs/src/pages/styles/advanced/GlobalClassName.tsx
@@ -6,13 +6,16 @@ const StyledTextField = styled(TextField)`
   label.Mui-focused {
     color: green;
   }
+
   .MuiOutlinedInput-root {
     fieldset {
       border-color: red;
     }
+
     &:hover fieldset {
       border-color: yellow;
     }
+
     &.Mui-focused fieldset {
       border-color: green;
     }

diff --git a/docs/src/pages/system/basics/Demo.js b/docs/src/pages/system/basics/Demo.js
@@ -5,7 +5,9 @@ import { createMuiTheme } from '@material-ui/core/styles';
 import { palette, spacing, typography } from '@material-ui/system';
 
 const Box = styled.div`
-  ${palette}${spacing}${typography}
+  ${palette}
+  ${spacing}
+  ${typography}
 `;
 // or import Box from '@material-ui/core/Box';
 

diff --git a/docs/src/pages/system/basics/Demo.tsx b/docs/src/pages/system/basics/Demo.tsx
@@ -12,7 +12,9 @@ import {
 } from '@material-ui/system';
 
 const Box = styled.div<PaletteProps & SpacingProps & TypographyProps>`
-  ${palette}${spacing}${typography}
+  ${palette}
+  ${spacing}
+  ${typography}
 `;
 // or import Box from '@material-ui/core/Box';
 

diff --git a/docs/src/pages/system/basics/Variant.js b/docs/src/pages/system/basics/Variant.js
@@ -9,10 +9,8 @@ const variant = style({
   themeKey: 'typography',
 });
 
-// ⚠ Text is already defined in the global context:
-// https://developer.mozilla.org/en-US/docs/Web/API/Text/Text.
 const Text = styled.span`
-  font-family: Helvetica;
+  font-family: Helvetica, sans-serif;
   ${variant}
   ${typography}
 `;

diff --git a/docs/src/pages/system/basics/Variant.tsx b/docs/src/pages/system/basics/Variant.tsx
@@ -14,10 +14,8 @@ const variant = style({
   themeKey: 'typography',
 });
 
-// ⚠ Text is already defined in the global context:
-// https://developer.mozilla.org/en-US/docs/Web/API/Text/Text.
 const Text = styled.span<PropsFor<typeof variant> & TypographyProps>`
-  font-family: Helvetica;
+  font-family: Helvetica, sans-serif;
   ${variant}
   ${typography}
 `;

diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "jsonlint": "node scripts/jsonlint.js",
     "lint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx",
     "lint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx",
+    "stylelint": "stylelint 'docs/**/*.js' 'docs/**/*.ts' 'docs/**/*.tsx'",
     "prettier": "node ./scripts/prettier.js",
     "prettier:all": "node ./scripts/prettier.js write",
     "size:snapshot": "node scripts/sizeSnapshot/create",
@@ -143,6 +144,9 @@
     "rollup-plugin-terser": "^7.0.0",
     "serve-handler": "^6.1.3",
     "sinon": "^9.0.0",
+    "stylelint": "^13.7.2",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-processor-styled-components": "^1.10.0",
     "terser-webpack-plugin": "^4.2.2",
     "tslint": "5.14.0",
     "typescript": "^4.0.2",