FIx stylelint errors and add it to validate script

.stylelintrc

@@ -5,7 +5,6 @@
     "stylelint-config-styled-components"
   ],
   "plugins": [
-    "stylelint-declaration-strict-value",
     "stylelint-order"
   ],
   "rules": {
@@ -46,6 +45,7 @@
       }
     ],
     "order/order": [
+      { "type": "at-rule", "name": "import" },
       "custom-properties",
       "dollar-variables",
       { "type": "at-rule", "name": "extend" },
@@ -59,14 +59,6 @@
       "rules",
       "at-rules"
     ],
-    "order/properties-alphabetical-order": true,
-    "scale-unlimited/declaration-strict-value": [
-      ["/color/"],
-      {
-        "ignoreKeywords": {
-          "/color/": ["transparent", "inherit"]
-        }
-      }
-    ]
+    "order/properties-alphabetical-order": true
   }
 }

package.json

@@ -170,12 +170,11 @@
     "stylelint": "^9.8.0",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-declaration-strict-value": "^1.1.2",
     "stylelint-order": "^2.0.0",
     "stylelint-processor-styled-components": "^1.5.1",
     "terser-webpack-plugin": "^1.1.0",
     "url-loader": "^1.1.2",
-    "webpack": "^4.26.0",
+    "webpack": "^4.26.1",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10",
     "webpack-merge": "^4.1.4",
@@ -200,7 +199,7 @@
     "test:e2e:dev": "start-server-and-test start http://localhost:3000 cy:open",
     "bundlesize": "bundlesize",
     "serve": "serve --no-clipboard --single --listen 3000 build",
-    "validate": "npm run test && npm run test:e2e:run",
+    "validate": "npm run lint && npm run lint:styles && npm run test && npm run test:e2e:run",
     "setup": "npm install && npm run validate",
     "deploy": "node tools deploy",
     "publish": "node tools publish",

src/components/GlobalStyles.jsx

@@ -3,14 +3,14 @@ import { createGlobalStyle } from 'styled-components';
 import { appColor } from 'modules/theme';
 
 const GlobalStyle = createGlobalStyle`
+  @import url('https://fonts.googleapis.com/css?family=Lato:400,700');
+
   *,
   *:before,
   *:after {
     box-sizing: border-box;
   }
 
-  @import url('https://fonts.googleapis.com/css?family=Lato:400,700');
-
   html {
     font-size: 62.5%;
     -webkit-font-smoothing: antialiased;

src/containers/GitHub.jsx

@@ -33,6 +33,7 @@ const GitHubGrid = styled.ul`
   list-style: none;
   margin: ${spacer(4)} auto 0;
   padding: 0;
+  /* stylelint-disable */
   ${/* istanbul ignore next */ p =>
     responsive({
       ix: `
@@ -51,6 +52,7 @@ const GitHubGrid = styled.ul`
       grid-template-columns: repeat(4, 1fr);
     `,
     })};
+  /* stylelint-enable */
 
   > li {
     display: flex;
@@ -68,6 +70,7 @@ const Item = styled(Box)`
   padding: ${spacer(3)};
   text-align: center;
   width: 100%;
+  /* stylelint-disable */
   ${/* istanbul ignore next */ p =>
     responsive({
       md: `
@@ -77,6 +80,7 @@ const Item = styled(Box)`
       padding: ${spacer(4)(p)};
     `,
     })};
+  /* stylelint-enable */
 
   > a {
     margin-bottom: ${spacer(2)};

src/containers/Header.jsx

@@ -8,7 +8,7 @@ import { logOut } from 'actions/index';
 
 import { Container, utils } from 'styled-minimal';
 import Icon from 'components/Icon';
-import Logo, { LogoWrapper } from 'components/Logo';
+import Logo from 'components/Logo';
 
 const { responsive, spacer } = utils;
 
@@ -30,8 +30,10 @@ const HeaderWrapper = styled.header`
     position: absolute;
     right: 0;
   }
+`;
 
-  ${LogoWrapper} svg {
+const HeaderLogo = styled(Logo)`
+  svg {
     width: 5rem;
   }
 `;
@@ -53,15 +55,15 @@ const Logout = styled.button`
   font-size: 1.3rem;
   padding: ${spacer(2)};
 
-  ${responsive({ lg: 'font-size: 1.6rem;' })};
+  ${responsive({ lg: 'font-size: 1.6rem;' })}; /* stylelint-disable-line */
 
   &.active {
     color: #000;
   }
 
   span {
     display: inline-block;
-    margin-right: 4px;
+    margin-right: 0.4rem;
     text-transform: uppercase;
   }
 `;
@@ -81,7 +83,7 @@ export default class Header extends React.PureComponent {
     return (
       <HeaderWrapper>
         <StyledContainer>
-          <Logo />
+          <HeaderLogo />
           <Logout onClick={this.handleClickLogout}>
             <span>logout</span>
             <Icon name="sign-out" color="#333" width={16} />

src/containers/SystemAlerts.jsx

@@ -24,47 +24,55 @@ const TopLeft = styled(Base)`
   top: ${utils.spacer(3)};
   width: 26rem;
 
+  /* stylelint-disable */
   ${utils.responsive({
     md: `
       width: 32rem;
     `,
   })};
+  /* stylelint-enable */
 `;
 
 const TopRight = styled(Base)`
   right: ${utils.spacer(3)};
   top: ${utils.spacer(3)};
   width: 26rem;
 
+  /* stylelint-disable */
   ${utils.responsive({
     md: `
       width: 32rem;
     `,
   })};
+  /* stylelint-enable */
 `;
 
 const BottomLeft = styled(Base)`
   bottom: ${utils.spacer(3)};
   left: ${utils.spacer(3)};
   width: 26rem;
 
+  /* stylelint-disable */
   ${utils.responsive({
     md: `
       width: 32rem;
     `,
   })};
+  /* stylelint-enable */
 `;
 
 const BottomRight = styled(Base)`
   bottom: ${utils.spacer(3)};
   right: ${utils.spacer(3)};
   width: 26rem;
 
+  /* stylelint-disable */
   ${utils.responsive({
     md: `
       width: 32rem;
     `,
   })};
+  /* stylelint-enable */
 `;
 
 const SystemAlertsWrapper = styled.div`

src/routes/Home.jsx

@@ -38,11 +38,13 @@ const Heading = styled.h1`
   margin-top: 0;
   text-align: center;
 
+  /* stylelint-disable */
   ${utils.responsive({
     lg: `
       font-size: 4rem;
     `,
   })};
+  /* stylelint-enable */
 `;
 
 export class Home extends React.PureComponent {

test/components/__snapshots__/GlobalStyles.spec.js.snap

@@ -2,18 +2,18 @@
 
 exports[`GlobalStyles should render properly 1`] = `
 GlobalStyle {
-  "componentId": "sc-global-3341412336",
+  "componentId": "sc-global-3983640001",
   "isStatic": true,
   "rules": Array [
     "
+  @import url('https://fonts.googleapis.com/css?family=Lato:400,700');
+
   *,
   *:before,
   *:after {
     box-sizing: border-box;
   }
 
-  @import url('https://fonts.googleapis.com/css?family=Lato:400,700');
-
   html {
     font-size: 62.5%;
     -webkit-font-smoothing: antialiased;