@lls/vitescripts 2.0.13 → 2.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lls/vitescripts",
3
- "version": "2.0.13",
3
+ "version": "2.0.14",
4
4
  "description": "lls vite plugins",
5
5
  "main": "src/index.mjs",
6
6
  "files": [
@@ -1,3 +1,5 @@
1
+ import { transform as lightTransform } from 'lightningcss'
2
+
1
3
  const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, themeIsNotDarkMode }) => {
2
4
  const keepProperties = [
3
5
  'Supporting',
@@ -53,23 +55,89 @@ const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, theme
53
55
  const maxViewport = (typeof(aMaxviewport) === 'undefined' || /^\s*$/.test(aMaxviewport)) ? 1280 : aMaxviewport
54
56
  return `min(${maxSize}px, max(${minSize}px, calc(${minSize}px + (${maxSize} - ${minSize}) * ((100vw - ${minViewport}px) / (${maxViewport} - ${minViewport})))))`
55
57
  }
58
+
59
+ // lightningcss helpers
60
+ const token = (type) => ({ type: 'token', value: { type } })
61
+ const delim = (operator) => ({ type: 'token', value: { type: 'delim', value: operator } })
62
+ const length = (value, unit) => ({ type: 'length', value: { value, unit } })
63
+ const func = (name, args) => ({ type: 'function', value: { name, arguments: args } })
56
64
  return {
57
65
  enforce: 'pre',
58
66
  transform(src, id) {
59
67
  if (!/module\.css(\?.*)?$/.test(id)) {
60
68
  return undefined
61
69
  }
62
- return src
70
+ const back = src
63
71
  .replace(/@cx\((Body[123]|Heading[1234]|Button[12]|Supporting|RippleEffect|FontFamily)\)/g, replaceKitBag)
64
72
  .replace(/\${(Body[123]|Heading[1234]|Button[12]|Supporting|RippleEffect|FontFamily)}/g, replaceKitBag)
73
+ .replace(/\${(themeIsFreeMode|themeIsDarkMode|themeIsNotDarkMode)}/g, replaceTheme)
74
+ .replace(/@llsTheme\((dark|light|free)\)/g, replaceTheme)
65
75
 
66
76
  .replace(/\${getFluidSize\({(.*?)}\)}/gs, replaceGetFluidSize)
67
- .replace(/getFluidSize\((.*?)\)/gs, replaceGetFluidSizeV2)
68
77
  .replace(/\${getTruePx\((.*?)\)}?/g, 'calc(var(--size-index, 1) * $1 * 1px)')
69
- .replace(/getTruePx\((var\(.*?\)|.*?)\)/g, 'calc(var(--size-index, 1) * $1 * 1px)')
70
78
 
71
- .replace(/\${(themeIsFreeMode|themeIsDarkMode|themeIsNotDarkMode)}/g, replaceTheme)
72
- .replace(/@llsTheme\((dark|light|free)\)/g, replaceTheme)
79
+ const { code } = lightTransform({
80
+ code: Buffer.from(back),
81
+ visitor: {
82
+ Function: {
83
+ getTruePx({ arguments: [value] }) {
84
+ return {
85
+ "type":"function",
86
+ "value":{
87
+ "name":"calc",
88
+ arguments: [
89
+ value.type !== 'token' && token('parenthesis-block'),
90
+ value,
91
+ value.type !== 'token' && token('close-parenthesis'),
92
+ delim('*'),
93
+ {"type":"var","value":{"name":{"ident":"--size-index","from":null},"fallback":null}},
94
+ delim('*'),
95
+ length(1, 'px')
96
+ ].filter(Boolean)
97
+ }
98
+ }
99
+ },
100
+ getFluidSize({arguments: [minSize, comma1, maxSize, comma2, iMinViewport, comma3, iMaxViewport]}){
101
+ const minViewport = (typeof(iMinviewport) === 'undefined' || iMinViewport.value?.type === 'comma') ? length(320, 'px') : iMinViewport
102
+ const max = iMinViewport?.value?.type === 'comma' ? comma3 : iMaxViewport
103
+ const maxViewport = typeof(max) === 'undefined' ? length(1280, 'px') : max
104
+ return func('min', [
105
+ maxSize,
106
+ token('comma'),
107
+ func('max', [
108
+ minSize,
109
+ token('comma'),
110
+ func('calc', [
111
+ minSize,
112
+ delim('+'),
113
+ token('parenthesis-block'),
114
+ maxSize,
115
+ delim('-'),
116
+ minSize,
117
+ token('close-parenthesis'),
118
+ delim('*'),
119
+ token('parenthesis-block'),
120
+ token('parenthesis-block'),
121
+ length(100, 'vw'),
122
+ delim('-'),
123
+ minViewport,
124
+ token('close-parenthesis'),
125
+ delim('/'),
126
+ token('parenthesis-block'),
127
+ maxViewport,
128
+ delim('-'),
129
+ minViewport,
130
+ token('close-parenthesis'),
131
+ token('close-parenthesis'),
132
+ ])
133
+ ])
134
+ ])
135
+ }
136
+ }
137
+ }
138
+ })
139
+
140
+ return code.toString()
73
141
  }
74
142
  }
75
143
  }