feat: new function - setCssVar

README.md

@@ -69,6 +69,7 @@ pnpm add @utopia-utils/dom
 * isMobile: 判断是否是移动端浏览器。[source](https://github.com/GreatAuk/utopia-utils/blob/main/packages/dom/src/isMobile.ts)
 * loadCSS: 动态加载 CSS。[source](https://github.com/GreatAuk/utopia-utils/blob/main/packages/dom/src/loadCSS.ts)
 * loadScript: 动态加载脚本。[source](https://github.com/GreatAuk/utopia-utils/blob/main/packages/dom/src/loadScript.ts)
+* setCssVar: 设置 `css` 变量。 [source](*https://github.com/GreatAuk/utopia-utils/blob/main/packages/dom/src/setCssVar.ts*)
 ### 杂项
 * [defineDictionary](#defineDictionary): 定义业务字典。 **typesafe** [source](https://github.com/GreatAuk/utopia-utils/blob/main/packages/core/src/defineDictionary.ts)
 * ~~[createEnumFromOptions](#createEnumFromOptions): 通过 `options` 自动生成对应的 `enum`， 后期只需要维护 `options`。**typesafe**。[source](https://github.com/GreatAuk/utopia-utils/blob/main/packages/core/src/createEnumFromOptions.ts)~~

packages/dom/package.json

@@ -37,5 +37,7 @@
     "test": "vitest",
     "typecheck": "tsc --noEmit"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@utopia-utils/share": "^0.3.19"
+  }
 }

packages/dom/src/index.ts

@@ -5,4 +5,5 @@ export * from './isMobile'
 export * from './isWeixin'
 export * from './loadCSS'
 export * from './loadScript'
+export * from './setCssVar'
 export * from './waitForSelector'

packages/dom/src/setCssVar.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+
+import { setCssVar } from './setCssVar'
+
+describe('setCssVar', () => {
+  it('should set CSS variables on the root element of a document using the provided variables object', () => {
+    const root = document.createElement('div')
+    const variables = {
+      '--color': 'red',
+      '--size': '10px',
+    }
+
+    setCssVar(variables, root)
+
+    expect(root.style.getPropertyValue('--color')).toBe('red')
+    expect(root.style.getPropertyValue('--size')).toBe('10px')
+  })
+
+  it('should set CSS variables on the root element of a document using the provided variables object', () => {
+    const variables = {
+      '--color': 'red',
+      '--size': '10px',
+    }
+
+    setCssVar(variables)
+
+    expect(window.document.documentElement.style.getPropertyValue('--color')).toBe('red')
+    expect(window.document.documentElement.style.getPropertyValue('--size')).toBe('10px')
+  })
+
+  it('should not set CSS variables on the root element of a document if the provided variables object is not a plain object', () => {
+    const root = document.createElement('div')
+    const variables = null
+
+    // @ts-expect-error for test
+    setCssVar(variables, root)
+
+    expect(root.style.getPropertyValue('--color')).toBe('')
+    expect(root.style.getPropertyValue('--size')).toBe('')
+  })
+
+  it('should not set CSS variables on the root element of a document if the provided variables object is not a plain object', () => {
+    const variables = null
+
+    // @ts-expect-error for test
+    setCssVar(variables)
+
+    expect(document.documentElement.style.getPropertyValue('--color')).toBe('')
+    expect(document.documentElement.style.getPropertyValue('--size')).toBe('')
+  })
+})

packages/dom/src/setCssVar.ts

@@ -0,0 +1,19 @@
+import { isPlainObject } from '@utopia-utils/share'
+
+/**
+ * The function sets CSS variables on the root element of a document using the provided variables
+ * object.
+ * @param variables - The `variables` parameter is an object that contains key-value pairs representing
+ * CSS variable names and their corresponding values.
+ * @param root - The `root` parameter is an optional parameter that represents the root element where
+ * the CSS variables should be set. By default, it is set to `window?.document?.documentElement`, which
+ * refers to the root element of the current document.
+ * @linkcode https://github.com/GreatAuk/utopia-utils/blob/main/packages/dom/src/setCssVar.ts
+ */
+export function setCssVar(variables: Record<string, any>, root = window?.document?.documentElement) {
+  if (variables && isPlainObject(variables) && root) {
+    Object.keys(variables).forEach((key) => {
+      root.style.setProperty(key, variables[key])
+    })
+  }
+}