Infrastructure: Move Stylelint to GitHub action and fix broken config…

… (pull #1518) * chore: Use GitHub Actions to run Stylelint * Includes problem matcher to show inline error messages on PRs * fix: Stylelint config was invalid * fix: Use auto-fix for stylelint issues * fix(stylelint): Unexpected duplicate selector * fix(stylelint): max-empty-lines * chore(styeling): Disable no-descending-specificity
w3c · Sep 25, 2020 · 7e78d9a · 7e78d9a
1 parent 32ca9d3
commit 7e78d9a
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 95 deletions.
diff --git a/.github/workflows/lint-css.yml b/.github/workflows/lint-css.yml
@@ -0,0 +1,36 @@
+name: CSS Linting
+on:
+  push:
+    paths:
+      - "package*.json"
+      - ".stylelint*"
+      - "**/*.css"
+      - ".github/workflows/lint-css.yml"
+      - "!common/**"
+
+  pull_request:
+    paths:
+      - "package*.json"
+      - ".stylelint*"
+      - "**/*.css"
+      - ".github/workflows/lint-css.yml"
+      - "!common/**"
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+
+      - uses: xt0rted/stylelint-problem-matcher@v1
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Stylelint
+        run: npm run lint:css
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,6 +1,14 @@
 {
+  "extends": "stylelint-config-standard",
   "rules": {
-    "media-feature-name-no-unknown": [true,
-    "ignoreMediaFeatureNames": ["forced-colors"] ]
+    "media-feature-name-no-unknown": [
+      true,
+      {
+        "ignoreMediaFeatureNames": [
+          "forced-colors"
+        ]
+      }
+    ],
+    "no-descending-specificity": null
   }
 }
diff --git a/.stylelintrc.js b/.stylelintrc.js
diff --git a/.travis.yml b/.travis.yml
@@ -16,9 +16,6 @@ jobs:
     - env: ALLOW_FAILURE=true
 
   include:
-    - stage: Lint
-      name: CSS Linting
-      script: npm run lint:css
     - stage: Lint
       name: JS Linting
       script: npm run lint:es

diff --git a/examples/carousel/css/carousel-prev-next.css b/examples/carousel/css/carousel-prev-next.css
@@ -21,7 +21,7 @@ img.reload {
   padding: 5px;
 }
 
-.carousel .carousel-items.focus  {
+.carousel .carousel-items.focus {
   padding: 2px;
   border: solid 3px #005a9c;
 }
@@ -48,10 +48,6 @@ img.reload {
 
 .carousel .carousel-item .carousel-caption a {
   cursor: pointer;
-}
-
-
-.carousel .carousel-item .carousel-caption a {
   text-decoration: underline;
   color: #fff;
   font-weight: 600;
@@ -62,7 +58,6 @@ img.reload {
   display: inline-block;
   margin: 0;
   padding: 6px;
-  display: inline-block;
   background-color: rgba(0, 0, 0, 0.65);
   border-radius: 5px;
   border: 0 solid transparent;
@@ -78,6 +73,8 @@ img.reload {
   border: 2px solid #fff;
   background-color: rgba(0, 0, 0, 1);
   outline: none;
+  border-width: 2px solid #fff;
+  color: #fff;
 }
 
 .carousel .carousel-item .carousel-caption p {
@@ -112,6 +109,12 @@ img.reload {
 .carousel .controls button {
   position: absolute;
   z-index: 10;
+  flex: 0 0 auto;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  outline: none;
 }
 
 .carousel .controls button.previous {
@@ -122,20 +125,8 @@ img.reload {
   right: 18px;
 }
 
-
 /* SVG Controls */
 
-
-.carousel .controls button {
-  flex: 0 0 auto;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  outline: none;
-  z-index: 10;
-}
-
 .carousel .controls svg .background {
   stroke: black;
   fill: black;
@@ -171,7 +162,6 @@ img.reload {
   stroke: white;
 }
 
-
 .carousel .controls svg polygon {
   fill: white;
   stroke: white;
@@ -204,7 +194,6 @@ img.reload {
   height: 36px;
 }
 
-
 .carousel.carousel-moreaccessible .controls button.previous {
   right: 60px;
 }
@@ -214,8 +203,8 @@ img.reload {
 }
 
 .carousel-moreaccessible .carousel-items,
-.carousel-moreaccessible .carousel-items.focus  {
-  padding: 0px;
+.carousel-moreaccessible .carousel-items.focus {
+  padding: 0;
   border: none;
 }
 
@@ -258,15 +247,6 @@ img.reload {
   border-radius: 5px;
 }
 
-.carousel .carousel-item .carousel-caption a:focus {
-  padding: 4px;
-  border-width: 2px solid #fff;
-  background-color: rgba(0, 0, 0, 1);
-  color: #fff;
-  outline: none;
-}
-
-
 .carousel-moreaccessible .carousel-item .carousel-caption span.contrast,
 .carousel-moreaccessible .carousel-item .carousel-caption span.contrast:hover {
   background-color: transparent;
@@ -303,4 +283,3 @@ img.reload {
   left: 0;
   padding: 0.25em 0.25em 0;
 }
-
diff --git a/examples/carousel/css/carousel-tablist.css b/examples/carousel/css/carousel-tablist.css
@@ -21,7 +21,7 @@ img.reload {
   padding: 5px;
 }
 
-.carousel-tablist .carousel-items.focus  {
+.carousel-tablist .carousel-items.focus {
   padding: 2px;
   border: solid 3px #005a9c;
 }
@@ -73,6 +73,8 @@ img.reload {
   border: 2px solid #eee;
   background-color: rgba(0, 0, 0, 1);
   outline: none;
+  border-width: 2px solid #fff;
+  color: #fff;
 }
 
 .carousel-tablist .carousel-item .carousel-caption p {
@@ -226,7 +228,7 @@ img.reload {
 .carousel-tablist [role="tab"]:focus circle.border {
   display: block;
   fill: #005a9c;
-  stroke: #ffffff;
+  stroke: #fff;
 }
 
 .carousel-tablist [role="tablist"].focus circle.tab-background {
@@ -261,10 +263,9 @@ img.reload {
   border-radius: 5px;
 }
 
-
 .carousel-tablist-moreaccessible .carousel-items,
-.carousel-tablist-moreaccessible .carousel-items.focus  {
-  padding: 0px;
+.carousel-tablist-moreaccessible .carousel-items.focus {
+  padding: 0;
   border: none;
 }
 
@@ -307,15 +308,6 @@ img.reload {
   border-radius: 5px;
 }
 
-.carousel-tablist .carousel-item .carousel-caption a:focus {
-  padding: 4px;
-  border-width: 2px solid #fff;
-  background-color: rgba(0, 0, 0, 1);
-  color: #fff;
-  outline: none;
-}
-
-
 .carousel-tablist-moreaccessible .carousel-item .carousel-caption span.contrast,
 .carousel-tablist-moreaccessible .carousel-item .carousel-caption span.contrast:hover {
   background-color: transparent;

diff --git a/examples/combobox/css/combobox-datepicker.css b/examples/combobox/css/combobox-datepicker.css
@@ -5,17 +5,14 @@
 
 .combobox-datepicker .group {
   display: inline-flex;
+  position: relative;
+  width: 12.125rem;
 }
 
 .combobox-datepicker label {
   display: block;
 }
 
-.combobox-datepicker .group {
-  position: relative;
-  width: 12.125rem;
-}
-
 .combobox-datepicker .group input,
 .combobox-datepicker .group button {
   background-color: white;
@@ -62,7 +59,7 @@
 
 .combobox-datepicker .group.focus input,
 .combobox-datepicker .group.focus button {
-  background-color: #DEF;
+  background-color: #def;
 }
 
 .combobox-datepicker .group polygon {
@@ -123,6 +120,9 @@
 
 .combobox-datepicker .dates {
   width: 320px;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 1em;
 }
 
 .combobox-datepicker .prev-year,
@@ -183,7 +183,6 @@
   border: 1px solid black;
 }
 
-
 .combobox-datepicker .fa-calendar-alt {
   color: hsl(216, 89%, 51%);
 }
@@ -194,12 +193,6 @@
   text-align: center;
 }
 
-.combobox-datepicker .dates {
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: 1em;
-}
-
 .combobox-datepicker .dates th,
 .combobox-datepicker .dates td {
   text-align: center;
@@ -220,7 +213,6 @@
   background: #eee;
 }
 
-
 .combobox-datepicker .dates td[aria-selected] {
   padding: 1px;
   border: 2px dotted black;

diff --git a/examples/combobox/css/select-only.css b/examples/combobox/css/select-only.css
@@ -60,7 +60,7 @@
   border-radius: 0 0 4px 4px;
   display: none;
   max-height: 300px;
-  overflow-y:scroll;
+  overflow-y: scroll;
   left: 0;
   position: absolute;
   top: 100%;
@@ -100,4 +100,4 @@
   top: 50%;
   transform: translate(0, -50%) rotate(45deg);
   width: 8px;
-}
+}
diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
@@ -33,7 +33,7 @@
   top: 0.25em;
   margin: 0;
   padding: 4px;
-  border: 0px solid #005a9c;
+  border: 0 solid #005a9c;
   background-color: white;
   border-radius: 5px;
 }
@@ -45,18 +45,18 @@
 }
 
 .datepicker .fa-calendar-alt {
-    color: hsl(216, 89%, 51%);
+  color: hsl(216, 89%, 51%);
 }
 
 .datepicker button.icon:focus {
   outline: none;
   padding: 2px;
   border-width: 2px;
-  background-color: #DEF;
+  background-color: #def;
 }
 
 .datepicker input:focus {
-  background-color: #DEF;
+  background-color: #def;
   outline: 2px solid #005a9c;
   outline-offset: 1px;
 }
@@ -223,7 +223,6 @@
   border: 1px solid rgb(100, 100, 100);
 }
 
-
 .datepicker-dialog table.dates td[aria-selected] {
   padding: 1px;
   border: 2px dotted rgb(100, 100, 100);
@@ -239,7 +238,6 @@
   color: white;
 }
 
-
 .datepicker-dialog .dialog-message {
   padding-top: 0.25em;
   padding-left: 1em;