diff --git a/.github/workflows/lint-css.yml b/.github/workflows/lint-css.yml
index dd270e4660..e6f2acb9fe 100644
--- a/.github/workflows/lint-css.yml
+++ b/.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"
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..07d52ad700
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+# Ignore external copied w3c files
+common
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000..544138be45
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/.stylelintrc b/.stylelintrc
index c0864c943b..25c15790a3 100644
--- a/.stylelintrc
+++ b/.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}]
   }
 }
diff --git a/examples/breadcrumb/css/breadcrumb.css b/examples/breadcrumb/css/breadcrumb.css
index 71e893d244..a5af4d1043 100644
--- a/examples/breadcrumb/css/breadcrumb.css
+++ b/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"] {
diff --git a/examples/button/css/button.css b/examples/button/css/button.css
index 736b059da7..2658d6c1ec 100644
--- a/examples/button/css/button.css
+++ b/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,13 +62,21 @@
   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"] {
@@ -64,14 +84,22 @@
   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%);
 }
 
diff --git a/examples/carousel/css/carousel-prev-next.css b/examples/carousel/css/carousel-prev-next.css
index 72bce6b06c..c6c75d8d13 100644
--- a/examples/carousel/css/carousel-prev-next.css
+++ b/examples/carousel/css/carousel-prev-next.css
@@ -1,4 +1,3 @@
-
 /* .carousel */
 
 img.reload {
diff --git a/examples/carousel/css/carousel-tablist.css b/examples/carousel/css/carousel-tablist.css
index bc139c3383..62b0c9a502 100644
--- a/examples/carousel/css/carousel-tablist.css
+++ b/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;
 }
 
diff --git a/examples/checkbox/css/checkbox.css b/examples/checkbox/css/checkbox.css
index fe30e07da5..3eb6b7dc84 100644
--- a/examples/checkbox/css/checkbox.css
+++ b/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 {
diff --git a/examples/combobox/css/select-only.css b/examples/combobox/css/select-only.css
index cfb8fc0e65..1d8beb3a7e 100644
--- a/examples/combobox/css/select-only.css
+++ b/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;
diff --git a/examples/css/core.css b/examples/css/core.css
index 3ce62a3541..628108dc37 100644
--- a/examples/css/core.css
+++ b/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%);
 }
diff --git a/examples/dialog-modal/css/dialog.css b/examples/dialog-modal/css/dialog.css
index 9d095c9d20..58b6d54f1b 100644
--- a/examples/dialog-modal/css/dialog.css
+++ b/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);
   }
diff --git a/examples/disclosure/css/disclosure-faq.css b/examples/disclosure/css/disclosure-faq.css
index c662b06b29..fb38732d5d 100644
--- a/examples/disclosure/css/disclosure-faq.css
+++ b/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;
 }
diff --git a/examples/disclosure/css/disclosure-img-long-description.css b/examples/disclosure/css/disclosure-img-long-description.css
index 59a3494230..99f1047955 100644
--- a/examples/disclosure/css/disclosure-img-long-description.css
+++ b/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;
 }
 
diff --git a/examples/disclosure/css/disclosure-navigation.css b/examples/disclosure/css/disclosure-navigation.css
index 2e05a5dd0e..d65982ef78 100644
--- a/examples/disclosure/css/disclosure-navigation.css
+++ b/examples/disclosure/css/disclosure-navigation.css
@@ -1,89 +1,89 @@
-.disclosure-nav {
-  background-color: #eee;
-  display: flex;
-  list-style-type: none;
-  padding: 0;
-}
-
-.disclosure-nav ul {
-  background-color: #eee;
-  border: 1px solid #005a9c;
-  border-top-width: 5px;
-  border-radius: 0 0 4px 4px;
-  display: block;
-  list-style-type: none;
-  margin: 0;
-  min-width: 200px;
-  padding: 0;
-  position: absolute;
-}
-
-.disclosure-nav li {
-  margin: 0;
-}
-
-.disclosure-nav ul a {
-  border: 0;
-  color: #000;
-  display: block;
-  margin: 0;
-  padding: 0.5em 1em;
-  text-decoration: underline;
-}
-
-.disclosure-nav ul a:hover,
-.disclosure-nav ul a:focus {
-  background-color: #ddd;
-  margin-bottom: 0;
-  text-decoration: none;
-}
-
-.disclosure-nav ul a:focus {
-  outline: 5px solid rgba(0, 90, 156, 0.75);
-  position: relative;
-}
-
-.disclosure-nav button {
-  align-items: center;
-  border: 1px solid transparent;
-  border-right-color: #ccc;
-  display: flex;
-  padding: 1em;
-}
-
-.disclosure-nav button::after {
-  content: "";
-  border-bottom: 1px solid #000;
-  border-right: 1px solid #000;
-  height: 0.5em;
-  margin-left: 0.75em;
-  width: 0.5em;
-  transform: rotate(45deg);
-}
-
-.disclosure-nav button:focus {
-  border-color: #005a9c;
-  outline: 5px solid rgba(0, 90, 156, 0.75);
-  position: relative;
-}
-
-.disclosure-nav button:hover,
-.disclosure-nav button[aria-expanded=true] {
-  background-color: #005a9c;
-  color: #fff;
-}
-
-.disclosure-nav button:hover::after,
-.disclosure-nav button[aria-expanded=true]::after {
-  border-color: #fff;
-}
-
-/* Styles for example page content section */
-.disclosure-pagecontent {
-  border: 1px solid #ccc;
-  padding: 1em;
-}
-
-.disclosure-pagecontent h3 {
-  margin-top: 0.5em;
-}
+.disclosure-nav {
+  background-color: #eee;
+  display: flex;
+  list-style-type: none;
+  padding: 0;
+}
+
+.disclosure-nav ul {
+  background-color: #eee;
+  border: 1px solid #005a9c;
+  border-top-width: 5px;
+  border-radius: 0 0 4px 4px;
+  display: block;
+  list-style-type: none;
+  margin: 0;
+  min-width: 200px;
+  padding: 0;
+  position: absolute;
+}
+
+.disclosure-nav li {
+  margin: 0;
+}
+
+.disclosure-nav ul a {
+  border: 0;
+  color: #000;
+  display: block;
+  margin: 0;
+  padding: 0.5em 1em;
+  text-decoration: underline;
+}
+
+.disclosure-nav ul a:hover,
+.disclosure-nav ul a:focus {
+  background-color: #ddd;
+  margin-bottom: 0;
+  text-decoration: none;
+}
+
+.disclosure-nav ul a:focus {
+  outline: 5px solid rgba(0, 90, 156, 0.75);
+  position: relative;
+}
+
+.disclosure-nav button {
+  align-items: center;
+  border: 1px solid transparent;
+  border-right-color: #ccc;
+  display: flex;
+  padding: 1em;
+}
+
+.disclosure-nav button::after {
+  content: "";
+  border-bottom: 1px solid #000;
+  border-right: 1px solid #000;
+  height: 0.5em;
+  margin-left: 0.75em;
+  width: 0.5em;
+  transform: rotate(45deg);
+}
+
+.disclosure-nav button:focus {
+  border-color: #005a9c;
+  outline: 5px solid rgba(0, 90, 156, 0.75);
+  position: relative;
+}
+
+.disclosure-nav button:hover,
+.disclosure-nav button[aria-expanded="true"] {
+  background-color: #005a9c;
+  color: #fff;
+}
+
+.disclosure-nav button:hover::after,
+.disclosure-nav button[aria-expanded="true"]::after {
+  border-color: #fff;
+}
+
+/* Styles for example page content section */
+.disclosure-pagecontent {
+  border: 1px solid #ccc;
+  padding: 1em;
+}
+
+.disclosure-pagecontent h3 {
+  margin-top: 0.5em;
+}
diff --git a/examples/grid/css/dataGrids.css b/examples/grid/css/dataGrids.css
index b375739890..6955a5a4f0 100644
--- a/examples/grid/css/dataGrids.css
+++ b/examples/grid/css/dataGrids.css
@@ -46,11 +46,11 @@
 }
 
 .edit-text-button::after {
-  background-image: url('../imgs/pencil-icon.png');
+  background-image: url("../imgs/pencil-icon.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 44px;
-  content: ' ';
+  content: " ";
   height: 17px;
   opacity: 0.6;
   position: absolute;
@@ -83,7 +83,7 @@
   position: fixed;
   height: 65px;
   width: 85px;
-  background: url('../imgs/black_keys.png') no-repeat;
+  background: url("../imgs/black_keys.png") no-repeat;
   background-size: contain;
 }
 
diff --git a/examples/grid/css/layoutGrids.css b/examples/grid/css/layoutGrids.css
index 05cb120651..5c5b2da2f8 100644
--- a/examples/grid/css/layoutGrids.css
+++ b/examples/grid/css/layoutGrids.css
@@ -8,7 +8,7 @@
   position: fixed;
   height: 65px;
   width: 85px;
-  background: url('../imgs/black_keys.png') no-repeat;
+  background: url("../imgs/black_keys.png") no-repeat;
   background-size: contain;
 }
 
diff --git a/examples/landmarks/css/bootstrap-accessibility.css b/examples/landmarks/css/bootstrap-accessibility.css
index e771f43833..895898814c 100644
--- a/examples/landmarks/css/bootstrap-accessibility.css
+++ b/examples/landmarks/css/bootstrap-accessibility.css
@@ -1,12 +1,22 @@
-.btn:focus { outline: dotted 2px #000; }
-div.active:focus { outline: dotted 1px #000; }
-a:focus { outline: dotted 1px #000; }
+.btn:focus {
+  outline: dotted 2px #000;
+}
+div.active:focus {
+  outline: dotted 1px #000;
+}
+a:focus {
+  outline: dotted 1px #000;
+}
 
 .close:hover,
-.close:focus { outline: dotted 1px #000; }
+.close:focus {
+  outline: dotted 1px #000;
+}
 
 .nav > li > a:hover,
-.nav > li > a:focus { outline: dotted 1px #000; }
+.nav > li > a:focus {
+  outline: dotted 1px #000;
+}
 
 .carousel-inner > .item {
   position: absolute;
@@ -17,11 +27,15 @@ a:focus { outline: dotted 1px #000; }
   -o-transition: 0.6s ease-in-out left;
   transition: 0.6s ease-in-out left;
 }
-.carousel-inner > .active { top: 0; }
+.carousel-inner > .active {
+  top: 0;
+}
 
 .carousel-inner > .active,
 .carousel-inner > .next,
-.carousel-inner > .prev { position: relative; }
+.carousel-inner > .prev {
+  position: relative;
+}
 
 .carousel-inner > .next,
 .carousel-inner > .prev {
@@ -29,12 +43,20 @@ a:focus { outline: dotted 1px #000; }
   top: 0;
   width: 100%;
 }
-.alert-success { color: #2d4821; }
-.alert-info { color: #214c62; }
+.alert-success {
+  color: #2d4821;
+}
+.alert-info {
+  color: #214c62;
+}
 
 .alert-warning {
   color: #6c4a00;
   background-color: #f9f1c6;
 }
-.alert-danger { color: #d2322d; }
-.alert-danger:hover { color: #a82824; }
+.alert-danger {
+  color: #d2322d;
+}
+.alert-danger:hover {
+  color: #a82824;
+}
diff --git a/examples/link/css/link.css b/examples/link/css/link.css
index caa101e904..920a8343d1 100644
--- a/examples/link/css/link.css
+++ b/examples/link/css/link.css
@@ -21,7 +21,7 @@
 
 [role="link"].link3::before {
   display: block;
-  content: url('../images/w3c-logo.png');
+  content: url("../images/w3c-logo.png");
   width: 153px;
   height: 104px;
 }
diff --git a/examples/menubar/css/menubar-editor.css b/examples/menubar/css/menubar-editor.css
index edcaa3cca3..72a3f573c6 100644
--- a/examples/menubar/css/menubar-editor.css
+++ b/examples/menubar/css/menubar-editor.css
@@ -44,16 +44,19 @@
 }
 
 .menubar-editor [role="menubar"] > li > [role="menuitem"]::after {
-  content: url('../images/down-arrow.svg');
+  content: url("../images/down-arrow.svg");
   padding-left: 0.25em;
 }
 
 .menubar-editor [role="menubar"] > li > [role="menuitem"]:focus::after {
-  content: url('../images/down-arrow-focus.svg');
+  content: url("../images/down-arrow-focus.svg");
 }
 
-.menubar-editor [role="menubar"] > li > [role="menuitem"][aria-expanded="true"]::after {
-  content: url('../images/up-arrow-focus.svg');
+.menubar-editor
+  [role="menubar"]
+  > li
+  > [role="menuitem"][aria-expanded="true"]::after {
+  content: url("../images/up-arrow-focus.svg");
 }
 
 .menubar-editor [role="menubar"] [role="menu"] {
@@ -103,24 +106,28 @@
 
 .menubar-editor [role="menubar"] [role="separator"] {
   padding-top: 3px;
-  background-image: url('../images/separator.svg');
+  background-image: url("../images/separator.svg");
   background-position: center;
   background-repeat: repeat-x;
 }
 
-.menubar-editor [role="menubar"] [role="menu"] [aria-checked='true'] {
+.menubar-editor [role="menubar"] [role="menu"] [aria-checked="true"] {
   padding: 6px;
   padding-left: 8px;
   padding-right: 18px;
 }
 
-.menubar-editor [role="menubar"] [role='menuitemradio'][aria-checked='true']::before {
-  content: url('../images/radio-checked.svg');
+.menubar-editor
+  [role="menubar"]
+  [role="menuitemradio"][aria-checked="true"]::before {
+  content: url("../images/radio-checked.svg");
   padding-right: 3px;
 }
 
-.menubar-editor [role="menubar"] [role='menuitemcheckbox'][aria-checked='true']::before {
-  content: url('../images/checkbox-checked.svg');
+.menubar-editor
+  [role="menubar"]
+  [role="menuitemcheckbox"][aria-checked="true"]::before {
+  content: url("../images/checkbox-checked.svg");
   padding-right: 3px;
 }
 
@@ -136,13 +143,17 @@
   outline: none;
 }
 
-.menubar-editor [role="menubar"] [role='menuitemradio'][aria-checked='true']:focus::before {
-  content: url('../images/radio-checked-focus.svg');
+.menubar-editor
+  [role="menubar"]
+  [role="menuitemradio"][aria-checked="true"]:focus::before {
+  content: url("../images/radio-checked-focus.svg");
   padding-right: 3px;
 }
 
-.menubar-editor [role="menubar"] [role='menuitemcheckbox'][aria-checked='true']:focus::before {
-  content: url('../images/checkbox-checked-focus.svg');
+.menubar-editor
+  [role="menubar"]
+  [role="menuitemcheckbox"][aria-checked="true"]:focus::before {
+  content: url("../images/checkbox-checked-focus.svg");
   padding-right: 3px;
 }
 
@@ -157,9 +168,18 @@
   padding-left: 25px;
 }
 
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitem"][aria-checked='true']:focus,
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemcheckbox"][aria-checked='true']:focus,
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemradio"][aria-checked='true']:focus {
+.menubar-editor
+  [role="menubar"]
+  [role="menu"]
+  [role="menuitem"][aria-checked="true"]:focus,
+.menubar-editor
+  [role="menubar"]
+  [role="menu"]
+  [role="menuitemcheckbox"][aria-checked="true"]:focus,
+.menubar-editor
+  [role="menubar"]
+  [role="menu"]
+  [role="menuitemradio"][aria-checked="true"]:focus {
   padding-left: 8px;
   padding-right: 21px;
 }
diff --git a/examples/menubar/css/menubar-navigation.css b/examples/menubar/css/menubar-navigation.css
index 54361e90c7..dddce81d00 100644
--- a/examples/menubar/css/menubar-navigation.css
+++ b/examples/menubar/css/menubar-navigation.css
@@ -87,7 +87,7 @@
 
 .menubar-navigation [role="separator"] {
   padding-top: 3px;
-  background-image: url('../images/separator.svg');
+  background-image: url("../images/separator.svg");
   background-position: center;
   background-repeat: repeat-x;
 }
diff --git a/examples/meter/css/meter.css b/examples/meter/css/meter.css
index 75934ca1e8..8fc608b019 100644
--- a/examples/meter/css/meter.css
+++ b/examples/meter/css/meter.css
@@ -1,5 +1,4 @@
-
-[role=meter] {
+[role="meter"] {
   padding: 2px;
   width: 200px;
   height: 40px;
diff --git a/examples/radio/css/radio.css b/examples/radio/css/radio.css
index 6054273040..c8292223e3 100644
--- a/examples/radio/css/radio.css
+++ b/examples/radio/css/radio.css
@@ -30,7 +30,7 @@
   top: 50%;
   left: 11px;
   transform: translate(-20%, -50%);
-  content: '';
+  content: "";
 }
 
 [role="radio"]::before {
@@ -43,7 +43,11 @@
 [role="radio"][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="radio"][aria-checked="true"]::after {
@@ -54,7 +58,11 @@
 }
 
 [role="radio"][aria-checked="true"]:active::before {
-  background-image: linear-gradient(to bottom, hsl(216, 80%, 57%), hsl(217, 95%, 68%) 60%);
+  background-image: linear-gradient(
+    to bottom,
+    hsl(216, 80%, 57%),
+    hsl(217, 95%, 68%) 60%
+  );
 }
 
 [role="radio"]:hover::before {
diff --git a/examples/tabs/css/tabs.css b/examples/tabs/css/tabs.css
index 286427fed1..405b4b9655 100644
--- a/examples/tabs/css/tabs.css
+++ b/examples/tabs/css/tabs.css
@@ -30,7 +30,7 @@
   left: -1px;
   border-radius: 0.2em 0.2em 0 0;
   border-top: 3px solid hsl(20, 96%, 48%);
-  content: '';
+  content: "";
 }
 
 [role="tab"][aria-selected="true"] {
@@ -52,7 +52,7 @@
   height: 0.3em;
   background: hsl(220, 43%, 99%);
   box-shadow: none;
-  content: '';
+  content: "";
 }
 
 [role="tab"]:hover,
@@ -95,7 +95,7 @@
   left: -1px;
   border-bottom: 3px solid hsl(20, 96%, 48%);
   border-radius: 0 0 0.2em 0.2em;
-  content: '';
+  content: "";
 }
 
 [role="tabpanel"] p {
diff --git a/examples/toolbar/css/menuButton.css b/examples/toolbar/css/menuButton.css
index f49a807d14..39e272ca86 100644
--- a/examples/toolbar/css/menuButton.css
+++ b/examples/toolbar/css/menuButton.css
@@ -1,8 +1,8 @@
-[role='toolbar'] .menu-popup {
+[role="toolbar"] .menu-popup {
   position: relative;
 }
 
-[role='toolbar'] .menu-popup [role="menu"] {
+[role="toolbar"] .menu-popup [role="menu"] {
   padding: 0;
   width: 9.5em;
   border: 2px solid #ddd;
@@ -14,11 +14,11 @@
   z-index: 1;
 }
 
-[role='toolbar'] .menu-popup [role="menu"].focus {
+[role="toolbar"] .menu-popup [role="menu"].focus {
   border-color: #005a9c;
 }
 
-[role='toolbar'] .menu-popup [role="menu"] li {
+[role="toolbar"] .menu-popup [role="menu"] li {
   padding: 0;
   margin: 0;
   display: block;
@@ -26,7 +26,7 @@
   list-style: none;
 }
 
-[role='toolbar'] .menu-popup [role="menu"] [role="menuitemradio"] {
+[role="toolbar"] .menu-popup [role="menu"] [role="menuitemradio"] {
   padding: 0;
   padding-top: 1px;
   padding-bottom: 1px;
@@ -37,16 +37,19 @@
   border-radius: 0;
 }
 
-[role='toolbar'] .menu-popup [role="menu"] [role="menuitemradio"]::before {
-  content: url('../images/menuitemradio-unchecked.svg');
+[role="toolbar"] .menu-popup [role="menu"] [role="menuitemradio"]::before {
+  content: url("../images/menuitemradio-unchecked.svg");
 }
 
-[role='toolbar'] .menu-popup [role="menu"] [role="menuitemradio"][aria-checked="true"]::before {
-  content: url('../images/menuitemradio-checked.svg');
+[role="toolbar"]
+  .menu-popup
+  [role="menu"]
+  [role="menuitemradio"][aria-checked="true"]::before {
+  content: url("../images/menuitemradio-checked.svg");
 }
 
-[role='toolbar'] .menu-popup [role="menu"] [role="menuitemradio"]:focus,
-[role='toolbar'] .menu-popup [role="menu"] [role="menuitemradio"]:hover {
+[role="toolbar"] .menu-popup [role="menu"] [role="menuitemradio"]:focus,
+[role="toolbar"] .menu-popup [role="menu"] [role="menuitemradio"]:hover {
   background: rgb(226, 239, 255);
   border-top: 1px solid #005a9c;
   border-bottom: 1px solid #005a9c;
@@ -54,6 +57,6 @@
   padding-bottom: 0;
 }
 
-[role='toolbar'] .menu-popup [role="menu"] [role="menuitemradio"]:focus {
+[role="toolbar"] .menu-popup [role="menu"] [role="menuitemradio"]:focus {
   border-color: #005a9c;
 }
diff --git a/package-lock.json b/package-lock.json
index 29d8d9827e..41c6ed9283 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4869,6 +4869,21 @@
       "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
       "dev": true
     },
+    "prettier": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz",
+      "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==",
+      "dev": true
+    },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "pretty-ms": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-7.0.1.tgz",
@@ -5734,6 +5749,12 @@
         }
       }
     },
+    "stylelint-config-prettier": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-8.0.2.tgz",
+      "integrity": "sha512-TN1l93iVTXpF9NJstlvP7nOu9zY2k+mN0NSFQ/VEGz15ZIP9ohdDZTtCWHs5LjctAhSAzaILULGbgiM0ItId3A==",
+      "dev": true
+    },
     "stylelint-config-recommended": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz",
@@ -5749,6 +5770,15 @@
         "stylelint-config-recommended": "^3.0.0"
       }
     },
+    "stylelint-prettier": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/stylelint-prettier/-/stylelint-prettier-1.1.2.tgz",
+      "integrity": "sha512-8QZ+EtBpMCXYB6cY0hNE3aCDKMySIx4Q8/malLaqgU/KXXa6Cj2KK8ulG1AJvUMD5XSSP8rOotqaCzR/BW6qAA==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
     "sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
diff --git a/package.json b/package.json
index 43faafccd9..132a35cb3c 100644
--- a/package.json
+++ b/package.json
@@ -39,10 +39,13 @@
     "husky": "^4.3.0",
     "lint-staged": "^10.4.0",
     "npm-merge-driver": "^2.3.6",
+    "prettier": "^2.1.2",
     "run-node": "^2.0.0",
     "selenium-webdriver": "^4.0.0-alpha.7",
     "stylelint": "^13.7.2",
+    "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
+    "stylelint-prettier": "^1.1.2",
     "vnu-jar": "^20.3.16"
   },
   "husky": {