Merge pull request #35 from octopusthink/feat/lint-styles

feat: Add linting to styles

.azure-pipelines/lint.yaml

@@ -26,5 +26,7 @@ jobs:
     steps:
       - script: npm install
         displayName: 'Install dependencies'
-      - script: npm run lint
+      - script: npm run lint:eslint
         displayName: 'Lint JS'
+      - script: npm run lint:stylelint
+        displayName: 'Lint CSS'

.eslintrc

@@ -1,25 +1,18 @@
 {
-  "extends": [
-    "airbnb",
-    "plugin:jest/recommended",
-    "prettier",
-  ],
+  "extends": ["airbnb", "plugin:jest/recommended", "prettier"],
   "parser": "babel-eslint",
-  "plugins": [
-    "emotion",
-    "prettier",
-  ],
+  "plugins": ["emotion", "prettier"],
   "rules": {
     "import/no-named-as-default": false,
     "import/prefer-default-export": false,
     "react/jsx-filename-extension": false,
-    "prettier/prettier": "error",
+    "prettier/prettier": "error"
   },
   "settings": {
     "import/resolver": {
       "node": {
-        "paths": ["./", "src"],
-      },
-    },
-  },
+        "paths": ["./", "src"]
+      }
+    }
+  }
 }

.stylelintignore

@@ -0,0 +1,9 @@
+CNAME
+__snapshots__
+bin/
+coverage/
+dist/
+node_modules/
+styleguide/
+package-lock.json
+package.json

.stylelintrc

@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-styled-components",
+    "stylelint-prettier/recommended",
+  ],
+  "order/order": [
+    "custom-properties",
+    "declarations",
+  ],
+  "plugins": [
+    "stylelint-order",
+  ],
+  "processors": ["stylelint-processor-styled-components"],
+  "rules": {},
+}

package.json

@@ -7,8 +7,11 @@
     "prebuild": "npm run clean",
     "build": "styleguidist build",
     "clean": "shx rm -rf coverage/ dist/",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
+    "lint": "npm run lint:eslint && npm run lint:stylelint",
+    "lint:eslint": "eslint .",
+    "lint:eslint-fix": "eslint --fix .",
+    "lint:stylelint": "stylelint '**/*.js'",
+    "lint:stylelint-fix": "stylelint --fix '**/*.js'",
     "prepublish:styleguide": "npm run build",
     "publish:styleguide": "node bin/publish-gh-pages.js",
     "start": "styleguidist server",
@@ -67,6 +70,13 @@
     "prettier": "1.17.1",
     "react-styleguidist": "^9.1.1",
     "shelljs": "^0.8.3",
+    "stylelint": "^10.0.1",
+    "stylelint-config-prettier": "^5.2.0",
+    "stylelint-config-standard": "^18.3.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-order": "^3.0.0",
+    "stylelint-prettier": "^1.1.0",
+    "stylelint-processor-styled-components": "^1.7.0",
     "webpack": "^4.31.0",
     "webpack-cli": "^3.3.2"
   },

src/components/Button/index.js

@@ -122,36 +122,36 @@ export default styled(Button)(
     }
 
     return css`
-      ${css(interfaceMedium(theme))};
-      padding: ${theme.spacing.padding.m} ${theme.spacing.padding.l};
-      outline: none;
-      text-decoration: none;
-      border: 2px solid ${currentButtonColor};
-      color: ${currentButtonColor};
+      ${interfaceMedium(theme)}
       background: ${theme.colors.buttons.neutral};
+      border: 2px solid ${currentButtonColor};
       border-radius: 8px;
+      color: ${currentButtonColor};
+      display: inline-block;
       margin: 0 ${theme.spacing.margin.xxs} ${theme.spacing.margin.xs};
-      transition: box-shadow 200ms;
+      outline: none;
+      padding: ${theme.spacing.padding.m} ${theme.spacing.padding.l};
       position: relative;
-      top: 0;
       text-align: center;
-      display: inline-block;
+      text-decoration: none;
+      top: 0;
+      transition: box-shadow 200ms;
+
+      &::-moz-focus-inner {
+        border: 0;
+      }
 
       &:active {
-        top: 2px;
         border-color: ${currentButtonColorDark};
         color: ${currentButtonColorDark};
+        top: 2px;
       }
 
       &:focus {
         box-shadow: 0 0 1px 4px ${currentButtonColorLight};
         outline: none;
       }
 
-      &::-moz-focus-inner {
-        border: 0;
-      }
-
       &:hover {
         box-shadow: 0 2px 0 0 ${currentButtonColorDark};
       }
@@ -169,10 +169,10 @@ export default styled(Button)(
 
       ${minimal &&
         css`
-          border-top: 0;
           border-left: 0;
-          border-right: 0;
           border-radius: 0;
+          border-right: 0;
+          border-top: 0;
           padding-left: 0;
           padding-right: 0;
         `}

src/components/Heading/index.js

@@ -33,7 +33,6 @@ Heading.propTypes = {
 export default styled(Heading)(({ level, theme }) => {
   return css`
     margin: 0 0 ${theme.spacing.margin.m};
-
     ${`${Paragraph} + &`},
     /* TODO: Replace these with actual Nautilus components */
     ul + &,
@@ -44,7 +43,7 @@ export default styled(Heading)(({ level, theme }) => {
 
     ${level === LARGE &&
       css`
-        ${css(headingLarge(theme))}
+        ${css(headingLarge(theme))};
       `}
 
     ${level === MEDIUM &&
@@ -54,7 +53,7 @@ export default styled(Heading)(({ level, theme }) => {
 
     ${level === SMALL &&
       css`
-        ${css(headingSmall(theme))}
+        ${css(headingSmall(theme))};
       `}
   `;
 });

src/components/Nautilus/index.js

@@ -11,13 +11,13 @@ export const Nautilus = ({ children, theme }) => {
       <Global
         styles={css`
           html {
+            /* Set base font size for rem units to inherit. */
+            font-size: 62.5%;
+
             /* Makes type rendering look crisper. */
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
 
-            /* Set base font size for rem units to inherit .*/
-            font-size: 62.5%;
-
             /* Enable kerning and optional ligatures. */
             text-rendering: optimizeLegibility;
 

src/components/Paragraph/index.js

@@ -46,11 +46,9 @@ export default styled(Paragraph)(
     return css`
       color: ${theme.colors.text.default};
       margin: 0 0 ${theme.spacing.margin.m};
-
-      ${small && bodySmall(theme)}
-      ${!small && !large && bodyMedium(theme)}
-      ${large && bodyLarge(theme)}
-
+      ${small && bodySmall(theme)};
+      ${!small && !large && bodyMedium(theme)};
+      ${large && bodyLarge(theme)};
       ${light &&
         css`
           color: ${theme.colors.text.light};