@unocss/svelte-scoped 0.52.6 → 0.52.7

package/dist/preprocess.cjs

@@ -336,36 +336,20 @@ async function parseUtils(classNames, uno) {
   return foundUtils.flat();
 }
 
-const DEFAULT_APPLY_VARIABLES = ["--at-apply"];
-async function transformApply({ content, uno, prepend, applyVariables, filename }) {
-  applyVariables = core.toArray(applyVariables || DEFAULT_APPLY_VARIABLES);
-  const hasApply = content.includes("@apply") || applyVariables.some((v) => content.includes(v));
-  if (!hasApply)
-    return;
-  const s = new MagicString__default(content);
-  await walkCss({ s, uno, applyVariables });
-  if (!s.hasChanged())
-    return;
-  if (prepend)
-    s.prepend(prepend);
-  return {
-    code: s.toString(),
-    map: s.generateMap({ hires: true, source: filename || "" })
-  };
-}
-async function walkCss(ctx) {
+async function transformApply(ctx) {
   const ast = cssTree.parse(ctx.s.original, {
     parseAtrulePrelude: false,
     positions: true
   });
   if (ast.type !== "StyleSheet")
-    return;
+    return ctx.s;
   const stack = [];
   cssTree.walk(ast, (node) => {
     if (node.type === "Rule")
       stack.push(handleApply(ctx, node));
   });
   await Promise.all(stack);
+  return ctx.s;
 }
 async function handleApply(ctx, node) {
   const parsePromises = node.block.children.map(async (childNode) => {
@@ -391,6 +375,47 @@ function getChildNodeValue(childNode, applyVariables) {
     return removeOuterQuotes(childNode.value.value.trim());
 }
 
+const themeRE = /theme\((.+?)\)/g;
+function transformTheme(s, theme) {
+  return s.replace(themeRE, (_, match) => {
+    const argumentsWithoutQuotes = match.slice(1, -1);
+    return getThemeValue(argumentsWithoutQuotes, theme);
+  });
+}
+function getThemeValue(rawArguments, theme) {
+  const keys = rawArguments.split(".");
+  let current = theme;
+  for (const key of keys) {
+    if (current[key] === void 0)
+      throw new Error(`"${rawArguments}" is not found in your theme`);
+    else
+      current = current[key];
+  }
+  return current;
+}
+
+const DEFAULT_APPLY_VARIABLES = ["--at-apply"];
+async function transformStyle({ content, uno, prepend, applyVariables, filename }) {
+  applyVariables = core.toArray(applyVariables || DEFAULT_APPLY_VARIABLES);
+  const hasApply = content.includes("@apply") || applyVariables.some((v) => content.includes(v));
+  const hasThemeFn = content.match(themeRE);
+  if (!hasApply && !hasThemeFn)
+    return;
+  const s = new MagicString__default(content);
+  if (hasApply)
+    await transformApply({ s, uno, applyVariables });
+  if (hasThemeFn)
+    transformTheme(s, uno.config.theme);
+  if (!s.hasChanged())
+    return;
+  if (prepend)
+    s.prepend(prepend);
+  return {
+    code: s.toString(),
+    map: s.generateMap({ hires: true, source: filename || "" })
+  };
+}
+
 function UnocssSveltePreprocess(options = {}, unoContextFromVite, isViteBuild) {
   if (!options.classPrefix)
     options.classPrefix = "spu-";
@@ -407,7 +432,8 @@ function UnocssSveltePreprocess(options = {}, unoContextFromVite, isViteBuild) {
       const addPreflights = !!attributes["uno:preflights"];
       const addSafelist = !!attributes["uno:safelist"];
       const checkForApply = options.applyVariables !== false;
-      const changeNeeded = addPreflights || addSafelist || checkForApply;
+      const hasThemeFn = content.match(themeRE);
+      const changeNeeded = addPreflights || addSafelist || checkForApply || hasThemeFn;
       if (!changeNeeded)
         return;
       if (!uno)
@@ -419,8 +445,8 @@ function UnocssSveltePreprocess(options = {}, unoContextFromVite, isViteBuild) {
         const { css } = await uno.generate([], { preflights: addPreflights, safelist: addSafelist, minify: true });
         preflightsSafelistCss = css;
       }
-      if (checkForApply) {
-        return await transformApply({
+      if (checkForApply || hasThemeFn) {
+        return await transformStyle({
           content,
           prepend: preflightsSafelistCss,
           uno,

package/dist/preprocess.mjs

@@ -329,36 +329,20 @@ async function parseUtils(classNames, uno) {
   return foundUtils.flat();
 }
 
-const DEFAULT_APPLY_VARIABLES = ["--at-apply"];
-async function transformApply({ content, uno, prepend, applyVariables, filename }) {
-  applyVariables = toArray(applyVariables || DEFAULT_APPLY_VARIABLES);
-  const hasApply = content.includes("@apply") || applyVariables.some((v) => content.includes(v));
-  if (!hasApply)
-    return;
-  const s = new MagicString(content);
-  await walkCss({ s, uno, applyVariables });
-  if (!s.hasChanged())
-    return;
-  if (prepend)
-    s.prepend(prepend);
-  return {
-    code: s.toString(),
-    map: s.generateMap({ hires: true, source: filename || "" })
-  };
-}
-async function walkCss(ctx) {
+async function transformApply(ctx) {
   const ast = parse(ctx.s.original, {
     parseAtrulePrelude: false,
     positions: true
   });
   if (ast.type !== "StyleSheet")
-    return;
+    return ctx.s;
   const stack = [];
   walk(ast, (node) => {
     if (node.type === "Rule")
       stack.push(handleApply(ctx, node));
   });
   await Promise.all(stack);
+  return ctx.s;
 }
 async function handleApply(ctx, node) {
   const parsePromises = node.block.children.map(async (childNode) => {
@@ -384,6 +368,47 @@ function getChildNodeValue(childNode, applyVariables) {
     return removeOuterQuotes(childNode.value.value.trim());
 }
 
+const themeRE = /theme\((.+?)\)/g;
+function transformTheme(s, theme) {
+  return s.replace(themeRE, (_, match) => {
+    const argumentsWithoutQuotes = match.slice(1, -1);
+    return getThemeValue(argumentsWithoutQuotes, theme);
+  });
+}
+function getThemeValue(rawArguments, theme) {
+  const keys = rawArguments.split(".");
+  let current = theme;
+  for (const key of keys) {
+    if (current[key] === void 0)
+      throw new Error(`"${rawArguments}" is not found in your theme`);
+    else
+      current = current[key];
+  }
+  return current;
+}
+
+const DEFAULT_APPLY_VARIABLES = ["--at-apply"];
+async function transformStyle({ content, uno, prepend, applyVariables, filename }) {
+  applyVariables = toArray(applyVariables || DEFAULT_APPLY_VARIABLES);
+  const hasApply = content.includes("@apply") || applyVariables.some((v) => content.includes(v));
+  const hasThemeFn = content.match(themeRE);
+  if (!hasApply && !hasThemeFn)
+    return;
+  const s = new MagicString(content);
+  if (hasApply)
+    await transformApply({ s, uno, applyVariables });
+  if (hasThemeFn)
+    transformTheme(s, uno.config.theme);
+  if (!s.hasChanged())
+    return;
+  if (prepend)
+    s.prepend(prepend);
+  return {
+    code: s.toString(),
+    map: s.generateMap({ hires: true, source: filename || "" })
+  };
+}
+
 function UnocssSveltePreprocess(options = {}, unoContextFromVite, isViteBuild) {
   if (!options.classPrefix)
     options.classPrefix = "spu-";
@@ -400,7 +425,8 @@ function UnocssSveltePreprocess(options = {}, unoContextFromVite, isViteBuild) {
       const addPreflights = !!attributes["uno:preflights"];
       const addSafelist = !!attributes["uno:safelist"];
       const checkForApply = options.applyVariables !== false;
-      const changeNeeded = addPreflights || addSafelist || checkForApply;
+      const hasThemeFn = content.match(themeRE);
+      const changeNeeded = addPreflights || addSafelist || checkForApply || hasThemeFn;
       if (!changeNeeded)
         return;
       if (!uno)
@@ -412,8 +438,8 @@ function UnocssSveltePreprocess(options = {}, unoContextFromVite, isViteBuild) {
         const { css } = await uno.generate([], { preflights: addPreflights, safelist: addSafelist, minify: true });
         preflightsSafelistCss = css;
       }
-      if (checkForApply) {
-        return await transformApply({
+      if (checkForApply || hasThemeFn) {
+        return await transformStyle({
           content,
           prepend: preflightsSafelistCss,
           uno,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unocss/svelte-scoped",
   "type": "module",
-  "version": "0.52.6",
+  "version": "0.52.7",
   "description": "Use UnoCSS in a modular fashion with styles being stored only in the Svelte component they are used in: Vite plugin for apps, preprocessor for component libraries",
   "author": "Jacob Bowdoin",
   "license": "MIT",
@@ -54,8 +54,8 @@
   "dependencies": {
     "css-tree": "^2.3.1",
     "magic-string": "^0.30.0",
-    "@unocss/config": "0.52.6",
-    "@unocss/reset": "0.52.6"
+    "@unocss/config": "0.52.7",
+    "@unocss/reset": "0.52.7"
   },
   "devDependencies": {
     "prettier-plugin-svelte": "^2.10.1",