@umoa/saascfm-css 0.1.2 → 0.2.0

package/README.md

@@ -36,6 +36,7 @@ TypeScript only: add `"types": ["@umoa/saascfm-css/client"]` to `tsconfig.json`.
 | `spacing` `layout` `typography` `cursor` `border` | `true` | turn a module off with `false` |
 | `colorsModule` | none | your `PRIMITIVES` and `TOKENS` |
 | `primitiveClasses` | `true` | `false` removes the `blue-500` / `bg-blue-500` classes |
+| `primitiveVars` | `false` | `true` also writes every primitive as a CSS variable on `:root` (`--brand-500`), so `var(--brand-500)` works in your own CSS |
 | `important` | `false` | `true` adds `!important` to every generated declaration |
 | `exclude` | `[".colors.", ".tokens.", "primitives."]` | file paths containing these are not scanned, so your color definitions do not generate every class |
 
@@ -88,6 +89,7 @@ export const TOKENS = { 'text-brand': 'brand-500', 'bg-card': 'white' }
 - `PRIMITIVES`: name → color. Each generates `name` (color), `bg-name`, `border-name`. `rgba`/`hsla` values generate the color class only.
 - `TOKENS`: name → primitive name, or any CSS color. Each becomes `--name` on `:root`.
 - Token names are yours. The first word decides the class: `text-*` → `color`, `bg-*` → `background-color`, `border-*` → `border-color`. Any other prefix (`nav-*`, `tabb-*`, `shadow-*`) is a CSS var only.
+- Primitives are classes only by default. Set `primitiveVars: true` to also get a variable for each one (`--brand-500`). You do not need to spread `PRIMITIVES` into `TOKENS` for this. A token with the same name overrides the primitive's variable.
 - Unknown primitive names print a warning and are skipped.
 - `hl`, `hl-muted`, `vl` read `--border-default` / `--border-muted`, falling back to `currentColor`.
 

package/dist/index.cjs

@@ -369,11 +369,10 @@ function cssModule(options = {}) {
   const primitives = colorsModule["PRIMITIVES"];
   const useColor = !!(tokens || primitives);
   if (useColor) {
-    if (tokens) {
-      const resolved = resolveTokens(tokens, primitives ?? {});
-      COLOR_ROOT_VARS = generateRootVars(resolved);
-      COLOR_RULES = buildColorUtilityRules(resolved);
-    }
+    const resolved = tokens ? resolveTokens(tokens, primitives ?? {}) : {};
+    const rootVars = { ...options.primitiveVars && primitives ? primitives : {}, ...resolved };
+    if (Object.keys(rootVars).length) COLOR_ROOT_VARS = generateRootVars(rootVars);
+    COLOR_RULES = buildColorUtilityRules(resolved);
     if (primitives && options.primitiveClasses !== false) {
       PRIMITIVE_COLOR_RULES = buildPrimitiveRules(primitives);
     }

package/dist/index.d.cts

@@ -10,6 +10,7 @@ interface CssModuleOptions {
     border?: boolean;
     colorsModule?: Record<string, unknown>;
     primitiveClasses?: boolean;
+    primitiveVars?: boolean;
     exclude?: string[];
     important?: boolean;
 }

package/dist/index.d.ts

@@ -10,6 +10,7 @@ interface CssModuleOptions {
     border?: boolean;
     colorsModule?: Record<string, unknown>;
     primitiveClasses?: boolean;
+    primitiveVars?: boolean;
     exclude?: string[];
     important?: boolean;
 }

package/dist/index.js

@@ -335,11 +335,10 @@ function cssModule(options = {}) {
   const primitives = colorsModule["PRIMITIVES"];
   const useColor = !!(tokens || primitives);
   if (useColor) {
-    if (tokens) {
-      const resolved = resolveTokens(tokens, primitives ?? {});
-      COLOR_ROOT_VARS = generateRootVars(resolved);
-      COLOR_RULES = buildColorUtilityRules(resolved);
-    }
+    const resolved = tokens ? resolveTokens(tokens, primitives ?? {}) : {};
+    const rootVars = { ...options.primitiveVars && primitives ? primitives : {}, ...resolved };
+    if (Object.keys(rootVars).length) COLOR_ROOT_VARS = generateRootVars(rootVars);
+    COLOR_RULES = buildColorUtilityRules(resolved);
     if (primitives && options.primitiveClasses !== false) {
       PRIMITIVE_COLOR_RULES = buildPrimitiveRules(primitives);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umoa/saascfm-css",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "SaaSCFM scan-and-generate utility CSS for Vite: w-54, mt-12, g-8, text-primary.",
   "type": "module",
   "main": "./dist/index.cjs",

package/templates/js/saascfm-css/RULES.md

@@ -72,6 +72,8 @@ Each token becomes a CSS variable on `:root`. The first word of the name decides
 </style>
 ```
 
+Primitives are classes only. To also get a CSS variable for every primitive (`var(--brand-500)`), set `primitiveVars: true` in the plugin options. No change to the token files is needed.
+
 A token value can be a primitive (`P['neutral-900']`), a primitive name as a string (`'neutral-900'`), or any CSS color or value (`'#fff'`, `'rgba(0,0,0,.4)'`, `'56px'`). A string that looks like a primitive name but doesn't exist prints a warning and is skipped.
 
 ### When to use which

package/templates/ts/saascfm-css/RULES.md

@@ -72,6 +72,8 @@ Each token becomes a CSS variable on `:root`. The first word of the name decides
 </style>
 ```
 
+Primitives are classes only. To also get a CSS variable for every primitive (`var(--brand-500)`), set `primitiveVars: true` in the plugin options. No change to the token files is needed.
+
 A token value can be a primitive (`P['neutral-900']`), a primitive name as a string (`'neutral-900'`), or any CSS color or value (`'#fff'`, `'rgba(0,0,0,.4)'`, `'56px'`). A string that looks like a primitive name but doesn't exist prints a warning and is skipped.
 
 ### When to use which