feat: new function - loadCSS

README.md

@@ -66,6 +66,7 @@ pnpm add @utopia-utils/dom
 * isIOS: 判断是否是 IOS 系统。[source](https://github.com/GreatAuk/utopia-utils/blob/main/packages/dom/src/isIOS.ts)
 * isWeixin: 判断是否是微信浏览器。[source](https://github.com/GreatAuk/utopia-utils/blob/main/packages/dom/src/isWeixin.ts)
 * 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)
 ### 杂项
 * [defineDictionary](#defineDictionary): 定义业务字典。 **typesafe** [source](https://github.com/GreatAuk/utopia-utils/blob/main/packages/core/src/defineDictionary.ts)

packages/dom/src/index.ts

@@ -3,5 +3,6 @@ export * from './isAndroid'
 export * from './isIOS'
 export * from './isMobile'
 export * from './isWeixin'
+export * from './loadCss'
 export * from './loadScript'
 export * from './waitForSelector'

packages/dom/src/loadCSS.test.ts

@@ -0,0 +1,35 @@
+import { loadCSS } from './loadCSS'
+
+const path = 'https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css'
+
+describe('loadCSS', () => {
+  it('should load css', () => {
+    const { unload, linkTag } = loadCSS(path)
+    expect(linkTag).toBeInstanceOf(HTMLLinkElement)
+    expect(linkTag?.href).toBe(path)
+    expect(linkTag?.rel).toBe('stylesheet')
+    unload()
+  })
+  it('should load css with media', () => {
+    const { unload, linkTag } = loadCSS(path, { media: 'print' })
+    expect(linkTag).toBeInstanceOf(HTMLLinkElement)
+    expect(linkTag?.href).toBe(path)
+    expect(linkTag?.rel).toBe('stylesheet')
+    expect(linkTag?.media).toBe('print')
+    unload()
+  })
+  it('should load css with attrs', () => {
+    const { unload, linkTag } = loadCSS(path, { attrs: { 'data-test': 'test' } })
+    expect(linkTag).toBeInstanceOf(HTMLLinkElement)
+    expect(linkTag?.href).toBe(path)
+    expect(linkTag?.rel).toBe('stylesheet')
+    expect(linkTag?.getAttribute('data-test')).toBe('test')
+    unload()
+  })
+  it('should unload css', () => {
+    const { unload, linkTag } = loadCSS(path)
+    expect(linkTag?.href).toBe(path)
+    unload()
+    expect(document.querySelector<HTMLLinkElement>(`link[href="${path}"]`)).toBeNull()
+  })
+})

packages/dom/src/loadCss.ts

@@ -0,0 +1,54 @@
+interface LoadCSSOptions {
+  /**
+   * Media query for styles to apply
+   * @example 'print', 'all', 'screen and (max-width: 768px)' and etc.
+   */
+  media?: string
+  /**
+   * Add custom attribute to the script tag
+   *
+   */
+  attrs?: Record<string, string>
+}
+
+/**
+ * It loads a CSS file into the page
+ * @param {string} path - the path to the CSS file
+ * @param {LoadCSSOptions} [options] - {
+ * @returns An object with two properties:
+ *   - unload: a function that removes the script tag
+ *   - linkTag: the link tag that was created
+ */
+export function loadCSS(path: string, options?: LoadCSSOptions) {
+  const {
+    attrs = {},
+    media,
+  } = options || {}
+  let linkEl = document.querySelector<HTMLLinkElement>(`link[href="${path}"]`)
+
+  if (!linkEl) {
+    linkEl = document.createElement('link')
+    linkEl.rel = 'stylesheet'
+    linkEl.href = path
+
+    if (media)
+      linkEl.media = media
+
+    Object.entries(attrs).forEach(([name, value]) => linkEl?.setAttribute(name, value))
+
+    document.head.appendChild(linkEl)
+  }
+
+  return {
+    /** remove the script tag */
+    unload: () => unload(path),
+    linkTag: linkEl,
+  }
+}
+
+/** remove the script tag */
+function unload(path: string) {
+  const linkEl = document.querySelector(`link[href="${path}"]`)
+  if (linkEl)
+    linkEl.remove()
+}

packages/dom/src/loadScript.ts

@@ -34,6 +34,14 @@ interface LoadScriptOptions {
   onStatusChange?: (status: 'loading' | 'loaded' | 'error') => void
 }
 
+/**
+ * It loads a script tag into the DOM
+ * @param {string} src - The URL of the script to load.
+ * @param {LoadScriptOptions} [options] - LoadScriptOptions
+ * @returns An object with two properties:
+ *   - unload: a function that removes the script tag
+ *   - scriptTag: the script tag that was created
+ */
 export function loadScript(src: string, options?: LoadScriptOptions) {
   const {
     async = true,

packages/dom/src/waitForSelector.test.ts

@@ -29,6 +29,6 @@ describe('waitForSelector', () => {
     const a = await waitForSelector('#b', { timeoutMillisecond: 10 })
     expect(a).toBe(null)
     const timeEnd = Date.now()
-    expect(timeEnd - timeStart).toBeGreaterThanOrEqual(10)
+    expect(timeEnd - timeStart).toBeGreaterThanOrEqual(9)
   })
 })