@lls/vitescripts 2.0.7 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/vitescripts",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "lls vite plugins",
   "main": "src/index.mjs",
   "files": [

package/src/llsCssModuleMacroPlugin.mjs

@@ -19,7 +19,37 @@ const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, theme
   const cssMacroTheme = {
     themeIsFreeMode,
     themeIsDarkMode,
-    themeIsNotDarkMode
+    themeIsNotDarkMode,
+    dark: themeIsDarkMode,
+    free: themeIsFreeMode,
+    light: themeIsNotDarkMode
+  }
+  const replaceKitBag = (__, cap) => kitBag[cap]
+  const replaceTheme = (__, cap) => {
+    const back = cssMacroTheme[cap]
+    if (!back) {
+      throw new Error('llsCssModuleMacroPlugin::missing definition for '+ cap)
+    }
+    return back
+  }
+  const replaceGetFluidSize = (__, cap) => {
+    const args = {
+      minViewport: 320, // BREAKPOINT_XXS
+      maxViewport: 1280, // BREAKPOINT_MD
+      minSize: undefined,
+      maxSize: undefined
+    }
+    for (const a of cap.matchAll(/(?<prop>maxSize|minSize|minViewport|maxViewport)\s*:\s*(?<value>.+?)(?=[,]|\s|$)/g)) {
+      args[a.groups.prop] = a.groups.value
+    }
+    const { maxSize, minSize, minViewport, maxViewport} = args
+    return `min(${maxSize}px, max(${minSize}px, calc(${minSize}px + (${maxSize} - ${minSize}) * ((100vw - ${minViewport}px) / (${maxViewport} - ${minViewport})))))`
+  }
+  const replaceGetFluidSizeV2 = (__, cap) => {
+    const [minSize, maxSize, aMinviewport, aMaxviewport] = cap.split(',')
+    const minViewport = (typeof(aMinviewport) === 'undefined' ||  /^\s*$/.test(aMinviewport)) ? 320 : aMinviewport
+    const maxViewport = (typeof(aMaxviewport) === 'undefined' || /^\s*$/.test(aMaxviewport)) ? 1280 : aMaxviewport
+    return `min(${maxSize}px, max(${minSize}px, calc(${minSize}px + (${maxSize} - ${minSize}) * ((100vw - ${minViewport}px) / (${maxViewport} - ${minViewport})))))`
   }
   return {
     enforce: 'pre',
@@ -28,28 +58,16 @@ const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, theme
         return undefined
       }
       return src
-        .replace(/\${(Body[123]|Heading[1234]|Button[12]|Supporting|RippleEffect)}/g, (__, cap) => kitBag[cap])
-        .replace(/\${getFluidSize\({(.*?)}\)}/gs, (__, cap) => {
-          const args = {
-            minViewport: 320, // BREAKPOINT_XXS
-            maxViewport: 1280, // BREAKPOINT_MD
-            minSize: undefined,
-            maxSize: undefined
-          }
-          for (const a of cap.matchAll(/(?<prop>maxSize|minSize|minViewport|maxViewport)\s*:\s*(?<value>.+?)(?=[,]|\s|$)/g)) {
-            args[a.groups.prop] = a.groups.value
-          }
-          const { maxSize, minSize, minViewport, maxViewport} = args
-          return `min(${maxSize}px, max(${minSize}px, calc(${minSize}px + (${maxSize} - ${minSize}) * ((100vw - ${minViewport}px) / (${maxViewport} - ${minViewport})))))`
-        })
-        .replace(/\${getTruePx\((.*?)\)}/g, 'calc(var(--size-index, 1) * $1 * 1px)')
-        .replace(/\${(themeIsFreeMode|themeIsDarkMode|themeIsNotDarkMode)}/g, (__, cap) => {
-          const back = cssMacroTheme[cap]
-          if (!back) {
-            throw new Error('llsCssModuleMacroPlugin::missing definition for '+ cap)
-          }
-          return back
-        })
+        .replace(/@cx\((Body[123]|Heading[1234]|Button[12]|Supporting|RippleEffect)\)/g, replaceKitBag)
+        .replace(/\${(Body[123]|Heading[1234]|Button[12]|Supporting|RippleEffect)}/g, replaceKitBag)
+
+        .replace(/\${getFluidSize\({(.*?)}\)}/gs, replaceGetFluidSize)
+        .replace(/getFluidSize\((.*?)\)/gs, replaceGetFluidSizeV2)
+        .replace(/\${getTruePx\((.*?)\)}?/g, 'calc(var(--size-index, 1) * $1 * 1px)')
+        .replace(/getTruePx\((.*?)\)/g, 'calc(var(--size-index, 1) * $1 * 1px)')
+
+        .replace(/\${(themeIsFreeMode|themeIsDarkMode|themeIsNotDarkMode)}/g, replaceTheme)
+        .replace(/@llsTheme\((dark|light|free)\)/g, replaceTheme)
     }
   }
 }