eslint · mdjermanovic · Oct 27, 2022 · Oct 2, 2022 · Oct 2, 2022 · Oct 2, 2022
@@ -28,6 +28,9 @@ jobs:
     - name: Install Docs Packages
       working-directory: docs
       run: npm install
+    - name: Stylelint Docs
+      working-directory: docs
+      run: npm run lint:scss
     - name: Lint Docs JS Files
       run: node Makefile lintDocsJS
 

@@ -0,0 +1,28 @@
+{
+    "extends": ["stylelint-config-standard-scss"],
+    "rules": {
+        "alpha-value-notation": null,
+        "at-rule-empty-line-before": null,
+        "color-function-notation": null,
+        "color-hex-case": null,
+        "custom-property-empty-line-before": null,
+        "custom-property-pattern": null,
+        "declaration-block-no-duplicate-properties": null,
+        "declaration-block-no-redundant-longhand-properties": null,
+        "declaration-block-no-shorthand-property-overrides": null,
+        "hue-degree-notation": null,
+        "indentation": 4,
+        "max-line-length": null,
+        "no-descending-specificity": null,
+        "no-duplicate-selectors": null,
+        "number-leading-zero": null,
+        "number-no-trailing-zeros": null,
+        "property-no-unknown": null,
+        "property-no-vendor-prefix": null,
+        "selector-class-pattern": null,
+        "value-keyword-case": null
+    },
+    "ignoreFiles": [
+        "_site/**"
+    ]
+  }
@@ -15,7 +15,9 @@
         "build:sass": "sass --style=compressed src/assets/scss:src/assets/css --no-source-map",
         "build:eleventy": "npx @11ty/eleventy",
         "start": "npm-run-all build:sass --parallel watch:*",
-        "build": "npm-run-all build:sass build:eleventy images"
+        "build": "npm-run-all build:sass build:eleventy images",
+        "lint:scss": "stylelint \"**/*.scss\"",
+        "lint:fix:scss": "npm run lint:scss -- --fix"
     },
     "devDependencies": {
         "@11ty/eleventy": "^1.0.1",
@@ -40,7 +42,9 @@
         "netlify-cli": "^10.3.1",
         "npm-run-all": "^4.1.5",
         "rimraf": "^3.0.2",
-        "sass": "^1.52.1"
+        "sass": "^1.52.1",
+        "stylelint": "^14.13.0",
+        "stylelint-config-standard-scss": "^5.0.0"
     },
     "engines": {
         "node": ">=14.0.0"

@@ -1,7 +1,7 @@
 .hero-ad {
-     @media all and (max-width: 800px) {
-         display: none;
-     }
+    @media all and (max-width: 800px) {
+        display: none;
+    }
 }
 
 #carbonads * {

@@ -42,7 +42,6 @@
     }
 }
 
-
 [data-theme="dark"] {
     .alert {
         &.alert--warning {
@@ -101,7 +100,6 @@
     }
 }
 
-
 .alert__learn-more {
     display: block;
     font-weight: 500;

@@ -23,9 +23,7 @@ button {
     align-items: center;
     justify-content: center;
     border-radius: var(--border-radius);
-
-    transition: background-color .2s linear,
-        border-color .2s linear;
+    transition: background-color .2s linear, border-color .2s linear;
 
     svg {
         color: inherit;

@@ -143,7 +143,6 @@
         }
 
         #ham-top {
-
             transform: rotate(41deg);
         }
 

@@ -13,7 +13,6 @@
         margin-bottom: 2rem;
         margin-block-end: 2rem;
 
-
         @media all and (min-width: 1024px) {
             font-size: var(--step-0);
             margin-top: 0;
@@ -50,7 +49,6 @@
     }
 }
 
-
 .docs-nav-panel {
     @media all and (min-width: 1024px) {
         display: flex;
@@ -83,11 +81,9 @@
     align-items: center;
     margin-left: .5rem;
     margin-right: -10px;
-
     margin-inline-start: .5rem;
     margin-inline-end: -10px;
 
-
     svg {
         width: 40px;
         height: 40px;
@@ -118,7 +114,6 @@
         }
 
         #ham-top {
-
             transform: rotate(41deg);
         }
 
@@ -128,8 +123,6 @@
     }
 }
 
-
-
 @media all and (min-width: 1024px) {
     .docs-site-nav {
         flex-direction: row;
@@ -151,5 +144,4 @@
             order: 1;
         }
     }
-
 }
@@ -40,7 +40,6 @@
 }
 
 .hero--homepage {
-
     .section-title {
         margin-bottom: 1.5rem;
         margin-block-end: 1.5rem;

@@ -79,7 +79,6 @@
         }
 
         #ham-top {
-
             transform: rotate(41deg);
         }
 

@@ -18,8 +18,7 @@
     flex: 1 0 10ch;
 }
 
-
-.switcher--language  .switcher__select {
+.switcher--language .switcher__select {
     flex: 1 0 12rem;
 
     @media all and (max-width: 800px) {

@@ -7,14 +7,12 @@
     overflow: hidden;
     margin-bottom: .5rem;
     margin-block-end: .5rem;
-
     position: relative;
     transition: all .2s linear;
 
     &:hover {
         background-color: var(--lighter-background-color);
     }
-
 }
 
 .resource__image {
@@ -27,7 +25,6 @@
         display: block;
         height: 100%;
         width: 100%;
-        // object-fit: cover;
         object-fit: contain;
     }
 }
@@ -38,7 +35,6 @@
     align-self: center;
 }
 
-
 .resource__title { // a
     text-decoration: none;
     color: var(--headings-color);

@@ -13,24 +13,24 @@
         background: none;
         border: none;
 
-        @media screen and (min-width:768px){
+        @media screen and (min-width: 768px) {
             &:not(:first-child)::after {
                 content: "";
                 display: block;
                 padding: 1px;
                 border-left: 1px solid var(--divider-color);
-                left: 0px;
+                left: 0;
             }
         }
 
-        @media screen and (min-width:768px) and (max-width:1023px), screen and (min-width:1440px){
+        @media screen and (min-width: 768px) and (max-width: 1023px), screen and (min-width: 1440px) {
             &:not(:first-child)::after {
                 height: 70%;
                 position: absolute;
             }
         }
 
-        @media screen and (min-width:1024px) and (max-width:1439px){
+        @media screen and (min-width: 1024px) and (max-width: 1439px) {
             &:nth-child(2)::after {
                 height: 70%;
                 position: absolute;
@@ -171,7 +171,6 @@ a.rule__name {
 }
 
 .related-rules__list__item {
-
     svg {
         color: inherit;
     }
@@ -194,7 +193,7 @@ a.rule__name {
     }
 }
 
-a.rule-list-item+a.rule-list-item::before {
+a.rule-list-item + a.rule-list-item::before {
     content: ",";
     display: inline-block;
     margin-left: 5px;

@@ -4,8 +4,8 @@
     appearance: none;
 }
 
-[type=search]::-ms-clear,
-[type=search]::-ms-reveal {
+[type="search"]::-ms-clear,
+[type="search"]::-ms-reveal {
     display: none;
     width: 0;
     height: 0;
@@ -84,6 +84,7 @@
     &[data-results="true"] {
         padding: 0;
     }
+
     &[data-results="false"] {
         padding: 1rem;
     }
@@ -110,7 +111,7 @@
         background-color: var(--lightest-background-color);
     }
 
-    &:focus-within{
+    &:focus-within {
         background-color: var(--lightest-background-color);
     }
 }
@@ -121,7 +122,6 @@
     margin-bottom: 0;
     font-family: var(--text-font);
 
-
     a {
         display: block;
         text-decoration: none;

@@ -27,11 +27,7 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--border-radius) var(--border-radius) 0 0;
-
-    transition: background-color .2s linear,
-    border-color .2s linear;
-
-
+    transition: background-color .2s linear, border-color .2s linear;
 
     &:hover {
         color: var(--link-color);
@@ -55,7 +51,6 @@
     }
 }
 
-
 .c-tabs__tabpanel__title {
     margin-bottom: 1.5rem;
     margin-block-end: 1.5rem;

@@ -105,8 +105,6 @@
     }
 }
 
-
-
 .c-toc__panel {
     &[data-open="false"] {
         display: none;

@@ -10,7 +10,6 @@
         align-items: start;
         padding-top: 0;
         padding-bottom: 0;
-
         padding-block-start: 0;
         padding-block-end: 0;
 

@@ -32,7 +32,6 @@ html {
     padding-top: var(--space-l-xl);
     padding-block-start: var(--space-l-xl);
     font-size: .875rem;
-
     display: grid;
     grid-auto-rows: max-content;
     align-items: start;
@@ -41,7 +40,6 @@ html {
         padding: var(--space-l-xl) 0;
         padding-right: var(--space-s-l);
         padding-inline-end: var(--space-s-l);
-
         border-right: 1px solid var(--divider-color);
         border-inline-end: 1px solid var(--divider-color);
     }
@@ -73,7 +71,6 @@ html {
     @media all and (min-width: 800px) {
         padding-right: var(--space-s-l);
         padding-inline-end: var(--space-s-l);
-
         border-right: 1px solid var(--divider-color);
         border-inline-end: 1px solid var(--divider-color);
     }
@@ -83,7 +80,6 @@ html {
     }
 }
 
-
 .docs-aside {
     grid-column: 2 / 3;
     display: flex;

@@ -61,5 +61,4 @@
         flex-direction: row;
         justify-content: space-between;
     }
-
 }
@@ -10,7 +10,6 @@
         align-items: start;
         padding-top: 0;
         padding-bottom: 0;
-
         padding-block-start: 0;
         padding-block-end: 0;
 

@@ -6,7 +6,7 @@
     display: block;
     width: 100%;
     max-width: 100%;
-    min-width: 0px;
+    min-width: 0;
     padding: .625rem .875rem;
     padding-right: calc(.875rem * 2.5);
     padding-inline-end: calc(.875rem * 2.5);
@@ -19,8 +19,7 @@
     background-color: var(--body-background-color);
     background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.60938L10 12.6094L15 7.60938' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), linear-gradient(to bottom, var(--body-background-color) 0%, var(--body-background-color) 100%);
     background-repeat: no-repeat, repeat;
-    background-position: right .875rem top 50%,
-    0 0;
+    background-position: right .875rem top 50%, 0 0;
     background-size: 1em auto, 100%;
 }