[v4] Design System use case : ability to prefix only the variables (not the utilities)

[zedix]

Hi!

When building a design system, it is very common to have prefixed design tokens, globally available at the root element :

:where(html) {
  /* Global tokens: spacing */
  --ds-spacing-2: 0.5rem; 
  --ds-spacing-4: 1rem; 
  /* … */

  /* Global tokens: radius */
  --ds-radius-md: 0.375rem;
  --ds-radius-lg: 0.5rem;
  /* … */

  /* Global tokens: palettes */
  --ds-color-brand-25: #f5feff;
  --ds-color-brand-50: #edfcfe;
  /* … */

  /* Semantic tokens: colors */
  --ds-color-bg-brand-primary: var(--ds-color-brand-50);

  /* A lot more design tokens… */
}

These variables are used for building UI components such as HTML custom elements primitives and many more:

ds-dialog {
   --body-padding: var(--ds-spacing-4); 
}

ds-button {
   /* … */
}

In addition, we also want to be able to consume tokens through atomic CSS using Tailwind. With v3, we achieve this with a preset:

const presetConfig = {
  content: [],
  theme: {
     backgroundColor: {
       'brand-primary': 'var(--ds-color-bg-brand-primary)',
        // … 
    },
     spacing: {
        '2': 'var(--ds-spacing-2)' ,
        '4': 'var(--ds-spacing-4)' ,
       // … 
    }
  }
}

<!-- ✅ v3: apply the `--ds-color-bg-brand-primary` wih (unprefixed) bg-brand-primary class -->
<section class="bg-brand-primary"></section>

What's the issue with v4 prefix ?

But with v4, the prefix system force the utilities to be prefixed - which is not desired in our context because we have no CSS conflicts to resolve...

<!-- ❌ v4 actual: a prefix is forced  -->
<section class="ds:bg-brand-primary"></section>

<!-- ✅ v4 expected: no prefix -->
<section class="bg-brand-primary"></section>

Without v4 prefix instruction

@import 'tailwindcss'

@theme {
   --spacing-2: var(--ds-spacing-2);  /* ← ❌ we dont really want such aliases */
   --spacing-4: var(--ds-spacing-4); 
   --color-bg-brand-primary: var(--ds-color-brand-50);
}

With v4 prefix instruction

@import 'tailwindcss' prefix(ds);  /* ← ❌ here, we aim to prefix only the variables */

@theme {
   --spacing-2: 0.5rem; 
   --spacing-4: 1rem; 
   --color-bg-brand-primary: var(--ds-color-brand-50);
}

What would be a solution ?

@import 'tailwindcss' var_prefix(ds);  /* ← ✅ an instruction that only add prefix to variables */

@theme {
   --spacing-2: 0.5rem; 
   --spacing-4: 1rem; 
   --color-bg-brand-primary: var(--ds-color-brand-50);
}