From 0672fefb16bc6ea1aeca9a7a0f845b3923627e9d Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Mon, 7 Sep 2020 14:42:04 -0400
Subject: [PATCH 1/6] chore: Use GitHub Actions for Stylelint

Includes problem matcher to show inline error messages on PRs
---
 .github/workflows/lint-css.yml | 36 ++++++++++++++++++++++++++++++++++
 .travis.yml                    |  3 ---
 2 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 .github/workflows/lint-css.yml

diff --git a/.github/workflows/lint-css.yml b/.github/workflows/lint-css.yml
new file mode 100644
index 0000000000..d3bac1e274
--- /dev/null
+++ 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/.travis.yml b/.travis.yml
index cacaf643c2..10488f3318 100644
--- 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

From 1d9de77a40a61e077a5cb5e95bfe6076ce203759 Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Mon, 7 Sep 2020 14:53:17 -0400
Subject: [PATCH 2/6] fix: Stylelint config was invalid

---
 .stylelintrc    | 11 +++++++++--
 .stylelintrc.js |  3 ---
 2 files changed, 9 insertions(+), 5 deletions(-)
 delete mode 100644 .stylelintrc.js

diff --git a/.stylelintrc b/.stylelintrc
index 1796dab3a0..09a7962902 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,6 +1,13 @@
 {
+  "extends": "stylelint-config-standard",
   "rules": {
-    "media-feature-name-no-unknown": [true,
-    "ignoreMediaFeatureNames": ["forced-colors"] ]
+    "media-feature-name-no-unknown": [
+      true,
+      {
+        "ignoreMediaFeatureNames": [
+          "forced-colors"
+        ]
+      }
+    ]
   }
 }
diff --git a/.stylelintrc.js b/.stylelintrc.js
deleted file mode 100644
index e92d12fe4c..0000000000
--- a/.stylelintrc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['stylelint-config-standard']
-};

From 3a9238c34e072e788fa2de0cb0c93d0659d78148 Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Mon, 7 Sep 2020 15:00:48 -0400
Subject: [PATCH 3/6] fix: Auto-fix stylelint issues

---
 examples/carousel/css/carousel-prev-next.css    | 12 +++---------
 examples/carousel/css/carousel-tablist.css      | 10 ++++------
 examples/combobox/css/combobox-datepicker.css   |  4 +---
 examples/combobox/css/select-only.css           |  4 ++--
 examples/dialog-modal/css/datepicker-dialog.css | 10 ++++------
 examples/menubar/css/menubar-editor.css         |  6 ++----
 examples/menubar/css/menubar-navigation.css     |  6 +++---
 examples/radio/css/radio.css                    |  2 +-
 8 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/examples/carousel/css/carousel-prev-next.css b/examples/carousel/css/carousel-prev-next.css
index d85789b047..969d0e0ebd 100644
--- 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;
 }
@@ -50,7 +50,6 @@ img.reload {
   cursor: pointer;
 }
 
-
 .carousel .carousel-item .carousel-caption a {
   text-decoration: underline;
   color: #fff;
@@ -125,7 +124,6 @@ img.reload {
 
 /* SVG Controls */
 
-
 .carousel .controls button {
   flex: 0 0 auto;
   margin: 0;
@@ -171,7 +169,6 @@ img.reload {
   stroke: white;
 }
 
-
 .carousel .controls svg polygon {
   fill: white;
   stroke: white;
@@ -204,7 +201,6 @@ img.reload {
   height: 36px;
 }
 
-
 .carousel.carousel-moreaccessible .controls button.previous {
   right: 60px;
 }
@@ -214,8 +210,8 @@ img.reload {
 }
 
 .carousel-moreaccessible .carousel-items,
-.carousel-moreaccessible .carousel-items.focus  {
-  padding: 0px;
+.carousel-moreaccessible .carousel-items.focus {
+  padding: 0;
   border: none;
 }
 
@@ -266,7 +262,6 @@ img.reload {
   outline: none;
 }
 
-
 .carousel-moreaccessible .carousel-item .carousel-caption span.contrast,
 .carousel-moreaccessible .carousel-item .carousel-caption span.contrast:hover {
   background-color: transparent;
@@ -303,4 +298,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
index 064dde0d46..1dfeac1f27 100644
--- 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;
 }
@@ -226,7 +226,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 +261,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;
 }
 
@@ -315,7 +314,6 @@ img.reload {
   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
index 5897681781..75fc78506d 100644
--- a/examples/combobox/css/combobox-datepicker.css
+++ b/examples/combobox/css/combobox-datepicker.css
@@ -62,7 +62,7 @@
 
 .combobox-datepicker .group.focus input,
 .combobox-datepicker .group.focus button {
-  background-color: #DEF;
+  background-color: #def;
 }
 
 .combobox-datepicker .group polygon {
@@ -183,7 +183,6 @@
   border: 1px solid black;
 }
 
-
 .combobox-datepicker .fa-calendar-alt {
   color: hsl(216, 89%, 51%);
 }
@@ -220,7 +219,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
index 6eeaf22e7a..cfb8fc0e65 100644
--- 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;
-}
\ No newline at end of file
+}
diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
index 89b43d7612..180e85971d 100644
--- 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;
diff --git a/examples/menubar/css/menubar-editor.css b/examples/menubar/css/menubar-editor.css
index 01f257cbe1..95fdc7a250 100644
--- a/examples/menubar/css/menubar-editor.css
+++ b/examples/menubar/css/menubar-editor.css
@@ -54,7 +54,7 @@
 
 .menubar-editor [role="menubar"] > li > [role="menuitem"][aria-expanded="true"]::after {
   content: url('../images/up-arrow-focus.svg');
-  }
+}
 
 .menubar-editor [role="menubar"] [role="menu"] {
   display: none;
@@ -81,7 +81,7 @@
 .menubar-editor [role="menubar"] [role="separator"] {
   padding: 6px;
   background-color: #eee;
-  border: 0px solid #eee;
+  border: 0 solid #eee;
   color: black;
 }
 
@@ -127,7 +127,6 @@
 
 /* focus and hover styling */
 
-
 .menubar-editor [role="menubar"] [role="menuitem"]:focus,
 .menubar-editor [role="menubar"] [role="menuitemcheckbox"]:focus,
 .menubar-editor [role="menubar"] [role="menuitemradio"]:focus {
@@ -148,7 +147,6 @@
   padding-right: 3px;
 }
 
-
 .menubar-editor [role="menubar"] [role="menuitem"]:hover {
   padding: 4px;
   border: 2px solid #034575;
diff --git a/examples/menubar/css/menubar-navigation.css b/examples/menubar/css/menubar-navigation.css
index 90b8f004b2..6a0449152d 100644
--- a/examples/menubar/css/menubar-navigation.css
+++ b/examples/menubar/css/menubar-navigation.css
@@ -22,7 +22,7 @@
   position: relative;
 }
 
-.menubar-navigation > li  li  {
+.menubar-navigation > li li {
   display: block;
 }
 
@@ -37,7 +37,7 @@
 .menubar-navigation [role="separator"] {
   padding: 6px;
   background-color: #eee;
-  border: 0px solid #eee;
+  border: 0 solid #eee;
   color: black;
   border-radius: 5px;
 }
@@ -81,7 +81,7 @@
   padding: 0;
 }
 
-.menubar-navigation [role="menu"]  {
+.menubar-navigation [role="menu"] {
   display: none;
 }
 
diff --git a/examples/radio/css/radio.css b/examples/radio/css/radio.css
index 962758e132..6054273040 100644
--- a/examples/radio/css/radio.css
+++ b/examples/radio/css/radio.css
@@ -12,7 +12,7 @@
   padding: 4px;
   padding-left: 30px;
   padding-right: 8px;
-  border: 0px solid transparent;
+  border: 0 solid transparent;
   border-radius: 5px;
   display: inline-block;
   position: relative;

From d449b045201231957226d9539c6bff5b6649d752 Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Mon, 7 Sep 2020 15:11:43 -0400
Subject: [PATCH 4/6] fix(stylelint): Unexpected duplicate selector

---
 examples/carousel/css/carousel-prev-next.css  | 31 +++++--------------
 examples/carousel/css/carousel-tablist.css    | 10 ++----
 examples/combobox/css/combobox-datepicker.css | 16 +++-------
 examples/menubar/css/menubar-navigation.css   | 15 +++------
 4 files changed, 19 insertions(+), 53 deletions(-)

diff --git a/examples/carousel/css/carousel-prev-next.css b/examples/carousel/css/carousel-prev-next.css
index 969d0e0ebd..72bce6b06c 100644
--- a/examples/carousel/css/carousel-prev-next.css
+++ b/examples/carousel/css/carousel-prev-next.css
@@ -48,9 +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;
@@ -61,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;
@@ -77,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 {
@@ -111,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 {
@@ -121,19 +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;
@@ -254,14 +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;
diff --git a/examples/carousel/css/carousel-tablist.css b/examples/carousel/css/carousel-tablist.css
index 1dfeac1f27..bc139c3383 100644
--- a/examples/carousel/css/carousel-tablist.css
+++ b/examples/carousel/css/carousel-tablist.css
@@ -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 {
@@ -306,14 +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
index 75fc78506d..5370b4edff 100644
--- 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;
@@ -123,6 +120,9 @@
 
 .combobox-datepicker .dates {
   width: 320px;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 1em;
 }
 
 .combobox-datepicker .prev-year,
@@ -193,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;
diff --git a/examples/menubar/css/menubar-navigation.css b/examples/menubar/css/menubar-navigation.css
index 6a0449152d..54361e90c7 100644
--- a/examples/menubar/css/menubar-navigation.css
+++ b/examples/menubar/css/menubar-navigation.css
@@ -74,6 +74,10 @@
   position: absolute;
   margin: 0;
   padding: 0;
+  padding: 7px 4px;
+  border: 2px solid #034575;
+  border-radius: 5px;
+  background-color: #eee;
 }
 
 .menubar-navigation [role="group"] {
@@ -81,10 +85,6 @@
   padding: 0;
 }
 
-.menubar-navigation [role="menu"] {
-  display: none;
-}
-
 .menubar-navigation [role="separator"] {
   padding-top: 3px;
   background-image: url('../images/separator.svg');
@@ -99,13 +99,6 @@
   border: #034575 solid 2px;
 }
 
-.menubar-navigation [role="menu"] {
-  padding: 7px 4px;
-  border: 2px solid #034575;
-  border-radius: 5px;
-  background-color: #eee;
-}
-
 .menubar-navigation [role="menuitem"][aria-expanded="true"],
 .menubar-navigation [role="menuitem"]:focus,
 .menubar-navigation [role="menuitem"]:hover {

From d0cd18cec51b95e2c6c81c11099ff89218915631 Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Tue, 8 Sep 2020 19:11:44 -0400
Subject: [PATCH 5/6] fix(stylelint): max-empty-lines

---
 examples/menubar/css/menubar-editor.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/menubar/css/menubar-editor.css b/examples/menubar/css/menubar-editor.css
index 95fdc7a250..edcaa3cca3 100644
--- a/examples/menubar/css/menubar-editor.css
+++ b/examples/menubar/css/menubar-editor.css
@@ -124,7 +124,6 @@
   padding-right: 3px;
 }
 
-
 /* focus and hover styling */
 
 .menubar-editor [role="menubar"] [role="menuitem"]:focus,

From 19cc407232ad6d829e6c3f9cb4a946c71247fbc9 Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Tue, 8 Sep 2020 19:19:26 -0400
Subject: [PATCH 6/6] chore(styeling): Disable no-descending-specificity

---
 .stylelintrc | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.stylelintrc b/.stylelintrc
index 09a7962902..c0864c943b 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -8,6 +8,7 @@
           "forced-colors"
         ]
       }
-    ]
+    ],
+    "no-descending-specificity": null
   }
 }