feat(runtime): support bypassDefined option

unocss · Apr 23, 2023 · 2ddbef3 · 2ddbef3
1 parent 2101519
commit 2ddbef3
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 1 deletion.
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
@@ -38,7 +38,7 @@
     "build": "pnpm run build:node && pnpm run build:cdn",
     "build:cdn": "tsup src/cdn/*.ts --format iife --minify --out-dir .",
     "build:node": "tsup src/index.ts --format esm,cjs --dts",
-    "watch": "tsup src/cdn/*.ts --format iife --watch src --out-dir .",
+    "watch": "tsup src/cdn/*.ts --format iife --out-dir=. --watch=src",
     "dev": "nr watch & live-server --open=/play"
   },
   "dependencies": {

diff --git a/packages/runtime/play/index.html b/packages/runtime/play/index.html
@@ -1,9 +1,21 @@
 <head>
+<script>
+window.__unocss = {
+  runtime: {
+    bypassDefined: true,
+  },
+}
+</script>
 <script src="../attributify.global.js"></script>
 <style>
 [un-cloak] {
   display: none;
 }
+/* with bypassDefined, unocss will not generate this */
+.text-red {
+  font-style: italic;
+  color: red;
+}
 </style>
 </head>
 

diff --git a/packages/runtime/src/index.ts b/packages/runtime/src/index.ts
@@ -30,6 +30,11 @@ export interface RuntimeOptions {
    * Callback when the runtime is ready. Returning false will prevent default extraction
    */
   ready?: (runtime: RuntimeContext) => false | any
+  /**
+   * When enabled, UnoCSS will look for the existing selectors defined in the stylesheet and bypass them.
+   * This is useful when using the runtime alongwith the build-time UnoCSS.
+   */
+  bypassDefined?: boolean
 }
 
 export type RuntimeInspectorCallback = (element: Element) => boolean
@@ -152,6 +157,7 @@ export default function init(inlineConfig: RuntimeOptions = {}) {
 
     if (!styleElement) {
       styleElement = defaultDocument.createElement('style')
+      styleElement.setAttribute('data-unocss-runtime-layer', layer)
       styleElements.set(layer, styleElement)
 
       if (previousLayer == null) {
@@ -257,6 +263,8 @@ export default function init(inlineConfig: RuntimeOptions = {}) {
   }
 
   function execute() {
+    if (runtimeOptions.bypassDefined)
+      getDefinedCssSelectors(uno.blocked)
     extractAll()
     observe()
   }
@@ -298,3 +306,35 @@ export default function init(inlineConfig: RuntimeOptions = {}) {
     ready()
   }
 }
+
+/**
+ * Read all defined css selectors, and add them to the blocked list
+ */
+function getDefinedCssSelectors(selectors = new Set<string>()) {
+  for (let i = 0; i < document.styleSheets.length; i++) {
+    const sheet = document.styleSheets[i]
+    let list
+    try {
+      list = sheet.cssRules || sheet.rules
+
+      if (!list)
+        continue
+
+      Array.from(list)
+        // @ts-expect-error missing types
+        .flatMap(r => r.selectorText?.split(/,/g) || [])
+        .forEach((s) => {
+          if (!s)
+            return
+          s = s.trim()
+          if (s.startsWith('.'))
+            s = s.slice(1)
+          selectors.add(s)
+        })
+    }
+    catch (e) {
+      continue
+    }
+  }
+  return selectors
+}