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) {

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
 }
@@ -170,17 +141,19 @@ export default function styleHelperMixin () {
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
         const result = {}
         const classMap = this.__getClassMap?.() || {}
+        const unoClassMap = global.__getUnoClassMap?.() || {}
         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]) {
+              Object.assign(result, unoClassMap[className])
             } else if (this.__props[className] && isObject(this.__props[className])) {
               // externalClasses必定以对象形式传递下来
               Object.assign(result, this.__props[className])
@@ -198,8 +171,37 @@ 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 { entries, entriesMap } = global.__getUnoBreakpoints()
+        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,20 @@
-const { presetUno } = require('@unocss/preset-uno')
+import { presetUno } from '@unocss/preset-uno'
+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())
+    options.dark = 'media'
+  }
   const uno = presetUno(options)
   const { baseFontSize = 37.5 } = options
+
   return {
     ...uno,
     name: '@mpxjs/unocss-base',
@@ -17,11 +26,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,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@unocss/preset-uno": "^0.52.7"
+    "@unocss/preset-uno": "^0.65.1"
   }
 }

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

@@ -0,0 +1,10 @@
+import rules from './rules/index.js'
+import theme from './theme.js'
+
+export default function presetRnMpx () {
+  return {
+    name: '@mpxjs/unocss-preset-rn',
+    rules,
+    theme
+  }
+}

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

@@ -0,0 +1,38 @@
+import { textAligns, verticalAligns } from '@unocss/preset-mini/rules'
+import { findRawRules, ruleCallback, transformEmptyRule } from '../../utils/index.js'
+
+const support = [
+  'mid',
+  'start',
+  'btm',
+  'end',
+  'auto',
+  'top',
+  'bottom',
+  'middle'
+]
+
+const verticalAlignsRules = verticalAligns.map(v => {
+  const [regex, matcher, ...another] = v
+  return [
+    regex,
+    (...args) => {
+      const [[, v]] = args
+      if (support.includes(v)) return matcher(...args)
+      return ruleCallback(...args)
+    },
+    ...another
+  ]
+})
+
+const textAlignValuesRules = transformEmptyRule(
+  findRawRules(
+    ['text-start', 'text-end', 'text-align-start', 'text-align-end'],
+    textAligns
+  )
+)
+
+export {
+  verticalAlignsRules as verticalAligns,
+  textAlignValuesRules as textAligns
+}

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

@@ -0,0 +1,6 @@
+import { animations } from '@unocss/preset-wind/rules'
+import { transformEmptyRule } from '../../utils/index.js'
+
+const animationsRules = transformEmptyRule(animations)
+
+export { animationsRules as animations }

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

@@ -0,0 +1,21 @@
+import { backgroundStyles } from '@unocss/preset-wind/rules'
+import { findRawRules, transformEmptyRule } from '../../utils/index.js'
+
+// todo background-position 剔除
+const NewBackgroundRules = transformEmptyRule(findRawRules(
+  [
+    // attachments
+    'bg-fixed',
+    'bg-locale',
+    'bg-scroll',
+    // repeat
+    /^bg-repeat-?.*/,
+    // origins
+    /^bg-origin-.*/,
+    // clips
+    /^bg-clip-.*/
+  ],
+  backgroundStyles
+))
+
+export { NewBackgroundRules as backgroundStyles }

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

@@ -0,0 +1,17 @@
+import { imageRenderings, overscrolls, listStyle, accents, carets } from '@unocss/preset-wind/rules'
+import { appearance, outline, willChange } from '@unocss/preset-mini/rules'
+import { transformEmptyRule } from '../../utils/index.js'
+
+export default [
+  ...transformEmptyRule(
+    overscrolls,
+    imageRenderings,
+    listStyle,
+    outline,
+    willChange,
+    appearance,
+    accents,
+    carets,
+    willChange
+  )
+]

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

@@ -0,0 +1,17 @@
+import { borders } from '@unocss/preset-mini/rules'
+import { ruleCallback } from '../../utils/index.js'
+
+const bordersRules = borders.map(v => {
+  const [regex, matcher, ...another] = v
+  return [
+    regex,
+    (...args) => {
+      const [[, a]] = args
+      if (['block', 'inline'].includes(a)) return ruleCallback(...args)
+      return matcher(...args)
+    },
+    ...another
+  ]
+})
+
+export default bordersRules

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

@@ -0,0 +1,6 @@
+import { colorScheme } from '@unocss/preset-mini/rules'
+import { transformEmptyRule } from '../../utils/index.js'
+
+const colorSchemeRules = transformEmptyRule(colorScheme)
+
+export { colorSchemeRules as colorScheme }

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

@@ -0,0 +1,6 @@
+import { columns } from '@unocss/preset-wind/rules'
+import { transformEmptyRule } from '../../utils/index.js'
+
+const columnsRules = transformEmptyRule(columns)
+
+export { columnsRules as columns }

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

@@ -0,0 +1,11 @@
+import { containerParent } from '@unocss/preset-mini/rules'
+import { container } from '@unocss/preset-wind/rules'
+import { transformEmptyRule } from '../../utils/index.js'
+
+const containerParentRules = transformEmptyRule(containerParent)
+const containerRules = transformEmptyRule(container)
+
+export {
+  containerParentRules as containerParent,
+  containerRules as container
+}

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

@@ -0,0 +1,38 @@
+import { textDecorations } from '@unocss/preset-mini/rules'
+import { transformEmptyRule, ruleCallback, findRawRules } from '../../utils/index.js'
+
+const unSupport = [
+  'auto',
+  'from-font',
+  'overline'
+]
+
+const textDecorationsRules = textDecorations.map(v => {
+  const [regex, matcher, ...another] = v
+  if (typeof matcher === 'function') {
+    return [
+      regex,
+      (...args) => {
+        const [[, v]] = args
+        if (unSupport.includes(v)) return ruleCallback(...args)
+        const res = matcher(...args)
+        if (res['text-decoration-thickness'] || res['text-underline-offset']) {
+          return ruleCallback(...args)
+        }
+        return res
+      },
+      ...another
+    ]
+  }
+  return v
+})
+
+const textDecorationsWavyStyle = transformEmptyRule(
+  findRawRules(['underline-wavy', 'decoration-wavy'], textDecorationsRules)
+)
+
+textDecorationsRules.push(...textDecorationsWavyStyle)
+
+export {
+  textDecorationsRules as textDecorations
+}

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

@@ -0,0 +1,6 @@
+import { divides } from '@unocss/preset-wind/rules'
+import { transformEmptyRule } from '../../utils/index.js'
+
+const divideRules = transformEmptyRule(divides)
+
+export { divideRules as divides }