Feat rn atomic css

legacy/windicss-plugin/lib/index.js

@@ -165,7 +165,7 @@ class MpxWindicssPlugin {
     if (filepath) {
       compilation.fileDependencies.add(filepath)
       // fix jiti require cache for watch
-      delete require.cache[filepath]
+      // delete require.cache[filepath]
     }
 
     if (!config) {

package.json

@@ -32,11 +32,14 @@
     "eslint-plugin-jest": "^27.0.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.1",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.2.0",
     "lerna": "^8.1.8",
     "typescript": "^4.1.3",
-    "vuepress": "^1.9.7"
+    "vuepress": "^1.9.7",
+    "vue-template-compiler": "^2.7.16",
+    "webpack": "^4.47.0"
   },
   "workspaces": [
     "packages/*"

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -1,5 +1,5 @@
 import { isObject, isArray, dash2hump, cached, isEmptyObject } from '@mpxjs/utils'
-import { Dimensions, StyleSheet } from 'react-native'
+import { Dimensions, StyleSheet, Appearance } from 'react-native'
 
 let { width, height } = Dimensions.get('screen')
 
@@ -43,35 +43,6 @@ function formatValue (value) {
 
 global.__formatValue = formatValue
 
-const escapeReg = /[()[\]{}#!.:,%'"+$]/g
-const escapeMap = {
-  '(': '_pl_',
-  ')': '_pr_',
-  '[': '_bl_',
-  ']': '_br_',
-  '{': '_cl_',
-  '}': '_cr_',
-  '#': '_h_',
-  '!': '_i_',
-  '/': '_s_',
-  '.': '_d_',
-  ':': '_c_',
-  ',': '_2c_',
-  '%': '_p_',
-  '\'': '_q_',
-  '"': '_dq_',
-  '+': '_a_',
-  $: '_si_'
-}
-
-const mpEscape = cached((str) => {
-  return str.replace(escapeReg, function (match) {
-    if (escapeMap[match]) return escapeMap[match]
-    // unknown escaped
-    return '_u_'
-  })
-})
-
 function concat (a = '', b = '') {
   return a ? b ? (a + ' ' + b) : a : b
 }
@@ -168,24 +139,39 @@ export default function styleHelperMixin () {
         return concat(staticClass, stringifyDynamicClass(dynamicClass))
       },
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
-        const result = {}
+        let result = {}
+        let unoResult = {}
+        const unoVarResult = {}
         const classMap = this.__getClassMap?.() || {}
+        const { unoClassMap = {}, unoVarClassMap = {}, unoPreflightsClassMap = {} } = global.__getUnoClass?.() || {}
+        let hasUnoClass = false
         const appClassMap = global.__getAppClassMap?.() || {}
-
         if (staticClass || dynamicClass) {
-          // todo 当前为了复用小程序unocss产物，暂时进行mpEscape，等后续正式支持unocss后可不进行mpEscape
-          const classString = mpEscape(concat(staticClass, stringifyDynamicClass(dynamicClass)))
+          const classString = concat(staticClass, stringifyDynamicClass(dynamicClass))
           classString.split(/\s+/).forEach((className) => {
             if (classMap[className]) {
               Object.assign(result, classMap[className])
             } else if (appClassMap[className]) {
               // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除
               Object.assign(result, appClassMap[className])
+            } else if (unoClassMap[className]) {
+              hasUnoClass = true
+              Object.assign(unoResult, unoClassMap[className])
+            } else if (unoVarClassMap[className]) {
+              Object.assign(unoVarResult, unoVarClassMap[className])
             } else if (isObject(this.__props[className])) {
               // externalClasses必定以对象形式传递下来
               Object.assign(result, this.__props[className])
             }
           })
+          if (hasUnoClass) {
+            // 两个类需要前置默认css变量
+            if (unoResult.transform || unoResult.filter) {
+              unoResult = Object.assign({}, unoPreflightsClassMap, unoResult)
+            }
+            // 合并uno工具变量
+            result = Object.assign({}, unoResult, unoVarResult, result)
+          }
         }
 
         if (staticStyle || dynamicStyle) {
@@ -198,8 +184,38 @@ export default function styleHelperMixin () {
             display: 'none'
           })
         }
-
         return isEmptyObject(result) ? empty : result
+      },
+      __getDynamicClass (dynamicClass, mediaQueryClass) {
+        return [dynamicClass, this.__getMediaQueryClass(mediaQueryClass)]
+      },
+      __getMediaQueryClass (mediaQueryClass = []) {
+        if (!mediaQueryClass.length) return ''
+        const { width, height } = Dimensions.get('screen')
+        const colorScheme = Appearance.getColorScheme()
+        const { unoBreakpoints } = global.__getUnoClass?.() || {}
+        const { entries = [], entriesMap = {} } = unoBreakpoints
+        return mediaQueryClass.map(([className, querypoints = []]) => {
+          const res = querypoints.every(([prefix = '', point = 0]) => {
+            if (prefix === 'landscape') return width > height
+            if (prefix === 'portrait') return width <= height
+            if (prefix === 'dark') return colorScheme === 'dark'
+            if (prefix === 'light') return colorScheme === 'light'
+            const size = formatValue(entriesMap[point] || point)
+            const index = entries.findIndex(item => item[0] === point)
+            const isGtPrefix = prefix.startsWith('min-')
+            const isLtPrefix = prefix.startsWith('lt-') || prefix.startsWith('<') || prefix.startsWith('max-')
+            const isAtPrefix = prefix.startsWith('at-') || prefix.startsWith('~')
+            if (isGtPrefix) return width > size
+            if (isLtPrefix) return width < size
+            if (isAtPrefix && (index && index < entries.length - 1)) {
+              return width >= size && width < formatValue(entries[index + 1][1])
+            }
+            return width > size
+          })
+
+          return res ? className : ''
+        })
       }
     }
   }

packages/unocss-base/lib/index.js

@@ -1,11 +1,24 @@
-const { presetUno } = require('@unocss/preset-uno')
+import { presetUno } from '@unocss/preset-uno'
+import presetLegacyCompat from '@unocss/preset-legacy-compat'
+import presetRn from '../preset-rn/index.js'
 
 // eslint-disable-next-line
 const remRE = /(-?[\.\d]+)rem/g
 
-module.exports = function presetMpx (options = {}) {
+export default function presetMpx (options = {}) {
+  const mpxCurrentTargetMode = process.env.MPX_CURRENT_TARGET_MODE
+  const isReact = mpxCurrentTargetMode === 'ios' || mpxCurrentTargetMode === 'android'
+  const extraPresets = []
+  if (isReact) {
+    extraPresets.push(presetRn())
+    extraPresets.push(presetLegacyCompat({
+      commaStyleColorFunction: true
+    }))
+    options.dark = 'media'
+  }
   const uno = presetUno(options)
   const { baseFontSize = 37.5 } = options
+
   return {
     ...uno,
     name: '@mpxjs/unocss-base',
@@ -17,11 +30,12 @@ module.exports = function presetMpx (options = {}) {
       util.entries.forEach((i) => {
         const value = i[1]
         if (typeof value === 'string' && remRE.test(value)) {
-          i[1] = value.replace(remRE, (_, p1) => process.env.MPX_CURRENT_TARGET_MODE === 'web'
+          i[1] = value.replace(remRE, (_, p1) => mpxCurrentTargetMode === 'web'
             ? `${p1 * baseFontSize * (100 / 750).toFixed(8)}vw`
             : `${p1 * baseFontSize}rpx`)
         }
       })
-    }
+    },
+    presets: extraPresets
   }
 }

packages/unocss-base/package.json

@@ -6,6 +6,7 @@
   "directories": {
     "lib": "lib"
   },
+  "type": "module",
   "scripts": {},
   "author": "",
   "license": "Apache-2.0",
@@ -14,6 +15,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@unocss/preset-uno": "^0.52.7"
+    "@unocss/preset-uno": "^0.65.1",
+    "@unocss/preset-legacy-compat": "^0.65.1"
   }
 }

packages/unocss-base/preset-rn/index.js

@@ -0,0 +1,49 @@
+import rules, { blocklistRules } from './rules/index.js'
+import { normalizeTransfromVar } from './rules/transforms.js'
+import theme from './theme.js'
+import blocklistVariants from './variants/index.js'
+import { transformBase } from '@unocss/preset-mini/rules'
+import { filterBase } from '@unocss/preset-wind/rules'
+
+function normalizePreflightBase (preflightBase) {
+  normalizeTransfromVar(preflightBase)
+  return preflightBase
+}
+
+function preflights () {
+  return [
+    {
+      layer: 'preflights',
+      getCSS ({ theme, generator }) {
+        generator._mpx2rnUnoPreflightBase = {
+          ...normalizePreflightBase(transformBase),
+          ...filterBase
+        }
+      }
+    }
+  ]
+}
+
+function postprocess (utilsObject) {
+  const everyIsVar = utilsObject.entries.every(v => {
+    return v[0].startsWith('--un')
+  })
+  if (everyIsVar) {
+    utilsObject.layer = 'varUtilities'
+  }
+  return utilsObject
+}
+
+export default function presetRnMpx () {
+  return {
+    name: '@mpxjs/unocss-preset-rn',
+    rules,
+    theme,
+    preflights: preflights(),
+    postprocess: [postprocess],
+    blocklist: [
+      ...blocklistRules,
+      ...blocklistVariants
+    ]
+  }
+}

packages/unocss-base/preset-rn/rules/align.js

@@ -0,0 +1,31 @@
+import { verticalAligns } from '@unocss/preset-mini/rules'
+
+const support = [
+  'mid',
+  'start',
+  'btm',
+  'end',
+  'auto',
+  'top',
+  'bottom',
+  'middle'
+]
+
+const verticalAlignsRules = verticalAligns.map(([rule]) => (raw) => {
+  const result = raw.match(rule)
+  if (result && !support.includes(result[1])) {
+    return true
+  }
+})
+
+const textAligns = [
+  'text-start',
+  'text-end',
+  'text-align-start',
+  'text-align-end'
+]
+
+export {
+  verticalAlignsRules as verticalAligns,
+  textAligns
+}

packages/unocss-base/preset-rn/rules/animation.js

@@ -0,0 +1 @@
+export { animations } from '@unocss/preset-wind/rules'

packages/unocss-base/preset-rn/rules/background.js

@@ -0,0 +1,23 @@
+const backgroundStyles = [
+  // attachments
+  'bg-fixed',
+  'bg-locale',
+  'bg-scroll',
+  // repeat
+  'bg-repeat',
+  'bg-repeat-x',
+  'bg-repeat-y',
+  'bg-repeat-round',
+  'bg-repeat-space',
+  // origins
+  'bg-origin-border',
+  'bg-origin-padding',
+  'bg-origin-content',
+  // clips
+  'bg-clip-border',
+  'bg-clip-content',
+  'bg-clip-padding',
+  'bg-clip-text'
+]
+
+export { backgroundStyles }

packages/unocss-base/preset-rn/rules/behaviors.js

@@ -0,0 +1,13 @@
+import { imageRenderings, overscrolls, listStyle, accents, carets } from '@unocss/preset-wind/rules'
+import { appearance, outline, willChange } from '@unocss/preset-mini/rules'
+
+export default [
+  ...overscrolls,
+  ...imageRenderings,
+  ...listStyle,
+  ...outline,
+  ...willChange,
+  ...appearance,
+  ...accents,
+  ...carets
+]

packages/unocss-base/preset-rn/rules/border.js

@@ -0,0 +1,23 @@
+import { borders } from '@unocss/preset-mini/rules'
+
+const unSupport = [
+  's',
+  'e',
+  'bs',
+  'be',
+  'is',
+  'ie',
+  'block',
+  'inline'
+]
+
+const bordersRules = borders.map(([rule]) => (raw) => {
+  const result = raw.match(rule)
+  if (raw === 'border-double') {
+    return true
+  } else if (result && unSupport.includes(result[1])) {
+    return true
+  }
+})
+
+export default bordersRules

packages/unocss-base/preset-rn/rules/color.js

@@ -0,0 +1 @@
+export { colorScheme } from '@unocss/preset-mini/rules'

packages/unocss-base/preset-rn/rules/columns.js

@@ -0,0 +1 @@
+export { columns } from '@unocss/preset-wind/rules'

packages/unocss-base/preset-rn/rules/container.js

@@ -0,0 +1,7 @@
+import { containerParent } from '@unocss/preset-mini/rules'
+import { container } from '@unocss/preset-wind/rules'
+
+export {
+  containerParent,
+  container
+}