Add utils/css-variables

Author: minimal-ui-kit

packages/minimal-shared/CHANGELOG.md

@@ -1,5 +1,13 @@
 # minimal-shared
 
+## 1.0.9
+
+_May 7, 2025_
+
+- Add `utils/css-variables`.
+
+---
+
 ## 1.0.8
 
 _Apr 8, 2025_

packages/minimal-shared/package.json

@@ -1,7 +1,7 @@
 {
   "name": "minimal-shared",
   "author": "Minimals",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Shared hooks and utils used by Minimal UI and Zone UI.",
   "keywords": [
     "typescript",

packages/minimal-shared/src/utils/css-variables/css-variables.test.ts

@@ -0,0 +1,47 @@
+import { getCssVarName } from './css-variables';
+
+// ----------------------------------------------------------------------
+
+describe('getCssVarName()', () => {
+  const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+  afterEach(() => {
+    errorSpy.mockClear();
+  });
+
+  afterAll(() => {
+    errorSpy.mockRestore();
+  });
+
+  it('1. Extracts variable without fallback', () => {
+    expect(getCssVarName('var(--palette-Tooltip-bg)')).toBe('--palette-Tooltip-bg');
+  });
+
+  it('2. Extracts variable with fallback', () => {
+    expect(getCssVarName('var(--palette-Tooltip-bg, rgba(69, 79, 91, 0.92))')).toBe(
+      '--palette-Tooltip-bg'
+    );
+  });
+
+  it('3. Returns empty string on empty or non-string input', () => {
+    const badInputs = [null, undefined, '', 123, {}, true];
+
+    for (const val of badInputs) {
+      expect(getCssVarName(val)).toBe('');
+    }
+
+    expect(errorSpy).toHaveBeenCalledTimes(badInputs.length);
+    expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining('Invalid input'));
+  });
+
+  it('4. Returns empty string on invalid CSS var() format', () => {
+    const invalidFormats = ['rgba(0,0,0,0.5)', 'var(-bad)', 'var()', 'var(--bad value)'];
+
+    for (const val of invalidFormats) {
+      expect(getCssVarName(val)).toBe('');
+    }
+
+    expect(errorSpy).toHaveBeenCalledTimes(invalidFormats.length);
+    expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining('Invalid CSS variable format'));
+  });
+});

packages/minimal-shared/src/utils/css-variables/css-variables.ts

@@ -0,0 +1,28 @@
+/**
+ * Extract the CSS variable name from a `var(--...)` expression.
+ *
+ * @param cssValue - A string like `var(--variable-name)` or `var(--variable-name, fallback)`.
+ * @returns The extracted CSS variable name (e.g., '--palette-Tooltip-bg').
+ *
+ * @example
+ * getCssVarName('var(--palette-Tooltip-bg)'); // → '--palette-Tooltip-bg'
+ * getCssVarName('var(--palette-Tooltip-bg, rgba(69, 79, 91, 0.92))'); // → '--palette-Tooltip-bg'
+ * getCssVarName(theme.vars.palette.Tooltip.bg); // → '--palette-Tooltip-bg'
+ */
+export function getCssVarName(cssValue: unknown): string {
+  if (typeof cssValue !== 'string' || !cssValue.trim()) {
+    console.error('Invalid input: CSS value must be a non-empty string');
+    return '';
+  }
+
+  const match = cssValue.match(/var\(\s*(--[\w-]+)(?:\s*,[^)]*)?\s*\)/);
+
+  if (!match) {
+    console.error(
+      `Invalid CSS variable format: "${cssValue}". Expected format: var(--variable-name)`
+    );
+    return '';
+  }
+
+  return match[1];
+}

packages/minimal-shared/src/utils/css-variables/index.ts

@@ -0,0 +1 @@
+export * from './css-variables';

packages/minimal-shared/src/utils/index.ts

@@ -8,4 +8,5 @@ export * from './classes';
 export * from './cookies';
 export * from './active-link';
 export * from './local-storage';
+export * from './css-variables';
 export * from './transform-number';