Infrastructure: Add Prettier Stylelint config (pull #1554)

* Infrastructure: Add Prettier to Stylelint config
* chore: Run Stylelint fix for Prettier config

.github/workflows/lint-css.yml

@@ -5,6 +5,7 @@ on:
       - "dependabot/**"
     paths:
       - "package*.json"
+      - ".prettier*"
       - ".stylelint*"
       - "**/*.css"
       - ".github/workflows/lint-css.yml"
@@ -13,6 +14,7 @@ on:
   pull_request:
     paths:
       - "package*.json"
+      - ".prettier*"
       - ".stylelint*"
       - "**/*.css"
       - ".github/workflows/lint-css.yml"

.prettierignore

@@ -0,0 +1,2 @@
+# Ignore external copied w3c files
+common

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.stylelintrc

@@ -1,5 +1,5 @@
 {
-  "extends": "stylelint-config-standard",
+  "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"],
   "rules": {
     "media-feature-name-no-unknown": [
       true,
@@ -9,6 +9,7 @@
         ]
       }
     ],
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "prettier/prettier": [true, {"singleQuote": false}]
   }
 }

examples/breadcrumb/css/breadcrumb.css

@@ -21,7 +21,7 @@ nav.breadcrumb li + li::before {
   transform: rotate(15deg);
   border-right: 0.1em solid currentColor;
   height: 0.8em;
-  content: '';
+  content: "";
 }
 
 nav.breadcrumb [aria-current="page"] {

examples/button/css/button.css

@@ -8,13 +8,21 @@
   color: #fff;
   text-shadow: 0 -1px 1px hsl(216, 27%, 25%);
   background-color: hsl(216, 82%, 51%);
-  background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
+  background-image: linear-gradient(
+    to bottom,
+    hsl(216, 82%, 53%),
+    hsl(216, 82%, 47%)
+  );
 }
 
 [role="button"]:hover {
   border-color: hsl(213, 71%, 29%);
   background-color: hsl(216, 82%, 31%);
-  background-image: linear-gradient(to bottom, hsl(216, 82%, 33%), hsl(216, 82%, 27%));
+  background-image: linear-gradient(
+    to bottom,
+    hsl(216, 82%, 33%),
+    hsl(216, 82%, 27%)
+  );
   cursor: default;
 }
 
@@ -35,13 +43,17 @@
 
   /* button border radius + outline width + offset */
   border-radius: calc(5px + 3px + 3px);
-  content: '';
+  content: "";
 }
 
 [role="button"]:active {
   border-color: hsl(213, 71%, 49%);
   background-color: hsl(216, 82%, 31%);
-  background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
+  background-image: linear-gradient(
+    to bottom,
+    hsl(216, 82%, 53%),
+    hsl(216, 82%, 47%)
+  );
   box-shadow: inset 0 3px 5px 1px hsl(216, 82%, 30%);
 }
 
@@ -50,28 +62,44 @@
   box-shadow: 0 1px 2px hsl(261, 27%, 55%);
   text-shadow: 0 -1px 1px hsl(261, 27%, 25%);
   background-color: hsl(261, 82%, 51%);
-  background-image: linear-gradient(to bottom, hsl(261, 82%, 53%), hsl(261, 82%, 47%));
+  background-image: linear-gradient(
+    to bottom,
+    hsl(261, 82%, 53%),
+    hsl(261, 82%, 47%)
+  );
 }
 
 [role="button"][aria-pressed]:hover {
   border-color: hsl(261, 71%, 29%);
   background-color: hsl(261, 82%, 31%);
-  background-image: linear-gradient(to bottom, hsl(261, 82%, 33%), hsl(261, 82%, 27%));
+  background-image: linear-gradient(
+    to bottom,
+    hsl(261, 82%, 33%),
+    hsl(261, 82%, 27%)
+  );
 }
 
 [role="button"][aria-pressed="true"] {
   padding-top: 0.5em;
   padding-bottom: 0.3em;
   border-color: hsl(261, 71%, 49%);
   background-color: hsl(261, 82%, 31%);
-  background-image: linear-gradient(to bottom, hsl(261, 82%, 63%), hsl(261, 82%, 57%));
+  background-image: linear-gradient(
+    to bottom,
+    hsl(261, 82%, 63%),
+    hsl(261, 82%, 57%)
+  );
   box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 30%);
 }
 
 [role="button"][aria-pressed="true"]:hover {
   border-color: hsl(261, 71%, 49%);
   background-color: hsl(261, 82%, 31%);
-  background-image: linear-gradient(to bottom, hsl(261, 82%, 43%), hsl(261, 82%, 37%));
+  background-image: linear-gradient(
+    to bottom,
+    hsl(261, 82%, 43%),
+    hsl(261, 82%, 37%)
+  );
   box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 20%);
 }
 

examples/carousel/css/carousel-prev-next.css

@@ -1,4 +1,3 @@
-
 /* .carousel */
 
 img.reload {

examples/carousel/css/carousel-tablist.css

@@ -1,4 +1,3 @@
-
 /* .carousel-tablist */
 
 img.reload {
@@ -309,7 +308,10 @@ img.reload {
 }
 
 .carousel-tablist-moreaccessible .carousel-item .carousel-caption span.contrast,
-.carousel-tablist-moreaccessible .carousel-item .carousel-caption span.contrast:hover {
+.carousel-tablist-moreaccessible
+  .carousel-item
+  .carousel-caption
+  span.contrast:hover {
   background-color: transparent;
 }
 

examples/checkbox/css/checkbox.css

@@ -17,7 +17,7 @@ ul.checkboxes {
   top: 50%;
   left: 7px;
   transform: translate(-50%, -50%);
-  content: '';
+  content: "";
 }
 
 [role="checkbox"]::before {
@@ -29,14 +29,22 @@ ul.checkboxes {
 }
 
 [role="checkbox"]:active::before {
-  background-image: linear-gradient(to bottom, hsl(300, 3%, 73%), hsl(300, 3%, 93%) 30%);
+  background-image: linear-gradient(
+    to bottom,
+    hsl(300, 3%, 73%),
+    hsl(300, 3%, 93%) 30%
+  );
 }
 
 [role="checkbox"][aria-checked="mixed"]::before,
 [role="checkbox"][aria-checked="true"]::before {
   border-color: hsl(216, 80%, 50%);
   background: hsl(217, 95%, 68%);
-  background-image: linear-gradient(to bottom, hsl(217, 95%, 68%), hsl(216, 80%, 57%));
+  background-image: linear-gradient(
+    to bottom,
+    hsl(217, 95%, 68%),
+    hsl(216, 80%, 57%)
+  );
 }
 
 [role="checkbox"][aria-checked="mixed"]::after {
@@ -59,7 +67,11 @@ ul.checkboxes {
 
 [role="checkbox"][aria-checked="mixed"]:active::before,
 [role="checkbox"][aria-checked="true"]:active::before {
-  background-image: linear-gradient(to bottom, hsl(216, 80%, 57%), hsl(217, 95%, 68%));
+  background-image: linear-gradient(
+    to bottom,
+    hsl(216, 80%, 57%),
+    hsl(217, 95%, 68%)
+  );
 }
 
 [role="checkbox"]:focus {

examples/combobox/css/select-only.css

@@ -14,7 +14,7 @@
 .combo::after {
   border-bottom: 2px solid rgba(0, 0, 0, 0.75);
   border-right: 2px solid rgba(0, 0, 0, 0.75);
-  content: '';
+  content: "";
   display: block;
   height: 12px;
   pointer-events: none;
@@ -93,7 +93,7 @@
 .combo-option[aria-selected="true"]::after {
   border-bottom: 2px solid #000;
   border-right: 2px solid #000;
-  content: '';
+  content: "";
   height: 16px;
   position: absolute;
   right: 15px;

examples/css/core.css

@@ -73,13 +73,21 @@ table.data.attributes tbody td {
   font-size: inherit;
   text-shadow: 0 -1px 1px hsl(216, 27%, 25%);
   background-color: hsl(216, 82%, 51%);
-  background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
+  background-image: linear-gradient(
+    to bottom,
+    hsl(216, 82%, 53%),
+    hsl(216, 82%, 47%)
+  );
 }
 
 .example-header button:hover {
   border-color: hsl(213, 71%, 29%);
   background-color: hsl(216, 82%, 31%);
-  background-image: linear-gradient(to bottom, hsl(216, 82%, 33%), hsl(216, 82%, 27%));
+  background-image: linear-gradient(
+    to bottom,
+    hsl(216, 82%, 33%),
+    hsl(216, 82%, 27%)
+  );
   cursor: default;
 }
 
@@ -100,12 +108,16 @@ table.data.attributes tbody td {
 
   /* button border radius + outline width + offset */
   border-radius: calc(5px + 3px + 3px);
-  content: '';
+  content: "";
 }
 
 .example-header button:active {
   border-color: hsl(213, 71%, 49%);
   background-color: hsl(216, 82%, 31%);
-  background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
+  background-image: linear-gradient(
+    to bottom,
+    hsl(216, 82%, 53%),
+    hsl(216, 82%, 47%)
+  );
   box-shadow: inset 0 3px 5px 1px hsl(216, 82%, 30%);
 }

examples/dialog-modal/css/dialog.css

@@ -16,9 +16,12 @@
   [role="dialog"] {
     position: absolute;
     top: 2rem;
-    left: 50vw;  /* move to the middle of the screen (assumes relative parent is the body/viewport) */
-    transform: translateX(-50%);  /* move backwards 50% of this element's width */
-    min-width: calc(640px - (15px * 2));  /* == breakpoint - left+right margin */
+    left: 50vw; /* move to the middle of the screen (assumes relative parent is the body/viewport) */
+    transform: translateX(
+      -50%
+    ); /* move backwards 50% of this element's width */
+
+    min-width: calc(640px - (15px * 2)); /* == breakpoint - left+right margin */
     min-height: auto;
     box-shadow: 0 19px 38px rgba(0, 0, 0, 0.12), 0 15px 12px rgba(0, 0, 0, 0.22);
   }

examples/disclosure/css/disclosure-faq.css

@@ -41,11 +41,11 @@ dl.faq button:active {
 }
 
 dl.faq button[aria-expanded="false"]::before {
-  content: url('../images/right-arrow-brown.png');
+  content: url("../images/right-arrow-brown.png");
   padding-right: 0.35em;
 }
 
 dl.faq button[aria-expanded="true"]::before {
-  content: url('../images/down-arrow-brown.png');
+  content: url("../images/down-arrow-brown.png");
   padding-right: 0.35em;
 }

examples/disclosure/css/disclosure-img-long-description.css

@@ -29,12 +29,12 @@ figure button:active {
 }
 
 figure button[aria-expanded="false"]::before {
-  content: url('../images/right-arrow-brown.png');
+  content: url("../images/right-arrow-brown.png");
   padding-right: 0.25em;
 }
 
 figure button[aria-expanded="true"]::before {
-  content: url('../images/down-arrow-brown.png');
+  content: url("../images/down-arrow-brown.png");
   padding-right: 0.25em;
 }