@microsoft/arbutus.use-css-vars - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

lib/generate-css-vars.d.ts

@@ -1,3 +0,32 @@
-import type { GenerateCSSVarTuples } from './use-css-vars.types';
-export declare const generateCSSVarTuples: GenerateCSSVarTuples;
+import type { Value } from './use-css-vars.types';
+type CSSVarsArray = [string, string][] | [];
+/**
+ * A utility function that generates a list of CSS variable tuples from a theme object, where the first item in the
+ * tuple is the CSS variable name, and the second item is the CSS variable value.
+ * @param theme Theme object.
+ * @param prefix Optional prefix to add to the CSS variable name (e.g. `--my-prefix--color-button-primary`).
+ * @returns An array of CSS variable tuples, where the first item in the tuple is the CSS variable name, and the second
+ * item is the CSS variable value (e.g. `[['--color-button-primary', '#fff'], ['--color-button-secondary', '#000']]`)
+ *
+ * @example
+ * ```tsx
+ * const theme = {
+ *   color: {
+ *     button: {
+ *      primary: '#fff',
+ *      secondary: '#000',
+ *    },
+ *   },
+ * };
+ *
+ * const CSS_VAR_TUPLES = generateCSSVarTuples(theme, 'my-prefix');
+ * // Output:
+ * // [
+ * //  ['--my-prefix--color-button-primary', '#fff'],
+ * //  ['--my-prefix--color-button-secondary', '#000'],
+ * // ];
+ * ```
+ */
+export declare const generateCSSVarTuples: (theme: Record<string, Value> | Value, prefix?: string) => CSSVarsArray | [];
+export {};
 //# sourceMappingURL=generate-css-vars.d.ts.map

lib/generate-css-vars.js

@@ -0,2 +1,8 @@
+/**
+ * @todo Extract isObject into its own utility.
+ */
 const isObject = (value) => !!(value && typeof value === 'object' && !Array.isArray(value));
+/**
+ * @todo Extract isEmptyObject into its own utility.
+ */
 const isEmptyObject = (obj) => {
@@ -10,2 +16,29 @@ if (typeof obj === 'object' && obj != null && Object.keys(obj).length !== 0) {
 };
+/**
+ * A utility function that generates a list of CSS variable tuples from a theme object, where the first item in the
+ * tuple is the CSS variable name, and the second item is the CSS variable value.
+ * @param theme Theme object.
+ * @param prefix Optional prefix to add to the CSS variable name (e.g. `--my-prefix--color-button-primary`).
+ * @returns An array of CSS variable tuples, where the first item in the tuple is the CSS variable name, and the second
+ * item is the CSS variable value (e.g. `[['--color-button-primary', '#fff'], ['--color-button-secondary', '#000']]`)
+ *
+ * @example
+ * ```tsx
+ * const theme = {
+ *   color: {
+ *     button: {
+ *      primary: '#fff',
+ *      secondary: '#000',
+ *    },
+ *   },
+ * };
+ *
+ * const CSS_VAR_TUPLES = generateCSSVarTuples(theme, 'my-prefix');
+ * // Output:
+ * // [
+ * //  ['--my-prefix--color-button-primary', '#fff'],
+ * //  ['--my-prefix--color-button-secondary', '#000'],
+ * // ];
+ * ```
+ */
 export const generateCSSVarTuples = (theme, prefix) => {
@@ -12,0 +45,0 @@ let acc = [];

lib/index.d.ts

@@ -1,31 +0,5 @@
-import type { UseCSSVars } from './use-css-vars.types';
-/**
- * useCSSVars takes an object of theme values, generates CSS variables from them, and injects them into the document.
- * @param arg.theme An object of theme values. An object can be nested (e.g.
- * `color.button.primary: #fff` will translate to `--color-button-primary: #fff`).
- * @param arg.prefix A string to prefix all CSS variables with. This is an optional parameter, but it is recommended to
- * use it to avoid CSS variable collisions.
- * @example
- *
- * ```tsx
- * import { useCSSVars } from '@microsoft/arbutus.use-css-vars';
- *
- * const theme = {
- *   color: {
- *     button: {
- *       primary: '#fff',
- *       secondary: '#000',
- *     }
- *   }
- * }
- *
- * const MyAppShell = () => {
- *   // Injects CSS variables into the document.
- *   useCSSVars({ theme, prefix: 'MY_APP' });
- *
- *   return (<div>...</div>);
- * }
- * ```
- */
-export declare const useCSSVars: UseCSSVars;
+export { generateCSSVarTuples } from './generate-css-vars';
+export { generateTokensMap } from './generate-tokens-map';
+export { useCSSVars } from './use-css-vars';
+export type { Theme, Value } from './use-css-vars.types';
 //# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -1,40 +0,4 @@
-import { useEffect } from 'react';
-import { generateCSSVarTuples } from './generate-css-vars';
-/**
- * useCSSVars takes an object of theme values, generates CSS variables from them, and injects them into the document.
- * @param arg.theme An object of theme values. An object can be nested (e.g.
- * `color.button.primary: #fff` will translate to `--color-button-primary: #fff`).
- * @param arg.prefix A string to prefix all CSS variables with. This is an optional parameter, but it is recommended to
- * use it to avoid CSS variable collisions.
- * @example
- *
- * ```tsx
- * import { useCSSVars } from '@microsoft/arbutus.use-css-vars';
- *
- * const theme = {
- *   color: {
- *     button: {
- *       primary: '#fff',
- *       secondary: '#000',
- *     }
- *   }
- * }
- *
- * const MyAppShell = () => {
- *   // Injects CSS variables into the document.
- *   useCSSVars({ theme, prefix: 'MY_APP' });
- *
- *   return (<div>...</div>);
- * }
- * ```
- */
-export const useCSSVars = ({ theme, prefix }) => {
-    useEffect(() => {
-        const cssVarTuples = generateCSSVarTuples(theme, prefix);
-        cssVarTuples.forEach(([k, v]) => document?.documentElement?.style?.setProperty(k, v));
-        return () => {
-            cssVarTuples.forEach(([k]) => document?.documentElement?.style?.removeProperty(k));
-        };
-    }, [theme, prefix]);
-};
+export { generateCSSVarTuples } from './generate-css-vars';
+export { generateTokensMap } from './generate-tokens-map';
+export { useCSSVars } from './use-css-vars';
 //# sourceMappingURL=index.js.map

lib/use-css-vars.types.d.ts

@@ -1,9 +0,3 @@
-export type Value = Record<string, unknown | never> | string;
-export type CSSVarsArray = [string, string][] | [];
-export type TraverseObject = (v: Value, pre?: string, acc?: CSSVarsArray | []) => void;
-export type GenerateCSSVarTuples = (theme: Record<string, Value>, prefix?: string) => CSSVarsArray | [];
-export type UseCSSVars = ({ theme, prefix }: {
-    theme: Record<string, Value>;
-    prefix: string;
-}) => void;
+export type Value = Record<string, any> | string;
+export type Theme = Record<string, Value> | {};
 //# sourceMappingURL=use-css-vars.types.d.ts.map

package.json

 {
   "name": "@microsoft/arbutus.use-css-vars",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "useCSSVars takes an object of theme values, generates CSS variables from them, and injects them into the document.",
@@ -17,3 +17,4 @@ "main": "lib/index.js",
     "build": "tsc",
-    "lint": "eslint . --fix"
+    "lint": "eslint . --fix",
+    "test": "jest"
   },
@@ -25,5 +26,12 @@ "peerDependencies": {
   "devDependencies": {
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
     "@microsoft/arbutus.ts": "0.0.2",
+    "@types/jest": "^28.1.1",
+    "jest": "^28.1.1",
     "typescript": "^5.1.3"
+  },
+  "dependencies": {
+    "@fluentui/utilities": "^8.13.18"
   }
 }

README.md

@@ -16,6 +16,6 @@ # Hook: useCSSVars
 ## Usage
--  `theme` An object of theme values. An object can be nested (e.g. `color.button.primary: #fff` will translate to `--color-button-primary: #fff`).
+
+- `theme` An object of theme values. An object can be nested (e.g. `color.button.primary: #fff` will translate to `--color-button-primary: #fff`).
 - `prefix` A string to prefix all CSS variables with. This is an optional parameter, but it is recommended to use it to avoid CSS variable collisions.
 
-
 ```tsx
@@ -27,5 +27,5 @@ const theme = {
       secondary: '#000',
-    }
-  }
-}
+    },
+  },
+};
 
@@ -36,4 +36,4 @@ const MyAppShell = () => {
 
-  return (<div>...</div>);
-}
+  return <div>...</div>;
+};
 ```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19737

increased by132.5%

Number of package files

22

increased by57.14%

Lines of code

370

increased by249.06%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

6

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@fluentui/utilities@^8.13.18

• + Added@fluentui/dom-utilities@2.3.9(transitive)

• + Added@fluentui/merge-styles@8.6.13(transitive)

• + Added@fluentui/react-window-provider@2.2.28(transitive)

• + Added@fluentui/set-version@8.2.23(transitive)

• + Added@fluentui/utilities@8.15.19(transitive)

• + Added@types/prop-types@15.7.13(transitive)

• + Added@types/react@18.3.12(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedtslib@2.8.1(transitive)