@unocss/vite 0.16.1 → 0.17.2

package/dist/index.cjs

@@ -43,6 +43,7 @@ function getHashPlaceholder(hash) {
 }
 
 const INCLUDE_COMMENT = "@unocss-include";
+const CSS_PLACEHOLDER = "@unocss-placeholder";
 
 function createContext(configOrPath, defaults = {}, extraConfigSources = []) {
   const loadConfig = config.createConfigLoader(configOrPath, extraConfigSources);
@@ -76,7 +77,7 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = []) {
       invalidate();
   }
   const filter = (code, id) => {
-    return code.includes(INCLUDE_COMMENT) || rollupFilter(id);
+    return code.includes(INCLUDE_COMMENT) || code.includes(CSS_PLACEHOLDER) || rollupFilter(id);
   };
   async function getConfig() {
     await ready;
@@ -461,6 +462,97 @@ function VueScopedPlugin({ uno, ready }) {
   };
 }
 
+function ShadowDomModuleModePlugin({ uno }) {
+  const partExtractorRegex = /^part-\[(.+)]:/;
+  const nameRegexp = /<([^\s^!>]+)\s*([^>]*)>/;
+  const checkElement = (useParts, idxResolver, element) => {
+    if (!element)
+      return null;
+    const applyParts = useParts.filter((p) => element[2].includes(p.rule));
+    if (applyParts.length === 0)
+      return null;
+    const name = element[1];
+    const idx = idxResolver(name);
+    return {
+      name,
+      entries: applyParts.map(({ rule, part }) => [
+        `.${rule.replace(/[:[\]]/g, "\\$&")}::part(${part})`,
+        `${name}:nth-of-type(${idx})::part(${part})`
+      ])
+    };
+  };
+  const idxMapFactory = () => {
+    const elementIdxMap = /* @__PURE__ */ new Map();
+    return {
+      idxResolver: (name) => {
+        let idx = elementIdxMap.get(name);
+        if (!idx) {
+          idx = 1;
+          elementIdxMap.set(name, idx);
+        }
+        return idx;
+      },
+      incrementIdx: (name) => {
+        elementIdxMap.set(name, elementIdxMap.get(name) + 1);
+      }
+    };
+  };
+  const transformWebComponent = async (code) => {
+    if (!code.match(CSS_PLACEHOLDER))
+      return code;
+    let { css, matched } = await uno.generate(code, { preflights: false });
+    if (css && matched) {
+      const useParts = Array.from(matched).reduce((acc, rule) => {
+        const matcher = rule.match(partExtractorRegex);
+        if (matcher)
+          acc.push({ part: matcher[1], rule });
+        return acc;
+      }, new Array());
+      if (useParts.length > 0) {
+        let useCode = code;
+        let element;
+        const partsToApply = /* @__PURE__ */ new Map();
+        const { idxResolver, incrementIdx } = idxMapFactory();
+        while (element = nameRegexp.exec(useCode)) {
+          const result = checkElement(useParts, idxResolver, element);
+          if (result) {
+            result.entries.forEach(([name, replacement]) => {
+              let list = partsToApply.get(name);
+              if (!list) {
+                list = [];
+                partsToApply.set(name, list);
+              }
+              list.push(replacement);
+            });
+            incrementIdx(result.name);
+          }
+          useCode = useCode.slice(element[0].length + 1);
+        }
+        if (partsToApply.size > 0) {
+          css = Array.from(partsToApply.entries()).reduce((k, [r, name]) => {
+            return k.replace(r, name.join(",\n"));
+          }, css);
+        }
+      }
+    }
+    return code.replace(CSS_PLACEHOLDER, css || "");
+  };
+  return {
+    name: "unocss:shadow-dom",
+    enforce: "pre",
+    async transform(code) {
+      return transformWebComponent(code);
+    },
+    handleHotUpdate(ctx) {
+      const read = ctx.read;
+      ctx.read = async () => {
+        const code = await read();
+        return await transformWebComponent(code);
+      };
+    }
+  };
+}
+
 function ConfigHMRPlugin(ctx) {
   const { ready, uno } = ctx;
   return {
@@ -503,6 +595,8 @@ function UnocssPlugin(configOrPath, defaults = {}) {
     plugins.push(PerModuleModePlugin(ctx));
   } else if (mode === "vue-scoped") {
     plugins.push(VueScopedPlugin(ctx));
+  } else if (mode === "shadow-dom") {
+    plugins.push(ShadowDomModuleModePlugin(ctx));
   } else if (mode === "global") {
     plugins.push(...GlobalModePlugin(ctx));
   } else if (mode === "dist-chunk") {

package/dist/index.d.ts

@@ -20,7 +20,7 @@ interface VitePluginConfig<Theme extends {} = {}> extends UserConfig<Theme> {
      *
      * @default 'global'
      */
-    mode?: 'global' | 'per-module' | 'vue-scoped' | 'dist-chunk';
+    mode?: 'global' | 'per-module' | 'vue-scoped' | 'dist-chunk' | 'shadow-dom';
 }
 
 interface UnocssPluginContext<Config extends UserConfig = UserConfig> {

package/dist/index.mjs

@@ -35,6 +35,7 @@ function getHashPlaceholder(hash) {
 }
 
 const INCLUDE_COMMENT = "@unocss-include";
+const CSS_PLACEHOLDER = "@unocss-placeholder";
 
 function createContext(configOrPath, defaults = {}, extraConfigSources = []) {
   const loadConfig = createConfigLoader(configOrPath, extraConfigSources);
@@ -68,7 +69,7 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = []) {
       invalidate();
   }
   const filter = (code, id) => {
-    return code.includes(INCLUDE_COMMENT) || rollupFilter(id);
+    return code.includes(INCLUDE_COMMENT) || code.includes(CSS_PLACEHOLDER) || rollupFilter(id);
   };
   async function getConfig() {
     await ready;
@@ -453,6 +454,97 @@ function VueScopedPlugin({ uno, ready }) {
   };
 }
 
+function ShadowDomModuleModePlugin({ uno }) {
+  const partExtractorRegex = /^part-\[(.+)]:/;
+  const nameRegexp = /<([^\s^!>]+)\s*([^>]*)>/;
+  const checkElement = (useParts, idxResolver, element) => {
+    if (!element)
+      return null;
+    const applyParts = useParts.filter((p) => element[2].includes(p.rule));
+    if (applyParts.length === 0)
+      return null;
+    const name = element[1];
+    const idx = idxResolver(name);
+    return {
+      name,
+      entries: applyParts.map(({ rule, part }) => [
+        `.${rule.replace(/[:[\]]/g, "\\$&")}::part(${part})`,
+        `${name}:nth-of-type(${idx})::part(${part})`
+      ])
+    };
+  };
+  const idxMapFactory = () => {
+    const elementIdxMap = /* @__PURE__ */ new Map();
+    return {
+      idxResolver: (name) => {
+        let idx = elementIdxMap.get(name);
+        if (!idx) {
+          idx = 1;
+          elementIdxMap.set(name, idx);
+        }
+        return idx;
+      },
+      incrementIdx: (name) => {
+        elementIdxMap.set(name, elementIdxMap.get(name) + 1);
+      }
+    };
+  };
+  const transformWebComponent = async (code) => {
+    if (!code.match(CSS_PLACEHOLDER))
+      return code;
+    let { css, matched } = await uno.generate(code, { preflights: false });
+    if (css && matched) {
+      const useParts = Array.from(matched).reduce((acc, rule) => {
+        const matcher = rule.match(partExtractorRegex);
+        if (matcher)
+          acc.push({ part: matcher[1], rule });
+        return acc;
+      }, new Array());
+      if (useParts.length > 0) {
+        let useCode = code;
+        let element;
+        const partsToApply = /* @__PURE__ */ new Map();
+        const { idxResolver, incrementIdx } = idxMapFactory();
+        while (element = nameRegexp.exec(useCode)) {
+          const result = checkElement(useParts, idxResolver, element);
+          if (result) {
+            result.entries.forEach(([name, replacement]) => {
+              let list = partsToApply.get(name);
+              if (!list) {
+                list = [];
+                partsToApply.set(name, list);
+              }
+              list.push(replacement);
+            });
+            incrementIdx(result.name);
+          }
+          useCode = useCode.slice(element[0].length + 1);
+        }
+        if (partsToApply.size > 0) {
+          css = Array.from(partsToApply.entries()).reduce((k, [r, name]) => {
+            return k.replace(r, name.join(",\n"));
+          }, css);
+        }
+      }
+    }
+    return code.replace(CSS_PLACEHOLDER, css || "");
+  };
+  return {
+    name: "unocss:shadow-dom",
+    enforce: "pre",
+    async transform(code) {
+      return transformWebComponent(code);
+    },
+    handleHotUpdate(ctx) {
+      const read = ctx.read;
+      ctx.read = async () => {
+        const code = await read();
+        return await transformWebComponent(code);
+      };
+    }
+  };
+}
+
 function ConfigHMRPlugin(ctx) {
   const { ready, uno } = ctx;
   return {
@@ -495,6 +587,8 @@ function UnocssPlugin(configOrPath, defaults = {}) {
     plugins.push(PerModuleModePlugin(ctx));
   } else if (mode === "vue-scoped") {
     plugins.push(VueScopedPlugin(ctx));
+  } else if (mode === "shadow-dom") {
+    plugins.push(ShadowDomModuleModePlugin(ctx));
   } else if (mode === "global") {
     plugins.push(...GlobalModePlugin(ctx));
   } else if (mode === "dist-chunk") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/vite",
-  "version": "0.16.1",
+  "version": "0.17.2",
   "description": "The Vite plugin for UnoCSS",
   "keywords": [
     "unocss",
@@ -34,14 +34,14 @@
     "dist"
   ],
   "dependencies": {
-    "@rollup/pluginutils": "^4.1.1",
-    "@unocss/config": "0.16.1",
-    "@unocss/core": "0.16.1",
-    "@unocss/inspector": "0.16.1",
-    "@unocss/scope": "0.16.1"
+    "@rollup/pluginutils": "^4.1.2",
+    "@unocss/config": "0.17.2",
+    "@unocss/core": "0.17.2",
+    "@unocss/inspector": "0.17.2",
+    "@unocss/scope": "0.17.2"
   },
   "devDependencies": {
-    "vite": "^2.7.1"
+    "vite": "^2.7.4"
   },
   "scripts": {
     "build": "unbuild",