@db-ux/core-postcss-plugin 4.12.1 → 4.13.1-angular-signal-forms3-9c66774

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @db-ux/core-postcss-plugin
 
+## 4.13.0
+
+_version bump_
+
 ## 4.12.1
 
 _version bump_

package/build/plugins/flatten/data.d.ts

@@ -11,7 +11,7 @@ export type FlattenOptions = {
 };
 export type VarEntry = {
     value: string;
-    layer: string | null;
+    layer: string | undefined;
     file: string;
 };
 export declare const DEFAULT_DYNAMIC_PREFIXES: string[];

package/build/plugins/flatten/helpers/collect.d.ts

@@ -11,7 +11,7 @@ export declare const isRootSelector: (selector: string) => boolean;
  * @param node - The PostCSS child node to start from
  * @returns The layer name, or null if not inside any `@layer`
  */
-export declare const getLayerName: (node: ChildNode) => string | null;
+export declare const getLayerName: (node: ChildNode) => string | undefined;
 /**
  * Parse `@layer` order declarations (e.g. `@layer db-ux, db-theme;`) from a root.
  * Later names in the list get higher priority indices.
@@ -32,7 +32,7 @@ export declare const collectImportLayers: (root: Root) => Map<string, string>;
  * @param layerOrder - The layer priority map
  * @returns The numeric priority (higher = wins)
  */
-export declare const getLayerPriority: (layer: string | null, layerOrder: Map<string, number>) => number;
+export declare const getLayerPriority: (layer: string | undefined, layerOrder: Map<string, number>) => number;
 /**
  * Pick the best (highest-priority) value from multiple `VarEntry` entries
  * for the same variable, based on `@layer` priority.
@@ -48,7 +48,7 @@ export declare const pickBestVar: (entries: VarEntry[], layerOrder: Map<string,
  * @param importLayerMap - Map of import specifiers to layer names
  * @returns The layer name, or null if not associated with any layer
  */
-export declare const getFileLayer: (filePath: string, importLayerMap: Map<string, string>) => string | null;
+export declare const getFileLayer: (filePath: string, importLayerMap: Map<string, string>) => string | undefined;
 /**
  * Collect all CSS custom property declarations and `@property` initial-values
  * from a PostCSS root, assigning each a layer and detecting dynamic variables.
@@ -68,4 +68,4 @@ export declare const getFileLayer: (filePath: string, importLayerMap: Map<string
  * @param forceLayer - If set, overrides the detected layer for all entries
  * @param file - The source file path for deduplication
  */
-export declare const collectVarsWithLayer: (root: Root, varMap: Map<string, VarEntry[]>, propertyNames: Set<string>, dynamicVars: Set<string>, prefixes: string[], forceLayer: string | null, file: string) => void;
+export declare const collectVarsWithLayer: (root: Root, varMap: Map<string, VarEntry[]>, propertyNames: Set<string>, dynamicVars: Set<string>, prefixes: string[], forceLayer: string | undefined, file: string) => void;

package/build/plugins/flatten/helpers/collect.js

@@ -22,7 +22,7 @@ export const getLayerName = (node) => {
         }
         current = current.parent;
     }
-    return null;
+    return undefined;
 };
 /**
  * Parse `@layer` order declarations (e.g. `@layer db-ux, db-theme;`) from a root.
@@ -39,8 +39,8 @@ export const collectLayerOrder = (root) => {
             .split(',')
             .map((n) => n.trim())
             .filter(Boolean);
-        for (let i = 0; i < names.length; i++) {
-            order.set(names[i], i);
+        for (const [i, name] of names.entries()) {
+            order.set(name, i);
         }
     });
     return order;
@@ -53,12 +53,12 @@ export const collectLayerOrder = (root) => {
 export const collectImportLayers = (root) => {
     const importLayers = new Map();
     root.walkAtRules('import', (atRule) => {
-        const params = atRule.params;
-        const layerMatch = params.match(/layer\(([^)]+)\)/);
+        const { params } = atRule;
+        const layerMatch = /layer\(([^)]+)\)/.exec(params);
         if (!layerMatch)
             return;
         const layerName = layerMatch[1].trim();
-        const fileMatch = params.match(/(?:url\(\s*)?["']([^"']+)["'](?:\s*\))?/);
+        const fileMatch = /(?:url\(\s*)?["']([^"']+)["'](?:\s*\))?/.exec(params);
         if (!fileMatch)
             return;
         importLayers.set(fileMatch[1], layerName);
@@ -73,7 +73,7 @@ export const collectImportLayers = (root) => {
  * @returns The numeric priority (higher = wins)
  */
 export const getLayerPriority = (layer, layerOrder) => {
-    if (layer === null)
+    if (!layer)
         return Number.MAX_SAFE_INTEGER;
     return layerOrder.get(layer) ?? -1;
 };
@@ -103,11 +103,13 @@ export const pickBestVar = (entries, layerOrder) => {
  */
 export const getFileLayer = (filePath, importLayerMap) => {
     for (const [specifier, layer] of importLayerMap) {
-        if (filePath.replace(/\\/g, '/').endsWith(specifier.replace(/\\/g, '/'))) {
+        if (filePath
+            .replaceAll('\\', '/')
+            .endsWith(specifier.replaceAll('\\', '/'))) {
             return layer;
         }
     }
-    return null;
+    return undefined;
 };
 /**
  * Collect all CSS custom property declarations and `@property` initial-values
@@ -132,11 +134,13 @@ export const collectVarsWithLayer = (root, varMap, propertyNames, dynamicVars, p
     const addVar = (prop, value, layer) => {
         const entries = varMap.get(prop);
         if (entries) {
-            if (entries.some((e) => e.file === file &&
-                e.layer === layer &&
-                e.value === value))
-                return;
-            entries.push({ value, layer, file });
+            const existing = entries.find((e) => e.file === file && e.layer === layer);
+            if (existing) {
+                existing.value = value;
+            }
+            else {
+                entries.push({ value, layer, file });
+            }
         }
         else {
             varMap.set(prop, [{ value, layer, file }]);
@@ -151,21 +155,20 @@ export const collectVarsWithLayer = (root, varMap, propertyNames, dynamicVars, p
         });
     });
     root.walkDecls(/^--/, (decl) => {
-        const parent = decl.parent;
+        const { parent } = decl;
         if (prefixes.some((p) => decl.prop.startsWith(p))) {
             dynamicVars.add(decl.prop);
         }
-        if (parent && parent.type === 'rule') {
+        if (parent?.type === 'rule') {
             const rule = parent;
             if (!isRootSelector(rule.selector)) {
                 dynamicVars.add(decl.prop);
             }
         }
-        if (parent && parent.type === 'rule') {
+        if (parent?.type === 'rule') {
             const rule = parent;
             if (isRootSelector(rule.selector) &&
-                rule.parent &&
-                rule.parent.type === 'atrule') {
+                rule.parent?.type === 'atrule') {
                 const atRule = rule.parent;
                 if (atRule.name === 'media') {
                     dynamicVars.add(decl.prop);

package/build/plugins/flatten/helpers/css-parser.d.ts

@@ -25,4 +25,4 @@ export declare const findCssFunction: (value: string, funcName: string, fromInde
     start: number;
     end: number;
     inner: string;
-} | null;
+} | undefined;

package/build/plugins/flatten/helpers/css-parser.js

@@ -47,10 +47,10 @@ export const findCssFunction = (value, funcName, fromIndex = 0) => {
     const prefix = `${funcName}(`;
     const idx = value.indexOf(prefix, fromIndex);
     if (idx === -1)
-        return null;
+        return undefined;
     const end = findMatchingParenthesis(value, idx + prefix.length);
     if (end === -1)
-        return null;
+        return undefined;
     return {
         start: idx,
         end,

package/build/plugins/flatten/helpers/resolve.js

@@ -9,14 +9,14 @@ import { findCssFunction, findTopLevelComma } from './css-parser.js';
 const findNextVar = (value, fromIndex) => {
     const found = findCssFunction(value, 'var', fromIndex);
     if (!found)
-        return null;
+        return undefined;
     const commaIdx = findTopLevelComma(found.inner);
     if (commaIdx === -1) {
         return {
             start: found.start,
             end: found.end,
             name: found.inner.trim(),
-            fallback: null
+            fallback: undefined
         };
     }
     return {
@@ -56,15 +56,15 @@ export const resolveVars = (value, varMap, seen = new Set()) => {
             result = result.slice(0, start) + resolvedValue + result.slice(end);
             searchFrom = start + resolvedValue.length;
         }
-        else if (fallback !== null) {
+        else if (fallback === undefined) {
+            searchFrom = end;
+        }
+        else {
             const resolvedFallback = resolveVars(fallback, varMap, seen);
             const replacement = `var(${name}, ${resolvedFallback})`;
             result = result.slice(0, start) + replacement + result.slice(end);
             searchFrom = start + replacement.length;
         }
-        else {
-            searchFrom = end;
-        }
     }
     return result;
 };
@@ -114,16 +114,16 @@ const resolveCssFunction = (value, funcName, evaluate, skipNestedFunctions = fal
             continue;
         }
         const evaluated = evaluate(found.inner);
-        if (evaluated !== null) {
+        if (evaluated === undefined) {
+            searchFrom = found.end;
+        }
+        else {
             result =
                 result.slice(0, found.start) +
                     evaluated +
                     result.slice(found.end);
             searchFrom = found.start + evaluated.length;
         }
-        else {
-            searchFrom = found.end;
-        }
     }
     return result;
 };
@@ -133,10 +133,10 @@ const resolveCssFunction = (value, funcName, evaluate, skipNestedFunctions = fal
  * @param str - The string to parse (e.g. "0.75rem", "100%", "2")
  * @returns An object with `value` and `unit`, or null if not parseable
  */
-const parseUnit = (str) => {
-    const match = str.trim().match(/^(-?[\d.]+)\s*(%|[a-z]*)$/i);
+const parseUnit = (string_) => {
+    const match = /^(-?[\d.]+)\s*(%|[a-z]*)$/i.exec(string_.trim());
     if (!match)
-        return null;
+        return undefined;
     return { value: Number.parseFloat(match[1]), unit: match[2] || '' };
 };
 /**
@@ -148,7 +148,7 @@ const parseUnit = (str) => {
 const evaluateCalc = (expr) => {
     const tokens = expr.trim().split(/\s+/).filter(Boolean);
     if (tokens.length === 0)
-        return null;
+        return undefined;
     let result = 0;
     let resultUnit = '';
     let operator = '+';
@@ -159,28 +159,32 @@ const evaluateCalc = (expr) => {
         }
         const parsed = parseUnit(token);
         if (!parsed)
-            return null;
+            return undefined;
         if (parsed.unit && !resultUnit) {
             resultUnit = parsed.unit;
         }
         else if (parsed.unit && parsed.unit !== resultUnit && resultUnit) {
-            return null;
+            return undefined;
         }
         switch (operator) {
-            case '+':
+            case '+': {
                 result += parsed.value;
                 break;
-            case '-':
+            }
+            case '-': {
                 result -= parsed.value;
                 break;
-            case '*':
+            }
+            case '*': {
                 result *= parsed.value;
                 break;
-            case '/':
+            }
+            case '/': {
                 if (parsed.value === 0)
-                    return null;
+                    return undefined;
                 result /= parsed.value;
                 break;
+            }
         }
     }
     const rounded = Math.abs(result) < 1e-10 ? 0 : Math.round(result * 1e6) / 1e6;
@@ -202,38 +206,46 @@ export const resolveCalc = (value) => resolveCssFunction(value, 'calc', evaluate
  */
 const parseHexColor = (hex) => {
     const h = hex.replace('#', '');
-    let r, g, b;
+    let r;
+    let g;
+    let b;
     let a = 1;
-    if (h.length === 3) {
-        r = Number.parseInt(h[0] + h[0], 16);
-        g = Number.parseInt(h[1] + h[1], 16);
-        b = Number.parseInt(h[2] + h[2], 16);
-    }
-    else if (h.length === 4) {
-        r = Number.parseInt(h[0] + h[0], 16);
-        g = Number.parseInt(h[1] + h[1], 16);
-        b = Number.parseInt(h[2] + h[2], 16);
-        a = Number.parseInt(h[3] + h[3], 16) / 255;
-    }
-    else if (h.length === 6) {
-        r = Number.parseInt(h.slice(0, 2), 16);
-        g = Number.parseInt(h.slice(2, 4), 16);
-        b = Number.parseInt(h.slice(4, 6), 16);
-    }
-    else if (h.length === 8) {
-        r = Number.parseInt(h.slice(0, 2), 16);
-        g = Number.parseInt(h.slice(2, 4), 16);
-        b = Number.parseInt(h.slice(4, 6), 16);
-        a = Number.parseInt(h.slice(6, 8), 16) / 255;
-    }
-    else {
-        return null;
+    switch (h.length) {
+        case 3: {
+            r = Number.parseInt(h[0] + h[0], 16);
+            g = Number.parseInt(h[1] + h[1], 16);
+            b = Number.parseInt(h[2] + h[2], 16);
+            break;
+        }
+        case 4: {
+            r = Number.parseInt(h[0] + h[0], 16);
+            g = Number.parseInt(h[1] + h[1], 16);
+            b = Number.parseInt(h[2] + h[2], 16);
+            a = Number.parseInt(h[3] + h[3], 16) / 255;
+            break;
+        }
+        case 6: {
+            r = Number.parseInt(h.slice(0, 2), 16);
+            g = Number.parseInt(h.slice(2, 4), 16);
+            b = Number.parseInt(h.slice(4, 6), 16);
+            break;
+        }
+        case 8: {
+            r = Number.parseInt(h.slice(0, 2), 16);
+            g = Number.parseInt(h.slice(2, 4), 16);
+            b = Number.parseInt(h.slice(4, 6), 16);
+            a = Number.parseInt(h.slice(6, 8), 16) / 255;
+            break;
+        }
+        default: {
+            return undefined;
+        }
     }
     if (Number.isNaN(r) ||
         Number.isNaN(g) ||
         Number.isNaN(b) ||
         Number.isNaN(a))
-        return null;
+        return undefined;
     return [r, g, b, a];
 };
 /**
@@ -252,44 +264,45 @@ const toHex = (n) => Math.round(Math.max(0, Math.min(255, n)))
  * @returns The mixed color as a hex string, "transparent", or null if not evaluable
  */
 const evaluateColorMix = (args) => {
-    const srgbMatch = args.match(/^in\s+srgb\s*,\s*([\s\S]+?)\s*,\s*([\s\S]+?)\s*$/);
+    const srgbMatch = /^in\s+srgb\s*,\s*([\s\S]+?)\s*,\s*([\s\S]+?)\s*$/.exec(args);
     if (!srgbMatch)
-        return null;
+        return undefined;
     const parseColorArg = (arg) => {
         const parts = arg.trim().split(/\s+/);
         if (parts.length === 1)
-            return { color: parts[0], percentage: null };
+            return { color: parts[0], percentage: undefined };
         if (parts.length === 2) {
-            const pctMatch = parts[1].match(/^([\d.]+)%$/);
+            const pctMatch = /^([\d.]+)%$/.exec(parts[1]);
             if (!pctMatch)
-                return null;
+                return undefined;
             return {
                 color: parts[0],
                 percentage: Number.parseFloat(pctMatch[1])
             };
         }
-        return null;
+        return undefined;
     };
     const arg1 = parseColorArg(srgbMatch[1]);
     const arg2 = parseColorArg(srgbMatch[2]);
     if (!arg1 || !arg2)
-        return null;
+        return undefined;
     let p1 = arg1.percentage;
     let p2 = arg2.percentage;
-    if (p1 === null && p2 === null) {
+    if (p1 === undefined && p2 === undefined) {
         p1 = 50;
         p2 = 50;
     }
-    else if (p1 !== null && p2 === null) {
+    else if (p1 !== undefined && p2 === undefined) {
         p2 = 100 - p1;
     }
-    else if (p1 === null && p2 !== null) {
+    else if (p1 === undefined && p2 !== undefined) {
         p1 = 100 - p2;
     }
     const pct1 = p1 / 100;
     const pct2 = p2 / 100;
     const isTransparent = (c) => c === 'transparent';
-    let rgb1, alpha1 = 1;
+    let rgb1;
+    let alpha1 = 1;
     if (isTransparent(arg1.color)) {
         rgb1 = [0, 0, 0];
         alpha1 = 0;
@@ -297,11 +310,12 @@ const evaluateColorMix = (args) => {
     else {
         const parsed = parseHexColor(arg1.color);
         if (!parsed)
-            return null;
+            return undefined;
         rgb1 = [parsed[0], parsed[1], parsed[2]];
         alpha1 = parsed[3];
     }
-    let rgb2, alpha2 = 1;
+    let rgb2;
+    let alpha2 = 1;
     if (isTransparent(arg2.color)) {
         rgb2 = [0, 0, 0];
         alpha2 = 0;
@@ -309,7 +323,7 @@ const evaluateColorMix = (args) => {
     else {
         const parsed = parseHexColor(arg2.color);
         if (!parsed)
-            return null;
+            return undefined;
         rgb2 = [parsed[0], parsed[1], parsed[2]];
         alpha2 = parsed[3];
     }

package/build/plugins/flatten/helpers/transform.js

@@ -97,13 +97,13 @@ const removeEmptyContainers = (root) => {
     while (changed) {
         changed = false;
         root.walkRules((rule) => {
-            if (rule.nodes && rule.nodes.length === 0) {
+            if (rule.nodes?.length === 0) {
                 rule.remove();
                 changed = true;
             }
         });
         root.walkAtRules('layer', (atRule) => {
-            if (atRule.nodes && atRule.nodes.length === 0) {
+            if (atRule.nodes?.length === 0) {
                 atRule.remove();
                 changed = true;
             }

package/build/plugins/flatten/index.d.ts

@@ -1,5 +1,5 @@
 import type { PluginCreator } from 'postcss';
-import type { FlattenOptions } from './data.js';
+import { type FlattenOptions } from './data.js';
 /**
  * PostCSS plugin that flattens DB UX Design System CSS custom properties
  * by resolving `var()`, `@property`, `calc()`, `color-mix()`, and `light-dark()`.
@@ -13,4 +13,4 @@ import type { FlattenOptions } from './data.js';
  */
 declare const dbUxFlatten: PluginCreator<FlattenOptions>;
 export { dbUxFlatten };
-export type { FlattenOptions };
+export { type FlattenOptions } from './data.js';

package/build/plugins/flatten/index.js

@@ -12,10 +12,10 @@ import { transformRoot } from './helpers/transform.js';
  * @param opts - Plugin options
  * @returns A PostCSS plugin instance
  */
-const dbUxFlatten = (opts = {}) => {
-    const removeAtProperty = opts.removeAtProperty ?? true;
-    const removeResolved = opts.removeResolved ?? true;
-    const dynamicPrefixes = opts.dynamicPrefixes ?? DEFAULT_DYNAMIC_PREFIXES;
+const dbUxFlatten = (options = {}) => {
+    const removeAtProperty = options.removeAtProperty ?? true;
+    const removeResolved = options.removeResolved ?? true;
+    const dynamicPrefixes = options.dynamicPrefixes ?? DEFAULT_DYNAMIC_PREFIXES;
     const varMap = new Map();
     const propertyNames = new Set();
     const dynamicVars = new Set();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/core-postcss-plugin",
-  "version": "4.12.1",
+  "version": "4.13.1-angular-signal-forms3-9c66774",
   "type": "module",
   "description": "PostCSS plugins for DB UX Design System",
   "repository": {
@@ -33,7 +33,7 @@
     "npm-run-all2": "9.0.2",
     "postcss": "8.5.15",
     "typescript": "5.9.3",
-    "vitest": "4.1.8"
+    "vitest": "4.1.9"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",