chore(stylelint): Add stylelint-config-standard

telus · Sep 15, 2017 · 24e5c82 · 24e5c82
1 parent 7061111
commit 24e5c82
Show file tree

Hide file tree

Showing 15 changed files with 44 additions and 76 deletions.
diff --git a/config/.stylelintrc.json b/config/.stylelintrc.json
@@ -1,7 +1,7 @@
 {
   "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-css-modules"
+    "stylelint-config-css-modules",
+    "stylelint-config-standard"
   ],
   "plugins": [
     "stylelint-scss"
@@ -23,6 +23,17 @@
           "composes"
         ]
       }
+    ],
+    "property-no-unknown": [
+      true,
+      {
+        "ignoreProperties": [
+          "composes"
+        ]
+      }
+    ],
+    "declaration-empty-line-before": [
+      "never"
     ]
   }
 }
diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
     "style-loader": "^0.18.2",
     "stylelint": "^8.1.1",
     "stylelint-config-css-modules": "^1.1.0",
-    "stylelint-config-recommended": "^1.0.0",
+    "stylelint-config-standard": "^17.0.0",
     "stylelint-scss": "^1.5.1",
     "url-loader": "^0.5.9",
     "webpack": "^3.3.0"

diff --git a/src/components/Button/Button.modules.scss b/src/components/Button/Button.modules.scss
@@ -8,7 +8,6 @@ $primary-bg-color: $color-primary;
 $secondary-bg-color: $color-secondary;
 $button-text-color: $color-white;
 
-
 @mixin border {
   // Don't add a border because it changes the size of the button.
   // Box-shadow gives a "free" border using the text color.
@@ -18,17 +17,12 @@ $button-text-color: $color-white;
 .button {
   composes: none rounded from "../Borders.modules.scss";
   composes: medium boldFont from '../Typography/Text/Text.modules.scss';
-
   display: block;
   width: 100%;
-
   padding: $spacing-base $spacing-wide;
-
-  transition: background .2s;
-
+  transition: background 0.2s;
   font-family: $font-telus;
   text-align: center;
-
   cursor: pointer;
 }
 
@@ -51,42 +45,36 @@ $button-text-color: $color-white;
 
   &:hover {
     @include border;
-
     color: $button-text-color;
   }
 }
 
 .primary {
   composes: button;
-
   background-color: $primary-bg-color;
   color: $button-text-color;
 
   &:hover {
     @include border;
-
     background-color: $button-text-color;
     color: $primary-bg-color;
   }
 }
 
 .secondary {
   composes: button;
-
   background-color: $secondary-bg-color;
   color: $button-text-color;
 
   &:hover {
     @include border;
-
     background-color: $button-text-color;
     color: $secondary-bg-color;
   }
 }
 
 .secondaryInverted {
   composes: deprecatedInverted button;
-
   color: $secondary-bg-color;
 
   &:hover {
@@ -99,39 +87,33 @@ $button-text-color: $color-white;
   composes: button;
 
   @include border;
-
   background-color: transparent;
   color: $button-text-color;
 
   &:hover {
     background-color: $button-text-color;
     color: $color-text;
-
     box-shadow: none;
   }
 }
 
 .outlinedInverted {
   composes: deprecatedInverted button;
-
   color: $color-text;
 
   &:hover {
     @include border;
-
     background-color: transparent;
   }
 }
 
 .inverted {
   composes: button;
-
   background-color: $button-text-color;
   color: $color-text;
 
   &:hover {
     @include border;
-
     background-color: transparent;
     color: $button-text-color;
   }

diff --git a/src/components/Input/Helper/Helper.modules.scss b/src/components/Input/Helper/Helper.modules.scss
@@ -3,7 +3,6 @@
 
 .base {
   composes: rounded from '../../Borders.modules.scss';
-
   padding: $spacing-base;
 }
 

diff --git a/src/components/Input/Input.modules.scss b/src/components/Input/Input.modules.scss
@@ -13,15 +13,13 @@
 
 .inputWrapper {
   composes: thin rounded from '../Borders.modules.scss';
-
   composes: row from '../Flexbox.modules.scss';
   align-items: center;
-
   padding: $spacing-base;
 }
 
 .defaultBoxShadow {
-  box-shadow: 0 1px 8px rgba(0, 0, 0, .05);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
 }
 
 .defaultBgColor {
@@ -30,33 +28,28 @@
 
 .default {
   composes: inputWrapper defaultBgColor defaultBoxShadow;
-
   border-color: $color-shuttle-grey;
 }
 
 .disabled {
   composes: inputWrapper defaultBoxShadow;
-
   background-color: $color-athens-grey;
   border-color: $color-shuttle-grey;
 }
 
 .focused {
   composes: inputWrapper defaultBgColor;
-
   border-color: transparent;
   box-shadow: 0 0 4px 1px $color-shuttle-grey;
 }
 
 .success {
   composes: inputWrapper defaultBgColor defaultBoxShadow;
-
   border-color: $color-primary;
 }
 
 .error {
   composes: inputWrapper defaultBgColor defaultBoxShadow;
-
   border-color: $color-cardinal;
 }
 
@@ -69,23 +62,21 @@ input.input {
   //composes: noSpacing from '../Spacing/Spacing.modules.scss';
   padding: 0;
   margin: 0;
-
   outline: 0;
 
   // FIXME: Will be able to use composes when removing the targeting of the <input> element above
   // composes: none rounded from '../Borders.modules.scss';
   border: 0;
   border-radius: 4px;
-
   font-family: $font-telus;
 
   // FIXME: Will be able to use composes when removing the targeting of the <input> element above
   // composes: medium mediumFont from '../Typography/Text/Text.modules.scss';
   font-size: 1rem;
   letter-spacing: -0.8px;
   line-height: 1.5;
-  @include helvetica-neue-light-45;
 
+  @include helvetica-neue-light-45;
   color: $color-shark;
   background-color: transparent;
 
@@ -102,7 +93,6 @@ input.input {
     font: inherit;
     letter-spacing: inherit;
     line-height: inherit;
-
     color: $color-shuttle-grey;
   }
 

diff --git a/src/components/Link/ChevronLink/ChevronLink.modules.scss b/src/components/Link/ChevronLink/ChevronLink.modules.scss
@@ -3,7 +3,6 @@
 
 .link {
   @include helvetica-neue-roman-55;
-
   composes: medium from '../../Typography/Text/Text.modules.scss';
 
   &:hover {
@@ -51,12 +50,10 @@
 
 .rightChevron {
   composes: chevron;
-
   margin-left: 0.5rem;
 }
 
 .leftChevron {
   composes: chevron;
-
   margin-right: 0.5rem;
 }
diff --git a/src/components/Link/Link.modules.scss b/src/components/Link/Link.modules.scss
@@ -6,8 +6,8 @@
     linear-gradient(transparent, transparent),
     linear-gradient(currentColor, currentColor);
   background-size:
-    .05em 1px,
-    .05em 1px,
+    0.05em 1px,
+    0.05em 1px,
     1px 1px;
   background-repeat:
     no-repeat,
@@ -17,12 +17,11 @@
     0 100%,
     100% 100%,
     0 100%;
-
   text-decoration: none;
 }
 
 @mixin clear-skinny-underline {
-  background-size: .05em 1px, .05em 1px, 1px 0;
+  background-size: 0.05em 1px, 0.05em 1px, 1px 0;
 }
 
 .underlineOnHover {

diff --git a/src/components/Lists/OrderedList/OrderedList.modules.scss b/src/components/Lists/OrderedList/OrderedList.modules.scss
@@ -1,17 +1,14 @@
 .decimal {
   composes: base from '../List.modules.scss';
-
   list-style-type: decimal;
 }
 
 .upperAlpha {
   composes: base from '../List.modules.scss';
-
   list-style-type: upper-alpha;
 }
 
 .lowerAlpha {
   composes: base from '../List.modules.scss';
-
   list-style-type: lower-alpha;
 }
diff --git a/src/components/Lists/UnorderedList/UnorderedItem/UnorderedItem.modules.scss b/src/components/Lists/UnorderedList/UnorderedItem/UnorderedItem.modules.scss
@@ -9,7 +9,6 @@
     display: block;
     position: absolute;
     left: -24px;
-
     font-family: $font-icons;
   }
 }

diff --git a/src/components/Notification/Notification.modules.scss b/src/components/Notification/Notification.modules.scss
@@ -12,7 +12,6 @@
 
 .branded {
   composes: base;
-
   background-color: $color-white-lilac;
 }
 

diff --git a/src/components/Typography/DisplayHeading/DisplayHeading.modules.scss b/src/components/Typography/DisplayHeading/DisplayHeading.modules.scss
@@ -15,7 +15,6 @@
   composes: noSpacing from '../../Spacing/Spacing.modules.scss';
 
   @include helvetica-neue-thin-35;
-
   font-size: 2.75rem;
   line-height: 1.14; // 48px
 
@@ -29,13 +28,13 @@
   }
 
   .sub {
-    bottom: -.5em;
+    bottom: -0.5em;
   }
 
   @include from-breakpoint(medium) {
     font-size: 4.5rem;
     line-height: 1.11; // 80px
-    letter-spacing: .2px;
+    letter-spacing: 0.2px;
 
     .sup {
       top: -2.2em;
@@ -45,12 +44,10 @@
 
 .inverted {
   composes: displayHeading;
-
   color: $color-white;
 }
 
 .default {
   composes: displayHeading;
-
   color: $color-secondary;
 }