@lls/vitescripts 2.0.2 → 2.0.4

package/package.json

@@ -1,21 +1,29 @@
 {
   "name": "@lls/vitescripts",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "lls vite plugins",
   "main": "src/index.mjs",
   "files": [
     "src/"
   ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "CONF_ENV=test npx vitest run",
+    "prepare": "husky install || true"
   },
   "dependencies": {
-    "lightningcss": "1.21.5"
+    "lightningcss": "1.22.0"
   },
   "type": "module",
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@lls/eslint-config-lls": "1.1.12"
+    "@lls/eslint-config-lls": "1.1.12",
+    "@lls/lls-kit": "20.1.0",
+    "browserslist": "4.22.1",
+    "husky": "8.0.3",
+    "vitest": "0.34.6"
+  },
+  "peerDependencies": {
+    "@lls/lls-kit": "*"
   }
 }

package/src/index.mjs

@@ -6,3 +6,4 @@ export { default as llsSideRefreshMetaPlugin } from './llsSideRefreshMetaPlugin.
 export { default as llsVitestMockPlugin } from './llsVitestMockPlugin.mjs'
 export { default as llsLadlePlugin } from './llsLadlePlugin.mjs'
 export { default as llsCssModuleMacroPlugin } from './llsCssModuleMacroPlugin.mjs'
+export { default as postBuildAutoprefixerPlugin } from './postBuildAutoprefixerPlugin.mjs'

package/src/llsCssModuleMacroPlugin.mjs

@@ -1,4 +1,21 @@
 const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, themeIsNotDarkMode }) => {
+  const keepProperties = [
+    'Supporting',
+    'Button1',
+    'Button2',
+    'Body1',
+    'Body2',
+    'Body3',
+    'RippleEffect',
+    'Heading1',
+    'Heading2',
+    'Heading3',
+    'Heading4'
+  ]
+  const kitBag = await import('@lls/lls-kit')
+    .then(m => m.default || m)
+    .then(obj => Object.fromEntries(keepProperties.map(property => [property, obj[property]])))
+
   const cssMacroTheme = {
     themeIsFreeMode,
     themeIsDarkMode,
@@ -11,6 +28,20 @@ const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, theme
         return undefined
       }
       return src
+        .replace(/\${(Body[123]|Heading[123])}/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>.+?)(?=[, ]|$)/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]

package/src/postBuildAutoprefixerPlugin.mjs

@@ -0,0 +1,14 @@
+import fs from 'fs'
+
+const esbuildAutoprefixerPlugin = async ({ from, to }) => {
+  const [{ transform, browserslistToTargets }, browserslist] = await Promise.all([import('lightningcss'), import('browserslist').then(m => m.default)])
+  const contents = await fs.promises.readFile(from).then(async buf => {
+    const {code} = transform({
+      code: buf,
+      targets: browserslistToTargets(browserslist('cover 99.5%'))
+    })
+    return code.toString()
+  })
+  return fs.promises.writeFile(to, contents)
+}
+export default esbuildAutoprefixerPlugin