unocss升级 esm-only

docs-vitepress/api/compile.md

@@ -1710,7 +1710,7 @@ module.exports = defineConfig({
 
 ## MpxUnocssBase
 
-Mpx 内置的 unocss preset，继承自 `@unocss/preset-uno`，并额外提供小程序原子类的预设样式，安装示例如下：
+Mpx 内置的 unocss preset，继承自 `@unocss/preset-wind3`，并额外提供小程序原子类的预设样式，安装示例如下：
 
 ```bash 
 npm install -D @mpxjs/unocss-base

packages/unocss-base/lib/index.js

@@ -1,10 +1,15 @@
-const { presetUno } = require('@unocss/preset-uno')
+import { presetWind3 } from '@unocss/preset-wind3'
+import { presetLegacyCompat } from '@unocss/preset-legacy-compat'
 
 // eslint-disable-next-line
 const remRE = /(-?[\.\d]+)rem/g
 
-module.exports = function presetMpx (options = {}) {
-  const uno = presetUno(options)
+export default function presetMpx (options = {}) {
+  const uno = presetWind3(options)
+  const LegacyCompat = presetLegacyCompat({
+    // commaStyleColorFunction: true,
+    legacyColorSpace: true
+  })
   const { baseFontSize = 37.5 } = options
   return {
     ...uno,
@@ -22,6 +27,7 @@ module.exports = function presetMpx (options = {}) {
             : `${p1 * baseFontSize}rpx`)
         }
       })
+      LegacyCompat.postprocess(util)
     }
   }
 }

packages/unocss-base/package.json

@@ -14,6 +14,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@unocss/preset-uno": "^0.52.7"
+    "@unocss/preset-wind3": "^66.0.0",
+    "@unocss/preset-legacy-compat": "^66.0.0"
   }
 }

packages/unocss-plugin/__tests__/__snapshots__/plugin.test.js.snap

@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`test plugin > test-template 1`] = `"<view class="translate-_bl_-50_p__2c_-50_p__br_ text-12px bg-_h_fff_s_10" />"`;
+
+exports[`test plugin > test-template 2`] = `
+[
+  "translate-[-50%,-50%]",
+  "text-12px",
+  "bg-#fff/10",
+]
+`;
+
+exports[`test plugin > test-template 3`] = `
+"/* layer: default */
+.translate-_bl_-50_p__2c_-50_p__br_{--un-translate-x:-50%;--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.bg-_h_fff_s_10{background-color:rgb(255 255 255 / 0.1);}
+.text-12px{font-size:12px;}"
+`;
+
+exports[`test plugin > test-template 4`] = `"<view wx:class="{{(['translate-_bl_-50_p__br_',{'text-12px text-16px': false},'bg-_h_fff_s_10'])}}" />"`;
+
+exports[`test plugin > test-template 5`] = `
+[
+  "translate-[-50%]",
+  "text-12px",
+  "text-16px",
+  "bg-#fff/10",
+]
+`;
+
+exports[`test plugin > test-template 6`] = `
+"/* layer: default */
+.translate-_bl_-50_p__br_{--un-translate-x:-50%;--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.bg-_h_fff_s_10{background-color:rgb(255 255 255 / 0.1);}
+.text-12px{font-size:12px;}
+.text-16px{font-size:16px;}"
+`;

packages/unocss-plugin/__tests__/plugin.test.js

@@ -0,0 +1,51 @@
+import MpxUnocssPlugin from '../lib/index'
+import { describe, expect, test } from 'vitest'
+import { getRawSource } from '../lib/source.js'
+import { e as cssEscape } from '@unocss/core'
+import { mpEscape } from '../lib/transform.js'
+import presetMpx from '@mpxjs/unocss-base'
+// const { presetLegacyCompat } = require('@unocss/preset-legacy-compat')
+
+// import testpage from './123.mpx?resolve'
+describe('test plugin', async () => {
+  const mode = 'wx'
+  const plugin = new MpxUnocssPlugin({
+    config: {
+      presets: [
+        presetMpx()
+      ]
+    }
+  })
+  const mockCompilation = {
+    fileDependencies: new Set()
+  }
+  const uno = await plugin.createContext(mockCompilation, mode)
+  const parseTemplate = plugin.getTemplateParser(uno)
+  async function testTemplate (content, generateOptions = {
+    preflights: false,
+    safelist: false
+  }) {
+    const source = getRawSource(content)
+    const classmap = {}
+    const { newsource } = parseTemplate(source, (className) => {
+      if (!className) {
+        return className
+      }
+      classmap[className] = true
+      return mpEscape(cssEscape(className), plugin.options.escapeMap)
+    })
+    // 测试模板是否转义
+    expect(newsource.source()).toMatchSnapshot()
+    const classList = Object.keys(classmap)
+    // 测试类名是否正确识别
+    expect(classList).toMatchSnapshot()
+    const list = new Set(classList)
+    const unoFileContent = await plugin.generateStyle(uno, classList, generateOptions)
+    // 测试css输出是否正确
+    expect(unoFileContent).toMatchSnapshot()
+  }
+  test('test-template', async () => {
+    await testTemplate('<view class="translate-[-50%,-50%] text-12px bg-#fff/10" />')
+    await testTemplate(`<view wx:class="{{['translate-[-50%]',{'text-12px text-16px': false},'bg-#fff/10']}}" />`)
+  })
+})

packages/unocss-plugin/lib/index.js

@@ -1,33 +1,22 @@
-const path = require('path')
-const { minimatch } = require('minimatch')
-const unoConfig = require('@unocss/config')
-const core = require('@unocss/core')
-const mpxConfig = require('@mpxjs/webpack-plugin/lib/config')
-const toPosix = require('@mpxjs/webpack-plugin/lib/utils/to-posix')
-const fixRelative = require('@mpxjs/webpack-plugin/lib/utils/fix-relative')
-const parseRequest = require('@mpxjs/webpack-plugin/lib/utils/parse-request')
-const { has } = require('@mpxjs/webpack-plugin/lib/utils/set')
-const MpxWebpackPlugin = require('@mpxjs/webpack-plugin')
-const UnoCSSWebpackPlugin = require('./web-plugin')
-const transformerDirectives = require('@unocss/transformer-directives').default
-const transformerVariantGroup = require('@unocss/transformer-variant-group')
-const {
-  parseClasses,
-  parseStrings,
-  parseMustache,
-  stringifyAttr,
-  parseComments,
-  parseCommentConfig
-} = require('./parser')
-const { getReplaceSource, getConcatSource, getRawSource } = require('./source')
-const {
-  transformStyle,
-  buildAliasTransformer,
-  transformGroups,
-  mpEscape,
-  cssRequiresTransform
-} = require('./transform')
-const platformPreflightsMap = require('./platform')
+import { loadConfig } from '@unocss/config'
+import { createGenerator, e as cssEscape } from '@unocss/core'
+import transformerDirectives from '@unocss/transformer-directives'
+import transformerVariantGroup from '@unocss/transformer-variant-group'
+import path from 'path'
+import { minimatch } from 'minimatch'
+import mpxConfig from '@mpxjs/webpack-plugin/lib/config.js'
+import toPosix from '@mpxjs/webpack-plugin/lib/utils/to-posix.js'
+import fixRelative from '@mpxjs/webpack-plugin/lib/utils/fix-relative.js'
+import parseRequest from '@mpxjs/webpack-plugin/lib/utils/parse-request.js'
+import set from '@mpxjs/webpack-plugin/lib/utils/set.js'
+import MpxWebpackPlugin from '@mpxjs/webpack-plugin'
+import { parseClasses, parseStrings, parseMustache, stringifyAttr, parseComments, parseCommentConfig } from './parser.js'
+import { getReplaceSource, getConcatSource, getRawSource } from './source.js'
+import { transformStyle, buildAliasTransformer, transformGroups, mpEscape, cssRequiresTransform } from './transform.js'
+import platformPreflightsMap from './platform.js'
+import UnoCSSWebpackPlugin from './web-plugin/index.js'
+const { has } = set
+
 const PLUGIN_NAME = 'MpxUnocssPlugin'
 
 function filterFile (file, scan) {
@@ -206,16 +195,16 @@ class MpxUnocssPlugin {
 
   async createContext (compilation, mode) {
     const { root, config, configFiles } = this.options
-    const { config: resolved, sources } = await unoConfig.loadConfig(root, config, configFiles)
+    const { config: resolved, sources } = await loadConfig(root, config, configFiles)
     sources.forEach((item) => {
       compilation.fileDependencies.add(item)
       // fix jiti require cache for watch
-      delete require.cache[item]
+      // delete require.cache[item]
     })
 
     const platformPreflights = platformPreflightsMap[mode] || []
 
-    return core.createGenerator({
+    return await createGenerator({
       ...resolved,
       preflights: [
         ...(resolved.preflights || []),
@@ -224,6 +213,54 @@ class MpxUnocssPlugin {
     })
   }
 
+  getTemplateParser (uno) {
+    // process classes
+    const transformAlias = buildAliasTransformer(uno.config.alias)
+    const transformClasses = (source, classNameHandler = c => c) => {
+      // pre process
+      source = transformAlias(source)
+      if (this.options.transformGroups) {
+        source = transformGroups(source, this.options.transformGroups)
+      }
+      const content = source.source()
+      // escape & fill classesMap
+      return content.split(/\s+/).map(classNameHandler).join(' ')
+    }
+    return (source, classNameHandler) => {
+      source = getReplaceSource(source)
+      const content = source.original().source()
+      parseClasses(content).forEach(({ result, start, end }) => {
+        let { replaced, val } = parseMustache(result, (exp) => {
+          const expSource = getReplaceSource(exp)
+          parseStrings(exp).forEach(({ result, start, end }) => {
+            result = transformClasses(result, classNameHandler)
+            expSource.replace(start, end, result)
+          })
+          return expSource.source()
+        }, str => transformClasses(str, classNameHandler))
+        if (replaced) {
+          val = stringifyAttr(val)
+          source.replace(start - 1, end + 1, val)
+        }
+      })
+      // process comments
+      const commentConfig = {}
+      parseComments(content).forEach(({ result, start, end }) => {
+        Object.assign(commentConfig, parseCommentConfig(result))
+        source.replace(start, end, '')
+      })
+      if (commentConfig.safelist) {
+        this.getSafeListClasses(commentConfig.safelist).forEach((className) => {
+          classNameHandler(className)
+        })
+      }
+      return {
+        newsource: source,
+        commentConfig
+      }
+    }
+  }
+
   apply (compiler) {
     this.minify = isProductionLikeMode(compiler.options)
     // 处理web
@@ -311,29 +348,15 @@ class MpxUnocssPlugin {
         const commentConfigMap = {}
 
         const mainClassesMap = packageClassesMaps.main
-        const cssEscape = core.e
         // config中的safelist视为主包classes
         const safeListClasses = this.getSafeListClasses(config.safelist)
 
         safeListClasses.forEach((className) => {
           mainClassesMap[className] = true
         })
-        const transformAlias = buildAliasTransformer(config.alias)
-        const transformClasses = (source, classNameHandler = c => c) => {
-          // pre process
-          source = transformAlias(source)
-          if (this.options.transformGroups) {
-            source = transformGroups(source, this.options.transformGroups)
-          }
-          const content = source.source()
-          // escape & fill classesMap
-          return content.split(/\s+/).map(classNameHandler).join(' ')
-        }
+        const parseTemplate = this.getTemplateParser(uno)
 
         const processTemplate = async (file, source) => {
-          source = getReplaceSource(source)
-          const content = source.original().source()
-
           const packageName = getPackageName(file)
           const filename = file.slice(0, -templateExt.length)
           const currentClassesMap = packageClassesMaps[packageName] = packageClassesMaps[packageName] || {}
@@ -351,35 +374,9 @@ class MpxUnocssPlugin {
             }
             return mpEscape(cssEscape(className), this.options.escapeMap)
           }
-          parseClasses(content).forEach(({ result, start, end }) => {
-            let { replaced, val } = parseMustache(result, (exp) => {
-              const expSource = getReplaceSource(exp)
-              parseStrings(exp).forEach(({ result, start, end }) => {
-                result = transformClasses(result, classNameHandler)
-                expSource.replace(start, end, result)
-              })
-              return expSource.source()
-            }, str => transformClasses(str, classNameHandler))
-            if (replaced) {
-              val = stringifyAttr(val)
-              source.replace(start - 1, end + 1, val)
-            }
-          })
-          // process comments
-          const commentConfig = {}
-          parseComments(content).forEach(({ result, start, end }) => {
-            Object.assign(commentConfig, parseCommentConfig(result))
-            source.replace(start, end, '')
-          })
-          if (commentConfig.safelist) {
-            this.getSafeListClasses(commentConfig.safelist).forEach((className) => {
-              classNameHandler(className)
-            })
-          }
-
+          const { newsource, commentConfig } = parseTemplate(source, classNameHandler)
           commentConfigMap[filename] = commentConfig
-
-          assets[file] = source
+          assets[file] = newsource
         }
 
         await Promise.all(Object.entries(assets).map(([file, source]) => {
@@ -538,4 +535,4 @@ class MpxUnocssPlugin {
   }
 }
 
-module.exports = MpxUnocssPlugin
+export default MpxUnocssPlugin

packages/unocss-plugin/lib/parser.js

@@ -1,4 +1,4 @@
-const { parseMustache, stringifyAttr } = require('@mpxjs/webpack-plugin/lib/template-compiler/compiler')
+import { parseMustache, stringifyAttr } from '@mpxjs/webpack-plugin/lib/template-compiler/compiler.js'
 
 function parseClasses (content) {
   const output = []
@@ -78,7 +78,7 @@ function parseStrings (content) {
   return output
 }
 
-module.exports = {
+export {
   parseClasses,
   parseStrings,
   parseComments,

packages/unocss-plugin/lib/platform.js

@@ -1,6 +1,6 @@
 // todo 此处进行跨端preflights定义，保障跨端样式表现一致，待补充完善
 // todo 目前不支持声明web preflight，待完善
-module.exports = {
+export default {
   ali: [
     {
       getCSS: () => `

packages/unocss-plugin/lib/source.js

@@ -1,5 +1,5 @@
-const { ReplaceSource, RawSource, ConcatSource, Source } = require('webpack').sources
-
+import webpack from 'webpack'
+const { ReplaceSource, RawSource, ConcatSource, Source } = webpack.sources
 function getRawSource (s) {
   if (s instanceof RawSource) { return s }
   if (s instanceof Source) { return new RawSource(s.source()) }
@@ -17,7 +17,7 @@ function getConcatSource (s) {
   return new ConcatSource(s)
 }
 
-module.exports = {
+export {
   getRawSource,
   getReplaceSource,
   getConcatSource

packages/unocss-plugin/lib/transform.js

@@ -1,6 +1,6 @@
-const MagicString = require('magic-string')
-const transformerDirectives = require('@unocss/transformer-directives').default
-const { getReplaceSource } = require('./source')
+import MagicString from 'magic-string'
+import transformerDirectives from '@unocss/transformer-directives' // default
+import { getReplaceSource } from './source.js'
 const escapedReg = /\\(.)/g
 
 function mpEscape (str, escapeMap = {}) {
@@ -81,7 +81,7 @@ async function transformStyle (
   return code
 }
 
-module.exports = {
+export {
   cssRequiresTransform,
   transformGroups,
   mpEscape,