fix: postcss apply directive

Author: eirikbacker

.stylelintrc.mjs

@@ -14,5 +14,6 @@ export default {
     ],
     'alpha-value-notation': 'number',
     'font-family-name-quotes': 'always-unless-keyword',
+    'at-rule-no-unknown': [true, { ignoreAtRules: ['apply'] }], // Allow @apply directive to inline existing utility classes into a class name
   },
 };

.vscode/css-data.json

@@ -0,0 +1,6 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    { "name": "@apply", "description": "Allow @apply directive to inline existing utility classes into a class name" }
+  ]
+}

.vscode/settings.json

@@ -7,6 +7,7 @@
     "source.organizeImports.biome": "explicit"
   },
   "editor.defaultFormatter": "biomejs.biome",
+  "css.customData": ["./.vscode/css-data.json"],
   "[css]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

packages/css/button.css

@@ -9,6 +9,8 @@
   --dsc-button-padding-inline: var(--ds-spacing-4);
   --dsc-button-size: var(--ds-sizing-12);
 
+  /* @apply ds-focus; */
+
   align-items: center;
   background: var(--dsc-button-background);
   border-radius: var(--ds-border-radius-md);
@@ -27,14 +29,14 @@
   text-align: inherit;
   text-decoration: none;
 
-  &[data-size="sm"] {
+  &[data-size='sm'] {
     --dsc-button-gap: var(--ds-sizing-1);
     --dsc-button-padding-block: var(--ds-spacing-2);
     --dsc-button-padding-inline: var(--ds-spacing-3);
     --dsc-button-size: var(--ds-sizing-10);
   }
 
-  &[data-size="lg"] {
+  &[data-size='lg'] {
     --dsc-button-padding-block: var(--ds-spacing-3);
     --dsc-button-padding-inline: var(--ds-spacing-5);
     --dsc-button-size: var(--ds-sizing-14);
@@ -52,7 +54,7 @@
   /**
     * Variants
     */
-  &[data-variant="secondary"] {
+  &[data-variant='secondary'] {
     --dsc-button-background--active: var(--ds-color-accent-surface-hover);
     --dsc-button-background--hover: var(--ds-color-accent-surface-default);
     --dsc-button-background: transparent;
@@ -62,7 +64,7 @@
     --dsc-button-color: var(--ds-color-accent-text-subtle);
   }
 
-  &[data-variant="tertiary"] {
+  &[data-variant='tertiary'] {
     --dsc-button-background--active: var(--ds-color-accent-surface-hover);
     --dsc-button-background--hover: var(--ds-color-accent-surface-default);
     --dsc-button-background: transparent;
@@ -75,14 +77,14 @@
   /**
     * Colors
     */
-  &[data-color="neutral"] {
+  &[data-color='neutral'] {
     --dsc-button-background--active: var(--ds-color-neutral-base-active);
     --dsc-button-background--hover: var(--ds-color-neutral-base-hover);
     --dsc-button-background: var(--ds-color-neutral-base-default);
     --dsc-button-color: var(--ds-color-neutral-contrast-default);
   }
 
-  &[data-color="neutral"][data-variant="secondary"] {
+  &[data-color='neutral'][data-variant='secondary'] {
     --dsc-button-background--active: var(--ds-color-neutral-surface-hover);
     --dsc-button-background--hover: var(--ds-color-neutral-surface-default);
     --dsc-button-background: transparent;
@@ -92,7 +94,7 @@
     --dsc-button-color: var(--ds-color-neutral-text-subtle);
   }
 
-  &[data-color="neutral"][data-variant="tertiary"] {
+  &[data-color='neutral'][data-variant='tertiary'] {
     --dsc-button-background--active: var(--ds-color-neutral-surface-hover);
     --dsc-button-background--hover: var(--ds-color-neutral-surface-default);
     --dsc-button-background: transparent;
@@ -101,14 +103,14 @@
     --dsc-button-color: var(--ds-color-neutral-text-subtle);
   }
 
-  &[data-color="danger"] {
+  &[data-color='danger'] {
     --dsc-button-background--active: var(--ds-color-danger-base-active);
     --dsc-button-background--hover: var(--ds-color-danger-base-hover);
     --dsc-button-background: var(--ds-color-danger-base-default);
     --dsc-button-color: var(--ds-color-danger-contrast-default);
   }
 
-  &[data-color="danger"][data-variant="secondary"] {
+  &[data-color='danger'][data-variant='secondary'] {
     --dsc-button-background--active: var(--ds-color-danger-surface-hover);
     --dsc-button-background--hover: var(--ds-color-danger-surface-default);
     --dsc-button-background: transparent;
@@ -118,7 +120,7 @@
     --dsc-button-color: var(--ds-color-danger-text-subtle);
   }
 
-  &[data-color="danger"][data-variant="tertiary"] {
+  &[data-color='danger'][data-variant='tertiary'] {
     --dsc-button-background--active: var(--ds-color-danger-surface-hover);
     --dsc-button-background--hover: var(--ds-color-danger-surface-default);
     --dsc-button-background: transparent;
@@ -131,27 +133,23 @@
     * States
     */
 
-  @media (hover: hover) and (pointer: fine) { /* Only use hover for non-touch devices to prevent sticky-hovering */
-    &:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover {
+  @media (hover: hover) and (pointer: fine) {
+    /* Only use hover for non-touch devices to prevent sticky-hovering */
+    &:not(:disabled, [aria-disabled='true'], [aria-busy='true']):hover {
       background: var(--dsc-button-background--hover);
     }
   }
 
-  &[aria-busy="true"] {
+  &[aria-busy='true'] {
     cursor: progress;
   }
 
-  &:focus-visible {
-    box-shadow: var(--dsc-focus-boxShadow);
-  }
-
-  &:is(:disabled, [aria-disabled="true"]) {
+  &:is(:disabled, [aria-disabled='true']) {
     cursor: not-allowed;
     opacity: var(--ds-disabled-opacity);
   }
 
-  &:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):active {
+  &:not(:disabled, [aria-disabled='true'], [aria-busy='true']):active {
     background-color: var(--dsc-button-background--active);
   }
 }
-

packages/css/postcss.config.js

@@ -1,10 +1,29 @@
 module.exports = {
   plugins: [
     require('postcss-import'),
+    postcssApply(),
     require('postcss-nesting'),
     require('cssnano')({
       preset: 'default',
     }),
     require('autoprefixer'),
   ],
 };
+
+function postcssApply() {
+  return {
+    postcssPlugin: '@apply', // Add support for @apply directive to enable inlining utility classes
+    AtRule: {
+      apply: (rule) => {
+        rule.root().walkRules((from) => {
+          if (from.selector.startsWith(`.${rule.params}`))
+            rule.replaceWith(
+              from.clone({
+                selector: from.selector.replace(`.${rule.params}`, '&'),
+              }),
+            );
+        });
+      },
+    },
+  };
+}