In typey-chroma-kss fork, prevent button variations from generating bogus HTML element selectors

2 files changed, 41 insertions, 33 deletions

diff --git a/fork-versions/typey-chroma-kss/components/button/_button.scss b/fork-versions/typey-chroma-kss/components/button/_button.scss
index 93a0732..554331b 100644
--- a/fork-versions/typey-chroma-kss/components/button/_button.scss
+++ b/fork-versions/typey-chroma-kss/components/button/_button.scss
@@ -32,6 +32,7 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
+  @extend %button--disabled;
   // Some styles don't apply to <a> links since they are inline elements by default.
   display: inline-block;
   padding: 2px 6px;
@@ -62,21 +63,27 @@ button,
     text-decoration: none;
     color: color(button);
   }
+}
 
-  // Add button variations here.
+// Add button variations here.
+.button,
+%button {
+  &--variant-name {
+    // Add styles here.
+  }
+}
 
-  // The disabled variation should always go last, so that it overrides any
-  // other variations.
-  &[disabled] {
-    // Re-set default cursor for disabled elements.
-    cursor: default;
-    color: color(button-disabled);
+// The disabled variation should always go last, so that it overrides any
+// other variations.
+%button--disabled[disabled] {
+  // Re-set default cursor for disabled elements.
+  cursor: default;
+  color: color(button-disabled);
 
-    &:hover,
-    &:focus,
-    &:active {
-      // Override any link underlines and color changes.
-      color: color(button-disabled);
-    }
+  &:hover,
+  &:focus,
+  &:active {
+    // Override any link underlines and color changes.
+    color: color(button-disabled);
   }
 }
diff --git a/test/fixtures/fork-versions/typey-chroma-kss/output.css b/test/fixtures/fork-versions/typey-chroma-kss/output.css
index 7393b4a..18f47b0 100644
--- a/test/fixtures/fork-versions/typey-chroma-kss/output.css
+++ b/test/fixtures/fork-versions/typey-chroma-kss/output.css
@@ -299,27 +299,28 @@ button,
   [type='submit']:active {
     text-decoration: none;
     color: #000; }
-  .button[disabled],
-  button[disabled],
-  [type='button'][disabled],
-  [type='reset'][disabled],
-  [type='submit'][disabled] {
-    cursor: default;
+
+[disabled].button,
+button[disabled],
+[disabled][type='button'],
+[disabled][type='reset'],
+[disabled][type='submit'] {
+  cursor: default;
+  color: #999999; }
+  [disabled].button:hover,
+  button[disabled]:hover,
+  [disabled][type='button']:hover,
+  [disabled][type='reset']:hover,
+  [disabled][type='submit']:hover, [disabled].button:focus,
+  button[disabled]:focus,
+  [disabled][type='button']:focus,
+  [disabled][type='reset']:focus,
+  [disabled][type='submit']:focus, [disabled].button:active,
+  button[disabled]:active,
+  [disabled][type='button']:active,
+  [disabled][type='reset']:active,
+  [disabled][type='submit']:active {
     color: #999999; }
-    .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active,
-    button[disabled]:hover,
-    button[disabled]:focus,
-    button[disabled]:active,
-    [type='button'][disabled]:hover,
-    [type='button'][disabled]:focus,
-    [type='button'][disabled]:active,
-    [type='reset'][disabled]:hover,
-    [type='reset'][disabled]:focus,
-    [type='reset'][disabled]:active,
-    [type='submit'][disabled]:hover,
-    [type='submit'][disabled]:focus,
-    [type='submit'][disabled]:active {
-      color: #999999; }
 
 [type='checkbox'],
 [type='radio'] {