@lls/vitescripts 2.0.13 → 2.0.15

package/package.json

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

package/src/esbuildCssModulePlugin.mjs

@@ -1,4 +1,5 @@
 import fs from 'fs'
+import path from 'path'
 import llsCssModuleMacroPlugin from './llsCssModuleMacroPlugin.mjs'
 import { cssModules } from 'esbuild-plugin-lightningcss-modules'
 
@@ -8,22 +9,34 @@ export default ({ prefix = '', llsCssModuleMacroPluginArg }) => {
     drafts: { nesting: true },
     cssModulesPattern: `${prefix ? prefix + '-' : ''}[hash]-[local]`
   })
+  const tmpDir = path.join(process.cwd(), 'tmp_esbuild')
   return [
     {
       name: 'lls-cssmodule',
         async setup(build) {
+
+        await fs.promises.mkdir(tmpDir, { recursive: true })
         const llsCssModuleMacroPluginInstance = await llsCssModuleMacroPlugin(llsCssModuleMacroPluginArg)
+
+        // need to add the generated files to esbuild pipeline
+        build.onResolve({ filter: /tmp_esbuild/ }, async args => {
+          return { path: args.path }
+        })
         build.onLoad({ filter: /module\.css$/ }, async args => {
-          if (args.path.startsWith('/tmp')) return
+          if (args.path.startsWith(tmpDir)) return
           const contents = await fs.promises.readFile(args.path, 'utf8').then(str => llsCssModuleMacroPluginInstance.transform(str, args.path))
           const id = args.path.replace(process.cwd(), '').replace(/\//g, '_')
-          const outName = `/tmp/${id}`
-          await fs.promises.writeFile(outName, contents)
+
+          const out = path.join(tmpDir, id)
+          await fs.promises.writeFile(out, contents)
           return {
-            contents: `export { default } from '${outName}'`,
+            contents: `export { default } from '${out}'`,
             loader: 'js'
           }
         })
+        build.onDispose(async () => {
+          await fs.promises.rm(tmpDir, { recursive: true })
+        })
       }
     },
     esbuildCssModule

package/src/llsCssModuleMacroPlugin.mjs

@@ -1,3 +1,5 @@
+import { transform as lightTransform } from 'lightningcss'
+
 const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, themeIsNotDarkMode }) => {
   const keepProperties = [
     'Supporting',
@@ -53,23 +55,89 @@ const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, theme
     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})))))`
   }
+
+  // lightningcss helpers
+  const token = (type) => ({ type: 'token', value: { type } })
+  const delim = (operator) => ({ type: 'token', value: { type: 'delim', value: operator } })
+  const length = (value, unit) => ({ type: 'length', value: { value, unit } })
+  const func = (name, args) => ({ type: 'function', value: { name, arguments: args } })
   return {
     enforce: 'pre',
     transform(src, id) {
       if (!/module\.css(\?.*)?$/.test(id)) {
         return undefined
       }
-      return src
+      const back = src
         .replace(/@cx\((Body[123]|Heading[1234]|Button[12]|Supporting|RippleEffect|FontFamily)\)/g, replaceKitBag)
         .replace(/\${(Body[123]|Heading[1234]|Button[12]|Supporting|RippleEffect|FontFamily)}/g, replaceKitBag)
+        .replace(/\${(themeIsFreeMode|themeIsDarkMode|themeIsNotDarkMode)}/g, replaceTheme)
+        .replace(/@llsTheme\((dark|light|free)\)/g, replaceTheme)
 
         .replace(/\${getFluidSize\({(.*?)}\)}/gs, replaceGetFluidSize)
-        .replace(/getFluidSize\((.*?)\)/gs, replaceGetFluidSizeV2)
         .replace(/\${getTruePx\((.*?)\)}?/g, 'calc(var(--size-index, 1) * $1 * 1px)')
-        .replace(/getTruePx\((var\(.*?\)|.*?)\)/g, 'calc(var(--size-index, 1) * $1 * 1px)')
 
-        .replace(/\${(themeIsFreeMode|themeIsDarkMode|themeIsNotDarkMode)}/g, replaceTheme)
-        .replace(/@llsTheme\((dark|light|free)\)/g, replaceTheme)
+      const { code } = lightTransform({
+        code: Buffer.from(back),
+        visitor: {
+          Function: {
+            getTruePx({ arguments: [value] }) {
+              return {
+                "type":"function",
+                "value":{
+                  "name":"calc",
+                  arguments: [
+                    value.type !== 'token' && token('parenthesis-block'),
+                    value,
+                    value.type !== 'token' && token('close-parenthesis'),
+                    delim('*'),
+                    {"type":"var","value":{"name":{"ident":"--size-index","from":null},"fallback":null}},
+                    delim('*'),
+                    length(1, 'px')
+                  ].filter(Boolean)
+                }
+              }
+            },
+            getFluidSize({arguments: [minSize, comma1, maxSize, comma2, iMinViewport, comma3, iMaxViewport]}){
+              const minViewport = (typeof(iMinviewport) === 'undefined' || iMinViewport.value?.type === 'comma') ? length(320, 'px') : iMinViewport
+              const max = iMinViewport?.value?.type === 'comma' ? comma3 : iMaxViewport
+              const maxViewport = typeof(max) === 'undefined' ? length(1280, 'px') : max
+              return func('min', [
+                maxSize,
+                token('comma'),
+                func('max', [
+                  minSize,
+                  token('comma'),
+                  func('calc', [
+                    minSize,
+                    delim('+'),
+                    token('parenthesis-block'),
+                      maxSize,
+                      delim('-'),
+                      minSize,
+                    token('close-parenthesis'),
+                    delim('*'),
+                    token('parenthesis-block'),
+                      token('parenthesis-block'),
+                      length(100, 'vw'),
+                      delim('-'),
+                      minViewport,
+                      token('close-parenthesis'),
+                      delim('/'),
+                      token('parenthesis-block'),
+                      maxViewport,
+                      delim('-'),
+                      minViewport,
+                      token('close-parenthesis'),
+                    token('close-parenthesis'),
+                  ])
+                ])
+              ])
+            }
+          }
+        }
+      })
+
+      return code.toString()
     }
   }
 }