From 68434b227fc97fa34aa10ead7ca7bacb331289da Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Fri, 8 Nov 2024 12:07:21 +0800 Subject: [PATCH 01/59] [feat]rn-atomic-css --- .../builtInMixins/styleHelperMixin.ios.js | 5 +- packages/unocss-base/lib/rn.js | 8 ++ packages/unocss-base/preset-rn/index.js | 5 ++ packages/unocss-base/preset-rn/rules/color.js | 1 + packages/unocss-base/preset-rn/rules/index.js | 7 ++ .../unocss-base/preset-rn/rules/spaceing.js | 3 + packages/unocss-base/preset-rn/theme/index.js | 0 packages/unocss-plugin/lib/index.js | 11 ++- packages/unocss-plugin/lib/rn-plugin/index.js | 80 +++++++++++++++++++ .../webpack-plugin/lib/react/processStyles.js | 8 +- .../webpack-plugin/lib/react/style-helper.js | 7 +- 11 files changed, 126 insertions(+), 9 deletions(-) create mode 100644 packages/unocss-base/lib/rn.js create mode 100644 packages/unocss-base/preset-rn/index.js create mode 100644 packages/unocss-base/preset-rn/rules/color.js create mode 100644 packages/unocss-base/preset-rn/rules/index.js create mode 100644 packages/unocss-base/preset-rn/rules/spaceing.js create mode 100644 packages/unocss-base/preset-rn/theme/index.js create mode 100644 packages/unocss-plugin/lib/rn-plugin/index.js diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js index da5f2ff7f0..107c707ed9 100644 --- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js +++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js @@ -166,6 +166,9 @@ export default function styleHelperMixin () { const result = {} const classMap = {} // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除 + if (isFunction(global.__getUnoClassMap)) { + Object.assign(classMap, global.__getUnoClassMap()); + } if (isFunction(global.__getAppClassMap)) { Object.assign(classMap, global.__getAppClassMap()) } @@ -175,7 +178,7 @@ export default function styleHelperMixin () { 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]) diff --git a/packages/unocss-base/lib/rn.js b/packages/unocss-base/lib/rn.js new file mode 100644 index 0000000000..2713edb78d --- /dev/null +++ b/packages/unocss-base/lib/rn.js @@ -0,0 +1,8 @@ +const presetRn = require('../preset-rn') + +module.exports = function presetRnMpx (options = {}) { + return { + name: '@mpxjs/unocss-preset-rn', + ...presetRn + } +} diff --git a/packages/unocss-base/preset-rn/index.js b/packages/unocss-base/preset-rn/index.js new file mode 100644 index 0000000000..9f5e2c9c35 --- /dev/null +++ b/packages/unocss-base/preset-rn/index.js @@ -0,0 +1,5 @@ +const rules = require('./rules') + +module.exports = { + rules +} diff --git a/packages/unocss-base/preset-rn/rules/color.js b/packages/unocss-base/preset-rn/rules/color.js new file mode 100644 index 0000000000..d7faf17f9b --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/color.js @@ -0,0 +1 @@ +module.exports = [] diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js new file mode 100644 index 0000000000..40e1f27725 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -0,0 +1,7 @@ +const color = require('./color') +const spaceing = require('./spaceing') + +module.exports = [ + ...color, + ...spaceing +] diff --git a/packages/unocss-base/preset-rn/rules/spaceing.js b/packages/unocss-base/preset-rn/rules/spaceing.js new file mode 100644 index 0000000000..11268ae07b --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/spaceing.js @@ -0,0 +1,3 @@ +module.exports = [ + ['m-1', { padding: '40px' }] +] diff --git a/packages/unocss-base/preset-rn/theme/index.js b/packages/unocss-base/preset-rn/theme/index.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/unocss-plugin/lib/index.js b/packages/unocss-plugin/lib/index.js index 01af540984..4f903c39a5 100644 --- a/packages/unocss-plugin/lib/index.js +++ b/packages/unocss-plugin/lib/index.js @@ -7,8 +7,10 @@ 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 { isWeb, isReact } = require('@mpxjs/webpack-plugin/lib/utils/env') const MpxWebpackPlugin = require('@mpxjs/webpack-plugin') const UnoCSSWebpackPlugin = require('./web-plugin') +const UnoCSSRNWebpackPlugin = require('./rn-plugin') const transformerDirectives = require('@unocss/transformer-directives').default const transformerVariantGroup = require('@unocss/transformer-variant-group') const { @@ -234,11 +236,12 @@ class MpxUnocssPlugin { return } const mode = this.mode = mpxPluginInstance.options.mode - if (mode === 'web') { + if (isWeb(mode) || isReact(mode)) { const { webOptions } = this.options - if (!getPlugin(compiler, UnoCSSWebpackPlugin)) { + const webpackPlugin = isReact(mode) ? UnoCSSRNWebpackPlugin : UnoCSSWebpackPlugin + if (!getPlugin(compiler, webpackPlugin)) { // todo 考虑使用options.config/configFiles读取配置对象后再与webOptions合并后传递给UnoCSSWebpackPlugin，保障读取的config对象与mp保持一致 - compiler.options.plugins.push(new UnoCSSWebpackPlugin(webOptions)) + compiler.options.plugins.push(new webpackPlugin(webOptions)) } compiler.hooks.done.tap(PLUGIN_NAME, ({ compilation }) => { for (const dep of compilation.fileDependencies) { @@ -256,7 +259,7 @@ class MpxUnocssPlugin { }, (compilation) => { const { __mpx__: mpx } = compilation mpx.hasUnoCSS = true - if (mode === 'web') return + if (isWeb(mode) || isReact(mode)) return compilation.hooks.processAssets.tapPromise({ name: PLUGIN_NAME, stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js new file mode 100644 index 0000000000..a46c295454 --- /dev/null +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -0,0 +1,80 @@ +const WebpackSources = require('webpack-sources') +const node_path = require('node:path') +const { createContext, normalizeAbsolutePath } = require('../web-plugin/utils') +const { LAYER_MARK_ALL, LAYER_PLACEHOLDER_RE, RESOLVED_ID_RE, getLayerPlaceholder, resolveId, resolveLayer } = require('../web-plugin/consts') +const { getClassMap } = require('@mpxjs/webpack-plugin/lib/react/style-helper') +const shallowStringify = require('@mpxjs/webpack-plugin/lib/utils/shallow-stringify') + +const PLUGIN_NAME = 'unocss:webpack' + +function WebpackPlugin (configOrPath, defaults) { + return { + apply (compiler) { + const ctx = createContext(configOrPath, defaults) + const { uno, filter, transformCache } = ctx + compiler.__unoCtx = ctx + // transform 提取tokens + compiler.options.module.rules.unshift({ + enforce: 'pre', + use: (data) => { + if (data.resource == null) { return [] } + + const id = normalizeAbsolutePath(data.resource + (data.resourceQuery || '')) + if (filter('', id) && !id.match(/\.html$/) && !RESOLVED_ID_RE.test(id)) { + return [{ + loader: node_path.resolve(__dirname, '../web-plugin/transform-loader') + }] + } + + return [] + } + }) + + compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { + compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => { + const { mode, srcMode } = compilation.__mpx__ + // 清空transformCache避免watch修改不生效 + transformCache.clear() + const tokens = new Set() + for (const module of compilation.modules) { + const assetsInfo = module.buildInfo.assetsInfo || new Map() + for (const [, { unocssTokens } = {}] of assetsInfo) { + if (unocssTokens) { + for (const token of unocssTokens) { + tokens.add(token) + } + } + } + } + const result = await uno.generate(tokens, { minify: true }) + const classMap = getClassMap({ + content: result.css, + filename: 'xxx', + mode, + srcMode, + warn: (msg) => { + console.log('RN getClassMap warn is:', msg) + }, + error: (msg) => { + console.log('RN getClassMap error is:', msg) + }, + formatValueFn: 'formatValue' + }) + const files = Object.keys(compilation.assets) + for (const file of files) { + if (file === '*') { return } + let code = compilation.assets[file].source().toString() + let replaced = false + code = code.replace('__unocssMap__', () => { + replaced = true + return shallowStringify(classMap) + }) + if (replaced) { compilation.assets[file] = new WebpackSources.RawSource(code) } + } + }) + }) + } + } +} + +module.exports = WebpackPlugin diff --git a/packages/webpack-plugin/lib/react/processStyles.js b/packages/webpack-plugin/lib/react/processStyles.js index 84d0457da4..32498978ef 100644 --- a/packages/webpack-plugin/lib/react/processStyles.js +++ b/packages/webpack-plugin/lib/react/processStyles.js @@ -23,7 +23,7 @@ module.exports = function (styles, { new Error('[style compiler][' + loaderContext.resource + ']: ' + msg) ) } - const { mode, srcMode } = loaderContext.getMpx() + const { mode, srcMode, hasUnoCSS } = loaderContext.getMpx() async.eachOfSeries(styles, (style, i, callback) => { const scoped = style.scoped || autoScope const extraOptions = { @@ -56,6 +56,12 @@ module.exports = function (styles, { error }) if (ctorType === 'app') { + if (hasUnoCSS) { + output += `global.__getUnoClassMap = function() { + const formatValue = global.__formatValue + return __unocssMap__ + };\n` + } output += `global.__getAppClassMap = function() { return ${shallowStringify(classMap)}; };\n` diff --git a/packages/webpack-plugin/lib/react/style-helper.js b/packages/webpack-plugin/lib/react/style-helper.js index c4bbe46871..c2401275d9 100644 --- a/packages/webpack-plugin/lib/react/style-helper.js +++ b/packages/webpack-plugin/lib/react/style-helper.js @@ -7,9 +7,9 @@ const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/ const hairlineRegExp = /^\s*hairlineWidth\s*$/ const varRegExp = /^--/ const cssPrefixExp = /^-(webkit|moz|ms|o)-/ -function getClassMap ({ content, filename, mode, srcMode, warn, error }) { +function getClassMap ({ content, filename, mode, srcMode, warn, error, formatValueFn }) { const classMap = {} - + formatValueFn = formatValueFn || 'global.__formatValue' const root = postcss.parse(content, { from: filename }) @@ -21,7 +21,8 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) { value = matched[1] needStringify = false } else if (unitRegExp.test(value) || hairlineRegExp.test(value)) { - value = `global.__formatValue(${JSON.stringify(value)})` + // value = `global.__formatValue(${JSON.stringify(value)})` + value = `${formatValueFn}(${JSON.stringify(value)})` needStringify = false } return needStringify ? JSON.stringify(value) : value From a88cdd9b3a75d6850c420a852184c10672ab9d16 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Fri, 8 Nov 2024 12:11:07 +0800 Subject: [PATCH 02/59] [fix]lint --- .../builtInMixins/styleHelperMixin.ios.js | 58 +++++++++---------- packages/unocss-plugin/lib/index.js | 6 +- packages/unocss-plugin/lib/rn-plugin/index.js | 2 +- 3 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js index 107c707ed9..a20443b539 100644 --- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js +++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js @@ -37,34 +37,34 @@ 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_' - }) -}) +// 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 @@ -167,7 +167,7 @@ export default function styleHelperMixin () { const classMap = {} // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除 if (isFunction(global.__getUnoClassMap)) { - Object.assign(classMap, global.__getUnoClassMap()); + Object.assign(classMap, global.__getUnoClassMap()) } if (isFunction(global.__getAppClassMap)) { Object.assign(classMap, global.__getAppClassMap()) diff --git a/packages/unocss-plugin/lib/index.js b/packages/unocss-plugin/lib/index.js index 4f903c39a5..55a10f4ad0 100644 --- a/packages/unocss-plugin/lib/index.js +++ b/packages/unocss-plugin/lib/index.js @@ -238,10 +238,10 @@ class MpxUnocssPlugin { const mode = this.mode = mpxPluginInstance.options.mode if (isWeb(mode) || isReact(mode)) { const { webOptions } = this.options - const webpackPlugin = isReact(mode) ? UnoCSSRNWebpackPlugin : UnoCSSWebpackPlugin - if (!getPlugin(compiler, webpackPlugin)) { + const WebpackPlugin = isReact(mode) ? UnoCSSRNWebpackPlugin : UnoCSSWebpackPlugin + if (!getPlugin(compiler, WebpackPlugin)) { // todo 考虑使用options.config/configFiles读取配置对象后再与webOptions合并后传递给UnoCSSWebpackPlugin，保障读取的config对象与mp保持一致 - compiler.options.plugins.push(new webpackPlugin(webOptions)) + compiler.options.plugins.push(new WebpackPlugin(webOptions)) } compiler.hooks.done.tap(PLUGIN_NAME, ({ compilation }) => { for (const dep of compilation.fileDependencies) { diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js index a46c295454..0e269e2966 100644 --- a/packages/unocss-plugin/lib/rn-plugin/index.js +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -1,7 +1,7 @@ const WebpackSources = require('webpack-sources') const node_path = require('node:path') const { createContext, normalizeAbsolutePath } = require('../web-plugin/utils') -const { LAYER_MARK_ALL, LAYER_PLACEHOLDER_RE, RESOLVED_ID_RE, getLayerPlaceholder, resolveId, resolveLayer } = require('../web-plugin/consts') +const { RESOLVED_ID_RE } = require('../web-plugin/consts') const { getClassMap } = require('@mpxjs/webpack-plugin/lib/react/style-helper') const shallowStringify = require('@mpxjs/webpack-plugin/lib/utils/shallow-stringify') From f9ab9c1744c348f16c72659dae858dc8b3f25f5e Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 14 Nov 2024 11:42:51 +0800 Subject: [PATCH 03/59] [feat]add empty rule transform --- .../unocss-base/preset-rn/rules/background.js | 10 ++++++++++ packages/unocss-base/preset-rn/rules/index.js | 6 +++++- .../unocss-base/preset-rn/rules/typography.js | 11 +++++++++++ packages/unocss-base/utils/index.js | 15 +++++++++++++++ 4 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 packages/unocss-base/preset-rn/rules/background.js create mode 100644 packages/unocss-base/preset-rn/rules/typography.js create mode 100644 packages/unocss-base/utils/index.js diff --git a/packages/unocss-base/preset-rn/rules/background.js b/packages/unocss-base/preset-rn/rules/background.js new file mode 100644 index 0000000000..e22d8ce9a6 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/background.js @@ -0,0 +1,10 @@ +const { genEmptyRule } = require('../../utils/index') + +module.exports = { + ...genEmptyRule( + 'bg-origin-border', + 'bg-origin-padding', + 'bg-origin-content' + // global rules: bg-origin-inherit + ) +} diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index 40e1f27725..102cf3c269 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -1,7 +1,11 @@ const color = require('./color') const spaceing = require('./spaceing') +const typography = require('./typography') +const background = require('./background') module.exports = [ ...color, - ...spaceing + ...spaceing, + ...typography, + ...background ] diff --git a/packages/unocss-base/preset-rn/rules/typography.js b/packages/unocss-base/preset-rn/rules/typography.js new file mode 100644 index 0000000000..73186b922c --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/typography.js @@ -0,0 +1,11 @@ +const { transformEmptyRule } = require('../../utils/index') +const { + textStrokes, + textIndents, + tabSizes, + whitespaces +} = require('@unocss/preset-mini/rules') + +module.exports = [ + ...transformEmptyRule(textIndents, textStrokes, tabSizes, whitespaces) +] diff --git a/packages/unocss-base/utils/index.js b/packages/unocss-base/utils/index.js new file mode 100644 index 0000000000..c1092a9b52 --- /dev/null +++ b/packages/unocss-base/utils/index.js @@ -0,0 +1,15 @@ +const EMPTY = ' ' + +const genEmptyRule = (...rules) => { + return rules.map(r => [r, () => EMPTY]) +} + +const transformEmptyRule = (...rulesArr) => { + return rulesArr.map(rules => rules.map(rule => [rule[0], () => EMPTY])) + .reduce((preV, curV) => preV.concat(curV), []) +} + +module.exports = { + genEmptyRule, + transformEmptyRule +} From e39ec8acb739b842b3598a3c0ad71edf5a9f5748 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 14 Nov 2024 15:08:50 +0800 Subject: [PATCH 04/59] [feat]add warn&errors --- packages/unocss-base/preset-rn/rules/background.js | 4 ++-- packages/unocss-base/utils/index.js | 11 ++++++++--- packages/unocss-plugin/lib/rn-plugin/index.js | 9 ++++++--- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/unocss-base/preset-rn/rules/background.js b/packages/unocss-base/preset-rn/rules/background.js index e22d8ce9a6..a8735f6646 100644 --- a/packages/unocss-base/preset-rn/rules/background.js +++ b/packages/unocss-base/preset-rn/rules/background.js @@ -1,10 +1,10 @@ const { genEmptyRule } = require('../../utils/index') -module.exports = { +module.exports = [ ...genEmptyRule( 'bg-origin-border', 'bg-origin-padding', 'bg-origin-content' // global rules: bg-origin-inherit ) -} +] diff --git a/packages/unocss-base/utils/index.js b/packages/unocss-base/utils/index.js index c1092a9b52..05a3a8dc22 100644 --- a/packages/unocss-base/utils/index.js +++ b/packages/unocss-base/utils/index.js @@ -1,12 +1,17 @@ const EMPTY = ' ' +const ruleCallback = ([match], { generator }) => { + generator._mpx2rnUnsuportedRules = generator._mpx2rnUnsuportedRules || [] + generator._mpx2rnUnsuportedRules.push(match) + return EMPTY +} + const genEmptyRule = (...rules) => { - return rules.map(r => [r, () => EMPTY]) + return rules.map(rule => [rule, ruleCallback]) } const transformEmptyRule = (...rulesArr) => { - return rulesArr.map(rules => rules.map(rule => [rule[0], () => EMPTY])) - .reduce((preV, curV) => preV.concat(curV), []) + return rulesArr.map(rules => rules.map(rule => [rule[0], ruleCallback])).reduce((preV, curV) => preV.concat(curV), []) } module.exports = { diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js index 0e269e2966..ca90bcc7c3 100644 --- a/packages/unocss-plugin/lib/rn-plugin/index.js +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -47,16 +47,19 @@ function WebpackPlugin (configOrPath, defaults) { } } const result = await uno.generate(tokens, { minify: true }) + if (uno._mpx2rnUnsuportedRules && uno._mpx2rnUnsuportedRules.length) { + compilation.errors.push(`[Mpx Unocss]: all those '${uno._mpx2rnUnsuportedRules.join(',')}' class utilities is not supported in react native mode`) + } const classMap = getClassMap({ content: result.css, - filename: 'xxx', + filename: 'mpx2rn-unocss', mode, srcMode, warn: (msg) => { - console.log('RN getClassMap warn is:', msg) + compilation.warnings.push(msg) }, error: (msg) => { - console.log('RN getClassMap error is:', msg) + compilation.errors.push(msg) }, formatValueFn: 'formatValue' }) From 450f76b774f7686dc0a8b6ca7ec4e242d4cfc49b Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 14 Nov 2024 17:38:20 +0800 Subject: [PATCH 05/59] [feat]add shadow rule --- packages/unocss-base/preset-rn/rules/index.js | 4 ++- .../unocss-base/preset-rn/rules/shadow.js | 27 +++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 packages/unocss-base/preset-rn/rules/shadow.js diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index 102cf3c269..1a497eac88 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -2,10 +2,12 @@ const color = require('./color') const spaceing = require('./spaceing') const typography = require('./typography') const background = require('./background') +const shadow = require('./shadow') module.exports = [ ...color, ...spaceing, ...typography, - ...background + ...background, + ...shadow ] diff --git a/packages/unocss-base/preset-rn/rules/shadow.js b/packages/unocss-base/preset-rn/rules/shadow.js new file mode 100644 index 0000000000..d52bda4657 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/shadow.js @@ -0,0 +1,27 @@ +const { boxShadowsBase, boxShadows } = require('@unocss/preset-mini/rules') + +const findShadowColorRule = () => { + return boxShadows.find(rule => { + if (rule[0] instanceof RegExp && rule[0].test('shadow')) { + return rule + } + }) || [] +} + +const shadowColorRule = findShadowColorRule() + +module.exports = [ + [shadowColorRule[0], (match, context) => { + const rawHandler = shadowColorRule[1] + const rawResult = rawHandler(match, context) + if (rawResult['box-shadow']) { + return { + ...boxShadowsBase, + ...rawResult + } + } else { + // 工具类 + return rawResult + } + }] +] From 777dcca7ea07d27557e1076512174843aea52b03 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 14 Nov 2024 17:40:28 +0800 Subject: [PATCH 06/59] [fix]lint --- packages/unocss-base/preset-rn/rules/shadow.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/unocss-base/preset-rn/rules/shadow.js b/packages/unocss-base/preset-rn/rules/shadow.js index d52bda4657..a7f16132a8 100644 --- a/packages/unocss-base/preset-rn/rules/shadow.js +++ b/packages/unocss-base/preset-rn/rules/shadow.js @@ -5,6 +5,7 @@ const findShadowColorRule = () => { if (rule[0] instanceof RegExp && rule[0].test('shadow')) { return rule } + return false }) || [] } From c414f1796bd8e0265b8bd2aad67ec65931de546c Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Tue, 19 Nov 2024 14:45:33 +0800 Subject: [PATCH 07/59] [feat]add more rules --- .../unocss-base/preset-rn/rules/background.js | 24 +++++-- .../unocss-base/preset-rn/rules/behaviors.js | 21 ++++++ .../unocss-base/preset-rn/rules/filters.js | 34 ++++++++++ packages/unocss-base/preset-rn/rules/index.js | 8 ++- .../unocss-base/preset-rn/rules/layout.js | 18 ++++++ .../unocss-base/preset-rn/rules/typography.js | 64 ++++++++++++++++++- packages/unocss-base/utils/index.js | 62 +++++++++++++++++- packages/unocss-plugin/lib/rn-plugin/index.js | 2 +- 8 files changed, 219 insertions(+), 14 deletions(-) create mode 100644 packages/unocss-base/preset-rn/rules/behaviors.js create mode 100644 packages/unocss-base/preset-rn/rules/filters.js create mode 100644 packages/unocss-base/preset-rn/rules/layout.js diff --git a/packages/unocss-base/preset-rn/rules/background.js b/packages/unocss-base/preset-rn/rules/background.js index a8735f6646..ca6e0c9de3 100644 --- a/packages/unocss-base/preset-rn/rules/background.js +++ b/packages/unocss-base/preset-rn/rules/background.js @@ -1,10 +1,20 @@ -const { genEmptyRule } = require('../../utils/index') +const { findRawRules, transformEmptyRule } = require('../../utils/index') +const { rules } = require('@unocss/preset-wind') + +// todo background-position 剔除 +const backgroundRules = findRawRules([ + // attachments + 'bg-fixed', + 'bg-locale', + 'bg-scroll', + // repeat + /^bg-repeat-?.*/, + // origins + /^bg-origin-.*/, + // clips + /^bg-clip-.*/ +], rules) module.exports = [ - ...genEmptyRule( - 'bg-origin-border', - 'bg-origin-padding', - 'bg-origin-content' - // global rules: bg-origin-inherit - ) + ...transformEmptyRule(backgroundRules) ] diff --git a/packages/unocss-base/preset-rn/rules/behaviors.js b/packages/unocss-base/preset-rn/rules/behaviors.js new file mode 100644 index 0000000000..782ebbf96d --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/behaviors.js @@ -0,0 +1,21 @@ +const { rules } = require('@unocss/preset-wind') +const { findRawRules, transformEmptyRule } = require('../../utils') + +const overscrollBehavior = findRawRules(/overscroll-.*/, rules) +const imageRenderings = findRawRules(/image-render-*/, rules) +// todo +// const placeholder = findRawRules('$ placeholder', rules, true) +const staticListStyle = findRawRules(/list-.*/, rules) +const dynamicListStyle = [ + [/^list-(.+?)(?:-(outside|inside))?$/], + [/^list-image-(.+)$/] +] + +module.exports = [ + ...transformEmptyRule( + overscrollBehavior, + imageRenderings, + staticListStyle, + dynamicListStyle + ) +] diff --git a/packages/unocss-base/preset-rn/rules/filters.js b/packages/unocss-base/preset-rn/rules/filters.js new file mode 100644 index 0000000000..533f36e0c1 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/filters.js @@ -0,0 +1,34 @@ +const { rules } = require('@unocss/preset-wind') +const { findRawRules, ruleFallback, isFunction, transformEmptyRule } = require('../../utils') + +// todo filter 只支持部分属性 +const filters = findRawRules([ + 'filter-blur', + 'filter-brightness-1', + 'filter-contrast-1', + 'filter-grayscale-1', + 'filter-hue-rotate-1', + 'filter-invert-1', + 'filter-saturate-1', + 'filter-sepia-1' +], rules, true) + +// backdrop-filter 不支持 +const backdropFilter = findRawRules([ + /^backdrop-filter-*/ +], rules) + +const newFilters = filters.map(item => { + return [item[0], ([match], { generator }) => { + if (/^backdrop/.test(match)) { + return ruleFallback(match, generator) + } else { + return (isFunction(item[1]) && item[1]()) || '' + } + }] +}) + +module.exports = [ + ...newFilters, + ...transformEmptyRule(backdropFilter) +] diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index 1a497eac88..59d30582b2 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -3,11 +3,17 @@ const spaceing = require('./spaceing') const typography = require('./typography') const background = require('./background') const shadow = require('./shadow') +const behaviors = require('./behaviors') +const layout = require('./layout') +const filters = require('./filters') module.exports = [ ...color, ...spaceing, ...typography, ...background, - ...shadow + ...shadow, + ...behaviors, + ...layout, + ...filters ] diff --git a/packages/unocss-base/preset-rn/rules/layout.js b/packages/unocss-base/preset-rn/rules/layout.js new file mode 100644 index 0000000000..cc4950d400 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/layout.js @@ -0,0 +1,18 @@ +const { ruleCallback, ruleFallback } = require('../../utils') + +const overflows = [ + [/^(?:overflow|of)-(.+)$/, ([match, v], { generator }) => { + if (['hidden', 'visiable', 'scroll'].includes(v)) { + return { + overflow: v + } + } else { + return ruleFallback(match, generator) + } + }], + [/^(?:overflow|of)-([xy])-(.+)$/, ruleCallback] +] + +module.exports = [ + ...overflows +] diff --git a/packages/unocss-base/preset-rn/rules/typography.js b/packages/unocss-base/preset-rn/rules/typography.js index 73186b922c..a0329449a1 100644 --- a/packages/unocss-base/preset-rn/rules/typography.js +++ b/packages/unocss-base/preset-rn/rules/typography.js @@ -1,11 +1,69 @@ -const { transformEmptyRule } = require('../../utils/index') +const { transformEmptyRule, findRawRules, ruleFallback } = require('../../utils/index') +const { rules } = require('@unocss/preset-wind') const { textStrokes, textIndents, tabSizes, - whitespaces + whitespaces, + breaks, + textOverflows, + textWraps, + // fontVariantNumeric, + // fontVariantNumericBase, + verticalAligns } = require('@unocss/preset-mini/rules') +// write-orientation & write-mode +const writingOrientationsAndModes = findRawRules(/^write-?.*/, rules) +// hyphens +const hyphens = findRawRules(/^hyphens-.*/, rules) +// decoration +const textDecorations = [ + // size + [/^(?:underline|decoration)-(?:size-)?(.+)$/], // todo size 会命中其他的规则 + [/^(?:underline|decoration)-(auto|from-font)$/], + // offset + [/^(?:underline|decoration)-offset-(.+)$/] +] + +// font-variant-numberic +// const newFontVariantNumberic = fontVariantNumeric.map(item => { +// const rule = item[0] +// const rawResult = item[1]() +// if (rule === 'normal-nums') { +// return item +// } else { +// return [rule, { +// ...fontVariantNumericBase, +// ...rawResult +// }] +// } +// }) + +// vertical-align +const newVerticalAlign = verticalAligns.map(item => { + return [item[0], ([match, v], { generator }) => { + if (['auto', 'top', 'bottom', 'center'].includes(v)) { + return { 'vertical-align': v } + } else { + return ruleFallback(match, generator) + } + }] +}) + module.exports = [ - ...transformEmptyRule(textIndents, textStrokes, tabSizes, whitespaces) + ...transformEmptyRule( + textIndents, + textStrokes, + tabSizes, + whitespaces, + breaks, + textOverflows, + hyphens, + writingOrientationsAndModes, + textDecorations, + textWraps, + // newFontVariantNumberic, + newVerticalAlign + ) ] diff --git a/packages/unocss-base/utils/index.js b/packages/unocss-base/utils/index.js index 05a3a8dc22..69ade8352e 100644 --- a/packages/unocss-base/utils/index.js +++ b/packages/unocss-base/utils/index.js @@ -1,6 +1,22 @@ const EMPTY = ' ' +const isReg = (reg) => { + return reg instanceof RegExp +} + +const isString = (str) => { + return typeof str === 'string' +} + +const isFunction = (fn) => { + return typeof fn === 'function' +} + const ruleCallback = ([match], { generator }) => { + return ruleFallback(match, generator) +} + +const ruleFallback = (match, generator) => { generator._mpx2rnUnsuportedRules = generator._mpx2rnUnsuportedRules || [] generator._mpx2rnUnsuportedRules.push(match) return EMPTY @@ -11,10 +27,52 @@ const genEmptyRule = (...rules) => { } const transformEmptyRule = (...rulesArr) => { - return rulesArr.map(rules => rules.map(rule => [rule[0], ruleCallback])).reduce((preV, curV) => preV.concat(curV), []) + return rulesArr.map(rules => rules.map(rule => { + if (isString(rule[0])) { // staticRule + return [ + [rule[0], null], + [new RegExp(`^${rule[0]}$`), ruleCallback] + ] + } + return [[rule[0], ruleCallback]] + })).reduce((preV, curV) => preV.concat(...curV), []) +} + +const findRawRules = (matcher, rawRules, byReg = false) => { + if (!Array.isArray(matcher)) { + matcher = [matcher] + } + + return matcher.map(m => { + const result = [] + rawRules.forEach(r => { + const tester = r[0] + if (isString(m)) { + if (byReg) { + if (isReg(tester) && tester.test(m)) { + result.push(r) + } + } else { + if (isString(tester) && m === tester) { + result.push(r) + } + } + } else if (isReg(m)) { + if (isString(tester) && m.test(tester)) { + result.push(r) + } + } + }) + return result + }) + .filter(item => !!item.length) + .reduce((preV, curV) => preV.concat(curV), []) } module.exports = { genEmptyRule, - transformEmptyRule + transformEmptyRule, + findRawRules, + ruleFallback, + isFunction } diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js index ca90bcc7c3..cd015ea52f 100644 --- a/packages/unocss-plugin/lib/rn-plugin/index.js +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -48,7 +48,7 @@ function WebpackPlugin (configOrPath, defaults) { } const result = await uno.generate(tokens, { minify: true }) if (uno._mpx2rnUnsuportedRules && uno._mpx2rnUnsuportedRules.length) { - compilation.errors.push(`[Mpx Unocss]: all those '${uno._mpx2rnUnsuportedRules.join(',')}' class utilities is not supported in react native mode`) + compilation.errors.push(`[Mpx Unocss]: all those '${uno._mpx2rnUnsuportedRules.join(', ')}' class utilities is not supported in react native mode`) } const classMap = getClassMap({ content: result.css, From ff99449df145237b5691cab667f15d49346241ae Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 21 Nov 2024 19:20:30 +0800 Subject: [PATCH 08/59] update --- packages/webpack-plugin/lib/template-compiler/compiler.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index bd2c60511f..cec49bae48 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -1066,6 +1066,7 @@ function processStyleReact (el, options) { const dynamicClass = getAndRemoveAttr(el, config[mode].directive.dynamicClass).val let staticClass = getAndRemoveAttr(el, 'class').val || '' staticClass = staticClass.replace(/\s+/g, ' ') + // todo hover:xxx -> hover:class 的处理 let staticHoverClass = '' if (hoverClassReg.test(el.tag)) { From 7e90afefb706bda0074540fba7c278defe911e93 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Fri, 22 Nov 2024 16:47:06 +0800 Subject: [PATCH 09/59] [feat]support hover pseudo class --- .../unocss-base/preset-rn/rules/typography.js | 2 ++ .../{theme/index.js => variants/pseudo.js} | 0 .../webpack-plugin/lib/react/style-helper.js | 2 ++ .../lib/template-compiler/compiler.js | 33 ++++++++++++++++++- 4 files changed, 36 insertions(+), 1 deletion(-) rename packages/unocss-base/preset-rn/{theme/index.js => variants/pseudo.js} (100%) diff --git a/packages/unocss-base/preset-rn/rules/typography.js b/packages/unocss-base/preset-rn/rules/typography.js index a0329449a1..d9a66fda7f 100644 --- a/packages/unocss-base/preset-rn/rules/typography.js +++ b/packages/unocss-base/preset-rn/rules/typography.js @@ -8,6 +8,7 @@ const { breaks, textOverflows, textWraps, + fontSmoothings, // fontVariantNumeric, // fontVariantNumericBase, verticalAligns @@ -63,6 +64,7 @@ module.exports = [ writingOrientationsAndModes, textDecorations, textWraps, + fontSmoothings, // newFontVariantNumberic, newVerticalAlign ) diff --git a/packages/unocss-base/preset-rn/theme/index.js b/packages/unocss-base/preset-rn/variants/pseudo.js similarity index 100% rename from packages/unocss-base/preset-rn/theme/index.js rename to packages/unocss-base/preset-rn/variants/pseudo.js diff --git a/packages/webpack-plugin/lib/react/style-helper.js b/packages/webpack-plugin/lib/react/style-helper.js index c2401275d9..221cfd69ad 100644 --- a/packages/webpack-plugin/lib/react/style-helper.js +++ b/packages/webpack-plugin/lib/react/style-helper.js @@ -77,6 +77,8 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error, formatVal selectors.each(selector => { if (selector.nodes.length === 1 && selector.nodes[0].type === 'class') { classMapKeys.push(selector.nodes[0].value) + } else if (selector.nodes.length === 2 && selector.nodes[0].type === 'class' && selector.nodes[1].type === 'pseudo') { + classMapKeys.push(selector.nodes[0].value + selector.nodes[1].value) } else { error('Only single class selector is supported in react native mode temporarily.') } diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index cec49bae48..e3e1d62197 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -1061,12 +1061,35 @@ function stringifyWithResolveComputed (modelValue) { return result.join('+') } +const pseudoClassUtility = /(hover|active|focus):\S*/ +const groupByPseudo = function (staticClass) { + return staticClass + .split(' ') + .map(item => { + const result = item.match(pseudoClassUtility) + if (result) { + return { + key: result[1], + value: item + ':' + result[1] + } + } + return null + }) + .filter(Boolean) + .reduce((preV, curV) => { + const res = { ...preV } + const { key, value } = curV + res[key] = res[key] || [] + res[key].push(value) + return res + }, {}) +} + function processStyleReact (el, options) { // process class/wx:class/style/wx:style/wx:show for react native const dynamicClass = getAndRemoveAttr(el, config[mode].directive.dynamicClass).val let staticClass = getAndRemoveAttr(el, 'class').val || '' staticClass = staticClass.replace(/\s+/g, ' ') - // todo hover:xxx -> hover:class 的处理 let staticHoverClass = '' if (hoverClassReg.test(el.tag)) { @@ -1074,6 +1097,14 @@ function processStyleReact (el, options) { staticHoverClass = staticHoverClass.replace(/\s+/g, ' ') } + if (options.hasUnoCSS) { + // todo 原有的 class 可以剔除掉 + const unoPseudoClass = groupByPseudo(staticClass) + if (unoPseudoClass.hover) { + staticHoverClass = staticHoverClass + unoPseudoClass.hover.join(' ') + } + } + const dynamicStyle = getAndRemoveAttr(el, config[mode].directive.dynamicStyle).val let staticStyle = getAndRemoveAttr(el, 'style').val || '' staticStyle = staticStyle.replace(/\s+/g, ' ') From 386c0ff49db106411c65c40315d521f75ddb4ff7 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Fri, 22 Nov 2024 16:49:26 +0800 Subject: [PATCH 10/59] [feat]add hasUnoCSS for template compiler --- packages/webpack-plugin/lib/react/processTemplate.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/webpack-plugin/lib/react/processTemplate.js b/packages/webpack-plugin/lib/react/processTemplate.js index 7f1ca743d0..d24a107f6c 100644 --- a/packages/webpack-plugin/lib/react/processTemplate.js +++ b/packages/webpack-plugin/lib/react/processTemplate.js @@ -28,7 +28,8 @@ module.exports = function (template, { externalClasses, checkUsingComponents, autoVirtualHostRules, - customTextRules + customTextRules, + hasUnoCSS } = mpx const { resourcePath } = parseRequest(loaderContext.resource) const builtInComponentsMap = {} @@ -86,7 +87,8 @@ module.exports = function (template, { // web模式下实现抽象组件 componentGenerics, hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules), - isCustomText: matchCondition(resourcePath, customTextRules) + isCustomText: matchCondition(resourcePath, customTextRules), + hasUnoCSS }) if (meta.wxsContentMap) { From 11ddc5bd9a9d01c4ee5d9fc636f2c7ba6f3aade9 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Tue, 3 Dec 2024 14:27:14 +0800 Subject: [PATCH 11/59] [feat]add new rule and upgrade unocss version --- .../builtInMixins/styleHelperMixin.ios.js | 28 ++++ packages/unocss-base/lib/rn.js | 12 +- packages/unocss-base/preset-rn/index.js | 4 +- .../unocss-base/preset-rn/rules/background.js | 8 +- .../unocss-base/preset-rn/rules/behaviors.js | 16 +-- .../unocss-base/preset-rn/rules/filters.js | 18 ++- packages/unocss-base/preset-rn/rules/index.js | 4 +- .../unocss-base/preset-rn/rules/static.js | 6 + .../unocss-base/preset-rn/rules/typography.js | 21 +-- .../unocss-base/preset-rn/variants/index.js | 14 ++ .../unocss-base/preset-rn/variants/pseudo.js | 2 + .../webpack-plugin/lib/react/style-helper.js | 36 ++--- .../lib/template-compiler/compiler.js | 127 ++++++++++++++---- 13 files changed, 214 insertions(+), 82 deletions(-) create mode 100644 packages/unocss-base/preset-rn/rules/static.js create mode 100644 packages/unocss-base/preset-rn/variants/index.js diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js index a20443b539..57df91849e 100644 --- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js +++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js @@ -200,6 +200,34 @@ export default function styleHelperMixin () { }) } return result + }, + __getDynamicClass (dynamicClass, mediaQueryClass) { + return [dynamicClass, this.__getMediaQueryClass(mediaQueryClass)] + }, + __getMediaQueryClass (mediaQueryClass = []) { + if (!mediaQueryClass.length) return '' + // todo 后续可优化，cache 能力 + const { width, height } = Dimensions.get('screen') + const { entries, entriesMap } = global.__getUnoBreakpoints() + return mediaQueryClass.map(([className, breakpoints = []]) => { + const res = breakpoints.every(([prefix = '', point = 0]) => { + if (prefix === 'landscape') return width > height + if (prefix === 'portrait') return width <= height + 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 : '' + }) } } } diff --git a/packages/unocss-base/lib/rn.js b/packages/unocss-base/lib/rn.js index 2713edb78d..abbba748b3 100644 --- a/packages/unocss-base/lib/rn.js +++ b/packages/unocss-base/lib/rn.js @@ -3,6 +3,16 @@ const presetRn = require('../preset-rn') module.exports = function presetRnMpx (options = {}) { return { name: '@mpxjs/unocss-preset-rn', - ...presetRn + ...presetRn, + theme: { + letterSpacing: { + tighter: '-0.5px', + tight: '-0.25px', + normal: '0px', + wide: '0.25px', + wider: '0.5px', + widest: '1px' + } + } } } diff --git a/packages/unocss-base/preset-rn/index.js b/packages/unocss-base/preset-rn/index.js index 9f5e2c9c35..88704e872b 100644 --- a/packages/unocss-base/preset-rn/index.js +++ b/packages/unocss-base/preset-rn/index.js @@ -1,5 +1,7 @@ const rules = require('./rules') +const varaints = require('./variants') module.exports = { - rules + rules, + varaints } diff --git a/packages/unocss-base/preset-rn/rules/background.js b/packages/unocss-base/preset-rn/rules/background.js index ca6e0c9de3..b48fc0aedb 100644 --- a/packages/unocss-base/preset-rn/rules/background.js +++ b/packages/unocss-base/preset-rn/rules/background.js @@ -1,8 +1,8 @@ const { findRawRules, transformEmptyRule } = require('../../utils/index') -const { rules } = require('@unocss/preset-wind') +const { backgroundStyles } = require('@unocss/preset-wind/rules') // todo background-position 剔除 -const backgroundRules = findRawRules([ +const NewBackgroundRules = findRawRules([ // attachments 'bg-fixed', 'bg-locale', @@ -13,8 +13,8 @@ const backgroundRules = findRawRules([ /^bg-origin-.*/, // clips /^bg-clip-.*/ -], rules) +], backgroundStyles) module.exports = [ - ...transformEmptyRule(backgroundRules) + ...transformEmptyRule(NewBackgroundRules) ] diff --git a/packages/unocss-base/preset-rn/rules/behaviors.js b/packages/unocss-base/preset-rn/rules/behaviors.js index 782ebbf96d..73683d32ba 100644 --- a/packages/unocss-base/preset-rn/rules/behaviors.js +++ b/packages/unocss-base/preset-rn/rules/behaviors.js @@ -1,21 +1,13 @@ -const { rules } = require('@unocss/preset-wind') -const { findRawRules, transformEmptyRule } = require('../../utils') +const { imageRenderings, overscrolls, listStyle } = require('@unocss/preset-wind/rules') +const { transformEmptyRule } = require('../../utils') -const overscrollBehavior = findRawRules(/overscroll-.*/, rules) -const imageRenderings = findRawRules(/image-render-*/, rules) // todo // const placeholder = findRawRules('$ placeholder', rules, true) -const staticListStyle = findRawRules(/list-.*/, rules) -const dynamicListStyle = [ - [/^list-(.+?)(?:-(outside|inside))?$/], - [/^list-image-(.+)$/] -] module.exports = [ ...transformEmptyRule( - overscrollBehavior, + overscrolls, imageRenderings, - staticListStyle, - dynamicListStyle + listStyle ) ] diff --git a/packages/unocss-base/preset-rn/rules/filters.js b/packages/unocss-base/preset-rn/rules/filters.js index 533f36e0c1..007ad154d6 100644 --- a/packages/unocss-base/preset-rn/rules/filters.js +++ b/packages/unocss-base/preset-rn/rules/filters.js @@ -1,8 +1,8 @@ -const { rules } = require('@unocss/preset-wind') +const { filters } = require('@unocss/preset-wind/rules') const { findRawRules, ruleFallback, isFunction, transformEmptyRule } = require('../../utils') // todo filter 只支持部分属性 -const filters = findRawRules([ +const newFilters = findRawRules([ 'filter-blur', 'filter-brightness-1', 'filter-contrast-1', @@ -11,14 +11,7 @@ const filters = findRawRules([ 'filter-invert-1', 'filter-saturate-1', 'filter-sepia-1' -], rules, true) - -// backdrop-filter 不支持 -const backdropFilter = findRawRules([ - /^backdrop-filter-*/ -], rules) - -const newFilters = filters.map(item => { +], filters, true).map(item => { return [item[0], ([match], { generator }) => { if (/^backdrop/.test(match)) { return ruleFallback(match, generator) @@ -28,6 +21,11 @@ const newFilters = filters.map(item => { }] }) +// backdrop-filter 不支持 +const backdropFilter = findRawRules([ + /^backdrop-filter-*/ +], filters) + module.exports = [ ...newFilters, ...transformEmptyRule(backdropFilter) diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index 59d30582b2..5ae1afbfa8 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -6,6 +6,7 @@ const shadow = require('./shadow') const behaviors = require('./behaviors') const layout = require('./layout') const filters = require('./filters') +const staticRule = require('./static') module.exports = [ ...color, @@ -15,5 +16,6 @@ module.exports = [ ...shadow, ...behaviors, ...layout, - ...filters + ...filters, + ...staticRule ] diff --git a/packages/unocss-base/preset-rn/rules/static.js b/packages/unocss-base/preset-rn/rules/static.js new file mode 100644 index 0000000000..2653362b60 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/static.js @@ -0,0 +1,6 @@ +const { backgroundBlendModes } = require('@unocss/preset-wind/rules') +const { transformEmptyRule } = require('../../utils/index') + +module.exports = transformEmptyRule( + backgroundBlendModes +) diff --git a/packages/unocss-base/preset-rn/rules/typography.js b/packages/unocss-base/preset-rn/rules/typography.js index d9a66fda7f..c653e7766c 100644 --- a/packages/unocss-base/preset-rn/rules/typography.js +++ b/packages/unocss-base/preset-rn/rules/typography.js @@ -1,5 +1,11 @@ -const { transformEmptyRule, findRawRules, ruleFallback } = require('../../utils/index') -const { rules } = require('@unocss/preset-wind') +const { transformEmptyRule, ruleFallback } = require('../../utils/index') +const { + writingModes, + writingOrientations, + hyphens + // fontVariantNumericBase, + // fontVariantNumeric +} = require('@unocss/preset-wind/rules') const { textStrokes, textIndents, @@ -9,15 +15,9 @@ const { textOverflows, textWraps, fontSmoothings, - // fontVariantNumeric, - // fontVariantNumericBase, verticalAligns } = require('@unocss/preset-mini/rules') -// write-orientation & write-mode -const writingOrientationsAndModes = findRawRules(/^write-?.*/, rules) -// hyphens -const hyphens = findRawRules(/^hyphens-.*/, rules) // decoration const textDecorations = [ // size @@ -27,7 +27,7 @@ const textDecorations = [ [/^(?:underline|decoration)-offset-(.+)$/] ] -// font-variant-numberic +// todo 覆写 font-variant-numberic，和 RN 支持的属性拉齐 // const newFontVariantNumberic = fontVariantNumeric.map(item => { // const rule = item[0] // const rawResult = item[1]() @@ -61,7 +61,8 @@ module.exports = [ breaks, textOverflows, hyphens, - writingOrientationsAndModes, + writingModes, + writingOrientations, textDecorations, textWraps, fontSmoothings, diff --git a/packages/unocss-base/preset-rn/variants/index.js b/packages/unocss-base/preset-rn/variants/index.js new file mode 100644 index 0000000000..562c163a21 --- /dev/null +++ b/packages/unocss-base/preset-rn/variants/index.js @@ -0,0 +1,14 @@ +module.exports = [ + // todo: do something for variants + // { + // name: 'custom-variant-container', + // match(matcher, ctx) { + // if (matcher.startsWith('hover:')) { + // console.log('the sm is:1111', ctx) + // return { + // } + // } + // }, + // order: -1 + // } +] diff --git a/packages/unocss-base/preset-rn/variants/pseudo.js b/packages/unocss-base/preset-rn/variants/pseudo.js index e69de29bb2..f987f0bb6f 100644 --- a/packages/unocss-base/preset-rn/variants/pseudo.js +++ b/packages/unocss-base/preset-rn/variants/pseudo.js @@ -0,0 +1,2 @@ +// todo 确认 +// view 提供了 hover-class。没有提供 focus/active state 。 diff --git a/packages/webpack-plugin/lib/react/style-helper.js b/packages/webpack-plugin/lib/react/style-helper.js index 221cfd69ad..7e556f14ab 100644 --- a/packages/webpack-plugin/lib/react/style-helper.js +++ b/packages/webpack-plugin/lib/react/style-helper.js @@ -7,27 +7,28 @@ const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/ const hairlineRegExp = /^\s*hairlineWidth\s*$/ const varRegExp = /^--/ const cssPrefixExp = /^-(webkit|moz|ms|o)-/ + +function formatValue (value, formatValueFn) { + let matched + let needStringify = true + if ((matched = numberRegExp.exec(value))) { + value = matched[1] + needStringify = false + } else if (unitRegExp.test(value) || hairlineRegExp.test(value)) { + // value = `global.__formatValue(${JSON.stringify(value)})` + value = `${formatValueFn}(${JSON.stringify(value)})` + needStringify = false + } + return needStringify ? JSON.stringify(value) : value +} + function getClassMap ({ content, filename, mode, srcMode, warn, error, formatValueFn }) { const classMap = {} formatValueFn = formatValueFn || 'global.__formatValue' const root = postcss.parse(content, { from: filename }) - - function formatValue (value) { - let matched - let needStringify = true - if ((matched = numberRegExp.exec(value))) { - value = matched[1] - needStringify = false - } else if (unitRegExp.test(value) || hairlineRegExp.test(value)) { - // value = `global.__formatValue(${JSON.stringify(value)})` - value = `${formatValueFn}(${JSON.stringify(value)})` - needStringify = false - } - return needStringify ? JSON.stringify(value) : value - } - + const rulesRunner = getRulesRunner({ mode, srcMode, @@ -97,5 +98,8 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error, formatVal } module.exports = { - getClassMap + getClassMap, + formatValue, + unitRegExp, + numberRegExp } diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index e3e1d62197..5c5e0713e7 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -1061,28 +1061,95 @@ function stringifyWithResolveComputed (modelValue) { return result.join('+') } -const pseudoClassUtility = /(hover|active|focus):\S*/ -const groupByPseudo = function (staticClass) { - return staticClass - .split(' ') - .map(item => { - const result = item.match(pseudoClassUtility) - if (result) { +let unoVariantCached = null +const initVariants = (unoCtx) => { + if (unoVariantCached) return unoVariantCached + const { config } = unoCtx + const separators = config.separators.join('|') + const breakpoints = Object.keys(config.theme.breakpoints).join('|') + const sizePseudoReg = /(max-|min-)\\[([^\\]]*)\]:/ + const breakPointsReg = new RegExp(`([al]t-|[<~]|max-)?(${breakpoints})(?:${separators})`) + const orientationReg = new RegExp(`(landscape|portrait)(?:${separators})`) + const pseudoClassReg = new RegExp(`(hover)(?:${separators})`) // 目前仅处理了 hover 状态 + unoVariantCached = { + sizePseudo: { + rule: sizePseudoReg, + matcher (input) { return { - key: result[1], - value: item + ':' + result[1] + prefix: input[1], + point: input[2] } } - return null - }) - .filter(Boolean) - .reduce((preV, curV) => { - const res = { ...preV } - const { key, value } = curV - res[key] = res[key] || [] - res[key].push(value) - return res - }, {}) + }, + breakPoints: { + rule: breakPointsReg, + matcher (input) { + return { + prefix: input[1], + point: input[2] + } + } + }, + orientation: { + rule: orientationReg, + matcher (input) { + return { + prefix: input[1], + point: '' + } + } + }, + pseudoClassReg + } + return unoVariantCached +} + +function processVariants (staticClass = '', variants) { + const pseudoClass = {} + const pseudoWithMediaQueryClass = [] + const mediaQueryClass = [] + const bReg = [variants.sizePseudo, variants.breakPoints, variants.orientation] + const newStaticClass = staticClass.split(/\s+/).map(rawClass => { + let applied = true + const className = rawClass + const mediaQuery = [] + while (applied) { + applied = false + for (const v of bReg) { + const match = rawClass.match(v.rule) + if (match) { + const { prefix, point } = v.matcher(match) + mediaQuery.push([prefix || '', point]) + rawClass = rawClass.replace(match[0], '') + applied = true + break + } + } + if (!applied) { + break + } + } + const pseudoMatch = rawClass.match(variants.pseudoClassReg) + if (pseudoMatch) { + const pseudo = pseudoMatch[1] + if (mediaQuery.length) { + pseudoWithMediaQueryClass.push([className + ':' + pseudo, mediaQuery]) + } else { + pseudoClass[pseudo] = pseudoClass[pseudo] || [] + pseudoClass[pseudo].push(className + ':' + pseudo) + } + } else if (!pseudoMatch && mediaQuery.length) { + mediaQueryClass.push([className, mediaQuery]) + } + + return (!mediaQuery.length && !pseudoMatch) ? rawClass : '' + }).filter(Boolean).join(' ') + return { + newStaticClass, + pseudoClass, + pseudoWithMediaQueryClass, + mediaQueryClass + } } function processStyleReact (el, options) { @@ -1097,12 +1164,17 @@ function processStyleReact (el, options) { staticHoverClass = staticHoverClass.replace(/\s+/g, ' ') } + let mediaQueryClass = [] + let pseudoWithMediaQueryClass = [] if (options.hasUnoCSS) { - // todo 原有的 class 可以剔除掉 - const unoPseudoClass = groupByPseudo(staticClass) - if (unoPseudoClass.hover) { - staticHoverClass = staticHoverClass + unoPseudoClass.hover.join(' ') + const variants = initVariants(options.unoCtx) + const result = processVariants(staticClass, variants) + staticClass = result.newStaticClass + if (result.pseudoClass.hover) { + staticHoverClass = staticHoverClass + result.pseudoClass.hover.join(' ') } + mediaQueryClass = result.mediaQueryClass + pseudoWithMediaQueryClass = result.pseudoWithMediaQueryClass } const dynamicStyle = getAndRemoveAttr(el, config[mode].directive.dynamicStyle).val @@ -1114,7 +1186,7 @@ function processStyleReact (el, options) { error$1(`Attrs ${config[mode].directive.show} should have a value `) } - if (dynamicClass || staticClass || dynamicStyle || staticStyle || show) { + if (dynamicClass || staticClass || dynamicStyle || staticStyle || show || mediaQueryClass.length) { const staticClassExp = parseMustacheWithContext(staticClass).result const dynamicClassExp = parseMustacheWithContext(dynamicClass).result const staticStyleExp = parseMustacheWithContext(staticStyle).result @@ -1124,15 +1196,16 @@ function processStyleReact (el, options) { addAttrs(el, [{ name: 'style', // runtime helper - value: `{{this.__getStyle(${staticClassExp}, ${dynamicClassExp}, ${staticStyleExp}, ${dynamicStyleExp}${show === undefined ? '' : `, !(${showExp})`})}}` + value: `{{this.__getStyle(${staticClassExp}, ${mediaQueryClass.length ? `this.__getDynamicClass(${dynamicClassExp}, ${stringify(mediaQueryClass)})` : dynamicClassExp} , ${staticStyleExp}, ${dynamicStyleExp}${show === undefined ? '' : `, !(${showExp})`})}}` }]) } - if (staticHoverClass && staticHoverClass !== 'none') { + // todo pseudo element 的动态计算 + if ((staticHoverClass && staticHoverClass !== 'none') || pseudoWithMediaQueryClass.length) { const staticClassExp = parseMustacheWithContext(staticHoverClass).result addAttrs(el, [{ name: 'hover-style', - value: `{{this.__getStyle(${staticClassExp})}}` + value: `{{this.__getStyle(${staticClassExp}, ${pseudoWithMediaQueryClass.length ? `this.__getMediaQueryClass(${stringify(pseudoWithMediaQueryClass)})` : ''})}}` }]) } From 2034a02004c0a554631a93d1703c3c10ec109e78 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Tue, 3 Dec 2024 14:40:39 +0800 Subject: [PATCH 12/59] [update] --- packages/webpack-plugin/lib/react/processStyles.js | 3 +++ packages/webpack-plugin/lib/react/processTemplate.js | 6 ++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/webpack-plugin/lib/react/processStyles.js b/packages/webpack-plugin/lib/react/processStyles.js index 32498978ef..1a108b17d2 100644 --- a/packages/webpack-plugin/lib/react/processStyles.js +++ b/packages/webpack-plugin/lib/react/processStyles.js @@ -57,6 +57,9 @@ module.exports = function (styles, { }) if (ctorType === 'app') { if (hasUnoCSS) { + output += `global.__getUnoBreakpoints = function () { + return __unocssBreakpoints__ + };\n` output += `global.__getUnoClassMap = function() { const formatValue = global.__formatValue return __unocssMap__ diff --git a/packages/webpack-plugin/lib/react/processTemplate.js b/packages/webpack-plugin/lib/react/processTemplate.js index d24a107f6c..0a60f2e42a 100644 --- a/packages/webpack-plugin/lib/react/processTemplate.js +++ b/packages/webpack-plugin/lib/react/processTemplate.js @@ -29,7 +29,8 @@ module.exports = function (template, { checkUsingComponents, autoVirtualHostRules, customTextRules, - hasUnoCSS + hasUnoCSS, + unoCtx } = mpx const { resourcePath } = parseRequest(loaderContext.resource) const builtInComponentsMap = {} @@ -88,7 +89,8 @@ module.exports = function (template, { componentGenerics, hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules), isCustomText: matchCondition(resourcePath, customTextRules), - hasUnoCSS + hasUnoCSS, + unoCtx }) if (meta.wxsContentMap) { From 372ab918c8f3e1077fb0c5513a04ceaf90fe4f86 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Tue, 3 Dec 2024 19:41:35 +0800 Subject: [PATCH 13/59] [feat]support modern rgb/hsl grammer --- .../webpack-plugin/lib/platform/style/wx/index.js | 11 +++++++++++ packages/webpack-plugin/lib/react/style-helper.js | 1 - 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/platform/style/wx/index.js b/packages/webpack-plugin/lib/platform/style/wx/index.js index bf8bf95284..63acead62c 100644 --- a/packages/webpack-plugin/lib/platform/style/wx/index.js +++ b/packages/webpack-plugin/lib/platform/style/wx/index.js @@ -163,8 +163,19 @@ module.exports = function getSpec ({ warn, error }) { } return true } + + // 兼容现代的 rgb(1 1 1 / 0.2)/hsl(360 100% 100% / 1.0) 的写法 + const formatColor = (value) => { + const reg = /(rgb|hsl)(\(\s*(\d+\s+\d+\s+\d+(\s*\/\s*[^)]+))\s*\))/ + value = value.replace(reg, function (match, $1, $2) { + return $1 + 'a' + $2 + }) + return value + } + // prop & value 校验：过滤的不合法的属性和属性值 const verification = ({ prop, value, selector }, { mode }) => { + value = formatColor(value) return verifyProps({ prop, value, selector }, { mode }) && verifyValues({ prop, value, selector }) && ({ prop, value }) } diff --git a/packages/webpack-plugin/lib/react/style-helper.js b/packages/webpack-plugin/lib/react/style-helper.js index 7e556f14ab..ee7d0209e9 100644 --- a/packages/webpack-plugin/lib/react/style-helper.js +++ b/packages/webpack-plugin/lib/react/style-helper.js @@ -28,7 +28,6 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error, formatVal const root = postcss.parse(content, { from: filename }) - const rulesRunner = getRulesRunner({ mode, srcMode, From 99dd414de96c1bd3dfad15441df20e111ecda91e Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 5 Dec 2024 14:57:55 +0800 Subject: [PATCH 14/59] [update]extra code --- packages/unocss-plugin/lib/rn-plugin/index.js | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js index cd015ea52f..a834e1355b 100644 --- a/packages/unocss-plugin/lib/rn-plugin/index.js +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -7,6 +7,8 @@ const shallowStringify = require('@mpxjs/webpack-plugin/lib/utils/shallow-string const PLUGIN_NAME = 'unocss:webpack' +const reLetters = /[a-z]+/gi + function WebpackPlugin (configOrPath, defaults) { return { apply (compiler) { @@ -31,8 +33,10 @@ function WebpackPlugin (configOrPath, defaults) { }) compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { + const mpx = compilation.__mpx__ + const { mode, srcMode } = mpx + mpx.unoCtx = uno compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => { - const { mode, srcMode } = compilation.__mpx__ // 清空transformCache避免watch修改不生效 transformCache.clear() const tokens = new Set() @@ -55,10 +59,10 @@ function WebpackPlugin (configOrPath, defaults) { filename: 'mpx2rn-unocss', mode, srcMode, - warn: (msg) => { + warn: msg => { compilation.warnings.push(msg) }, - error: (msg) => { + error: msg => { compilation.errors.push(msg) }, formatValueFn: 'formatValue' @@ -68,10 +72,22 @@ function WebpackPlugin (configOrPath, defaults) { if (file === '*') { return } let code = compilation.assets[file].source().toString() let replaced = false - code = code.replace('__unocssMap__', () => { - replaced = true - return shallowStringify(classMap) - }) + + code = code + .replace('__unocssMap__', () => { + replaced = true + return shallowStringify(classMap) + }) + .replace('__unocssBreakpoints__', () => { + const breakpoints = uno.config.theme.breakpoints + const entries = Object.entries(breakpoints) + .sort((a, b) => Number.parseInt(a[1].replace(reLetters, '')) - Number.parseInt(b[1].replace(reLetters, ''))) + + return JSON.stringify({ + entries, + entriesMap: breakpoints + }) + }) if (replaced) { compilation.assets[file] = new WebpackSources.RawSource(code) } } }) From 7c9f994b20a2c147e569d918c63ca793dd184f8c Mon Sep 17 00:00:00 2001 From: mater Date: Thu, 5 Dec 2024 20:49:48 +0800 Subject: [PATCH 15/59] feat: upgrade unocss --- packages/unocss-plugin/lib/index.js | 56 +++++++++++-------- packages/unocss-plugin/lib/parser.js | 4 +- packages/unocss-plugin/lib/platform.js | 2 +- packages/unocss-plugin/lib/rn-plugin/index.js | 34 +++++++---- packages/unocss-plugin/lib/source.js | 5 +- packages/unocss-plugin/lib/transform.js | 9 +-- .../unocss-plugin/lib/web-plugin/consts.js | 2 +- .../unocss-plugin/lib/web-plugin/index.js | 36 ++++++++---- .../lib/web-plugin/transform-loader.js | 10 ++-- .../unocss-plugin/lib/web-plugin/utils.js | 42 +++++++------- packages/unocss-plugin/package.json | 1 + .../lib/template-compiler/compiler.js | 4 +- 12 files changed, 122 insertions(+), 83 deletions(-) diff --git a/packages/unocss-plugin/lib/index.js b/packages/unocss-plugin/lib/index.js index 55a10f4ad0..6b5821052c 100644 --- a/packages/unocss-plugin/lib/index.js +++ b/packages/unocss-plugin/lib/index.js @@ -1,35 +1,43 @@ -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 { isWeb, isReact } = require('@mpxjs/webpack-plugin/lib/utils/env') -const MpxWebpackPlugin = require('@mpxjs/webpack-plugin') -const UnoCSSWebpackPlugin = require('./web-plugin') -const UnoCSSRNWebpackPlugin = require('./rn-plugin') -const transformerDirectives = require('@unocss/transformer-directives').default -const transformerVariantGroup = require('@unocss/transformer-variant-group') -const { +import * as path from 'path'; +import { minimatch } from 'minimatch'; +import * as unoConfig from '@unocss/config'; +import * as core from '@unocss/core'; +import * as 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 env from '@mpxjs/webpack-plugin/lib/utils/env.js'; +import MpxWebpackPlugin from '@mpxjs/webpack-plugin'; +import { UnoCSSWebpackPlugin } from './web-plugin/index.js'; +import { UnoCSSRNWebpackPlugin } from './rn-plugin/index.js'; +import transformerDirectives from '@unocss/transformer-directives'; +import * as transformerVariantGroup from '@unocss/transformer-variant-group'; +import { parseClasses, parseStrings, parseMustache, stringifyAttr, parseComments, - parseCommentConfig -} = require('./parser') -const { getReplaceSource, getConcatSource, getRawSource } = require('./source') -const { + parseCommentConfig, +} from './parser.js'; +import { + getReplaceSource, + getConcatSource, + getRawSource +} from './source.js'; +import { transformStyle, buildAliasTransformer, transformGroups, mpEscape, - cssRequiresTransform -} = require('./transform') -const platformPreflightsMap = require('./platform') + cssRequiresTransform, +} from './transform.js'; +import * as platformPreflightsMap from './platform.js'; + +const { has } = set +const { isWeb, isReact } = env + const PLUGIN_NAME = 'MpxUnocssPlugin' function filterFile (file, scan) { @@ -527,4 +535,4 @@ class MpxUnocssPlugin { } } -module.exports = MpxUnocssPlugin +export default MpxUnocssPlugin diff --git a/packages/unocss-plugin/lib/parser.js b/packages/unocss-plugin/lib/parser.js index 1ce02abc72..3966a9ce99 100644 --- a/packages/unocss-plugin/lib/parser.js +++ b/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, diff --git a/packages/unocss-plugin/lib/platform.js b/packages/unocss-plugin/lib/platform.js index 08ba96519b..793a88a20a 100644 --- a/packages/unocss-plugin/lib/platform.js +++ b/packages/unocss-plugin/lib/platform.js @@ -1,6 +1,6 @@ // todo 此处进行跨端preflights定义，保障跨端样式表现一致，待补充完善 // todo 目前不支持声明web preflight，待完善 -module.exports = { +export default { ali: [ { getCSS: () => ` diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js index a834e1355b..3c947d190c 100644 --- a/packages/unocss-plugin/lib/rn-plugin/index.js +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -1,9 +1,13 @@ -const WebpackSources = require('webpack-sources') -const node_path = require('node:path') -const { createContext, normalizeAbsolutePath } = require('../web-plugin/utils') -const { RESOLVED_ID_RE } = require('../web-plugin/consts') -const { getClassMap } = require('@mpxjs/webpack-plugin/lib/react/style-helper') -const shallowStringify = require('@mpxjs/webpack-plugin/lib/utils/shallow-stringify') +import WebpackSources from 'webpack-sources'; +import * as nodePath from 'node:path'; +import { createContext, normalizeAbsolutePath } from '../web-plugin/utils.js'; +import { RESOLVED_ID_RE } from '../web-plugin/consts.js'; +import { getClassMap } from '@mpxjs/webpack-plugin/lib/react/style-helper.js'; +import shallowStringify from '@mpxjs/webpack-plugin/lib/utils/shallow-stringify.js'; +import { fileURLToPath } from 'url'; + +const __filename = fileURLToPath(import.meta.url); // 当前文件的绝对路径 +const __dirname = nodePath.dirname(__filename); // 当前文件的目录路径 const PLUGIN_NAME = 'unocss:webpack' @@ -13,7 +17,7 @@ function WebpackPlugin (configOrPath, defaults) { return { apply (compiler) { const ctx = createContext(configOrPath, defaults) - const { uno, filter, transformCache } = ctx + const { filter, transformCache } = ctx compiler.__unoCtx = ctx // transform 提取tokens compiler.options.module.rules.unshift({ @@ -24,7 +28,7 @@ function WebpackPlugin (configOrPath, defaults) { const id = normalizeAbsolutePath(data.resource + (data.resourceQuery || '')) if (filter('', id) && !id.match(/\.html$/) && !RESOLVED_ID_RE.test(id)) { return [{ - loader: node_path.resolve(__dirname, '../web-plugin/transform-loader') + loader: nodePath.resolve(__dirname, '../web-plugin/transform-loader') }] } @@ -32,11 +36,15 @@ function WebpackPlugin (configOrPath, defaults) { } }) + + compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { const mpx = compilation.__mpx__ const { mode, srcMode } = mpx - mpx.unoCtx = uno + console.log(ctx.ready); + ctx.ready.then(() => mpx.unoCtx = ctx.uno) compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => { + await ctx.ready // 清空transformCache避免watch修改不生效 transformCache.clear() const tokens = new Set() @@ -50,6 +58,7 @@ function WebpackPlugin (configOrPath, defaults) { } } } + const { uno } = ctx const result = await uno.generate(tokens, { minify: true }) if (uno._mpx2rnUnsuportedRules && uno._mpx2rnUnsuportedRules.length) { compilation.errors.push(`[Mpx Unocss]: all those '${uno._mpx2rnUnsuportedRules.join(', ')}' class utilities is not supported in react native mode`) @@ -79,10 +88,9 @@ function WebpackPlugin (configOrPath, defaults) { return shallowStringify(classMap) }) .replace('__unocssBreakpoints__', () => { - const breakpoints = uno.config.theme.breakpoints + const breakpoints = uno.config.theme.breakpoints || {} const entries = Object.entries(breakpoints) .sort((a, b) => Number.parseInt(a[1].replace(reLetters, '')) - Number.parseInt(b[1].replace(reLetters, ''))) - return JSON.stringify({ entries, entriesMap: breakpoints @@ -96,4 +104,6 @@ function WebpackPlugin (configOrPath, defaults) { } } -module.exports = WebpackPlugin +export { + WebpackPlugin as UnoCSSRNWebpackPlugin +} diff --git a/packages/unocss-plugin/lib/source.js b/packages/unocss-plugin/lib/source.js index 2c29592bf9..389aa1b3f0 100644 --- a/packages/unocss-plugin/lib/source.js +++ b/packages/unocss-plugin/lib/source.js @@ -1,4 +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 } @@ -17,7 +18,7 @@ function getConcatSource (s) { return new ConcatSource(s) } -module.exports = { +export { getRawSource, getReplaceSource, getConcatSource diff --git a/packages/unocss-plugin/lib/transform.js b/packages/unocss-plugin/lib/transform.js index bf0daffc95..91fdf0fd3f 100644 --- a/packages/unocss-plugin/lib/transform.js +++ b/packages/unocss-plugin/lib/transform.js @@ -1,6 +1,7 @@ -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'; +import { getReplaceSource } from './source.js'; + const escapedReg = /\\(.)/g function mpEscape (str, escapeMap = {}) { @@ -81,7 +82,7 @@ async function transformStyle ( return code } -module.exports = { +export { cssRequiresTransform, transformGroups, mpEscape, diff --git a/packages/unocss-plugin/lib/web-plugin/consts.js b/packages/unocss-plugin/lib/web-plugin/consts.js index e56289c26c..6d91c54604 100644 --- a/packages/unocss-plugin/lib/web-plugin/consts.js +++ b/packages/unocss-plugin/lib/web-plugin/consts.js @@ -29,7 +29,7 @@ function getLayerPlaceholder (layer) { return `#--unocss--{layer:${layer}}` } -module.exports = { +export { LAYER_MARK_ALL, LAYER_PLACEHOLDER_RE, RESOLVED_ID_RE, diff --git a/packages/unocss-plugin/lib/web-plugin/index.js b/packages/unocss-plugin/lib/web-plugin/index.js index 860e398b32..83e308e0da 100644 --- a/packages/unocss-plugin/lib/web-plugin/index.js +++ b/packages/unocss-plugin/lib/web-plugin/index.js @@ -1,13 +1,25 @@ -const WebpackSources = require('webpack-sources') -const VirtualModulesPlugin = require('webpack-virtual-modules') -const node_path = require('node:path') -const process = require('process') -const fs = require('fs') -const { createContext, getPath, normalizeAbsolutePath } = require('./utils') -const { LAYER_MARK_ALL, LAYER_PLACEHOLDER_RE, RESOLVED_ID_RE, getLayerPlaceholder, resolveId, resolveLayer } = require('./consts') +import * as WebpackSources from 'webpack-sources'; +import VirtualModulesPlugin from 'webpack-virtual-modules'; +import * as nodePath from 'node:path'; +import * as process from 'process'; +import * as fs from 'fs'; +import { + createContext, + getPath, + normalizeAbsolutePath +} from './utils.js'; +import { + LAYER_MARK_ALL, + LAYER_PLACEHOLDER_RE, + RESOLVED_ID_RE, + getLayerPlaceholder, + resolveId, + resolveLayer +} from './consts.js'; + const PLUGIN_NAME = 'unocss:webpack' -const VIRTUAL_MODULE_PREFIX = node_path.resolve(process.cwd(), '_virtual_') +const VIRTUAL_MODULE_PREFIX = nodePath.resolve(process.cwd(), '_virtual_') function WebpackPlugin (configOrPath, defaults) { return { @@ -81,7 +93,7 @@ function WebpackPlugin (configOrPath, defaults) { const id = normalizeAbsolutePath(data.resource + (data.resourceQuery || '')) if (filter('', id) && !id.match(/\.html$/) && !RESOLVED_ID_RE.test(id)) { return [{ - loader: node_path.resolve(__dirname, './transform-loader') + loader: nodePath.resolve(__dirname, './transform-loader') }] } @@ -91,6 +103,7 @@ function WebpackPlugin (configOrPath, defaults) { compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => { + await ctx.ready // 清空transformCache避免watch修改不生效 transformCache.clear() const tokens = new Set() @@ -133,4 +146,7 @@ function getLayer (id) { } return layer } -module.exports = WebpackPlugin + +export { + WebpackPlugin as UnoCSSWebpackPlugin +} diff --git a/packages/unocss-plugin/lib/web-plugin/transform-loader.js b/packages/unocss-plugin/lib/web-plugin/transform-loader.js index fd151e6bf5..6a026906ce 100644 --- a/packages/unocss-plugin/lib/web-plugin/transform-loader.js +++ b/packages/unocss-plugin/lib/web-plugin/transform-loader.js @@ -1,7 +1,7 @@ -const { applyTransformers, isCssId } = require('./utils') -const parseComponent = require('@mpxjs/webpack-plugin/lib/parser') -const genComponentTag = require('@mpxjs/webpack-plugin/lib/utils/gen-component-tag') -const path = require('path') +import { applyTransformers, isCssId } from './utils.js'; +import parseComponent from '@mpxjs/webpack-plugin/lib/parser.js'; +import genComponentTag from '@mpxjs/webpack-plugin/lib/utils/gen-component-tag.js'; +import * as path from 'path'; async function transform (code, map) { const callback = this.async() @@ -78,4 +78,4 @@ async function transform (code, map) { } } -module.exports = transform +export default transform diff --git a/packages/unocss-plugin/lib/web-plugin/utils.js b/packages/unocss-plugin/lib/web-plugin/utils.js index dfdabcc510..26ef9629a9 100644 --- a/packages/unocss-plugin/lib/web-plugin/utils.js +++ b/packages/unocss-plugin/lib/web-plugin/utils.js @@ -1,9 +1,9 @@ -const pluginutils = require('@rollup/pluginutils') -const config = require('@unocss/config') -const core = require('@unocss/core') -const node_path = require('node:path') -const MagicString = require('magic-string') -const remapping = require('@ampproject/remapping') +import * as pluginutils from '@rollup/pluginutils'; +import * as config from '@unocss/config'; +import * as core from '@unocss/core'; +import * as nodePath from 'node:path'; +import MagicString from 'magic-string'; +import remapping from '@ampproject/remapping'; const INCLUDE_COMMENT = '@unocss-include' const IGNORE_COMMENT = '@unocss-ignore' @@ -18,12 +18,22 @@ const cssIdRE = /\.(wxss|acss|css|qss|ttss|jxss|ddss)($|\?)/ function createContext (configOrPath, defaults = {}, extraConfigSources = []) { const root = process.cwd() let rawConfig = {} - const uno = core.createGenerator(rawConfig, defaults) + const ctx = { + get ready () { + return ready + }, + filter, + uno: undefined, + extract, + transformCache: new Map() + } + const unoPromise = core.createGenerator(rawConfig, defaults) let rollupFilter = pluginutils.createFilter(defaultInclude, defaultExclude) const idFilter = pluginutils.createFilter([sfcIdRE, templateIdRE, cssIdRE, core.cssIdRE]) const ready = reloadConfig() async function reloadConfig () { + const uno = ctx.uno = await unoPromise const result = await config.loadConfig(root, configOrPath, extraConfigSources, defaults) rawConfig = result.config uno.setConfig(rawConfig) @@ -65,7 +75,7 @@ function createContext (configOrPath, defaults = {}, extraConfigSources = []) { async function extract (code, id) { const tokens = new Set() - await uno.applyExtractors(code, id, tokens) + await ctx.uno.applyExtractors(code, id, tokens) if (tokens.size > 0) { this.emitFile(id, '', undefined, { skipEmit: true, @@ -84,15 +94,7 @@ function createContext (configOrPath, defaults = {}, extraConfigSources = []) { return code.includes(INCLUDE_COMMENT) || code.includes(CSS_PLACEHOLDER) || rollupFilter(id.replace(/\?v=\w+$/, '')) } - return { - get ready () { - return ready - }, - filter, - uno, - extract, - transformCache: new Map() - } + return ctx } async function applyTransformers (ctx, original, id) { @@ -128,8 +130,8 @@ async function applyTransformers (ctx, original, id) { } function normalizeAbsolutePath (path) { - if (node_path.isAbsolute(path)) { - return node_path.normalize(path) + if (nodePath.isAbsolute(path)) { + return nodePath.normalize(path) } else { return path } @@ -143,7 +145,7 @@ function isCssId (id) { return core.cssIdRE.test(id) || cssIdRE.test(id) } -module.exports = { +export { createContext, applyTransformers, getPath, diff --git a/packages/unocss-plugin/package.json b/packages/unocss-plugin/package.json index 2aa66e4341..4ed70157c2 100644 --- a/packages/unocss-plugin/package.json +++ b/packages/unocss-plugin/package.json @@ -3,6 +3,7 @@ "version": "2.9.54", "description": "mpx unocss webpack plugin", "main": "lib/index.js", + "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index 5c5e0713e7..195957fbec 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -1066,8 +1066,8 @@ const initVariants = (unoCtx) => { if (unoVariantCached) return unoVariantCached const { config } = unoCtx const separators = config.separators.join('|') - const breakpoints = Object.keys(config.theme.breakpoints).join('|') - const sizePseudoReg = /(max-|min-)\\[([^\\]]*)\]:/ + const breakpoints = Object.keys(config.theme.breakpoints || {}).join('|') + const sizePseudoReg = /(max-|min-)\[([^\]]*)\]:/ const breakPointsReg = new RegExp(`([al]t-|[<~]|max-)?(${breakpoints})(?:${separators})`) const orientationReg = new RegExp(`(landscape|portrait)(?:${separators})`) const pseudoClassReg = new RegExp(`(hover)(?:${separators})`) // 目前仅处理了 hover 状态 From 27c13ac9353418bad82a0b2067dc2f812c87f67b Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Fri, 6 Dec 2024 10:51:17 +0800 Subject: [PATCH 16/59] [fix]formatValue --- .../webpack-plugin/lib/react/style-helper.js | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/webpack-plugin/lib/react/style-helper.js b/packages/webpack-plugin/lib/react/style-helper.js index ee7d0209e9..44a5c6ac01 100644 --- a/packages/webpack-plugin/lib/react/style-helper.js +++ b/packages/webpack-plugin/lib/react/style-helper.js @@ -8,23 +8,25 @@ const hairlineRegExp = /^\s*hairlineWidth\s*$/ const varRegExp = /^--/ const cssPrefixExp = /^-(webkit|moz|ms|o)-/ -function formatValue (value, formatValueFn) { - let matched - let needStringify = true - if ((matched = numberRegExp.exec(value))) { - value = matched[1] - needStringify = false - } else if (unitRegExp.test(value) || hairlineRegExp.test(value)) { - // value = `global.__formatValue(${JSON.stringify(value)})` - value = `${formatValueFn}(${JSON.stringify(value)})` - needStringify = false +function createFormatValue (formatValueFn) { + formatValueFn = formatValueFn || 'global.__formatValue' + return function (value) { + let matched + let needStringify = true + if ((matched = numberRegExp.exec(value))) { + value = matched[1] + needStringify = false + } else if (unitRegExp.test(value) || hairlineRegExp.test(value)) { + value = `${formatValueFn}(${JSON.stringify(value)})` + needStringify = false + } + return needStringify ? JSON.stringify(value) : value } - return needStringify ? JSON.stringify(value) : value } function getClassMap ({ content, filename, mode, srcMode, warn, error, formatValueFn }) { const classMap = {} - formatValueFn = formatValueFn || 'global.__formatValue' + const formatValue = createFormatValue(formatValueFn) const root = postcss.parse(content, { from: filename }) @@ -98,7 +100,6 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error, formatVal module.exports = { getClassMap, - formatValue, unitRegExp, numberRegExp } From 3da4fee441fb5f0191da141b03d79c3d8df6a2fd Mon Sep 17 00:00:00 2001 From: mater Date: Tue, 10 Dec 2024 10:48:32 +0800 Subject: [PATCH 17/59] fix: preset --- packages/unocss-base/lib/index.js | 4 ++-- packages/unocss-base/lib/rn.js | 4 ++-- packages/unocss-base/preset-rn/index.js | 6 +++--- .../unocss-base/preset-rn/rules/background.js | 6 +++--- .../unocss-base/preset-rn/rules/behaviors.js | 6 +++--- packages/unocss-base/preset-rn/rules/color.js | 2 +- .../unocss-base/preset-rn/rules/filters.js | 6 +++--- packages/unocss-base/preset-rn/rules/index.js | 20 +++++++++---------- .../unocss-base/preset-rn/rules/layout.js | 4 ++-- .../unocss-base/preset-rn/rules/shadow.js | 4 ++-- .../unocss-base/preset-rn/rules/spaceing.js | 2 +- .../unocss-base/preset-rn/rules/static.js | 6 +++--- .../unocss-base/preset-rn/rules/typography.js | 12 +++++------ .../unocss-base/preset-rn/variants/index.js | 2 +- packages/unocss-base/utils/index.js | 5 +++-- packages/unocss-plugin/lib/rn-plugin/index.js | 4 +++- 16 files changed, 48 insertions(+), 45 deletions(-) diff --git a/packages/unocss-base/lib/index.js b/packages/unocss-base/lib/index.js index 670dbd383d..2fb632e336 100644 --- a/packages/unocss-base/lib/index.js +++ b/packages/unocss-base/lib/index.js @@ -1,9 +1,9 @@ -const { presetUno } = require('@unocss/preset-uno') +import { presetUno } from '@unocss/preset-uno' // eslint-disable-next-line const remRE = /(-?[\.\d]+)rem/g -module.exports = function presetMpx (options = {}) { +export default function presetMpx (options = {}) { const uno = presetUno(options) const { baseFontSize = 37.5 } = options return { diff --git a/packages/unocss-base/lib/rn.js b/packages/unocss-base/lib/rn.js index abbba748b3..619617cd62 100644 --- a/packages/unocss-base/lib/rn.js +++ b/packages/unocss-base/lib/rn.js @@ -1,6 +1,6 @@ -const presetRn = require('../preset-rn') +import presetRn from '../preset-rn/index.js' -module.exports = function presetRnMpx (options = {}) { +export default function presetRnMpx (options = {}) { return { name: '@mpxjs/unocss-preset-rn', ...presetRn, diff --git a/packages/unocss-base/preset-rn/index.js b/packages/unocss-base/preset-rn/index.js index 88704e872b..f6fcff1cac 100644 --- a/packages/unocss-base/preset-rn/index.js +++ b/packages/unocss-base/preset-rn/index.js @@ -1,7 +1,7 @@ -const rules = require('./rules') -const varaints = require('./variants') +import rules from './rules/index.js' +import varaints from './variants/index.js' -module.exports = { +export default { rules, varaints } diff --git a/packages/unocss-base/preset-rn/rules/background.js b/packages/unocss-base/preset-rn/rules/background.js index b48fc0aedb..6761a36384 100644 --- a/packages/unocss-base/preset-rn/rules/background.js +++ b/packages/unocss-base/preset-rn/rules/background.js @@ -1,5 +1,5 @@ -const { findRawRules, transformEmptyRule } = require('../../utils/index') -const { backgroundStyles } = require('@unocss/preset-wind/rules') +import { findRawRules, transformEmptyRule } from '../../utils/index.js' +import { backgroundStyles } from '@unocss/preset-wind/rules' // todo background-position 剔除 const NewBackgroundRules = findRawRules([ @@ -15,6 +15,6 @@ const NewBackgroundRules = findRawRules([ /^bg-clip-.*/ ], backgroundStyles) -module.exports = [ +export default [ ...transformEmptyRule(NewBackgroundRules) ] diff --git a/packages/unocss-base/preset-rn/rules/behaviors.js b/packages/unocss-base/preset-rn/rules/behaviors.js index 73683d32ba..49f5991dba 100644 --- a/packages/unocss-base/preset-rn/rules/behaviors.js +++ b/packages/unocss-base/preset-rn/rules/behaviors.js @@ -1,10 +1,10 @@ -const { imageRenderings, overscrolls, listStyle } = require('@unocss/preset-wind/rules') -const { transformEmptyRule } = require('../../utils') +import { imageRenderings, overscrolls, listStyle } from '@unocss/preset-wind/rules' +import { transformEmptyRule } from '../../utils/index.js' // todo // const placeholder = findRawRules('$ placeholder', rules, true) -module.exports = [ +export default [ ...transformEmptyRule( overscrolls, imageRenderings, diff --git a/packages/unocss-base/preset-rn/rules/color.js b/packages/unocss-base/preset-rn/rules/color.js index d7faf17f9b..9859f07972 100644 --- a/packages/unocss-base/preset-rn/rules/color.js +++ b/packages/unocss-base/preset-rn/rules/color.js @@ -1 +1 @@ -module.exports = [] +export default [] diff --git a/packages/unocss-base/preset-rn/rules/filters.js b/packages/unocss-base/preset-rn/rules/filters.js index 007ad154d6..2c63344d83 100644 --- a/packages/unocss-base/preset-rn/rules/filters.js +++ b/packages/unocss-base/preset-rn/rules/filters.js @@ -1,5 +1,5 @@ -const { filters } = require('@unocss/preset-wind/rules') -const { findRawRules, ruleFallback, isFunction, transformEmptyRule } = require('../../utils') +import { filters } from '@unocss/preset-wind/rules' +import { findRawRules, ruleFallback, isFunction, transformEmptyRule } from '../../utils/index.js' // todo filter 只支持部分属性 const newFilters = findRawRules([ @@ -26,7 +26,7 @@ const backdropFilter = findRawRules([ /^backdrop-filter-*/ ], filters) -module.exports = [ +export default [ ...newFilters, ...transformEmptyRule(backdropFilter) ] diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index 5ae1afbfa8..fd8f6659b9 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -1,14 +1,14 @@ -const color = require('./color') -const spaceing = require('./spaceing') -const typography = require('./typography') -const background = require('./background') -const shadow = require('./shadow') -const behaviors = require('./behaviors') -const layout = require('./layout') -const filters = require('./filters') -const staticRule = require('./static') +import color from './color.js'; +import spaceing from './spaceing.js'; +import typography from './typography.js'; +import background from './background.js'; +import shadow from './shadow.js'; +import behaviors from './behaviors.js'; +import layout from './layout.js'; +import filters from './filters.js'; +import staticRule from './static.js'; -module.exports = [ +export default [ ...color, ...spaceing, ...typography, diff --git a/packages/unocss-base/preset-rn/rules/layout.js b/packages/unocss-base/preset-rn/rules/layout.js index cc4950d400..e8979bdda6 100644 --- a/packages/unocss-base/preset-rn/rules/layout.js +++ b/packages/unocss-base/preset-rn/rules/layout.js @@ -1,4 +1,4 @@ -const { ruleCallback, ruleFallback } = require('../../utils') +import { ruleCallback, ruleFallback } from '../../utils/index.js' const overflows = [ [/^(?:overflow|of)-(.+)$/, ([match, v], { generator }) => { @@ -13,6 +13,6 @@ const overflows = [ [/^(?:overflow|of)-([xy])-(.+)$/, ruleCallback] ] -module.exports = [ +export default [ ...overflows ] diff --git a/packages/unocss-base/preset-rn/rules/shadow.js b/packages/unocss-base/preset-rn/rules/shadow.js index a7f16132a8..ac24e3786d 100644 --- a/packages/unocss-base/preset-rn/rules/shadow.js +++ b/packages/unocss-base/preset-rn/rules/shadow.js @@ -1,4 +1,4 @@ -const { boxShadowsBase, boxShadows } = require('@unocss/preset-mini/rules') +import { boxShadowsBase, boxShadows } from '@unocss/preset-mini/rules' const findShadowColorRule = () => { return boxShadows.find(rule => { @@ -11,7 +11,7 @@ const findShadowColorRule = () => { const shadowColorRule = findShadowColorRule() -module.exports = [ +export default [ [shadowColorRule[0], (match, context) => { const rawHandler = shadowColorRule[1] const rawResult = rawHandler(match, context) diff --git a/packages/unocss-base/preset-rn/rules/spaceing.js b/packages/unocss-base/preset-rn/rules/spaceing.js index 11268ae07b..3e5c089beb 100644 --- a/packages/unocss-base/preset-rn/rules/spaceing.js +++ b/packages/unocss-base/preset-rn/rules/spaceing.js @@ -1,3 +1,3 @@ -module.exports = [ +export default [ ['m-1', { padding: '40px' }] ] diff --git a/packages/unocss-base/preset-rn/rules/static.js b/packages/unocss-base/preset-rn/rules/static.js index 2653362b60..6e7adbbc56 100644 --- a/packages/unocss-base/preset-rn/rules/static.js +++ b/packages/unocss-base/preset-rn/rules/static.js @@ -1,6 +1,6 @@ -const { backgroundBlendModes } = require('@unocss/preset-wind/rules') -const { transformEmptyRule } = require('../../utils/index') +import { backgroundBlendModes } from '@unocss/preset-wind/rules' +import { transformEmptyRule } from '../../utils/index.js' -module.exports = transformEmptyRule( +export default transformEmptyRule( backgroundBlendModes ) diff --git a/packages/unocss-base/preset-rn/rules/typography.js b/packages/unocss-base/preset-rn/rules/typography.js index c653e7766c..9c1e291cac 100644 --- a/packages/unocss-base/preset-rn/rules/typography.js +++ b/packages/unocss-base/preset-rn/rules/typography.js @@ -1,12 +1,12 @@ -const { transformEmptyRule, ruleFallback } = require('../../utils/index') -const { +import { transformEmptyRule, ruleFallback } from '../../utils/index.js' +import { writingModes, writingOrientations, hyphens // fontVariantNumericBase, // fontVariantNumeric -} = require('@unocss/preset-wind/rules') -const { +} from '@unocss/preset-wind/rules' +import { textStrokes, textIndents, tabSizes, @@ -16,7 +16,7 @@ const { textWraps, fontSmoothings, verticalAligns -} = require('@unocss/preset-mini/rules') +} from '@unocss/preset-mini/rules' // decoration const textDecorations = [ @@ -52,7 +52,7 @@ const newVerticalAlign = verticalAligns.map(item => { }] }) -module.exports = [ +export default [ ...transformEmptyRule( textIndents, textStrokes, diff --git a/packages/unocss-base/preset-rn/variants/index.js b/packages/unocss-base/preset-rn/variants/index.js index 562c163a21..2432cf4725 100644 --- a/packages/unocss-base/preset-rn/variants/index.js +++ b/packages/unocss-base/preset-rn/variants/index.js @@ -1,4 +1,4 @@ -module.exports = [ +export default [ // todo: do something for variants // { // name: 'custom-variant-container', diff --git a/packages/unocss-base/utils/index.js b/packages/unocss-base/utils/index.js index 69ade8352e..5622cf1226 100644 --- a/packages/unocss-base/utils/index.js +++ b/packages/unocss-base/utils/index.js @@ -69,10 +69,11 @@ const findRawRules = (matcher, rawRules, byReg = false) => { .reduce((preV, curV) => preV.concat(curV), []) } -module.exports = { +export { genEmptyRule, transformEmptyRule, findRawRules, ruleFallback, - isFunction + isFunction, + ruleCallback } diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js index 3c947d190c..c8f6c16f59 100644 --- a/packages/unocss-plugin/lib/rn-plugin/index.js +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -41,7 +41,6 @@ function WebpackPlugin (configOrPath, defaults) { compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { const mpx = compilation.__mpx__ const { mode, srcMode } = mpx - console.log(ctx.ready); ctx.ready.then(() => mpx.unoCtx = ctx.uno) compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => { await ctx.ready @@ -82,6 +81,9 @@ function WebpackPlugin (configOrPath, defaults) { let code = compilation.assets[file].source().toString() let replaced = false + console.log(2222, classMap); + + code = code .replace('__unocssMap__', () => { replaced = true From f898f6b9aa0d6144268a678d2d7d0447f7640843 Mon Sep 17 00:00:00 2001 From: mater Date: Tue, 10 Dec 2024 10:48:55 +0800 Subject: [PATCH 18/59] fix: type --- packages/unocss-base/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/unocss-base/package.json b/packages/unocss-base/package.json index 68b8ec19dd..906bc14247 100644 --- a/packages/unocss-base/package.json +++ b/packages/unocss-base/package.json @@ -6,6 +6,7 @@ "directories": { "lib": "lib" }, + "type": "module", "scripts": {}, "author": "", "license": "Apache-2.0", From cc0cbf87c6e24c3f415a58f3806732883280a8a5 Mon Sep 17 00:00:00 2001 From: mater Date: Tue, 10 Dec 2024 11:00:39 +0800 Subject: [PATCH 19/59] fix: unocss ready --- packages/unocss-plugin/lib/rn-plugin/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js index c8f6c16f59..9b28c4634a 100644 --- a/packages/unocss-plugin/lib/rn-plugin/index.js +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -41,7 +41,6 @@ function WebpackPlugin (configOrPath, defaults) { compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { const mpx = compilation.__mpx__ const { mode, srcMode } = mpx - ctx.ready.then(() => mpx.unoCtx = ctx.uno) compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => { await ctx.ready // 清空transformCache避免watch修改不生效 @@ -80,10 +79,6 @@ function WebpackPlugin (configOrPath, defaults) { if (file === '*') { return } let code = compilation.assets[file].source().toString() let replaced = false - - console.log(2222, classMap); - - code = code .replace('__unocssMap__', () => { replaced = true @@ -102,6 +97,11 @@ function WebpackPlugin (configOrPath, defaults) { } }) }) + + compiler.hooks.make.tapPromise(PLUGIN_NAME, (compilation) => { + const mpx = compilation.__mpx__ + return ctx.ready.then(() => mpx.unoCtx = ctx.uno) + }) } } } From 13fd97d03924b8af3cde6188b621b5f2a9def56d Mon Sep 17 00:00:00 2001 From: mater Date: Tue, 10 Dec 2024 19:50:23 +0800 Subject: [PATCH 20/59] =?UTF-8?q?fix:=20uno=E5=AD=98=E5=82=A8=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/unocss-plugin/lib/rn-plugin/index.js | 27 +++--- .../unocss-plugin/lib/web-plugin/index.js | 23 +++-- .../lib/web-plugin/transform-loader.js | 1 - .../unocss-plugin/lib/web-plugin/utils.js | 93 +++++++++---------- 4 files changed, 73 insertions(+), 71 deletions(-) diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js index 9b28c4634a..38d163e0e9 100644 --- a/packages/unocss-plugin/lib/rn-plugin/index.js +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -16,9 +16,6 @@ const reLetters = /[a-z]+/gi function WebpackPlugin (configOrPath, defaults) { return { apply (compiler) { - const ctx = createContext(configOrPath, defaults) - const { filter, transformCache } = ctx - compiler.__unoCtx = ctx // transform 提取tokens compiler.options.module.rules.unshift({ enforce: 'pre', @@ -26,7 +23,7 @@ function WebpackPlugin (configOrPath, defaults) { if (data.resource == null) { return [] } const id = normalizeAbsolutePath(data.resource + (data.resourceQuery || '')) - if (filter('', id) && !id.match(/\.html$/) && !RESOLVED_ID_RE.test(id)) { + if (compiler.__unoCtx.filter('', id) && !id.match(/\.html$/) && !RESOLVED_ID_RE.test(id)) { return [{ loader: nodePath.resolve(__dirname, '../web-plugin/transform-loader') }] @@ -36,15 +33,14 @@ function WebpackPlugin (configOrPath, defaults) { } }) - - compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { - const mpx = compilation.__mpx__ - const { mode, srcMode } = mpx compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => { - await ctx.ready + const mpx = compilation.__mpx__ + const { mode, srcMode } = mpx + const ctx = compiler.__unoCtx + const uno = ctx.uno // 清空transformCache避免watch修改不生效 - transformCache.clear() + ctx.transformCache.clear() const tokens = new Set() for (const module of compilation.modules) { const assetsInfo = module.buildInfo.assetsInfo || new Map() @@ -56,7 +52,6 @@ function WebpackPlugin (configOrPath, defaults) { } } } - const { uno } = ctx const result = await uno.generate(tokens, { minify: true }) if (uno._mpx2rnUnsuportedRules && uno._mpx2rnUnsuportedRules.length) { compilation.errors.push(`[Mpx Unocss]: all those '${uno._mpx2rnUnsuportedRules.join(', ')}' class utilities is not supported in react native mode`) @@ -98,9 +93,15 @@ function WebpackPlugin (configOrPath, defaults) { }) }) - compiler.hooks.make.tapPromise(PLUGIN_NAME, (compilation) => { + compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation) => { const mpx = compilation.__mpx__ - return ctx.ready.then(() => mpx.unoCtx = ctx.uno) + mpx.unoCtx = compiler.__unoCtx.uno + }) + + compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, async (compilation) => { + const ctx = await createContext(configOrPath, defaults) + compiler.__unoCtx = ctx + return ctx }) } } diff --git a/packages/unocss-plugin/lib/web-plugin/index.js b/packages/unocss-plugin/lib/web-plugin/index.js index 83e308e0da..f2a8d4f017 100644 --- a/packages/unocss-plugin/lib/web-plugin/index.js +++ b/packages/unocss-plugin/lib/web-plugin/index.js @@ -24,8 +24,6 @@ const VIRTUAL_MODULE_PREFIX = nodePath.resolve(process.cwd(), '_virtual_') function WebpackPlugin (configOrPath, defaults) { return { apply (compiler) { - const ctx = createContext(configOrPath, defaults) - const { uno, filter, transformCache } = ctx const entries = new Set() const __vfsModules = new Set() let __vfs = null @@ -39,7 +37,7 @@ function WebpackPlugin (configOrPath, defaults) { __vfs = new VirtualModulesPlugin() compiler.options.plugins.push(__vfs) } - compiler.__unoCtx = ctx + // 添加解析虚拟模块插件 import 'uno.css' 并且注入layer代码 const resolverPlugin = { apply (resolver) { @@ -91,7 +89,7 @@ function WebpackPlugin (configOrPath, defaults) { if (data.resource == null) { return [] } const id = normalizeAbsolutePath(data.resource + (data.resourceQuery || '')) - if (filter('', id) && !id.match(/\.html$/) && !RESOLVED_ID_RE.test(id)) { + if (compiler.__unoCtx.filter('', id) && !id.match(/\.html$/) && !RESOLVED_ID_RE.test(id)) { return [{ loader: nodePath.resolve(__dirname, './transform-loader') }] @@ -103,9 +101,10 @@ function WebpackPlugin (configOrPath, defaults) { compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => { - await ctx.ready + const ctx = compiler.__unoCtx + const uno = ctx.uno // 清空transformCache避免watch修改不生效 - transformCache.clear() + ctx.transformCache.clear() const tokens = new Set() for (const module of compilation.modules) { const assetsInfo = module.buildInfo.assetsInfo || new Map() @@ -135,9 +134,21 @@ function WebpackPlugin (configOrPath, defaults) { } }) }) + + compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation) => { + const mpx = compilation.__mpx__ + mpx.unoCtx = compiler.__unoCtx.uno + }) + + compiler.hooks.make.tapPromise(PLUGIN_NAME, async (compilation) => { + const ctx = await createContext(configOrPath, defaults) + compiler.__unoCtx = ctx + return ctx + }) } } } + function getLayer (id) { let layer = resolveLayer(getPath(id)) if (!layer) { diff --git a/packages/unocss-plugin/lib/web-plugin/transform-loader.js b/packages/unocss-plugin/lib/web-plugin/transform-loader.js index 6a026906ce..5be03cce6d 100644 --- a/packages/unocss-plugin/lib/web-plugin/transform-loader.js +++ b/packages/unocss-plugin/lib/web-plugin/transform-loader.js @@ -8,7 +8,6 @@ async function transform (code, map) { const ctx = this._compiler.__unoCtx const mpx = this.getMpx() if (!ctx || !mpx) return callback(null, code, map) - await ctx.ready // 使用resourcePath而不是resource作为id，规避query的影响 const id = this.resourcePath const { extract, transformCache } = ctx diff --git a/packages/unocss-plugin/lib/web-plugin/utils.js b/packages/unocss-plugin/lib/web-plugin/utils.js index 26ef9629a9..f2d9df9f9b 100644 --- a/packages/unocss-plugin/lib/web-plugin/utils.js +++ b/packages/unocss-plugin/lib/web-plugin/utils.js @@ -15,67 +15,53 @@ const sfcIdRE = /\.(vue|mpx)($|\?)/ const templateIdRE = /\.(wxml|axml|swan|qml|ttml|qxml|jxml|ddml|html)($|\?)/ const cssIdRE = /\.(wxss|acss|css|qss|ttss|jxss|ddss)($|\?)/ -function createContext (configOrPath, defaults = {}, extraConfigSources = []) { +async function createContext (configOrPath, defaults = {}, extraConfigSources = []) { const root = process.cwd() let rawConfig = {} - const ctx = { - get ready () { - return ready - }, - filter, - uno: undefined, - extract, - transformCache: new Map() - } - const unoPromise = core.createGenerator(rawConfig, defaults) + + const uno = await core.createGenerator(rawConfig, defaults) let rollupFilter = pluginutils.createFilter(defaultInclude, defaultExclude) const idFilter = pluginutils.createFilter([sfcIdRE, templateIdRE, cssIdRE, core.cssIdRE]) - const ready = reloadConfig() - - async function reloadConfig () { - const uno = ctx.uno = await unoPromise - const result = await config.loadConfig(root, configOrPath, extraConfigSources, defaults) - rawConfig = result.config - uno.setConfig(rawConfig) - rollupFilter = pluginutils.createFilter( - rawConfig.include || defaultInclude, - rawConfig.exclude || defaultExclude - ) - const presets = /* @__PURE__ */ new Set() - uno.config.presets.forEach((i) => { - if (!i.name) { - return - } - if (presets.has(i.name)) { - console.warn(`[unocss] duplication of preset ${i.name} found, there might be something wrong with your config.`) - } else { - presets.add(i.name) - } - }) - const transformers = uno.config.transformers - if (transformers) { - const pre = [] - const normal = [] - const post = [] - transformers.forEach(i => { - if (i.enforce === 'pre') pre.push(i) - else if (i.enforce === 'post') post.push(i) - else normal.push(i) - }) - uno.config.transformers = [ - ...pre, - ...normal, - ...post - ] + const result = await config.loadConfig(root, configOrPath, extraConfigSources, defaults) + rawConfig = result.config + uno.setConfig(rawConfig) + rollupFilter = pluginutils.createFilter( + rawConfig.include || defaultInclude, + rawConfig.exclude || defaultExclude + ) + const presets = /* @__PURE__ */ new Set() + uno.config.presets.forEach((i) => { + if (!i.name) { + return } + if (presets.has(i.name)) { + console.warn(`[unocss] duplication of preset ${i.name} found, there might be something wrong with your config.`) + } else { + presets.add(i.name) + } + }) - return result + const transformers = uno.config.transformers + if (transformers) { + const pre = [] + const normal = [] + const post = [] + transformers.forEach(i => { + if (i.enforce === 'pre') pre.push(i) + else if (i.enforce === 'post') post.push(i) + else normal.push(i) + }) + uno.config.transformers = [ + ...pre, + ...normal, + ...post + ] } async function extract (code, id) { const tokens = new Set() - await ctx.uno.applyExtractors(code, id, tokens) + await uno.applyExtractors(code, id, tokens) if (tokens.size > 0) { this.emitFile(id, '', undefined, { skipEmit: true, @@ -94,7 +80,12 @@ function createContext (configOrPath, defaults = {}, extraConfigSources = []) { return code.includes(INCLUDE_COMMENT) || code.includes(CSS_PLACEHOLDER) || rollupFilter(id.replace(/\?v=\w+$/, '')) } - return ctx + return { + filter, + uno, + extract, + transformCache: new Map() + } } async function applyTransformers (ctx, original, id) { From f3789ca07723ffa8d1a3e2a1fcd5be1628fe9f58 Mon Sep 17 00:00:00 2001 From: mater Date: Tue, 17 Dec 2024 14:56:28 +0800 Subject: [PATCH 21/59] fix: mpx instance --- packages/unocss-plugin/lib/rn-plugin/index.js | 2 +- packages/unocss-plugin/lib/web-plugin/index.js | 10 +++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js index 38d163e0e9..3f3c207d74 100644 --- a/packages/unocss-plugin/lib/rn-plugin/index.js +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -93,7 +93,7 @@ function WebpackPlugin (configOrPath, defaults) { }) }) - compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation) => { + compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => { const mpx = compilation.__mpx__ mpx.unoCtx = compiler.__unoCtx.uno }) diff --git a/packages/unocss-plugin/lib/web-plugin/index.js b/packages/unocss-plugin/lib/web-plugin/index.js index f2a8d4f017..b4756d58ca 100644 --- a/packages/unocss-plugin/lib/web-plugin/index.js +++ b/packages/unocss-plugin/lib/web-plugin/index.js @@ -1,4 +1,4 @@ -import * as WebpackSources from 'webpack-sources'; +import WebpackSources from 'webpack-sources'; import VirtualModulesPlugin from 'webpack-virtual-modules'; import * as nodePath from 'node:path'; import * as process from 'process'; @@ -16,7 +16,10 @@ import { resolveId, resolveLayer } from './consts.js'; +import { dirname } from 'path'; +import { fileURLToPath } from 'url'; +const __dirname = dirname(fileURLToPath(import.meta.url)); const PLUGIN_NAME = 'unocss:webpack' const VIRTUAL_MODULE_PREFIX = nodePath.resolve(process.cwd(), '_virtual_') @@ -116,6 +119,7 @@ function WebpackPlugin (configOrPath, defaults) { } } } + debugger const result = await uno.generate(tokens, { minify: true }) const files = Object.keys(compilation.assets) for (const file of files) { @@ -135,12 +139,12 @@ function WebpackPlugin (configOrPath, defaults) { }) }) - compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation) => { + compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => { const mpx = compilation.__mpx__ mpx.unoCtx = compiler.__unoCtx.uno }) - compiler.hooks.make.tapPromise(PLUGIN_NAME, async (compilation) => { + compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, async (compilation) => { const ctx = await createContext(configOrPath, defaults) compiler.__unoCtx = ctx return ctx From d86b308d54025e2daa232d6be22bcc44d1bda0de Mon Sep 17 00:00:00 2001 From: mater Date: Tue, 17 Dec 2024 15:26:19 +0800 Subject: [PATCH 22/59] fix: remove debugg --- packages/unocss-plugin/lib/web-plugin/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/unocss-plugin/lib/web-plugin/index.js b/packages/unocss-plugin/lib/web-plugin/index.js index b4756d58ca..276bac41c1 100644 --- a/packages/unocss-plugin/lib/web-plugin/index.js +++ b/packages/unocss-plugin/lib/web-plugin/index.js @@ -119,7 +119,6 @@ function WebpackPlugin (configOrPath, defaults) { } } } - debugger const result = await uno.generate(tokens, { minify: true }) const files = Object.keys(compilation.assets) for (const file of files) { From dc507295fa2dbd0b2551632816a07a12cc910c20 Mon Sep 17 00:00:00 2001 From: mater Date: Tue, 17 Dec 2024 16:02:35 +0800 Subject: [PATCH 23/59] fix: lint --- .../unocss-base/preset-rn/rules/background.js | 4 +- .../unocss-base/preset-rn/rules/filters.js | 2 +- packages/unocss-base/preset-rn/rules/index.js | 18 ++++---- packages/unocss-plugin/lib/index.js | 42 +++++++++---------- packages/unocss-plugin/lib/rn-plugin/index.js | 18 ++++---- packages/unocss-plugin/lib/source.js | 4 +- packages/unocss-plugin/lib/transform.js | 6 +-- .../unocss-plugin/lib/web-plugin/index.js | 22 +++++----- .../lib/web-plugin/transform-loader.js | 8 ++-- .../unocss-plugin/lib/web-plugin/utils.js | 12 +++--- 10 files changed, 69 insertions(+), 67 deletions(-) diff --git a/packages/unocss-base/preset-rn/rules/background.js b/packages/unocss-base/preset-rn/rules/background.js index 6761a36384..99bf8f0f38 100644 --- a/packages/unocss-base/preset-rn/rules/background.js +++ b/packages/unocss-base/preset-rn/rules/background.js @@ -1,5 +1,5 @@ -import { findRawRules, transformEmptyRule } from '../../utils/index.js' -import { backgroundStyles } from '@unocss/preset-wind/rules' +import { findRawRules, transformEmptyRule } from '../../utils/index.js' +import { backgroundStyles } from '@unocss/preset-wind/rules' // todo background-position 剔除 const NewBackgroundRules = findRawRules([ diff --git a/packages/unocss-base/preset-rn/rules/filters.js b/packages/unocss-base/preset-rn/rules/filters.js index 2c63344d83..83c420a7a5 100644 --- a/packages/unocss-base/preset-rn/rules/filters.js +++ b/packages/unocss-base/preset-rn/rules/filters.js @@ -1,5 +1,5 @@ import { filters } from '@unocss/preset-wind/rules' -import { findRawRules, ruleFallback, isFunction, transformEmptyRule } from '../../utils/index.js' +import { findRawRules, ruleFallback, isFunction, transformEmptyRule } from '../../utils/index.js' // todo filter 只支持部分属性 const newFilters = findRawRules([ diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index fd8f6659b9..cec1d0bf77 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -1,12 +1,12 @@ -import color from './color.js'; -import spaceing from './spaceing.js'; -import typography from './typography.js'; -import background from './background.js'; -import shadow from './shadow.js'; -import behaviors from './behaviors.js'; -import layout from './layout.js'; -import filters from './filters.js'; -import staticRule from './static.js'; +import color from './color.js' +import spaceing from './spaceing.js' +import typography from './typography.js' +import background from './background.js' +import shadow from './shadow.js' +import behaviors from './behaviors.js' +import layout from './layout.js' +import filters from './filters.js' +import staticRule from './static.js' export default [ ...color, diff --git a/packages/unocss-plugin/lib/index.js b/packages/unocss-plugin/lib/index.js index 6b5821052c..4b1d4536e4 100644 --- a/packages/unocss-plugin/lib/index.js +++ b/packages/unocss-plugin/lib/index.js @@ -1,39 +1,39 @@ -import * as path from 'path'; -import { minimatch } from 'minimatch'; -import * as unoConfig from '@unocss/config'; -import * as core from '@unocss/core'; -import * as 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 env from '@mpxjs/webpack-plugin/lib/utils/env.js'; -import MpxWebpackPlugin from '@mpxjs/webpack-plugin'; -import { UnoCSSWebpackPlugin } from './web-plugin/index.js'; -import { UnoCSSRNWebpackPlugin } from './rn-plugin/index.js'; -import transformerDirectives from '@unocss/transformer-directives'; -import * as transformerVariantGroup from '@unocss/transformer-variant-group'; +import * as path from 'path' +import { minimatch } from 'minimatch' +import * as unoConfig from '@unocss/config' +import * as core from '@unocss/core' +import * as 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 env from '@mpxjs/webpack-plugin/lib/utils/env.js' +import MpxWebpackPlugin from '@mpxjs/webpack-plugin' +import { UnoCSSWebpackPlugin } from './web-plugin/index.js' +import { UnoCSSRNWebpackPlugin } from './rn-plugin/index.js' +import transformerDirectives from '@unocss/transformer-directives' +import * as transformerVariantGroup from '@unocss/transformer-variant-group' import { parseClasses, parseStrings, parseMustache, stringifyAttr, parseComments, - parseCommentConfig, -} from './parser.js'; + parseCommentConfig +} from './parser.js' import { getReplaceSource, getConcatSource, getRawSource -} from './source.js'; +} from './source.js' import { transformStyle, buildAliasTransformer, transformGroups, mpEscape, - cssRequiresTransform, -} from './transform.js'; -import * as platformPreflightsMap from './platform.js'; + cssRequiresTransform +} from './transform.js' +import * as platformPreflightsMap from './platform.js' const { has } = set const { isWeb, isReact } = env diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js index 3f3c207d74..9ebcb2a9e2 100644 --- a/packages/unocss-plugin/lib/rn-plugin/index.js +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -1,13 +1,13 @@ -import WebpackSources from 'webpack-sources'; -import * as nodePath from 'node:path'; -import { createContext, normalizeAbsolutePath } from '../web-plugin/utils.js'; -import { RESOLVED_ID_RE } from '../web-plugin/consts.js'; -import { getClassMap } from '@mpxjs/webpack-plugin/lib/react/style-helper.js'; -import shallowStringify from '@mpxjs/webpack-plugin/lib/utils/shallow-stringify.js'; -import { fileURLToPath } from 'url'; +import WebpackSources from 'webpack-sources' +import * as nodePath from 'node:path' +import { createContext, normalizeAbsolutePath } from '../web-plugin/utils.js' +import { RESOLVED_ID_RE } from '../web-plugin/consts.js' +import { getClassMap } from '@mpxjs/webpack-plugin/lib/react/style-helper.js' +import shallowStringify from '@mpxjs/webpack-plugin/lib/utils/shallow-stringify.js' +import { fileURLToPath } from 'url' -const __filename = fileURLToPath(import.meta.url); // 当前文件的绝对路径 -const __dirname = nodePath.dirname(__filename); // 当前文件的目录路径 +const __filename = fileURLToPath(import.meta.url) // 当前文件的绝对路径 +const __dirname = nodePath.dirname(__filename) // 当前文件的目录路径 const PLUGIN_NAME = 'unocss:webpack' diff --git a/packages/unocss-plugin/lib/source.js b/packages/unocss-plugin/lib/source.js index 389aa1b3f0..124e22b1ce 100644 --- a/packages/unocss-plugin/lib/source.js +++ b/packages/unocss-plugin/lib/source.js @@ -1,5 +1,5 @@ -import webpack from 'webpack'; -const { ReplaceSource, RawSource, ConcatSource, Source } = webpack.sources; +import webpack from 'webpack' +const { ReplaceSource, RawSource, ConcatSource, Source } = webpack.sources function getRawSource (s) { if (s instanceof RawSource) { return s } diff --git a/packages/unocss-plugin/lib/transform.js b/packages/unocss-plugin/lib/transform.js index 91fdf0fd3f..0e2b46f614 100644 --- a/packages/unocss-plugin/lib/transform.js +++ b/packages/unocss-plugin/lib/transform.js @@ -1,6 +1,6 @@ -import MagicString from 'magic-string'; -import transformerDirectives from '@unocss/transformer-directives'; -import { getReplaceSource } from './source.js'; +import MagicString from 'magic-string' +import transformerDirectives from '@unocss/transformer-directives' +import { getReplaceSource } from './source.js' const escapedReg = /\\(.)/g diff --git a/packages/unocss-plugin/lib/web-plugin/index.js b/packages/unocss-plugin/lib/web-plugin/index.js index 276bac41c1..18f487ed03 100644 --- a/packages/unocss-plugin/lib/web-plugin/index.js +++ b/packages/unocss-plugin/lib/web-plugin/index.js @@ -1,13 +1,13 @@ -import WebpackSources from 'webpack-sources'; -import VirtualModulesPlugin from 'webpack-virtual-modules'; -import * as nodePath from 'node:path'; -import * as process from 'process'; -import * as fs from 'fs'; +import WebpackSources from 'webpack-sources' +import VirtualModulesPlugin from 'webpack-virtual-modules' +import * as nodePath from 'node:path' +import * as process from 'process' +import * as fs from 'fs' import { createContext, getPath, normalizeAbsolutePath -} from './utils.js'; +} from './utils.js' import { LAYER_MARK_ALL, LAYER_PLACEHOLDER_RE, @@ -15,11 +15,11 @@ import { getLayerPlaceholder, resolveId, resolveLayer -} from './consts.js'; -import { dirname } from 'path'; -import { fileURLToPath } from 'url'; +} from './consts.js' +import { dirname } from 'path' +import { fileURLToPath } from 'url' -const __dirname = dirname(fileURLToPath(import.meta.url)); +const __dirname = dirname(fileURLToPath(import.meta.url)) const PLUGIN_NAME = 'unocss:webpack' const VIRTUAL_MODULE_PREFIX = nodePath.resolve(process.cwd(), '_virtual_') @@ -103,6 +103,8 @@ function WebpackPlugin (configOrPath, defaults) { }) compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { + console.log(12313, !!compilation) + compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => { const ctx = compiler.__unoCtx const uno = ctx.uno diff --git a/packages/unocss-plugin/lib/web-plugin/transform-loader.js b/packages/unocss-plugin/lib/web-plugin/transform-loader.js index 5be03cce6d..366aa43eea 100644 --- a/packages/unocss-plugin/lib/web-plugin/transform-loader.js +++ b/packages/unocss-plugin/lib/web-plugin/transform-loader.js @@ -1,7 +1,7 @@ -import { applyTransformers, isCssId } from './utils.js'; -import parseComponent from '@mpxjs/webpack-plugin/lib/parser.js'; -import genComponentTag from '@mpxjs/webpack-plugin/lib/utils/gen-component-tag.js'; -import * as path from 'path'; +import { applyTransformers, isCssId } from './utils.js' +import parseComponent from '@mpxjs/webpack-plugin/lib/parser.js' +import genComponentTag from '@mpxjs/webpack-plugin/lib/utils/gen-component-tag.js' +import * as path from 'path' async function transform (code, map) { const callback = this.async() diff --git a/packages/unocss-plugin/lib/web-plugin/utils.js b/packages/unocss-plugin/lib/web-plugin/utils.js index f2d9df9f9b..c88558bada 100644 --- a/packages/unocss-plugin/lib/web-plugin/utils.js +++ b/packages/unocss-plugin/lib/web-plugin/utils.js @@ -1,9 +1,9 @@ -import * as pluginutils from '@rollup/pluginutils'; -import * as config from '@unocss/config'; -import * as core from '@unocss/core'; -import * as nodePath from 'node:path'; -import MagicString from 'magic-string'; -import remapping from '@ampproject/remapping'; +import * as pluginutils from '@rollup/pluginutils' +import * as config from '@unocss/config' +import * as core from '@unocss/core' +import * as nodePath from 'node:path' +import MagicString from 'magic-string' +import remapping from '@ampproject/remapping' const INCLUDE_COMMENT = '@unocss-include' const IGNORE_COMMENT = '@unocss-ignore' From 57ce2f82322b5ad66cdb07267381b361ccdd9b8d Mon Sep 17 00:00:00 2001 From: mater Date: Tue, 17 Dec 2024 16:17:21 +0800 Subject: [PATCH 24/59] fix: remove console --- packages/unocss-plugin/lib/web-plugin/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/unocss-plugin/lib/web-plugin/index.js b/packages/unocss-plugin/lib/web-plugin/index.js index 18f487ed03..9d20fe57a6 100644 --- a/packages/unocss-plugin/lib/web-plugin/index.js +++ b/packages/unocss-plugin/lib/web-plugin/index.js @@ -103,8 +103,6 @@ function WebpackPlugin (configOrPath, defaults) { }) compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { - console.log(12313, !!compilation) - compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => { const ctx = compiler.__unoCtx const uno = ctx.uno From 320ace5fbe6f196ead7a60aa443068cfe26c2773 Mon Sep 17 00:00:00 2001 From: mater Date: Tue, 17 Dec 2024 16:54:41 +0800 Subject: [PATCH 25/59] fix: minimatch --- packages/unocss-plugin/lib/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/unocss-plugin/lib/index.js b/packages/unocss-plugin/lib/index.js index 4b1d4536e4..6548cb878b 100644 --- a/packages/unocss-plugin/lib/index.js +++ b/packages/unocss-plugin/lib/index.js @@ -1,5 +1,5 @@ import * as path from 'path' -import { minimatch } from 'minimatch' +import minimatch from 'minimatch' import * as unoConfig from '@unocss/config' import * as core from '@unocss/core' import * as mpxConfig from '@mpxjs/webpack-plugin/lib/config.js' From abf1b6f84c2eed8a4d9d802f9d1e428bf0a8dd04 Mon Sep 17 00:00:00 2001 From: mater Date: Wed, 18 Dec 2024 19:11:56 +0800 Subject: [PATCH 26/59] feat: preset --- packages/unocss-base/package.json | 2 +- .../unocss-base/preset-rn/rules/layout.js | 25 +++++------ .../preset-rn/rules/layout/display.js | 16 ++++++++ .../preset-rn/rules/layout/flex.js | 41 +++++++++++++++++++ .../preset-rn/rules/layout/floats.js | 9 ++++ .../preset-rn/rules/layout/overflows.js | 19 +++++++++ .../preset-rn/rules/layout/positions.js | 35 ++++++++++++++++ packages/unocss-plugin/lib/index.js | 2 +- packages/unocss-plugin/package.json | 10 ++--- 9 files changed, 137 insertions(+), 22 deletions(-) create mode 100644 packages/unocss-base/preset-rn/rules/layout/display.js create mode 100644 packages/unocss-base/preset-rn/rules/layout/flex.js create mode 100644 packages/unocss-base/preset-rn/rules/layout/floats.js create mode 100644 packages/unocss-base/preset-rn/rules/layout/overflows.js create mode 100644 packages/unocss-base/preset-rn/rules/layout/positions.js diff --git a/packages/unocss-base/package.json b/packages/unocss-base/package.json index 906bc14247..71816b43d2 100644 --- a/packages/unocss-base/package.json +++ b/packages/unocss-base/package.json @@ -15,6 +15,6 @@ "access": "public" }, "dependencies": { - "@unocss/preset-uno": "^0.52.7" + "@unocss/preset-uno": "^0.65.1" } } diff --git a/packages/unocss-base/preset-rn/rules/layout.js b/packages/unocss-base/preset-rn/rules/layout.js index e8979bdda6..4cb4b0dcbb 100644 --- a/packages/unocss-base/preset-rn/rules/layout.js +++ b/packages/unocss-base/preset-rn/rules/layout.js @@ -1,18 +1,13 @@ -import { ruleCallback, ruleFallback } from '../../utils/index.js' - -const overflows = [ - [/^(?:overflow|of)-(.+)$/, ([match, v], { generator }) => { - if (['hidden', 'visiable', 'scroll'].includes(v)) { - return { - overflow: v - } - } else { - return ruleFallback(match, generator) - } - }], - [/^(?:overflow|of)-([xy])-(.+)$/, ruleCallback] -] +import { displays } from './layout/display.js' +import { flex } from './layout/flex.js' +import { floats } from './layout/floats.js' +import { overflows } from './layout/overflows.js' +import { positions } from './layout/positions.js' export default [ - ...overflows + ...overflows, + ...floats, + ...displays, + ...flex, + ...positions ] diff --git a/packages/unocss-base/preset-rn/rules/layout/display.js b/packages/unocss-base/preset-rn/rules/layout/display.js new file mode 100644 index 0000000000..31456ec974 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/layout/display.js @@ -0,0 +1,16 @@ +import { displays } from '@unocss/preset-mini/rules' +import { findRawRules, transformEmptyRule } from '../../../utils/index.js' + +// display不支持的属性抽离并覆盖 +const displaysRules = [...transformEmptyRule(findRawRules([ + 'inline', + 'block', + 'inline-block', + 'contents', + 'flow-root', + 'list-item' +], displays))] + +export { + displaysRules as displays +} diff --git a/packages/unocss-base/preset-rn/rules/layout/flex.js b/packages/unocss-base/preset-rn/rules/layout/flex.js new file mode 100644 index 0000000000..c169d08c7f --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/layout/flex.js @@ -0,0 +1,41 @@ +import { flex } from '@unocss/preset-mini/rules' +import { findRawRules, transformEmptyRule } from '../../../utils/index.js' + +/** + flex + flex-auto + flex-basis-lg + flex-basis-none + flex-basis-sm + flex-basis-xl + flex-basis-xs + flex-col + flex-col-reverse + flex-initial + flex-inline + flex-none + flex-nowrap + flex-row + flex-row-reverse + flex-wrap + flex-wrap-reverse + flex-1 + flex-basis-2xl + flex-basis-3xl + flex-grow-0 + flex-grow-1 + flex-grow-2 + flex-shrink-0 + flex-shrink-1 + flex-shrink-2 + */ + +// flex 不支持的属性抽离并覆盖 +const flexRules = [...transformEmptyRule(findRawRules([ + 'flex-inline', + 'inline-flex' +], flex))] + +export { + flexRules as flex +} diff --git a/packages/unocss-base/preset-rn/rules/layout/floats.js b/packages/unocss-base/preset-rn/rules/layout/floats.js new file mode 100644 index 0000000000..a45095e87e --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/layout/floats.js @@ -0,0 +1,9 @@ +import { floats } from '@unocss/preset-mini/rules' +import { transformEmptyRule } from '../../../utils/index.js' + +// flex 不支持的属性抽离并覆盖 +const floatsRules = transformEmptyRule(floats) + +export { + floatsRules as floats +} diff --git a/packages/unocss-base/preset-rn/rules/layout/overflows.js b/packages/unocss-base/preset-rn/rules/layout/overflows.js new file mode 100644 index 0000000000..ecb4c83796 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/layout/overflows.js @@ -0,0 +1,19 @@ +import { ruleCallback, ruleFallback } from '../../../utils/index.js' + +const overflows = [ + [ + /^(?:overflow|of)-(.+)$/, + ([match, v], { generator }) => { + if (['hidden', 'visiable', 'scroll'].includes(v)) { + return { + overflow: v + } + } else { + return ruleFallback(match, generator) + } + } + ], + [/^(?:overflow|of)-([xy])-(.+)$/, ruleCallback] +] + +export { overflows } diff --git a/packages/unocss-base/preset-rn/rules/layout/positions.js b/packages/unocss-base/preset-rn/rules/layout/positions.js new file mode 100644 index 0000000000..11d821fe77 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/layout/positions.js @@ -0,0 +1,35 @@ +import { positions } from '@unocss/preset-mini/rules' +import { ruleCallback } from '../../../utils' + +/** + position-absolute + position-inherit + position-fixed + position-initial + position-relative + position-revert + position-revert-layer + position-unset + position-sticky + position-static + */ + +const unSupport = ['inherit', 'fixed', 'initial', 'revert', 'revert-layer', 'unset', 'sticky'] + +// position 不支持的属性抽离并覆盖 +const positionsRules = [ + ...positions.map(v => { + const [regex, matcher, meta] = v + return [ + regex, + (...args) => { + const [[, v]] = args + if (unSupport.includes(v)) return ruleCallback(...args) + return matcher(...args) + }, + meta + ] + }) +] + +export { positionsRules as positions } diff --git a/packages/unocss-plugin/lib/index.js b/packages/unocss-plugin/lib/index.js index 6548cb878b..4b1d4536e4 100644 --- a/packages/unocss-plugin/lib/index.js +++ b/packages/unocss-plugin/lib/index.js @@ -1,5 +1,5 @@ import * as path from 'path' -import minimatch from 'minimatch' +import { minimatch } from 'minimatch' import * as unoConfig from '@unocss/config' import * as core from '@unocss/core' import * as mpxConfig from '@mpxjs/webpack-plugin/lib/config.js' diff --git a/packages/unocss-plugin/package.json b/packages/unocss-plugin/package.json index 4ed70157c2..b40d070c54 100644 --- a/packages/unocss-plugin/package.json +++ b/packages/unocss-plugin/package.json @@ -20,13 +20,13 @@ "dependencies": { "@ampproject/remapping": "^2.2.1", "@rollup/pluginutils": "^5.0.2", - "@unocss/config": "0.52.7", - "@unocss/core": "0.52.7", - "@unocss/transformer-directives": "^0.52.1", - "@unocss/transformer-variant-group": "^0.52.1", + "@unocss/config": "^0.65.1", + "@unocss/core": "^0.65.1", + "@unocss/transformer-directives": "^0.65.1", + "@unocss/transformer-variant-group": "^0.65.1", "magic-string": "^0.30.3", "minimatch": "^9.0.1", - "unocss": "^0.52.7", + "unocss": "^0.65.1", "webpack-sources": "^3.2.3", "webpack-virtual-modules": "^0.6.0" } From ea891f80f690d479fad126d9838f6e25cb27494d Mon Sep 17 00:00:00 2001 From: mater Date: Fri, 20 Dec 2024 17:55:50 +0800 Subject: [PATCH 27/59] feat: preset --- packages/unocss-base/preset-rn/rules/align.js | 38 ++++++ .../unocss-base/preset-rn/rules/animation.js | 6 + .../unocss-base/preset-rn/rules/background.js | 33 +++--- .../unocss-base/preset-rn/rules/behaviors.js | 6 +- packages/unocss-base/preset-rn/rules/color.js | 7 +- .../unocss-base/preset-rn/rules/columns.js | 6 + .../unocss-base/preset-rn/rules/container.js | 10 ++ .../unocss-base/preset-rn/rules/divide.js | 19 +++ packages/unocss-base/preset-rn/rules/flex.js | 12 ++ packages/unocss-base/preset-rn/rules/gap.js | 8 ++ .../unocss-base/preset-rn/rules/global.js | 8 ++ packages/unocss-base/preset-rn/rules/grid.js | 9 ++ packages/unocss-base/preset-rn/rules/index.js | 111 ++++++++++++++++-- .../unocss-base/preset-rn/rules/layout.js | 28 +++-- .../preset-rn/rules/layout/display.js | 16 --- .../preset-rn/rules/layout/flex.js | 41 ------- .../preset-rn/rules/layout/floats.js | 9 -- .../preset-rn/rules/layout/overflows.js | 19 --- .../preset-rn/rules/layout/positions.js | 35 ------ .../unocss-base/preset-rn/rules/line-clamp.js | 8 ++ .../preset-rn/rules/placeholder.js | 6 + .../unocss-base/preset-rn/rules/positions.js | 90 ++++++++++++++ .../unocss-base/preset-rn/rules/scrolls.js | 8 ++ packages/unocss-base/preset-rn/rules/size.js | 1 + .../unocss-base/preset-rn/rules/spaceing.js | 3 - .../unocss-base/preset-rn/rules/spacing.js | 59 ++++++++++ .../unocss-base/preset-rn/rules/static.js | 79 ++++++++++++- packages/unocss-base/preset-rn/rules/svg.js | 1 + packages/unocss-base/preset-rn/rules/table.js | 6 + .../preset-rn/rules/touch-actions.js | 6 + .../unocss-base/preset-rn/rules/transform.js | 1 + .../unocss-base/preset-rn/rules/transition.js | 1 + .../unocss-base/preset-rn/rules/typography.js | 19 +-- .../preset-rn/rules/view-transition.js | 8 ++ packages/unocss-base/utils/index.js | 74 +++++++----- 35 files changed, 578 insertions(+), 213 deletions(-) create mode 100644 packages/unocss-base/preset-rn/rules/align.js create mode 100644 packages/unocss-base/preset-rn/rules/animation.js create mode 100644 packages/unocss-base/preset-rn/rules/columns.js create mode 100644 packages/unocss-base/preset-rn/rules/container.js create mode 100644 packages/unocss-base/preset-rn/rules/divide.js create mode 100644 packages/unocss-base/preset-rn/rules/flex.js create mode 100644 packages/unocss-base/preset-rn/rules/gap.js create mode 100644 packages/unocss-base/preset-rn/rules/global.js create mode 100644 packages/unocss-base/preset-rn/rules/grid.js delete mode 100644 packages/unocss-base/preset-rn/rules/layout/display.js delete mode 100644 packages/unocss-base/preset-rn/rules/layout/flex.js delete mode 100644 packages/unocss-base/preset-rn/rules/layout/floats.js delete mode 100644 packages/unocss-base/preset-rn/rules/layout/overflows.js delete mode 100644 packages/unocss-base/preset-rn/rules/layout/positions.js create mode 100644 packages/unocss-base/preset-rn/rules/line-clamp.js create mode 100644 packages/unocss-base/preset-rn/rules/placeholder.js create mode 100644 packages/unocss-base/preset-rn/rules/positions.js create mode 100644 packages/unocss-base/preset-rn/rules/scrolls.js create mode 100644 packages/unocss-base/preset-rn/rules/size.js delete mode 100644 packages/unocss-base/preset-rn/rules/spaceing.js create mode 100644 packages/unocss-base/preset-rn/rules/spacing.js create mode 100644 packages/unocss-base/preset-rn/rules/svg.js create mode 100644 packages/unocss-base/preset-rn/rules/table.js create mode 100644 packages/unocss-base/preset-rn/rules/touch-actions.js create mode 100644 packages/unocss-base/preset-rn/rules/transform.js create mode 100644 packages/unocss-base/preset-rn/rules/transition.js create mode 100644 packages/unocss-base/preset-rn/rules/view-transition.js diff --git a/packages/unocss-base/preset-rn/rules/align.js b/packages/unocss-base/preset-rn/rules/align.js new file mode 100644 index 0000000000..4a4f811a5f --- /dev/null +++ b/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 +} diff --git a/packages/unocss-base/preset-rn/rules/animation.js b/packages/unocss-base/preset-rn/rules/animation.js new file mode 100644 index 0000000000..18dfb73ade --- /dev/null +++ b/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 } diff --git a/packages/unocss-base/preset-rn/rules/background.js b/packages/unocss-base/preset-rn/rules/background.js index 99bf8f0f38..5f8ccc9aff 100644 --- a/packages/unocss-base/preset-rn/rules/background.js +++ b/packages/unocss-base/preset-rn/rules/background.js @@ -1,20 +1,21 @@ -import { findRawRules, transformEmptyRule } from '../../utils/index.js' import { backgroundStyles } from '@unocss/preset-wind/rules' +import { findRawRules } from '../../utils/index.js' // todo background-position 剔除 -const NewBackgroundRules = findRawRules([ - // attachments - 'bg-fixed', - 'bg-locale', - 'bg-scroll', - // repeat - /^bg-repeat-?.*/, - // origins - /^bg-origin-.*/, - // clips - /^bg-clip-.*/ -], backgroundStyles) +const NewBackgroundRules = findRawRules( + [ + // attachments + 'bg-fixed', + 'bg-locale', + 'bg-scroll', + // repeat + /^bg-repeat-?.*/, + // origins + /^bg-origin-.*/, + // clips + /^bg-clip-.*/ + ], + backgroundStyles +) -export default [ - ...transformEmptyRule(NewBackgroundRules) -] +export { NewBackgroundRules as backgroundStyles } diff --git a/packages/unocss-base/preset-rn/rules/behaviors.js b/packages/unocss-base/preset-rn/rules/behaviors.js index 49f5991dba..db778cd036 100644 --- a/packages/unocss-base/preset-rn/rules/behaviors.js +++ b/packages/unocss-base/preset-rn/rules/behaviors.js @@ -1,4 +1,5 @@ import { imageRenderings, overscrolls, listStyle } from '@unocss/preset-wind/rules' +import { appearance, outline, willChange } from '@unocss/preset-mini/rules' import { transformEmptyRule } from '../../utils/index.js' // todo @@ -8,6 +9,9 @@ export default [ ...transformEmptyRule( overscrolls, imageRenderings, - listStyle + listStyle, + outline, + willChange, + appearance ) ] diff --git a/packages/unocss-base/preset-rn/rules/color.js b/packages/unocss-base/preset-rn/rules/color.js index 9859f07972..a8201e4408 100644 --- a/packages/unocss-base/preset-rn/rules/color.js +++ b/packages/unocss-base/preset-rn/rules/color.js @@ -1 +1,6 @@ -export default [] +import { colorScheme } from '@unocss/preset-mini/rules' +import { transformEmptyRule } from '../../utils/index.js' + +const colorSchemeRules = transformEmptyRule(colorScheme) + +export { colorSchemeRules as colorScheme } diff --git a/packages/unocss-base/preset-rn/rules/columns.js b/packages/unocss-base/preset-rn/rules/columns.js new file mode 100644 index 0000000000..510a083d43 --- /dev/null +++ b/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 } diff --git a/packages/unocss-base/preset-rn/rules/container.js b/packages/unocss-base/preset-rn/rules/container.js new file mode 100644 index 0000000000..785be40087 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/container.js @@ -0,0 +1,10 @@ +import { containerParent } from '@unocss/preset-mini/rules' +import { transformEmptyRule } from '../../utils/index.js' + +const containerParentRules = transformEmptyRule(containerParent) + +// TODO wind container + +export { + containerParentRules as containerParent +} diff --git a/packages/unocss-base/preset-rn/rules/divide.js b/packages/unocss-base/preset-rn/rules/divide.js new file mode 100644 index 0000000000..b1769b0a01 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/divide.js @@ -0,0 +1,19 @@ +import { divide } from '@unocss/preset-wind/rules' +import { ruleCallback } from '../../utils/index.js' + +const unSupport = ['s', 'e', 'bs', 'be', 'is', 'ie', 'block', 'inline'] + +const divideRules = divide.map(v => { + const [regex, matcher, ...another] = v + return [ + regex, + (...args) => { + const [[, direction]] = args + if (unSupport.includes(direction)) return ruleCallback(...args) + return matcher(...args) + }, + ...another + ] +}) + +export { divideRules as divide } diff --git a/packages/unocss-base/preset-rn/rules/flex.js b/packages/unocss-base/preset-rn/rules/flex.js new file mode 100644 index 0000000000..36d1b4eab4 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/flex.js @@ -0,0 +1,12 @@ +import { flex } from '@unocss/preset-mini/rules' +import { findRawRules, transformEmptyRule } from '../../utils/index.js' + +// flex 不支持的属性抽离并覆盖 +const flexRules = transformEmptyRule(findRawRules([ + 'flex-inline', + 'inline-flex' +], flex)) + +export { + flexRules as flex +} diff --git a/packages/unocss-base/preset-rn/rules/gap.js b/packages/unocss-base/preset-rn/rules/gap.js new file mode 100644 index 0000000000..36c5b5d403 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/gap.js @@ -0,0 +1,8 @@ +import { gaps } from '@unocss/preset-mini/rules' + +// TODO 这里要看下 gaps 的实现 需要移除grid +const gapsRules = gaps + +export { + gapsRules as gaps +} diff --git a/packages/unocss-base/preset-rn/rules/global.js b/packages/unocss-base/preset-rn/rules/global.js new file mode 100644 index 0000000000..8513fb2bed --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/global.js @@ -0,0 +1,8 @@ +import { + globalKeywords, + transformEmptyRule +} from '../../utils/index.js' + +export const globalRules = transformEmptyRule( + globalKeywords.map(v => [new RegExp(`.*-${v}$`)]) +) diff --git a/packages/unocss-base/preset-rn/rules/grid.js b/packages/unocss-base/preset-rn/rules/grid.js new file mode 100644 index 0000000000..ba9b837def --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/grid.js @@ -0,0 +1,9 @@ +import { grids } from '@unocss/preset-mini/rules' +import { transformEmptyRule } from '../../utils/index.js' + +// flex 不支持的属性抽离并覆盖 +const gridsRules = transformEmptyRule(grids) + +export { + gridsRules as grids +} diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index cec1d0bf77..ff97e9c3e9 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -1,21 +1,112 @@ -import color from './color.js' -import spaceing from './spaceing.js' +import { colorScheme } from './color.js' +import { backgroundStyles } from './background.js' +import { margins, paddings, spaces } from './spacing.js' import typography from './typography.js' -import background from './background.js' import shadow from './shadow.js' import behaviors from './behaviors.js' -import layout from './layout.js' +import { overflows } from './layout.js' import filters from './filters.js' -import staticRule from './static.js' +import { + appearances, + backgroundBlendModes, + contains, + cursors, + displays, + resizes, + whitespaces, + contentVisibility, + contents, + breaks, + textWraps, + textOverflows, + fontStyles, + fontSmoothings, + hyphens +} from './static.js' +import { + flexGridJustifiesAlignments, + justifies, + orders, + placements, + positions, + insets, + floats, + boxSizing +} from './positions.js' +import { flex } from './flex.js' +import { globalRules } from './global.js' +import { textAligns, verticalAligns } from './align.js' +import { containerParent } from './container.js' +import { animations } from './animation.js' +import { columns } from './columns.js' +import { divide } from './divide.js' +import { placeholders } from './placeholder.js' +import { scrolls } from './scrolls.js' +import { tables } from './table.js' +import { touchActions } from './touch-actions.js' +import { viewTransition } from './view-transition.js' export default [ - ...color, - ...spaceing, ...typography, - ...background, ...shadow, ...behaviors, - ...layout, ...filters, - ...staticRule + // align + ...verticalAligns, + ...textAligns, + // color + ...colorScheme, + ...backgroundStyles, + // container + ...containerParent, + // layout + ...overflows, + // positions + ...floats, + ...flex, + ...positions, + ...justifies, + ...orders, + ...placements, + ...insets, + ...flexGridJustifiesAlignments, + ...boxSizing, + // static + ...displays, + ...backgroundBlendModes, + ...appearances, + ...cursors, + ...contains, + ...resizes, + ...whitespaces, + ...contentVisibility, + ...contents, + ...breaks, + ...textWraps, + ...textOverflows, + ...fontStyles, + ...fontSmoothings, + ...hyphens, + // spaceing + ...paddings, + ...margins, + ...spaces, + // animations, + ...animations, + // columns + ...columns, + // divide + ...divide, + // placeholder + ...placeholders, + // scrolls + ...scrolls, + // tables + ...tables, + // touchActions + ...touchActions, + // view-transition + ...viewTransition, + // global + ...globalRules ] diff --git a/packages/unocss-base/preset-rn/rules/layout.js b/packages/unocss-base/preset-rn/rules/layout.js index 4cb4b0dcbb..e732192f18 100644 --- a/packages/unocss-base/preset-rn/rules/layout.js +++ b/packages/unocss-base/preset-rn/rules/layout.js @@ -1,13 +1,19 @@ -import { displays } from './layout/display.js' -import { flex } from './layout/flex.js' -import { floats } from './layout/floats.js' -import { overflows } from './layout/overflows.js' -import { positions } from './layout/positions.js' +import { ruleCallback, ruleFallback } from '../../utils/index.js' -export default [ - ...overflows, - ...floats, - ...displays, - ...flex, - ...positions +const overflows = [ + [ + /^(?:overflow|of)-(.+)$/, + ([match, v], { generator }) => { + if (['hidden', 'visiable', 'scroll'].includes(v)) { + return { + overflow: v + } + } else { + return ruleFallback(match, generator) + } + } + ], + [/^(?:overflow|of)-([xy])-(.+)$/, ruleCallback] ] + +export { overflows } diff --git a/packages/unocss-base/preset-rn/rules/layout/display.js b/packages/unocss-base/preset-rn/rules/layout/display.js deleted file mode 100644 index 31456ec974..0000000000 --- a/packages/unocss-base/preset-rn/rules/layout/display.js +++ /dev/null @@ -1,16 +0,0 @@ -import { displays } from '@unocss/preset-mini/rules' -import { findRawRules, transformEmptyRule } from '../../../utils/index.js' - -// display不支持的属性抽离并覆盖 -const displaysRules = [...transformEmptyRule(findRawRules([ - 'inline', - 'block', - 'inline-block', - 'contents', - 'flow-root', - 'list-item' -], displays))] - -export { - displaysRules as displays -} diff --git a/packages/unocss-base/preset-rn/rules/layout/flex.js b/packages/unocss-base/preset-rn/rules/layout/flex.js deleted file mode 100644 index c169d08c7f..0000000000 --- a/packages/unocss-base/preset-rn/rules/layout/flex.js +++ /dev/null @@ -1,41 +0,0 @@ -import { flex } from '@unocss/preset-mini/rules' -import { findRawRules, transformEmptyRule } from '../../../utils/index.js' - -/** - flex - flex-auto - flex-basis-lg - flex-basis-none - flex-basis-sm - flex-basis-xl - flex-basis-xs - flex-col - flex-col-reverse - flex-initial - flex-inline - flex-none - flex-nowrap - flex-row - flex-row-reverse - flex-wrap - flex-wrap-reverse - flex-1 - flex-basis-2xl - flex-basis-3xl - flex-grow-0 - flex-grow-1 - flex-grow-2 - flex-shrink-0 - flex-shrink-1 - flex-shrink-2 - */ - -// flex 不支持的属性抽离并覆盖 -const flexRules = [...transformEmptyRule(findRawRules([ - 'flex-inline', - 'inline-flex' -], flex))] - -export { - flexRules as flex -} diff --git a/packages/unocss-base/preset-rn/rules/layout/floats.js b/packages/unocss-base/preset-rn/rules/layout/floats.js deleted file mode 100644 index a45095e87e..0000000000 --- a/packages/unocss-base/preset-rn/rules/layout/floats.js +++ /dev/null @@ -1,9 +0,0 @@ -import { floats } from '@unocss/preset-mini/rules' -import { transformEmptyRule } from '../../../utils/index.js' - -// flex 不支持的属性抽离并覆盖 -const floatsRules = transformEmptyRule(floats) - -export { - floatsRules as floats -} diff --git a/packages/unocss-base/preset-rn/rules/layout/overflows.js b/packages/unocss-base/preset-rn/rules/layout/overflows.js deleted file mode 100644 index ecb4c83796..0000000000 --- a/packages/unocss-base/preset-rn/rules/layout/overflows.js +++ /dev/null @@ -1,19 +0,0 @@ -import { ruleCallback, ruleFallback } from '../../../utils/index.js' - -const overflows = [ - [ - /^(?:overflow|of)-(.+)$/, - ([match, v], { generator }) => { - if (['hidden', 'visiable', 'scroll'].includes(v)) { - return { - overflow: v - } - } else { - return ruleFallback(match, generator) - } - } - ], - [/^(?:overflow|of)-([xy])-(.+)$/, ruleCallback] -] - -export { overflows } diff --git a/packages/unocss-base/preset-rn/rules/layout/positions.js b/packages/unocss-base/preset-rn/rules/layout/positions.js deleted file mode 100644 index 11d821fe77..0000000000 --- a/packages/unocss-base/preset-rn/rules/layout/positions.js +++ /dev/null @@ -1,35 +0,0 @@ -import { positions } from '@unocss/preset-mini/rules' -import { ruleCallback } from '../../../utils' - -/** - position-absolute - position-inherit - position-fixed - position-initial - position-relative - position-revert - position-revert-layer - position-unset - position-sticky - position-static - */ - -const unSupport = ['inherit', 'fixed', 'initial', 'revert', 'revert-layer', 'unset', 'sticky'] - -// position 不支持的属性抽离并覆盖 -const positionsRules = [ - ...positions.map(v => { - const [regex, matcher, meta] = v - return [ - regex, - (...args) => { - const [[, v]] = args - if (unSupport.includes(v)) return ruleCallback(...args) - return matcher(...args) - }, - meta - ] - }) -] - -export { positionsRules as positions } diff --git a/packages/unocss-base/preset-rn/rules/line-clamp.js b/packages/unocss-base/preset-rn/rules/line-clamp.js new file mode 100644 index 0000000000..07740b2795 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/line-clamp.js @@ -0,0 +1,8 @@ +import { lineClamps } from '@unocss/preset-wind/rules' +import { transformEmptyRule } from '../../utils/index.js' + +const lineClampsRules = transformEmptyRule(lineClamps) + +export { + lineClampsRules as lineClamps +} diff --git a/packages/unocss-base/preset-rn/rules/placeholder.js b/packages/unocss-base/preset-rn/rules/placeholder.js new file mode 100644 index 0000000000..6495f82645 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/placeholder.js @@ -0,0 +1,6 @@ +import { placeholders } from '@unocss/preset-wind/rules' +import { transformEmptyRule } from '../../utils/index.js' + +const placeholdersRules = transformEmptyRule(placeholders) + +export { placeholdersRules as placeholders } diff --git a/packages/unocss-base/preset-rn/rules/positions.js b/packages/unocss-base/preset-rn/rules/positions.js new file mode 100644 index 0000000000..3f4b0c08eb --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/positions.js @@ -0,0 +1,90 @@ +import { + positions, + justifies, + orders, + alignments, + placements, + insets, + floats, + boxSizing +} from '@unocss/preset-mini/rules' +import { + findRawRules, + ruleCallback, + transformEmptyRule +} from '../../utils/index.js' + +const unSupport = ['sticky'] +// position 不支持的属性抽离并覆盖 +const positionsRules = positions.map(v => { + const [regex, matcher, ...another] = v + return [ + regex, + (...args) => { + const [[, v]] = args + if (unSupport.includes(v)) return ruleCallback(...args) + return matcher(...args) + }, + ...another + ] +}) + +// 不支持的规则过滤覆盖 +const justifiesRules = [ + ...transformEmptyRule( + findRawRules( + [ + 'justify-left', + 'justify-right', + 'justify-stretch', + 'justify-items-center', + 'justify-items-end', + 'justify-items-start', + 'justify-items-stretch', + 'justify-self-auto', + 'justify-self-center', + 'justify-self-end', + 'justify-self-stretch', + 'justify-self-start' + ], + justifies + ) + ) +] + +const ordersRules = transformEmptyRule(orders) + +const placementsRules = transformEmptyRule(placements) + +const flexGridJustifiesAlignmentsRules = transformEmptyRule([ + // flex部分不支持 + ...[...justifiesRules, ...placementsRules].map( + ([k, v]) => [`flex-${k}`, v] + ), + // grid全部不支持 + ...[...justifies, ...alignments, ...placements].map(([k, v]) => [ + `grid-${k}`, + v + ]) +]) + +// TODO +const insetsRules = [...insets] + +// floats 不支持的属性抽离并覆盖 +const floatsRules = transformEmptyRule(floats) + +const boxSizingRules = transformEmptyRule( + findRawRules(['box-content'], boxSizing) +) + +export { + positionsRules as positions, + justifiesRules as justifies, + ordersRules as orders, + placementsRules as placements, + flexGridJustifiesAlignmentsRules as flexGridJustifiesAlignments, + insetsRules as insets, + floatsRules as floats, + boxSizingRules as boxSizing +} diff --git a/packages/unocss-base/preset-rn/rules/scrolls.js b/packages/unocss-base/preset-rn/rules/scrolls.js new file mode 100644 index 0000000000..89f8b3774a --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/scrolls.js @@ -0,0 +1,8 @@ +import { scrolls } from '@unocss/preset-wind/rules' +import { transformEmptyRule } from '../../utils/index.js' + +const scrollsRules = transformEmptyRule(scrolls) + +export { + scrollsRules as scrolls +} diff --git a/packages/unocss-base/preset-rn/rules/size.js b/packages/unocss-base/preset-rn/rules/size.js new file mode 100644 index 0000000000..700862bcc3 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/size.js @@ -0,0 +1 @@ +// TODO 这里要看下 diff --git a/packages/unocss-base/preset-rn/rules/spaceing.js b/packages/unocss-base/preset-rn/rules/spaceing.js deleted file mode 100644 index 3e5c089beb..0000000000 --- a/packages/unocss-base/preset-rn/rules/spaceing.js +++ /dev/null @@ -1,3 +0,0 @@ -export default [ - ['m-1', { padding: '40px' }] -] diff --git a/packages/unocss-base/preset-rn/rules/spacing.js b/packages/unocss-base/preset-rn/rules/spacing.js new file mode 100644 index 0000000000..50636cd665 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/spacing.js @@ -0,0 +1,59 @@ +import { margins, paddings } from '@unocss/preset-mini/rules' +import { spaces } from '@unocss/preset-wind/rules' +import { ruleCallback } from '../../utils/index.js' + +const unSupport = [ + 's', + 'e', + 'bs', + 'be', + 'is', + 'ie', + 'block', + 'inline' +] + +const paddingsRules = paddings.map(v => { + const [regex, matcher, ...another] = v + return [ + regex, + (...args) => { + const [[, direction]] = args + if (unSupport.includes(direction)) return ruleCallback(...args) + return matcher(...args) + }, + ...another + ] +}) + +const marginsRules = margins.map(v => { + const [regex, matcher, ...another] = v + return [ + regex, + (...args) => { + const [[, direction]] = args + if (unSupport.includes(direction)) return ruleCallback(...args) + return matcher(...args) + }, + ...another + ] +}) + +const spacesRules = spaces.map(v => { + const [regex, matcher, ...another] = v + return [ + regex, + (...args) => { + const [[, direction]] = args + if (unSupport.includes(direction)) return ruleCallback(...args) + return matcher(...args) + }, + ...another + ] +}) + +export { + paddingsRules as paddings, + marginsRules as margins, + spacesRules as spaces +} diff --git a/packages/unocss-base/preset-rn/rules/static.js b/packages/unocss-base/preset-rn/rules/static.js index 6e7adbbc56..ef5c63670b 100644 --- a/packages/unocss-base/preset-rn/rules/static.js +++ b/packages/unocss-base/preset-rn/rules/static.js @@ -1,6 +1,77 @@ -import { backgroundBlendModes } from '@unocss/preset-wind/rules' -import { transformEmptyRule } from '../../utils/index.js' +import { + appearances, + breaks, + contains, + contents, + contentVisibility, + cursors, + displays, + fontSmoothings, + fontStyles, + resizes, + textOverflows, + textWraps, + whitespaces +} from '@unocss/preset-mini/rules' +import { backgroundBlendModes, hyphens } from '@unocss/preset-wind/rules' +import { findRawRules, transformEmptyRule } from '../../utils/index.js' -export default transformEmptyRule( - backgroundBlendModes +// display不支持的属性抽离并覆盖 +const displaysRules = transformEmptyRule( + findRawRules( + ['inline', 'block', 'inline-block', 'contents', 'flow-root', 'list-item'], + displays + ) ) + +const backgroundBlendModesRules = transformEmptyRule(backgroundBlendModes) + +const appearancesRules = transformEmptyRule( + findRawRules(['visible', 'invisible'], appearances) +) + +const cursorsRules = transformEmptyRule(cursors) + +const containsRules = transformEmptyRule(contains) + +const resizesRules = transformEmptyRule(resizes) + +const whitespacesRules = transformEmptyRule(whitespaces) + +const contentVisibilityRules = transformEmptyRule(contentVisibility) + +const contentsRules = transformEmptyRule(contents) + +const breaksRules = transformEmptyRule(breaks) + +const textWrapsRules = transformEmptyRule(textWraps) + +const textOverflowsRules = transformEmptyRule( + findRawRules(['text-ellipsis', 'text-clip'], textOverflows) +) + +const fontStylesRules = transformEmptyRule( + findRawRules(['oblique', 'font-oblique'], fontStyles) +) + +const fontSmoothingsRules = transformEmptyRule(fontSmoothings) + +const hyphensRules = transformEmptyRule(hyphens) + +export { + backgroundBlendModesRules as backgroundBlendModes, + displaysRules as displays, + appearancesRules as appearances, + cursorsRules as cursors, + containsRules as contains, + resizesRules as resizes, + whitespacesRules as whitespaces, + contentVisibilityRules as contentVisibility, + contentsRules as contents, + breaksRules as breaks, + textWrapsRules as textWraps, + textOverflowsRules as textOverflows, + fontStylesRules as fontStyles, + fontSmoothingsRules as fontSmoothings, + hyphensRules as hyphens +} diff --git a/packages/unocss-base/preset-rn/rules/svg.js b/packages/unocss-base/preset-rn/rules/svg.js new file mode 100644 index 0000000000..83a89f0dc9 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/svg.js @@ -0,0 +1 @@ +// svg stroke 看起来装了其它就可以支持部分属性 diff --git a/packages/unocss-base/preset-rn/rules/table.js b/packages/unocss-base/preset-rn/rules/table.js new file mode 100644 index 0000000000..7ae503ebf5 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/table.js @@ -0,0 +1,6 @@ +import { tables } from '@unocss/preset-wind/rules' +import { transformEmptyRule } from '../../utils/index.js' + +const tablesRules = transformEmptyRule(tables) + +export { tablesRules as tables } diff --git a/packages/unocss-base/preset-rn/rules/touch-actions.js b/packages/unocss-base/preset-rn/rules/touch-actions.js new file mode 100644 index 0000000000..8b5ea712ac --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/touch-actions.js @@ -0,0 +1,6 @@ +import { touchActions } from '@unocss/preset-wind/rules' +import { transformEmptyRule } from '../../utils/index.js' + +const touchActionsRules = transformEmptyRule(touchActions) + +export { touchActionsRules as touchActions } diff --git a/packages/unocss-base/preset-rn/rules/transform.js b/packages/unocss-base/preset-rn/rules/transform.js new file mode 100644 index 0000000000..5ccb051971 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/transform.js @@ -0,0 +1 @@ +// transform-gpu ? preserve-3d ? diff --git a/packages/unocss-base/preset-rn/rules/transition.js b/packages/unocss-base/preset-rn/rules/transition.js new file mode 100644 index 0000000000..bdc9a1f544 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/transition.js @@ -0,0 +1 @@ +// 实验性支持 diff --git a/packages/unocss-base/preset-rn/rules/typography.js b/packages/unocss-base/preset-rn/rules/typography.js index 9c1e291cac..8258b817b6 100644 --- a/packages/unocss-base/preset-rn/rules/typography.js +++ b/packages/unocss-base/preset-rn/rules/typography.js @@ -1,4 +1,4 @@ -import { transformEmptyRule, ruleFallback } from '../../utils/index.js' +import { transformEmptyRule } from '../../utils/index.js' import { writingModes, writingOrientations, @@ -14,8 +14,7 @@ import { breaks, textOverflows, textWraps, - fontSmoothings, - verticalAligns + fontSmoothings } from '@unocss/preset-mini/rules' // decoration @@ -41,17 +40,6 @@ const textDecorations = [ // } // }) -// vertical-align -const newVerticalAlign = verticalAligns.map(item => { - return [item[0], ([match, v], { generator }) => { - if (['auto', 'top', 'bottom', 'center'].includes(v)) { - return { 'vertical-align': v } - } else { - return ruleFallback(match, generator) - } - }] -}) - export default [ ...transformEmptyRule( textIndents, @@ -65,8 +53,7 @@ export default [ writingOrientations, textDecorations, textWraps, - fontSmoothings, + fontSmoothings // newFontVariantNumberic, - newVerticalAlign ) ] diff --git a/packages/unocss-base/preset-rn/rules/view-transition.js b/packages/unocss-base/preset-rn/rules/view-transition.js new file mode 100644 index 0000000000..86030db380 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/view-transition.js @@ -0,0 +1,8 @@ +import { viewTransition } from '@unocss/preset-wind/rules' +import { transformEmptyRule } from '../../utils/index.js' + +const viewTransitionRules = transformEmptyRule(viewTransition) + +export { + viewTransitionRules as viewTransition +} diff --git a/packages/unocss-base/utils/index.js b/packages/unocss-base/utils/index.js index 5622cf1226..28a6d798e5 100644 --- a/packages/unocss-base/utils/index.js +++ b/packages/unocss-base/utils/index.js @@ -1,14 +1,14 @@ const EMPTY = ' ' -const isReg = (reg) => { +const isReg = reg => { return reg instanceof RegExp } -const isString = (str) => { +const isString = str => { return typeof str === 'string' } -const isFunction = (fn) => { +const isFunction = fn => { return typeof fn === 'function' } @@ -27,15 +27,20 @@ const genEmptyRule = (...rules) => { } const transformEmptyRule = (...rulesArr) => { - return rulesArr.map(rules => rules.map(rule => { - if (isString(rule[0])) { // staticRule - return [ - [rule[0], null], - [new RegExp(`^${rule[0]}$`), ruleCallback] - ] - } - return [[rule[0], ruleCallback]] - })).reduce((preV, curV) => preV.concat(...curV), []) + return rulesArr + .map(rules => + rules.map(rule => { + if (isString(rule[0])) { + // staticRule + return [ + [rule[0], null], + [new RegExp(`^${rule[0]}$`), ruleCallback] + ] + } + return [[rule[0], ruleCallback]] + }) + ) + .reduce((preV, curV) => preV.concat(...curV), []) } const findRawRules = (matcher, rawRules, byReg = false) => { @@ -43,30 +48,37 @@ const findRawRules = (matcher, rawRules, byReg = false) => { matcher = [matcher] } - return matcher.map(m => { - const result = [] - rawRules.forEach(r => { - const tester = r[0] - if (isString(m)) { - if (byReg) { - if (isReg(tester) && tester.test(m)) { - result.push(r) + return matcher + .map(m => { + const result = [] + rawRules.forEach(r => { + const tester = r[0] + if (isString(m)) { + if (byReg) { + if (isReg(tester) && tester.test(m)) { + result.push(r) + } + } else { + if (isString(tester) && m === tester) { + result.push(r) + } } - } else { - if (isString(tester) && m === tester) { + } else if (isReg(m)) { + if (isString(tester) && m.test(tester)) { result.push(r) } } - } else if (isReg(m)) { - if (isString(tester) && m.test(tester)) { - result.push(r) - } - } + }) + return result }) - return result - }) - .filter(item => !!item.length) - .reduce((preV, curV) => preV.concat(curV), []) + .filter(item => !!item.length) + .reduce((preV, curV) => preV.concat(curV), []) +} + +export const globalKeywords = ['inherit', 'initial', 'revert', 'revert-layer', 'unset'] + +export const makeGlobalStaticRules = prefix => { + return globalKeywords.map(v => `${prefix}-${v}`) } export { From e238722be47039d1d491b458e0ff3edf1581ec4f Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Mon, 23 Dec 2024 14:58:10 +0800 Subject: [PATCH 28/59] [update]add new rules --- packages/unocss-base/lib/index.js | 1 + packages/unocss-base/lib/rn.js | 11 +++++++ .../unocss-base/preset-rn/rules/behaviors.js | 4 ++- .../unocss-base/preset-rn/rules/divider.js | 4 +++ packages/unocss-base/preset-rn/rules/index.js | 6 +++- packages/unocss-base/preset-rn/rules/ring.js | 4 +++ .../unocss-base/preset-rn/rules/shadow.js | 33 +++++++------------ .../unocss-base/preset-rn/rules/static.js | 5 +-- 8 files changed, 43 insertions(+), 25 deletions(-) create mode 100644 packages/unocss-base/preset-rn/rules/divider.js create mode 100644 packages/unocss-base/preset-rn/rules/ring.js diff --git a/packages/unocss-base/lib/index.js b/packages/unocss-base/lib/index.js index 2fb632e336..6fce37b29e 100644 --- a/packages/unocss-base/lib/index.js +++ b/packages/unocss-base/lib/index.js @@ -3,6 +3,7 @@ import { presetUno } from '@unocss/preset-uno' // eslint-disable-next-line const remRE = /(-?[\.\d]+)rem/g +// todo process.env.MPX_CURRENT_TARGET_MODE export default function presetMpx (options = {}) { const uno = presetUno(options) const { baseFontSize = 37.5 } = options diff --git a/packages/unocss-base/lib/rn.js b/packages/unocss-base/lib/rn.js index 619617cd62..910e9bf7d4 100644 --- a/packages/unocss-base/lib/rn.js +++ b/packages/unocss-base/lib/rn.js @@ -5,6 +5,7 @@ export default function presetRnMpx (options = {}) { name: '@mpxjs/unocss-preset-rn', ...presetRn, theme: { + preflightRoot: [], letterSpacing: { tighter: '-0.5px', tight: '-0.25px', @@ -12,6 +13,16 @@ export default function presetRnMpx (options = {}) { wide: '0.25px', wider: '0.5px', widest: '1px' + }, + boxShadow: { + DEFAULT: '0 1px 3px rgba(0 0 0 / 0.1)', + none: '0 0 rgba(0 0 0 / 0)', + sm: '0 1px 2px rgba(0 0 0 / 0.05)', + md: '0 4px 6px rgba(0 0 0 / 0.1)', + lg: '0 10px 15px rgba(0 0 0 / 0.1)', + xl: '0 20px 25px rgba(0 0 0 / 0.1)', + '2xl': '0 25px 50px rgba(0 0 0 / 0.25)', + inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)' } } } diff --git a/packages/unocss-base/preset-rn/rules/behaviors.js b/packages/unocss-base/preset-rn/rules/behaviors.js index 49f5991dba..655ef146cd 100644 --- a/packages/unocss-base/preset-rn/rules/behaviors.js +++ b/packages/unocss-base/preset-rn/rules/behaviors.js @@ -1,4 +1,5 @@ import { imageRenderings, overscrolls, listStyle } from '@unocss/preset-wind/rules' +import { outline } from '@unocss/preset-mini/rules' import { transformEmptyRule } from '../../utils/index.js' // todo @@ -8,6 +9,7 @@ export default [ ...transformEmptyRule( overscrolls, imageRenderings, - listStyle + listStyle, + outline ) ] diff --git a/packages/unocss-base/preset-rn/rules/divider.js b/packages/unocss-base/preset-rn/rules/divider.js new file mode 100644 index 0000000000..ddd5f0d229 --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/divider.js @@ -0,0 +1,4 @@ +import { divides } from '@unocss/preset-wind/rules' +import { transformEmptyRule } from '../../utils/index.js' + +export default transformEmptyRule(divides) diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index cec1d0bf77..0b1c438399 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -7,6 +7,8 @@ import behaviors from './behaviors.js' import layout from './layout.js' import filters from './filters.js' import staticRule from './static.js' +import divider from './divider.js' +import ring from './ring.js' export default [ ...color, @@ -17,5 +19,7 @@ export default [ ...behaviors, ...layout, ...filters, - ...staticRule + ...staticRule, + ...divider, + ...ring ] diff --git a/packages/unocss-base/preset-rn/rules/ring.js b/packages/unocss-base/preset-rn/rules/ring.js new file mode 100644 index 0000000000..b6d2bd27ae --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/ring.js @@ -0,0 +1,4 @@ +import { rings } from '@unocss/preset-mini/rules' +import { transformEmptyRule } from '../../utils' + +export default transformEmptyRule(rings) diff --git a/packages/unocss-base/preset-rn/rules/shadow.js b/packages/unocss-base/preset-rn/rules/shadow.js index ac24e3786d..533bce0a85 100644 --- a/packages/unocss-base/preset-rn/rules/shadow.js +++ b/packages/unocss-base/preset-rn/rules/shadow.js @@ -1,28 +1,19 @@ -import { boxShadowsBase, boxShadows } from '@unocss/preset-mini/rules' +import { colorableShadows, colorResolver, h, hasParseableColor } from '@unocss/preset-mini/utils' -const findShadowColorRule = () => { - return boxShadows.find(rule => { - if (rule[0] instanceof RegExp && rule[0].test('shadow')) { - return rule - } - return false - }) || [] -} - -const shadowColorRule = findShadowColorRule() +const boxShadows = [ + [/^shadow(?:-(.+))?$/, (match, context) => { + const [, d] = match + const { theme } = context + const v = theme.boxShadow?.[d || 'DEFAULT'] + const c = d ? h.bracket.cssvar(d) : undefined -export default [ - [shadowColorRule[0], (match, context) => { - const rawHandler = shadowColorRule[1] - const rawResult = rawHandler(match, context) - if (rawResult['box-shadow']) { + if ((v != null || c != null) && !hasParseableColor(c, theme, 'shadowColor')) { return { - ...boxShadowsBase, - ...rawResult + 'box-shadow': colorableShadows(v || c, '--un-shadow-color').join(',') } - } else { - // 工具类 - return rawResult } + return colorResolver('--un-shadow-color', 'shadow', 'shadowColor')(match, context) }] ] + +export default boxShadows diff --git a/packages/unocss-base/preset-rn/rules/static.js b/packages/unocss-base/preset-rn/rules/static.js index 6e7adbbc56..f74fc7cae7 100644 --- a/packages/unocss-base/preset-rn/rules/static.js +++ b/packages/unocss-base/preset-rn/rules/static.js @@ -1,6 +1,7 @@ -import { backgroundBlendModes } from '@unocss/preset-wind/rules' +import { backgroundBlendModes, mixBlendModes } from '@unocss/preset-wind/rules' import { transformEmptyRule } from '../../utils/index.js' export default transformEmptyRule( - backgroundBlendModes + backgroundBlendModes, + mixBlendModes ) From dbccab7b5df10b0c3ab94518c23f461fa6e71714 Mon Sep 17 00:00:00 2001 From: mater Date: Mon, 23 Dec 2024 15:39:32 +0800 Subject: [PATCH 29/59] fix: rules --- .../unocss-base/preset-rn/rules/container.js | 7 ++++--- packages/unocss-base/preset-rn/rules/divide.js | 6 +++--- packages/unocss-base/preset-rn/rules/gap.js | 15 +++++++++++++-- packages/unocss-base/preset-rn/rules/index.js | 18 +++++++++++++----- .../unocss-base/preset-rn/rules/positions.js | 5 ----- packages/unocss-base/preset-rn/rules/size.js | 1 - packages/unocss-base/preset-rn/rules/svg.js | 7 ++++++- .../unocss-base/preset-rn/rules/transform.js | 1 - .../unocss-base/preset-rn/rules/transition.js | 7 ++++++- packages/unocss-base/utils/index.js | 1 + 10 files changed, 46 insertions(+), 22 deletions(-) delete mode 100644 packages/unocss-base/preset-rn/rules/size.js delete mode 100644 packages/unocss-base/preset-rn/rules/transform.js diff --git a/packages/unocss-base/preset-rn/rules/container.js b/packages/unocss-base/preset-rn/rules/container.js index 785be40087..2d1653f420 100644 --- a/packages/unocss-base/preset-rn/rules/container.js +++ b/packages/unocss-base/preset-rn/rules/container.js @@ -1,10 +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) - -// TODO wind container +const containerRules = transformEmptyRule(container) export { - containerParentRules as containerParent + containerParentRules as containerParent, + containerRules as container } diff --git a/packages/unocss-base/preset-rn/rules/divide.js b/packages/unocss-base/preset-rn/rules/divide.js index b1769b0a01..7711fe9969 100644 --- a/packages/unocss-base/preset-rn/rules/divide.js +++ b/packages/unocss-base/preset-rn/rules/divide.js @@ -1,9 +1,9 @@ -import { divide } from '@unocss/preset-wind/rules' +import { divides } from '@unocss/preset-wind/rules' import { ruleCallback } from '../../utils/index.js' const unSupport = ['s', 'e', 'bs', 'be', 'is', 'ie', 'block', 'inline'] -const divideRules = divide.map(v => { +const divideRules = divides.map(v => { const [regex, matcher, ...another] = v return [ regex, @@ -16,4 +16,4 @@ const divideRules = divide.map(v => { ] }) -export { divideRules as divide } +export { divideRules as divides } diff --git a/packages/unocss-base/preset-rn/rules/gap.js b/packages/unocss-base/preset-rn/rules/gap.js index 36c5b5d403..94db3261aa 100644 --- a/packages/unocss-base/preset-rn/rules/gap.js +++ b/packages/unocss-base/preset-rn/rules/gap.js @@ -1,7 +1,18 @@ import { gaps } from '@unocss/preset-mini/rules' +import { ruleCallback } from '../../utils/index.js' -// TODO 这里要看下 gaps 的实现 需要移除grid -const gapsRules = gaps +const gapsRules = gaps.map(v => { + const [regex, matcher, ...another] = v + return [ + regex, + (...args) => { + const [[a]] = args + if (a.startsWith('grid')) return ruleCallback(...args) + return matcher(...args) + }, + ...another + ] +}) export { gapsRules as gaps diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index ff97e9c3e9..77d508c635 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -29,22 +29,24 @@ import { orders, placements, positions, - insets, floats, boxSizing } from './positions.js' import { flex } from './flex.js' import { globalRules } from './global.js' import { textAligns, verticalAligns } from './align.js' -import { containerParent } from './container.js' +import { container, containerParent } from './container.js' import { animations } from './animation.js' import { columns } from './columns.js' -import { divide } from './divide.js' +import { divides } from './divide.js' import { placeholders } from './placeholder.js' import { scrolls } from './scrolls.js' import { tables } from './table.js' import { touchActions } from './touch-actions.js' import { viewTransition } from './view-transition.js' +import { gaps } from './gap.js' +import { transitions } from './transition.js' +import { svgUtilities } from './svg.js' export default [ ...typography, @@ -59,6 +61,7 @@ export default [ ...backgroundStyles, // container ...containerParent, + ...container, // layout ...overflows, // positions @@ -68,7 +71,6 @@ export default [ ...justifies, ...orders, ...placements, - ...insets, ...flexGridJustifiesAlignments, ...boxSizing, // static @@ -96,7 +98,7 @@ export default [ // columns ...columns, // divide - ...divide, + ...divides, // placeholder ...placeholders, // scrolls @@ -107,6 +109,12 @@ export default [ ...touchActions, // view-transition ...viewTransition, + // gap + ...gaps, + // transition + ...transitions, + // svg + ...svgUtilities, // global ...globalRules ] diff --git a/packages/unocss-base/preset-rn/rules/positions.js b/packages/unocss-base/preset-rn/rules/positions.js index 3f4b0c08eb..b371f7b2de 100644 --- a/packages/unocss-base/preset-rn/rules/positions.js +++ b/packages/unocss-base/preset-rn/rules/positions.js @@ -4,7 +4,6 @@ import { orders, alignments, placements, - insets, floats, boxSizing } from '@unocss/preset-mini/rules' @@ -68,9 +67,6 @@ const flexGridJustifiesAlignmentsRules = transformEmptyRule([ ]) ]) -// TODO -const insetsRules = [...insets] - // floats 不支持的属性抽离并覆盖 const floatsRules = transformEmptyRule(floats) @@ -84,7 +80,6 @@ export { ordersRules as orders, placementsRules as placements, flexGridJustifiesAlignmentsRules as flexGridJustifiesAlignments, - insetsRules as insets, floatsRules as floats, boxSizingRules as boxSizing } diff --git a/packages/unocss-base/preset-rn/rules/size.js b/packages/unocss-base/preset-rn/rules/size.js deleted file mode 100644 index 700862bcc3..0000000000 --- a/packages/unocss-base/preset-rn/rules/size.js +++ /dev/null @@ -1 +0,0 @@ -// TODO 这里要看下 diff --git a/packages/unocss-base/preset-rn/rules/svg.js b/packages/unocss-base/preset-rn/rules/svg.js index 83a89f0dc9..6a9bd3c010 100644 --- a/packages/unocss-base/preset-rn/rules/svg.js +++ b/packages/unocss-base/preset-rn/rules/svg.js @@ -1 +1,6 @@ -// svg stroke 看起来装了其它就可以支持部分属性 +import { svgUtilities } from '@unocss/preset-mini/rules' +import { transformEmptyRule } from '../../utils/index.js' + +const svgUtilitiesRules = transformEmptyRule(svgUtilities) + +export { svgUtilitiesRules as svgUtilities } diff --git a/packages/unocss-base/preset-rn/rules/transform.js b/packages/unocss-base/preset-rn/rules/transform.js deleted file mode 100644 index 5ccb051971..0000000000 --- a/packages/unocss-base/preset-rn/rules/transform.js +++ /dev/null @@ -1 +0,0 @@ -// transform-gpu ? preserve-3d ? diff --git a/packages/unocss-base/preset-rn/rules/transition.js b/packages/unocss-base/preset-rn/rules/transition.js index bdc9a1f544..80f077f94e 100644 --- a/packages/unocss-base/preset-rn/rules/transition.js +++ b/packages/unocss-base/preset-rn/rules/transition.js @@ -1 +1,6 @@ -// 实验性支持 +import { transitions } from '@unocss/preset-mini/rules' +import { transformEmptyRule } from '../../utils/index.js' + +const transitionsRules = transformEmptyRule(transitions) + +export { transitionsRules as transitions } diff --git a/packages/unocss-base/utils/index.js b/packages/unocss-base/utils/index.js index 28a6d798e5..237733f673 100644 --- a/packages/unocss-base/utils/index.js +++ b/packages/unocss-base/utils/index.js @@ -17,6 +17,7 @@ const ruleCallback = ([match], { generator }) => { } const ruleFallback = (match, generator) => { + console.log(1212313, match, !!generator) generator._mpx2rnUnsuportedRules = generator._mpx2rnUnsuportedRules || [] generator._mpx2rnUnsuportedRules.push(match) return EMPTY From f5f416008f00e271d667af79f9143f916a8bbd17 Mon Sep 17 00:00:00 2001 From: mater Date: Mon, 23 Dec 2024 15:41:04 +0800 Subject: [PATCH 30/59] fix: console --- packages/unocss-base/utils/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/unocss-base/utils/index.js b/packages/unocss-base/utils/index.js index 237733f673..28a6d798e5 100644 --- a/packages/unocss-base/utils/index.js +++ b/packages/unocss-base/utils/index.js @@ -17,7 +17,6 @@ const ruleCallback = ([match], { generator }) => { } const ruleFallback = (match, generator) => { - console.log(1212313, match, !!generator) generator._mpx2rnUnsuportedRules = generator._mpx2rnUnsuportedRules || [] generator._mpx2rnUnsuportedRules.push(match) return EMPTY From dc6373f4cf0c2af19d44369d9df3853bef134085 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Mon, 23 Dec 2024 16:11:54 +0800 Subject: [PATCH 31/59] [update]optimize combine preset --- packages/unocss-base/lib/index.js | 14 +++++++++++--- packages/unocss-base/lib/rn.js | 2 +- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/unocss-base/lib/index.js b/packages/unocss-base/lib/index.js index 6fce37b29e..009ec6d406 100644 --- a/packages/unocss-base/lib/index.js +++ b/packages/unocss-base/lib/index.js @@ -1,12 +1,19 @@ import { presetUno } from '@unocss/preset-uno' +import presetRn from './rn.js' // eslint-disable-next-line const remRE = /(-?[\.\d]+)rem/g -// todo process.env.MPX_CURRENT_TARGET_MODE export default function presetMpx (options = {}) { const uno = presetUno(options) const { baseFontSize = 37.5 } = options + const mpxCurrentTargetMode = process.env.MPX_CURRENT_TARGET_MODE + const isReact = mpxCurrentTargetMode === 'ios' || mpxCurrentTargetMode === 'android' + const extraPresets = [] + if (isReact) { + extraPresets.push(presetRn()) + } + return { ...uno, name: '@mpxjs/unocss-base', @@ -18,11 +25,12 @@ export default 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 } } diff --git a/packages/unocss-base/lib/rn.js b/packages/unocss-base/lib/rn.js index 910e9bf7d4..430665c338 100644 --- a/packages/unocss-base/lib/rn.js +++ b/packages/unocss-base/lib/rn.js @@ -1,6 +1,6 @@ import presetRn from '../preset-rn/index.js' -export default function presetRnMpx (options = {}) { +export default function presetRnMpx () { return { name: '@mpxjs/unocss-preset-rn', ...presetRn, From b5e03c41c7817a3941555d3f58ee283bee50a9aa Mon Sep 17 00:00:00 2001 From: mater Date: Mon, 23 Dec 2024 17:10:37 +0800 Subject: [PATCH 32/59] fix: divide support --- packages/unocss-base/preset-rn/rules/divide.js | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/packages/unocss-base/preset-rn/rules/divide.js b/packages/unocss-base/preset-rn/rules/divide.js index 7711fe9969..bb490d0988 100644 --- a/packages/unocss-base/preset-rn/rules/divide.js +++ b/packages/unocss-base/preset-rn/rules/divide.js @@ -1,19 +1,6 @@ import { divides } from '@unocss/preset-wind/rules' -import { ruleCallback } from '../../utils/index.js' +import { transformEmptyRule } from '../../utils/index.js' -const unSupport = ['s', 'e', 'bs', 'be', 'is', 'ie', 'block', 'inline'] - -const divideRules = divides.map(v => { - const [regex, matcher, ...another] = v - return [ - regex, - (...args) => { - const [[, direction]] = args - if (unSupport.includes(direction)) return ruleCallback(...args) - return matcher(...args) - }, - ...another - ] -}) +const divideRules = transformEmptyRule(divides) export { divideRules as divides } From c4c982531a29bf961d6770210c8b8085c4728508 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Tue, 24 Dec 2024 11:48:19 +0800 Subject: [PATCH 33/59] [feat]support dark mode --- .../builtInMixins/styleHelperMixin.ios.js | 38 +++---------------- .../lib/template-compiler/compiler.js | 14 ++++++- 2 files changed, 18 insertions(+), 34 deletions(-) diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js index 57df91849e..0ba7cecb9e 100644 --- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js +++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js @@ -1,5 +1,5 @@ import { isObject, isArray, dash2hump, isFunction, cached, getFocusedNavigation } from '@mpxjs/utils' -import { Dimensions, StyleSheet } from 'react-native' +import { Dimensions, StyleSheet, Appearance } from 'react-native' function rpx (value) { const { width } = Dimensions.get('screen') @@ -37,35 +37,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 } @@ -208,11 +179,14 @@ export default function styleHelperMixin () { if (!mediaQueryClass.length) return '' // todo 后续可优化，cache 能力 const { width, height } = Dimensions.get('screen') + const colorScheme = Appearance.getColorScheme() const { entries, entriesMap } = global.__getUnoBreakpoints() - return mediaQueryClass.map(([className, breakpoints = []]) => { - const res = breakpoints.every(([prefix = '', point = 0]) => { + 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-') diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index 195957fbec..3804673d61 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -1071,6 +1071,7 @@ const initVariants = (unoCtx) => { const breakPointsReg = new RegExp(`([al]t-|[<~]|max-)?(${breakpoints})(?:${separators})`) const orientationReg = new RegExp(`(landscape|portrait)(?:${separators})`) const pseudoClassReg = new RegExp(`(hover)(?:${separators})`) // 目前仅处理了 hover 状态 + const colorSchemeReg = new RegExp(`(dark|light)(?:${separators})`) unoVariantCached = { sizePseudo: { rule: sizePseudoReg, @@ -1099,7 +1100,16 @@ const initVariants = (unoCtx) => { } } }, - pseudoClassReg + colorScheme: { + rule: colorSchemeReg, + matcher (input) { + return { + prefix: input[1], + point: '' + } + } + }, + pseudoClassReg, } return unoVariantCached } @@ -1108,7 +1118,7 @@ function processVariants (staticClass = '', variants) { const pseudoClass = {} const pseudoWithMediaQueryClass = [] const mediaQueryClass = [] - const bReg = [variants.sizePseudo, variants.breakPoints, variants.orientation] + const bReg = [variants.sizePseudo, variants.breakPoints, variants.orientation, variants.colorScheme] const newStaticClass = staticClass.split(/\s+/).map(rawClass => { let applied = true const className = rawClass From 8d21de4ab94bbfd4473eede98956999ce59aa44c Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Tue, 24 Dec 2024 14:10:52 +0800 Subject: [PATCH 34/59] [update]typograph rule --- .../unocss-base/preset-rn/rules/typography.js | 21 +++---------------- 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/packages/unocss-base/preset-rn/rules/typography.js b/packages/unocss-base/preset-rn/rules/typography.js index 9c1e291cac..3da6c174d3 100644 --- a/packages/unocss-base/preset-rn/rules/typography.js +++ b/packages/unocss-base/preset-rn/rules/typography.js @@ -2,9 +2,8 @@ import { transformEmptyRule, ruleFallback } from '../../utils/index.js' import { writingModes, writingOrientations, - hyphens - // fontVariantNumericBase, - // fontVariantNumeric + hyphens, + fontVariantNumeric } from '@unocss/preset-wind/rules' import { textStrokes, @@ -27,20 +26,6 @@ const textDecorations = [ [/^(?:underline|decoration)-offset-(.+)$/] ] -// todo 覆写 font-variant-numberic，和 RN 支持的属性拉齐 -// const newFontVariantNumberic = fontVariantNumeric.map(item => { -// const rule = item[0] -// const rawResult = item[1]() -// if (rule === 'normal-nums') { -// return item -// } else { -// return [rule, { -// ...fontVariantNumericBase, -// ...rawResult -// }] -// } -// }) - // vertical-align const newVerticalAlign = verticalAligns.map(item => { return [item[0], ([match, v], { generator }) => { @@ -66,7 +51,7 @@ export default [ textDecorations, textWraps, fontSmoothings, - // newFontVariantNumberic, + fontVariantNumeric, newVerticalAlign ) ] From a3dacd49fab9282e0249e4ab85377a4021b2e07f Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Tue, 24 Dec 2024 15:31:20 +0800 Subject: [PATCH 35/59] [update]border rule --- packages/unocss-base/preset-rn/rules/border.js | 17 +++++++++++++++++ packages/unocss-base/preset-rn/rules/index.js | 4 +++- packages/unocss-base/preset-rn/rules/ring.js | 2 +- 3 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 packages/unocss-base/preset-rn/rules/border.js diff --git a/packages/unocss-base/preset-rn/rules/border.js b/packages/unocss-base/preset-rn/rules/border.js new file mode 100644 index 0000000000..f4f5c4ee23 --- /dev/null +++ b/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 diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index 0b1c438399..dd37bc5427 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -9,6 +9,7 @@ import filters from './filters.js' import staticRule from './static.js' import divider from './divider.js' import ring from './ring.js' +import border from './border.js' export default [ ...color, @@ -21,5 +22,6 @@ export default [ ...filters, ...staticRule, ...divider, - ...ring + ...ring, + ...border ] diff --git a/packages/unocss-base/preset-rn/rules/ring.js b/packages/unocss-base/preset-rn/rules/ring.js index b6d2bd27ae..edc99c5eab 100644 --- a/packages/unocss-base/preset-rn/rules/ring.js +++ b/packages/unocss-base/preset-rn/rules/ring.js @@ -1,4 +1,4 @@ import { rings } from '@unocss/preset-mini/rules' -import { transformEmptyRule } from '../../utils' +import { transformEmptyRule } from '../../utils/index.js' export default transformEmptyRule(rings) From 30e96f7678d7fa66eb59cbc4c41a89c66ee85a18 Mon Sep 17 00:00:00 2001 From: mater Date: Tue, 24 Dec 2024 16:21:18 +0800 Subject: [PATCH 36/59] fix: preset --- packages/unocss-base/preset-rn/rules/behaviors.js | 7 +++++-- packages/unocss-base/preset-rn/rules/index.js | 6 +++++- packages/unocss-base/preset-rn/rules/spacing.js | 15 ++------------- packages/unocss-base/preset-rn/rules/static.js | 10 ++++++++-- 4 files changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/unocss-base/preset-rn/rules/behaviors.js b/packages/unocss-base/preset-rn/rules/behaviors.js index db778cd036..ff9d22798a 100644 --- a/packages/unocss-base/preset-rn/rules/behaviors.js +++ b/packages/unocss-base/preset-rn/rules/behaviors.js @@ -1,4 +1,4 @@ -import { imageRenderings, overscrolls, listStyle } from '@unocss/preset-wind/rules' +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' @@ -12,6 +12,9 @@ export default [ listStyle, outline, willChange, - appearance + appearance, + accents, + carets, + willChange ) ] diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index 77d508c635..8f84932aeb 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -21,7 +21,9 @@ import { textOverflows, fontStyles, fontSmoothings, - hyphens + hyphens, + objectPositions, + isolations } from './static.js' import { flexGridJustifiesAlignments, @@ -89,6 +91,8 @@ export default [ ...fontStyles, ...fontSmoothings, ...hyphens, + ...objectPositions, + ...isolations, // spaceing ...paddings, ...margins, diff --git a/packages/unocss-base/preset-rn/rules/spacing.js b/packages/unocss-base/preset-rn/rules/spacing.js index 50636cd665..5aea724497 100644 --- a/packages/unocss-base/preset-rn/rules/spacing.js +++ b/packages/unocss-base/preset-rn/rules/spacing.js @@ -1,6 +1,6 @@ import { margins, paddings } from '@unocss/preset-mini/rules' import { spaces } from '@unocss/preset-wind/rules' -import { ruleCallback } from '../../utils/index.js' +import { ruleCallback, transformEmptyRule } from '../../utils/index.js' const unSupport = [ 's', @@ -39,18 +39,7 @@ const marginsRules = margins.map(v => { ] }) -const spacesRules = spaces.map(v => { - const [regex, matcher, ...another] = v - return [ - regex, - (...args) => { - const [[, direction]] = args - if (unSupport.includes(direction)) return ruleCallback(...args) - return matcher(...args) - }, - ...another - ] -}) +const spacesRules = transformEmptyRule(spaces) export { paddingsRules as paddings, diff --git a/packages/unocss-base/preset-rn/rules/static.js b/packages/unocss-base/preset-rn/rules/static.js index ef5c63670b..6d210916b1 100644 --- a/packages/unocss-base/preset-rn/rules/static.js +++ b/packages/unocss-base/preset-rn/rules/static.js @@ -13,7 +13,7 @@ import { textWraps, whitespaces } from '@unocss/preset-mini/rules' -import { backgroundBlendModes, hyphens } from '@unocss/preset-wind/rules' +import { backgroundBlendModes, hyphens, isolations, objectPositions } from '@unocss/preset-wind/rules' import { findRawRules, transformEmptyRule } from '../../utils/index.js' // display不支持的属性抽离并覆盖 @@ -58,6 +58,10 @@ const fontSmoothingsRules = transformEmptyRule(fontSmoothings) const hyphensRules = transformEmptyRule(hyphens) +const objectPositionsRules = transformEmptyRule(objectPositions) + +const isolationsRules = transformEmptyRule(isolations) + export { backgroundBlendModesRules as backgroundBlendModes, displaysRules as displays, @@ -73,5 +77,7 @@ export { textOverflowsRules as textOverflows, fontStylesRules as fontStyles, fontSmoothingsRules as fontSmoothings, - hyphensRules as hyphens + hyphensRules as hyphens, + objectPositionsRules as objectPositions, + isolationsRules as isolations } From eaaf945d1f0934ae6991341431c9f0da1fd6cbdd Mon Sep 17 00:00:00 2001 From: mater Date: Tue, 24 Dec 2024 20:59:49 +0800 Subject: [PATCH 37/59] fix: transform --- packages/unocss-base/preset-rn/rules/index.js | 3 + .../unocss-base/preset-rn/rules/transforms.js | 65 +++++++++++++++++++ 2 files changed, 68 insertions(+) create mode 100644 packages/unocss-base/preset-rn/rules/transforms.js diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index 20e1728ca8..e2fa45397a 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -52,6 +52,7 @@ import { transitions } from './transition.js' import { svgUtilities } from './svg.js' import ring from './ring.js' import border from './border.js' +import { transforms } from './transforms.js' export default [ ...typography, @@ -125,6 +126,8 @@ export default [ ...transitions, // svg ...svgUtilities, + // transforms + ...transforms, // global ...globalRules ] diff --git a/packages/unocss-base/preset-rn/rules/transforms.js b/packages/unocss-base/preset-rn/rules/transforms.js new file mode 100644 index 0000000000..d76a133a4a --- /dev/null +++ b/packages/unocss-base/preset-rn/rules/transforms.js @@ -0,0 +1,65 @@ +import { transforms } from '@unocss/preset-mini/rules' + +const transformBase = { + '--un-rotate': '0deg', + '--un-rotate-x': '0deg', + '--un-rotate-y': '0deg', + '--un-rotate-z': '0deg', + '--un-scale-x': 1, + '--un-scale-y': 1, + '--un-scale-z': 1, + '--un-skew-x': '0deg', + '--un-skew-y': '0deg', + '--un-translate-x': 0, + '--un-translate-y': 0, + '--un-translate-z': 0 +} + +const checkVars = [ + '--un-rotate', + '--un-rotate-x', + '--un-rotate-y', + '--un-rotate-z', + '--un-skew-x', + '--un-skew-y' +] + +function getPreflight (preflightKeys) { + return Object.fromEntries(preflightKeys.map(key => [key, transformBase[key]])) +} + +const transformRules = transforms.map(v => { + const [regex, matcher, ...another] = v + const options = another[0] + if (options && options.custom && options.custom.preflightKeys) { + if (typeof matcher === 'function') { + return [ + regex, + (...args) => { + let res = matcher(...args) + if (res) { + const preflight = getPreflight(options.custom.preflightKeys) + if (Array.isArray(res)) { + res = Object.fromEntries(res) + } + res = Object.assign(preflight, res) + checkVars.forEach(key => { + if (res[key] !== undefined && res[key] === 0) { + res[key] = '0deg' + } + }) + } + return res + }, + ...another + ] + } + if (typeof matcher === 'object') { + const preflight = getPreflight(options.custom.preflightKeys) + Object.assign(matcher, preflight) + } + } + return v +}) + +export { transformRules as transforms } From c5cbd43f444da9e980dc347f36df7dad060b9612 Mon Sep 17 00:00:00 2001 From: mater Date: Wed, 25 Dec 2024 10:41:25 +0800 Subject: [PATCH 38/59] fix: format --- packages/unocss-base/utils/index.js | 68 +++++++++++++---------------- 1 file changed, 31 insertions(+), 37 deletions(-) diff --git a/packages/unocss-base/utils/index.js b/packages/unocss-base/utils/index.js index 28a6d798e5..0f1e460341 100644 --- a/packages/unocss-base/utils/index.js +++ b/packages/unocss-base/utils/index.js @@ -1,14 +1,14 @@ const EMPTY = ' ' -const isReg = reg => { +const isReg = (reg) => { return reg instanceof RegExp } -const isString = str => { +const isString = (str) => { return typeof str === 'string' } -const isFunction = fn => { +const isFunction = (fn) => { return typeof fn === 'function' } @@ -27,20 +27,15 @@ const genEmptyRule = (...rules) => { } const transformEmptyRule = (...rulesArr) => { - return rulesArr - .map(rules => - rules.map(rule => { - if (isString(rule[0])) { - // staticRule - return [ - [rule[0], null], - [new RegExp(`^${rule[0]}$`), ruleCallback] - ] - } - return [[rule[0], ruleCallback]] - }) - ) - .reduce((preV, curV) => preV.concat(...curV), []) + return rulesArr.map(rules => rules.map(rule => { + if (isString(rule[0])) { // staticRule + return [ + [rule[0], null], + [new RegExp(`^${rule[0]}$`), ruleCallback] + ] + } + return [[rule[0], ruleCallback]] + })).reduce((preV, curV) => preV.concat(...curV), []) } const findRawRules = (matcher, rawRules, byReg = false) => { @@ -48,31 +43,30 @@ const findRawRules = (matcher, rawRules, byReg = false) => { matcher = [matcher] } - return matcher - .map(m => { - const result = [] - rawRules.forEach(r => { - const tester = r[0] - if (isString(m)) { - if (byReg) { - if (isReg(tester) && tester.test(m)) { - result.push(r) - } - } else { - if (isString(tester) && m === tester) { - result.push(r) - } + return matcher.map(m => { + const result = [] + rawRules.forEach(r => { + const tester = r[0] + if (isString(m)) { + if (byReg) { + if (isReg(tester) && tester.test(m)) { + result.push(r) } - } else if (isReg(m)) { - if (isString(tester) && m.test(tester)) { + } else { + if (isString(tester) && m === tester) { result.push(r) } } - }) - return result + } else if (isReg(m)) { + if (isString(tester) && m.test(tester)) { + result.push(r) + } + } }) - .filter(item => !!item.length) - .reduce((preV, curV) => preV.concat(curV), []) + return result + }) + .filter(item => !!item.length) + .reduce((preV, curV) => preV.concat(curV), []) } export const globalKeywords = ['inherit', 'initial', 'revert', 'revert-layer', 'unset'] From 7e1327e47bd05b286644349ab19b95ae10959b5b Mon Sep 17 00:00:00 2001 From: mater Date: Wed, 25 Dec 2024 19:36:18 +0800 Subject: [PATCH 39/59] fix: support rule --- packages/unocss-base/preset-rn/rules/background.js | 6 +++--- packages/unocss-base/preset-rn/rules/positions.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/unocss-base/preset-rn/rules/background.js b/packages/unocss-base/preset-rn/rules/background.js index 5f8ccc9aff..25b1faef50 100644 --- a/packages/unocss-base/preset-rn/rules/background.js +++ b/packages/unocss-base/preset-rn/rules/background.js @@ -1,8 +1,8 @@ import { backgroundStyles } from '@unocss/preset-wind/rules' -import { findRawRules } from '../../utils/index.js' +import { findRawRules, transformEmptyRule } from '../../utils/index.js' // todo background-position 剔除 -const NewBackgroundRules = findRawRules( +const NewBackgroundRules = transformEmptyRule(findRawRules( [ // attachments 'bg-fixed', @@ -16,6 +16,6 @@ const NewBackgroundRules = findRawRules( /^bg-clip-.*/ ], backgroundStyles -) +)) export { NewBackgroundRules as backgroundStyles } diff --git a/packages/unocss-base/preset-rn/rules/positions.js b/packages/unocss-base/preset-rn/rules/positions.js index b371f7b2de..ddb2061ada 100644 --- a/packages/unocss-base/preset-rn/rules/positions.js +++ b/packages/unocss-base/preset-rn/rules/positions.js @@ -13,7 +13,7 @@ import { transformEmptyRule } from '../../utils/index.js' -const unSupport = ['sticky'] +const unSupport = ['sticky', 'fixed'] // position 不支持的属性抽离并覆盖 const positionsRules = positions.map(v => { const [regex, matcher, ...another] = v From 8161d1b1df8f792ec8bc6ba39510652dd66b072c Mon Sep 17 00:00:00 2001 From: mater Date: Thu, 26 Dec 2024 10:40:51 +0800 Subject: [PATCH 40/59] fix: wx build error --- legacy/windicss-plugin/lib/index.js | 2 +- packages/unocss-plugin/lib/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/legacy/windicss-plugin/lib/index.js b/legacy/windicss-plugin/lib/index.js index df2410a8c7..3de75d356f 100644 --- a/legacy/windicss-plugin/lib/index.js +++ b/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) { diff --git a/packages/unocss-plugin/lib/index.js b/packages/unocss-plugin/lib/index.js index 4b1d4536e4..e86212252b 100644 --- a/packages/unocss-plugin/lib/index.js +++ b/packages/unocss-plugin/lib/index.js @@ -2,7 +2,7 @@ import * as path from 'path' import { minimatch } from 'minimatch' import * as unoConfig from '@unocss/config' import * as core from '@unocss/core' -import * as mpxConfig from '@mpxjs/webpack-plugin/lib/config.js' +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' @@ -220,7 +220,7 @@ class MpxUnocssPlugin { 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] || [] From 77e9d1af0fa12d83bbd95e008dda5cc062d2c542 Mon Sep 17 00:00:00 2001 From: mater Date: Thu, 26 Dec 2024 10:46:53 +0800 Subject: [PATCH 41/59] fix: import --- packages/unocss-plugin/lib/index.js | 4 ++-- packages/unocss-plugin/lib/rn-plugin/index.js | 2 +- packages/unocss-plugin/lib/web-plugin/index.js | 7 +++---- packages/unocss-plugin/lib/web-plugin/utils.js | 2 +- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/unocss-plugin/lib/index.js b/packages/unocss-plugin/lib/index.js index e86212252b..13497e0eee 100644 --- a/packages/unocss-plugin/lib/index.js +++ b/packages/unocss-plugin/lib/index.js @@ -12,7 +12,7 @@ import MpxWebpackPlugin from '@mpxjs/webpack-plugin' import { UnoCSSWebpackPlugin } from './web-plugin/index.js' import { UnoCSSRNWebpackPlugin } from './rn-plugin/index.js' import transformerDirectives from '@unocss/transformer-directives' -import * as transformerVariantGroup from '@unocss/transformer-variant-group' +import transformerVariantGroup from '@unocss/transformer-variant-group' import { parseClasses, parseStrings, @@ -33,7 +33,7 @@ import { mpEscape, cssRequiresTransform } from './transform.js' -import * as platformPreflightsMap from './platform.js' +import platformPreflightsMap from './platform.js' const { has } = set const { isWeb, isReact } = env diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js index 9ebcb2a9e2..199463b87b 100644 --- a/packages/unocss-plugin/lib/rn-plugin/index.js +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -1,5 +1,5 @@ import WebpackSources from 'webpack-sources' -import * as nodePath from 'node:path' +import nodePath from 'path' import { createContext, normalizeAbsolutePath } from '../web-plugin/utils.js' import { RESOLVED_ID_RE } from '../web-plugin/consts.js' import { getClassMap } from '@mpxjs/webpack-plugin/lib/react/style-helper.js' diff --git a/packages/unocss-plugin/lib/web-plugin/index.js b/packages/unocss-plugin/lib/web-plugin/index.js index 9d20fe57a6..34bf444867 100644 --- a/packages/unocss-plugin/lib/web-plugin/index.js +++ b/packages/unocss-plugin/lib/web-plugin/index.js @@ -1,8 +1,8 @@ import WebpackSources from 'webpack-sources' import VirtualModulesPlugin from 'webpack-virtual-modules' -import * as nodePath from 'node:path' -import * as process from 'process' -import * as fs from 'fs' +import nodePath, { dirname } from 'path' +import process from 'process' +import fs from 'fs' import { createContext, getPath, @@ -16,7 +16,6 @@ import { resolveId, resolveLayer } from './consts.js' -import { dirname } from 'path' import { fileURLToPath } from 'url' const __dirname = dirname(fileURLToPath(import.meta.url)) diff --git a/packages/unocss-plugin/lib/web-plugin/utils.js b/packages/unocss-plugin/lib/web-plugin/utils.js index c88558bada..89d431a636 100644 --- a/packages/unocss-plugin/lib/web-plugin/utils.js +++ b/packages/unocss-plugin/lib/web-plugin/utils.js @@ -1,7 +1,7 @@ import * as pluginutils from '@rollup/pluginutils' import * as config from '@unocss/config' import * as core from '@unocss/core' -import * as nodePath from 'node:path' +import nodePath from 'path' import MagicString from 'magic-string' import remapping from '@ampproject/remapping' From b918849d0f161a07bd8075e3eef8c3f92690ee80 Mon Sep 17 00:00:00 2001 From: mater Date: Thu, 26 Dec 2024 11:37:22 +0800 Subject: [PATCH 42/59] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4transform?= =?UTF-8?q?=E4=BB=8E=E4=B8=80=E4=BA=9B=E5=B7=A5=E5=85=B7=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/unocss-base/preset-rn/rules/transforms.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/unocss-base/preset-rn/rules/transforms.js b/packages/unocss-base/preset-rn/rules/transforms.js index d76a133a4a..bc18df1070 100644 --- a/packages/unocss-base/preset-rn/rules/transforms.js +++ b/packages/unocss-base/preset-rn/rules/transforms.js @@ -38,16 +38,15 @@ const transformRules = transforms.map(v => { (...args) => { let res = matcher(...args) if (res) { - const preflight = getPreflight(options.custom.preflightKeys) if (Array.isArray(res)) { res = Object.fromEntries(res) } - res = Object.assign(preflight, res) checkVars.forEach(key => { if (res[key] !== undefined && res[key] === 0) { res[key] = '0deg' } }) + delete res.transform } return res }, From dd43b0776c9f338f593d16c9503a9e6b5e658a62 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 26 Dec 2024 11:38:02 +0800 Subject: [PATCH 43/59] [update]preset --- packages/unocss-base/lib/index.js | 2 +- packages/unocss-base/lib/rn.js | 29 ------------------- packages/unocss-base/preset-rn/index.js | 11 ++++--- packages/unocss-base/preset-rn/theme.js | 21 ++++++++++++++ .../unocss-base/preset-rn/variants/index.js | 14 --------- .../unocss-base/preset-rn/variants/pseudo.js | 2 -- 6 files changed, 29 insertions(+), 50 deletions(-) delete mode 100644 packages/unocss-base/lib/rn.js create mode 100644 packages/unocss-base/preset-rn/theme.js delete mode 100644 packages/unocss-base/preset-rn/variants/index.js delete mode 100644 packages/unocss-base/preset-rn/variants/pseudo.js diff --git a/packages/unocss-base/lib/index.js b/packages/unocss-base/lib/index.js index 009ec6d406..887945a8f2 100644 --- a/packages/unocss-base/lib/index.js +++ b/packages/unocss-base/lib/index.js @@ -1,5 +1,5 @@ import { presetUno } from '@unocss/preset-uno' -import presetRn from './rn.js' +import presetRn from '../preset-rn/index.js' // eslint-disable-next-line const remRE = /(-?[\.\d]+)rem/g diff --git a/packages/unocss-base/lib/rn.js b/packages/unocss-base/lib/rn.js deleted file mode 100644 index 430665c338..0000000000 --- a/packages/unocss-base/lib/rn.js +++ /dev/null @@ -1,29 +0,0 @@ -import presetRn from '../preset-rn/index.js' - -export default function presetRnMpx () { - return { - name: '@mpxjs/unocss-preset-rn', - ...presetRn, - theme: { - preflightRoot: [], - letterSpacing: { - tighter: '-0.5px', - tight: '-0.25px', - normal: '0px', - wide: '0.25px', - wider: '0.5px', - widest: '1px' - }, - boxShadow: { - DEFAULT: '0 1px 3px rgba(0 0 0 / 0.1)', - none: '0 0 rgba(0 0 0 / 0)', - sm: '0 1px 2px rgba(0 0 0 / 0.05)', - md: '0 4px 6px rgba(0 0 0 / 0.1)', - lg: '0 10px 15px rgba(0 0 0 / 0.1)', - xl: '0 20px 25px rgba(0 0 0 / 0.1)', - '2xl': '0 25px 50px rgba(0 0 0 / 0.25)', - inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)' - } - } - } -} diff --git a/packages/unocss-base/preset-rn/index.js b/packages/unocss-base/preset-rn/index.js index f6fcff1cac..95be9bfd76 100644 --- a/packages/unocss-base/preset-rn/index.js +++ b/packages/unocss-base/preset-rn/index.js @@ -1,7 +1,10 @@ import rules from './rules/index.js' -import varaints from './variants/index.js' +import theme from './theme.js' -export default { - rules, - varaints +export default function presetRnMpx() { + return { + name: '@mpxjs/unocss-preset-rn', + rules, + theme + } } diff --git a/packages/unocss-base/preset-rn/theme.js b/packages/unocss-base/preset-rn/theme.js new file mode 100644 index 0000000000..5246340c28 --- /dev/null +++ b/packages/unocss-base/preset-rn/theme.js @@ -0,0 +1,21 @@ +export default { + preflightRoot: [], + letterSpacing: { + tighter: '-0.5px', + tight: '-0.25px', + normal: '0px', + wide: '0.25px', + wider: '0.5px', + widest: '1px' + }, + boxShadow: { + DEFAULT: '0 1px 3px rgba(0 0 0 / 0.1)', + none: '0 0 rgba(0 0 0 / 0)', + sm: '0 1px 2px rgba(0 0 0 / 0.05)', + md: '0 4px 6px rgba(0 0 0 / 0.1)', + lg: '0 10px 15px rgba(0 0 0 / 0.1)', + xl: '0 20px 25px rgba(0 0 0 / 0.1)', + '2xl': '0 25px 50px rgba(0 0 0 / 0.25)', + inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)' + } +} diff --git a/packages/unocss-base/preset-rn/variants/index.js b/packages/unocss-base/preset-rn/variants/index.js deleted file mode 100644 index 2432cf4725..0000000000 --- a/packages/unocss-base/preset-rn/variants/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default [ - // todo: do something for variants - // { - // name: 'custom-variant-container', - // match(matcher, ctx) { - // if (matcher.startsWith('hover:')) { - // console.log('the sm is:1111', ctx) - // return { - // } - // } - // }, - // order: -1 - // } -] diff --git a/packages/unocss-base/preset-rn/variants/pseudo.js b/packages/unocss-base/preset-rn/variants/pseudo.js deleted file mode 100644 index f987f0bb6f..0000000000 --- a/packages/unocss-base/preset-rn/variants/pseudo.js +++ /dev/null @@ -1,2 +0,0 @@ -// todo 确认 -// view 提供了 hover-class。没有提供 focus/active state 。 From db17b592092e84991d1a5682227c90f9fa976e1c Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 26 Dec 2024 14:32:46 +0800 Subject: [PATCH 44/59] [fix] --- packages/unocss-base/preset-rn/theme.js | 2 +- packages/unocss-plugin/lib/index.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/unocss-base/preset-rn/theme.js b/packages/unocss-base/preset-rn/theme.js index 5246340c28..b30341e74d 100644 --- a/packages/unocss-base/preset-rn/theme.js +++ b/packages/unocss-base/preset-rn/theme.js @@ -16,6 +16,6 @@ export default { lg: '0 10px 15px rgba(0 0 0 / 0.1)', xl: '0 20px 25px rgba(0 0 0 / 0.1)', '2xl': '0 25px 50px rgba(0 0 0 / 0.25)', - inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)' + inner: 'inset 0 2px 4px 0 rgba(0 0 0 / 0.05)' } } diff --git a/packages/unocss-plugin/lib/index.js b/packages/unocss-plugin/lib/index.js index 6548cb878b..6b6cd1505a 100644 --- a/packages/unocss-plugin/lib/index.js +++ b/packages/unocss-plugin/lib/index.js @@ -2,7 +2,7 @@ import * as path from 'path' import minimatch from 'minimatch' import * as unoConfig from '@unocss/config' import * as core from '@unocss/core' -import * as mpxConfig from '@mpxjs/webpack-plugin/lib/config.js' +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' @@ -12,7 +12,7 @@ import MpxWebpackPlugin from '@mpxjs/webpack-plugin' import { UnoCSSWebpackPlugin } from './web-plugin/index.js' import { UnoCSSRNWebpackPlugin } from './rn-plugin/index.js' import transformerDirectives from '@unocss/transformer-directives' -import * as transformerVariantGroup from '@unocss/transformer-variant-group' +import transformerVariantGroup from '@unocss/transformer-variant-group' import { parseClasses, parseStrings, @@ -220,7 +220,7 @@ class MpxUnocssPlugin { 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] || [] From dc6a12f6f8376df148b7f46eb8faa944b968efbc Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 26 Dec 2024 14:40:12 +0800 Subject: [PATCH 45/59] [fix]merge code from master --- .../src/platform/builtInMixins/styleHelperMixin.ios.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js index a1f39e26f8..7c85f98bae 100644 --- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js +++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js @@ -1,10 +1,5 @@ -<<<<<<< HEAD -import { isObject, isArray, dash2hump, isFunction, cached, getFocusedNavigation } from '@mpxjs/utils' +import { isObject, isArray, dash2hump, cached } from '@mpxjs/utils' import { Dimensions, StyleSheet, Appearance } from 'react-native' -======= -import { isObject, isArray, dash2hump, cached, isEmptyObject } from '@mpxjs/utils' -import { Dimensions, StyleSheet } from 'react-native' ->>>>>>> master let { width, height } = Dimensions.get('screen') @@ -176,7 +171,7 @@ export default function styleHelperMixin () { display: 'none' }) } - return result + return isEmptyObject(result) ? empty : result }, __getDynamicClass (dynamicClass, mediaQueryClass) { return [dynamicClass, this.__getMediaQueryClass(mediaQueryClass)] From 6d7a499a4ad74b2335dd1ebcd06a564ea180697a Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 26 Dec 2024 14:42:04 +0800 Subject: [PATCH 46/59] [fix]some method --- .../core/src/platform/builtInMixins/styleHelperMixin.ios.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js index 7c85f98bae..338d2d7ac7 100644 --- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js +++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js @@ -1,4 +1,4 @@ -import { isObject, isArray, dash2hump, cached } from '@mpxjs/utils' +import { isObject, isArray, dash2hump, cached, isEmptyObject } from '@mpxjs/utils' import { Dimensions, StyleSheet, Appearance } from 'react-native' let { width, height } = Dimensions.get('screen') From 769f7c7895ea0eef399ff0ff3835b3b0358c5f7b Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 26 Dec 2024 14:57:20 +0800 Subject: [PATCH 47/59] [fix]some error --- packages/unocss-plugin/lib/index.js | 2 +- packages/webpack-plugin/lib/react/processStyles.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/unocss-plugin/lib/index.js b/packages/unocss-plugin/lib/index.js index 564c8156e4..1b05752eb3 100644 --- a/packages/unocss-plugin/lib/index.js +++ b/packages/unocss-plugin/lib/index.js @@ -1,5 +1,5 @@ import * as path from 'path' -import minimatch from 'minimatch' +import { minimatch } from 'minimatch' import * as unoConfig from '@unocss/config' import * as core from '@unocss/core' import mpxConfig from '@mpxjs/webpack-plugin/lib/config.js' diff --git a/packages/webpack-plugin/lib/react/processStyles.js b/packages/webpack-plugin/lib/react/processStyles.js index e0a695540c..ca6bbeac35 100644 --- a/packages/webpack-plugin/lib/react/processStyles.js +++ b/packages/webpack-plugin/lib/react/processStyles.js @@ -63,7 +63,7 @@ module.exports = function (styles, { };\n let __unoClassMap global.__getUnoClassMap = function () { - if (__unoClassMap) { + if (!__unoClassMap) { __unoClassMap = __unoCssMapPlaceholder__ } return __unoClassMap From ce5fbd3aa9d5b2ced8046d94c6ee041b16d54ea8 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 26 Dec 2024 15:01:26 +0800 Subject: [PATCH 48/59] [fix]lint --- packages/unocss-base/preset-rn/index.js | 2 +- packages/webpack-plugin/lib/template-compiler/compiler.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/unocss-base/preset-rn/index.js b/packages/unocss-base/preset-rn/index.js index 95be9bfd76..6636a58e5f 100644 --- a/packages/unocss-base/preset-rn/index.js +++ b/packages/unocss-base/preset-rn/index.js @@ -1,7 +1,7 @@ import rules from './rules/index.js' import theme from './theme.js' -export default function presetRnMpx() { +export default function presetRnMpx () { return { name: '@mpxjs/unocss-preset-rn', rules, diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index 2568e22769..10c0354f27 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -1113,7 +1113,7 @@ const initVariants = (unoCtx) => { } } }, - pseudoClassReg, + pseudoClassReg } return unoVariantCached } From 5be0325dc0af2f3c3d00f96513adb914bbcfb648 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 26 Dec 2024 15:04:51 +0800 Subject: [PATCH 49/59] [update]the order of unocss and app css --- .../core/src/platform/builtInMixins/styleHelperMixin.ios.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js index 338d2d7ac7..070bff2fec 100644 --- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js +++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js @@ -149,11 +149,11 @@ export default function styleHelperMixin () { classString.split(/\s+/).forEach((className) => { if (classMap[className]) { Object.assign(result, classMap[className]) - } else if (unoClassMap[className]) { - Object.assign(result, unoClassMap[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]) From e14884b3586d93bdba2a69a0c85f6e25bfa81912 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 26 Dec 2024 15:33:34 +0800 Subject: [PATCH 50/59] little adjust --- .../core/src/platform/builtInMixins/styleHelperMixin.ios.js | 1 - packages/unocss-base/lib/index.js | 5 +++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js index 070bff2fec..95fe6eaaa6 100644 --- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js +++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js @@ -178,7 +178,6 @@ export default function styleHelperMixin () { }, __getMediaQueryClass (mediaQueryClass = []) { if (!mediaQueryClass.length) return '' - // todo 后续可优化，cache 能力 const { width, height } = Dimensions.get('screen') const colorScheme = Appearance.getColorScheme() const { entries, entriesMap } = global.__getUnoBreakpoints() diff --git a/packages/unocss-base/lib/index.js b/packages/unocss-base/lib/index.js index 887945a8f2..4e82bf7898 100644 --- a/packages/unocss-base/lib/index.js +++ b/packages/unocss-base/lib/index.js @@ -5,14 +5,15 @@ import presetRn from '../preset-rn/index.js' const remRE = /(-?[\.\d]+)rem/g export default function presetMpx (options = {}) { - const uno = presetUno(options) - const { baseFontSize = 37.5 } = 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, From c66de7267461e79afdf57c4ff897dabe7664412a Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 26 Dec 2024 16:42:26 +0800 Subject: [PATCH 51/59] [update]clear code --- .../unocss-base/preset-rn/rules/typography.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/unocss-base/preset-rn/rules/typography.js b/packages/unocss-base/preset-rn/rules/typography.js index 610c746b64..7d29f300cb 100644 --- a/packages/unocss-base/preset-rn/rules/typography.js +++ b/packages/unocss-base/preset-rn/rules/typography.js @@ -25,21 +25,6 @@ const textDecorations = [ [/^(?:underline|decoration)-offset-(.+)$/] ] -// todo 覆写 font-variant-numberic，和 RN 支持的属性拉齐 -// const newFontVariantNumberic = fontVariantNumeric.map(item => { -// const rule = item[0] -// const rawResult = item[1]() -// if (rule === 'normal-nums') { -// return item -// } else { -// return [rule, { -// ...fontVariantNumericBase, -// ...rawResult -// }] -// } -// }) -// vertical-align - export default [ ...transformEmptyRule( textIndents, @@ -54,7 +39,6 @@ export default [ textDecorations, textWraps, fontSmoothings, - // newFontVariantNumberic, fontVariantNumeric ) ] From 459165eb90291b4325451566ee5c3e53452220eb Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 26 Dec 2024 18:31:23 +0800 Subject: [PATCH 52/59] [update]decoration & filter --- .../unocss-base/preset-rn/rules/decoration.js | 38 ++++++++++ .../unocss-base/preset-rn/rules/filters.js | 72 ++++++++++++------- packages/unocss-base/preset-rn/rules/index.js | 2 + .../unocss-base/preset-rn/rules/typography.js | 10 --- 4 files changed, 85 insertions(+), 37 deletions(-) create mode 100644 packages/unocss-base/preset-rn/rules/decoration.js diff --git a/packages/unocss-base/preset-rn/rules/decoration.js b/packages/unocss-base/preset-rn/rules/decoration.js new file mode 100644 index 0000000000..844ea95075 --- /dev/null +++ b/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 +} diff --git a/packages/unocss-base/preset-rn/rules/filters.js b/packages/unocss-base/preset-rn/rules/filters.js index 83c420a7a5..875535ded9 100644 --- a/packages/unocss-base/preset-rn/rules/filters.js +++ b/packages/unocss-base/preset-rn/rules/filters.js @@ -1,32 +1,50 @@ -import { filters } from '@unocss/preset-wind/rules' -import { findRawRules, ruleFallback, isFunction, transformEmptyRule } from '../../utils/index.js' +import { filters, filterBase } from '@unocss/preset-wind/rules' +import { transformEmptyRule, findRawRules, ruleCallback } from '../../utils/index.js' -// todo filter 只支持部分属性 -const newFilters = findRawRules([ - 'filter-blur', - 'filter-brightness-1', - 'filter-contrast-1', - 'filter-grayscale-1', - 'filter-hue-rotate-1', - 'filter-invert-1', - 'filter-saturate-1', - 'filter-sepia-1' -], filters, true).map(item => { - return [item[0], ([match], { generator }) => { - if (/^backdrop/.test(match)) { - return ruleFallback(match, generator) - } else { - return (isFunction(item[1]) && item[1]()) || '' - } - }] +const filterValue = [ + 'blur', + 'brightness', + 'contrast', + 'grayscale', + 'hue-rotate', + 'invert', + 'saturate', + 'sepia' +] + +const newFilters = filters.map(v => { + const [regex, matcher, ...another] = v + if (typeof matcher === 'function') { + return [ + regex, + (...args) => { + const [[r]] = args + if (/^backdrop/.test(r)) return ruleCallback(...args) + const res = matcher(...args) + // 统一作为工具类使用 + if (filterValue.some(i => r.includes(i))) { + delete res.filter + } + return res + }, + ...another + ] + } + return v }) -// backdrop-filter 不支持 -const backdropFilter = findRawRules([ - /^backdrop-filter-*/ -], filters) +const backDropFilter = transformEmptyRule( + findRawRules(['backdrop-filter', 'backdrop-filter-none'], filters) +) -export default [ - ...newFilters, - ...transformEmptyRule(backdropFilter) +const filterBaseRule = [ + ['filter', null], + ['filter', { + ...filterBase, + filter: 'var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)' + }] ] + +newFilters.push(...backDropFilter, ...filterBaseRule) + +export default newFilters diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js index e2fa45397a..d9830f2368 100644 --- a/packages/unocss-base/preset-rn/rules/index.js +++ b/packages/unocss-base/preset-rn/rules/index.js @@ -53,9 +53,11 @@ import { svgUtilities } from './svg.js' import ring from './ring.js' import border from './border.js' import { transforms } from './transforms.js' +import { textDecorations } from './decoration.js' export default [ ...typography, + ...textDecorations, ...shadow, ...behaviors, ...filters, diff --git a/packages/unocss-base/preset-rn/rules/typography.js b/packages/unocss-base/preset-rn/rules/typography.js index 7d29f300cb..069054a998 100644 --- a/packages/unocss-base/preset-rn/rules/typography.js +++ b/packages/unocss-base/preset-rn/rules/typography.js @@ -16,15 +16,6 @@ import { fontSmoothings } from '@unocss/preset-mini/rules' -// decoration -const textDecorations = [ - // size - [/^(?:underline|decoration)-(?:size-)?(.+)$/], // todo size 会命中其他的规则 - [/^(?:underline|decoration)-(auto|from-font)$/], - // offset - [/^(?:underline|decoration)-offset-(.+)$/] -] - export default [ ...transformEmptyRule( textIndents, @@ -36,7 +27,6 @@ export default [ hyphens, writingModes, writingOrientations, - textDecorations, textWraps, fontSmoothings, fontVariantNumeric From c6dbef1497329b4e71541f28c066af38a51a6a82 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Fri, 27 Dec 2024 16:59:53 +0800 Subject: [PATCH 53/59] [update]add font theme --- packages/unocss-base/preset-rn/theme.js | 7 +++++++ packages/unocss-base/utils/index.js | 5 +++++ 2 files changed, 12 insertions(+) diff --git a/packages/unocss-base/preset-rn/theme.js b/packages/unocss-base/preset-rn/theme.js index b30341e74d..eabbbd4017 100644 --- a/packages/unocss-base/preset-rn/theme.js +++ b/packages/unocss-base/preset-rn/theme.js @@ -1,3 +1,5 @@ +import { platformSelect } from '../utils/index.js' + export default { preflightRoot: [], letterSpacing: { @@ -17,5 +19,10 @@ export default { xl: '0 20px 25px rgba(0 0 0 / 0.1)', '2xl': '0 25px 50px rgba(0 0 0 / 0.25)', inner: 'inset 0 2px 4px 0 rgba(0 0 0 / 0.05)' + }, + fontFamily: { + sans: platformSelect({ android: 'san-serif', ios: "'system font'" }), + serif: platformSelect({ android: 'serif', ios: 'Georgia' }), + mono: platformSelect({ android: 'mono', ios: "'Courier New'" }) } } diff --git a/packages/unocss-base/utils/index.js b/packages/unocss-base/utils/index.js index 0f1e460341..1f932546ae 100644 --- a/packages/unocss-base/utils/index.js +++ b/packages/unocss-base/utils/index.js @@ -75,6 +75,11 @@ export const makeGlobalStaticRules = prefix => { return globalKeywords.map(v => `${prefix}-${v}`) } +export const platformSelect = (options = {}) => { + const platform = process.env.MPX_CURRENT_TARGET_MODE + return options[platform] || '' +} + export { genEmptyRule, transformEmptyRule, From 8d38f4d544a9a2222f6e04758822c7d904e8df1a Mon Sep 17 00:00:00 2001 From: mater Date: Thu, 2 Jan 2025 16:11:59 +0800 Subject: [PATCH 54/59] feat: docs --- docs-vuepress/.vuepress/config.js | 127 ++- docs-vuepress/.vuepress/enhanceApp.js | 5 + .../theme/global-components/ColorsPalette.vue | 28 + .../theme/global-components/SingleColor.vue | 39 + .../guide/platform/{index.md => platform.md} | 2 +- docs-vuepress/guide/platform/web.md | 1 + docs-vuepress/unocss/introduce.md | 1 + docs-vuepress/unocss/utilities.md | 80 ++ .../utilities/accessibility/screen-readers.md | 38 + .../unocss/utilities/animations/animation.md | 48 ++ .../unocss/utilities/animations/transforms.md | 431 ++++++++++ .../utilities/animations/transitions.md | 133 ++++ .../backgrounds/background-blend-mode.md | 14 + .../utilities/backgrounds/background.md | 209 +++++ .../unocss/utilities/backgrounds/gradients.md | 68 ++ .../behaviors/box-decoration-break.md | 16 + .../utilities/behaviors/image-rendering.md | 15 + .../unocss/utilities/behaviors/listings.md | 54 ++ .../unocss/utilities/behaviors/overflow.md | 18 + .../behaviors/overscroll-behavior.md | 25 + .../unocss/utilities/behaviors/placeholder.md | 61 ++ .../unocss/utilities/borders/border.md | 129 +++ .../unocss/utilities/borders/divider.md | 166 ++++ .../unocss/utilities/borders/outline.md | 73 ++ .../unocss/utilities/borders/ring.md | 170 ++++ .../unocss/utilities/effects/box-shadow.md | 63 ++ .../utilities/effects/mix-blend-mode.md | 17 + .../unocss/utilities/effects/opacity.md | 29 + .../utilities/filters/backdrop-filter.md | 312 ++++++++ .../unocss/utilities/filters/filter.md | 261 ++++++ .../unocss/utilities/general/colors.md | 33 + docs-vuepress/unocss/utilities/general/svg.md | 159 ++++ .../unocss/utilities/general/typography.md | 742 ++++++++++++++++++ .../unocss/utilities/general/variables.md | 3 + .../unocss/utilities/general/variants.md | 206 +++++ .../utilities/interactivity/accent-color.md | 14 + .../utilities/interactivity/appearance.md | 21 + .../unocss/utilities/interactivity/caret.md | 61 ++ .../unocss/utilities/interactivity/cursor.md | 37 + .../utilities/interactivity/pointer-events.md | 15 + .../unocss/utilities/interactivity/resize.md | 13 + .../interactivity/scroll-behavior.md | 18 + .../utilities/interactivity/scroll-snap.md | 43 + .../utilities/interactivity/touch-action.md | 36 + .../utilities/interactivity/user-select.md | 11 + .../utilities/interactivity/will-change.md | 10 + .../unocss/utilities/layout/aspect-ratio.md | 48 ++ .../unocss/utilities/layout/columns.md | 62 ++ .../unocss/utilities/layout/container.md | 87 ++ .../unocss/utilities/layout/display.md | 176 +++++ .../unocss/utilities/layout/flexbox.md | 205 +++++ docs-vuepress/unocss/utilities/layout/grid.md | 613 +++++++++++++++ .../unocss/utilities/layout/positioning.md | 490 ++++++++++++ .../unocss/utilities/layout/sizing.md | 223 ++++++ .../unocss/utilities/layout/spacing.md | 365 +++++++++ .../unocss/utilities/layout/tables.md | 571 ++++++++++++++ package.json | 18 +- 57 files changed, 6910 insertions(+), 3 deletions(-) create mode 100644 docs-vuepress/.vuepress/theme/global-components/ColorsPalette.vue create mode 100644 docs-vuepress/.vuepress/theme/global-components/SingleColor.vue rename docs-vuepress/guide/platform/{index.md => platform.md} (99%) create mode 100644 docs-vuepress/unocss/introduce.md create mode 100644 docs-vuepress/unocss/utilities.md create mode 100644 docs-vuepress/unocss/utilities/accessibility/screen-readers.md create mode 100644 docs-vuepress/unocss/utilities/animations/animation.md create mode 100644 docs-vuepress/unocss/utilities/animations/transforms.md create mode 100644 docs-vuepress/unocss/utilities/animations/transitions.md create mode 100644 docs-vuepress/unocss/utilities/backgrounds/background-blend-mode.md create mode 100644 docs-vuepress/unocss/utilities/backgrounds/background.md create mode 100644 docs-vuepress/unocss/utilities/backgrounds/gradients.md create mode 100644 docs-vuepress/unocss/utilities/behaviors/box-decoration-break.md create mode 100644 docs-vuepress/unocss/utilities/behaviors/image-rendering.md create mode 100644 docs-vuepress/unocss/utilities/behaviors/listings.md create mode 100644 docs-vuepress/unocss/utilities/behaviors/overflow.md create mode 100644 docs-vuepress/unocss/utilities/behaviors/overscroll-behavior.md create mode 100644 docs-vuepress/unocss/utilities/behaviors/placeholder.md create mode 100644 docs-vuepress/unocss/utilities/borders/border.md create mode 100644 docs-vuepress/unocss/utilities/borders/divider.md create mode 100644 docs-vuepress/unocss/utilities/borders/outline.md create mode 100644 docs-vuepress/unocss/utilities/borders/ring.md create mode 100644 docs-vuepress/unocss/utilities/effects/box-shadow.md create mode 100644 docs-vuepress/unocss/utilities/effects/mix-blend-mode.md create mode 100644 docs-vuepress/unocss/utilities/effects/opacity.md create mode 100644 docs-vuepress/unocss/utilities/filters/backdrop-filter.md create mode 100644 docs-vuepress/unocss/utilities/filters/filter.md create mode 100644 docs-vuepress/unocss/utilities/general/colors.md create mode 100644 docs-vuepress/unocss/utilities/general/svg.md create mode 100644 docs-vuepress/unocss/utilities/general/typography.md create mode 100644 docs-vuepress/unocss/utilities/general/variables.md create mode 100644 docs-vuepress/unocss/utilities/general/variants.md create mode 100644 docs-vuepress/unocss/utilities/interactivity/accent-color.md create mode 100644 docs-vuepress/unocss/utilities/interactivity/appearance.md create mode 100644 docs-vuepress/unocss/utilities/interactivity/caret.md create mode 100644 docs-vuepress/unocss/utilities/interactivity/cursor.md create mode 100644 docs-vuepress/unocss/utilities/interactivity/pointer-events.md create mode 100644 docs-vuepress/unocss/utilities/interactivity/resize.md create mode 100644 docs-vuepress/unocss/utilities/interactivity/scroll-behavior.md create mode 100644 docs-vuepress/unocss/utilities/interactivity/scroll-snap.md create mode 100644 docs-vuepress/unocss/utilities/interactivity/touch-action.md create mode 100644 docs-vuepress/unocss/utilities/interactivity/user-select.md create mode 100644 docs-vuepress/unocss/utilities/interactivity/will-change.md create mode 100644 docs-vuepress/unocss/utilities/layout/aspect-ratio.md create mode 100644 docs-vuepress/unocss/utilities/layout/columns.md create mode 100644 docs-vuepress/unocss/utilities/layout/container.md create mode 100644 docs-vuepress/unocss/utilities/layout/display.md create mode 100644 docs-vuepress/unocss/utilities/layout/flexbox.md create mode 100644 docs-vuepress/unocss/utilities/layout/grid.md create mode 100644 docs-vuepress/unocss/utilities/layout/positioning.md create mode 100644 docs-vuepress/unocss/utilities/layout/sizing.md create mode 100644 docs-vuepress/unocss/utilities/layout/spacing.md create mode 100644 docs-vuepress/unocss/utilities/layout/tables.md diff --git a/docs-vuepress/.vuepress/config.js b/docs-vuepress/.vuepress/config.js index 796588e020..c4714e9bf8 100644 --- a/docs-vuepress/.vuepress/config.js +++ b/docs-vuepress/.vuepress/config.js @@ -1,4 +1,107 @@ const { headerPlugin } = require('./headerMdPlugin') +const { presetUno } = require('unocss') +const UnoCSS = require('@unocss/webpack').default + +const unocss = { + '/unocss': [ + { + title: 'General', + children: [ + '/unocss/utilities/general/colors', + '/unocss/utilities/general/typography', + '/unocss/utilities/general/svg', + '/unocss/utilities/general/variants', + ], + }, + { + title: 'Accessibility', + children: [ + '/unocss/utilities/accessibility/screen-readers' + ], + }, + { + title: 'Animations', + children: [ + '/unocss/utilities/animations/animation', + '/unocss/utilities/animations/transforms', + '/unocss/utilities/animations/transitions' + ], + }, + { + title: 'Backgrounds', + children: [ + '/unocss/utilities/backgrounds/background', + '/unocss/utilities/backgrounds/gradients', + '/unocss/utilities/backgrounds/background-blend-mode' + ], + }, + { + title: 'Behaviors', + children: [ + '/unocss/utilities/behaviors/box-decoration-break', + '/unocss/utilities/behaviors/image-rendering', + '/unocss/utilities/behaviors/listings', + '/unocss/utilities/behaviors/overflow', + '/unocss/utilities/behaviors/overscroll-behavior', + '/unocss/utilities/behaviors/placeholder', + ], + }, + { + title: 'Borders', + children: [ + '/unocss/utilities/borders/border', + '/unocss/utilities/borders/divider', + '/unocss/utilities/borders/outline', + '/unocss/utilities/borders/ring', + ], + }, + { + title: 'Effects', + children: [ + '/unocss/utilities/effects/box-shadow', + '/unocss/utilities/effects/opacity', + '/unocss/utilities/effects/mix-blend-mode', + ], + }, + { + title: 'Filters', + children: [ + '/unocss/utilities/filters/filter', + '/unocss/utilities/filters/backdrop-filter', + ], + }, + { + title: 'Interactivity', + children: [ + '/unocss/utilities/interactivity/accent-color', + '/unocss/utilities/interactivity/appearance', + '/unocss/utilities/interactivity/cursor', + '/unocss/utilities/interactivity/caret', + '/unocss/utilities/interactivity/pointer-events', + '/unocss/utilities/interactivity/resize', + '/unocss/utilities/interactivity/scroll-behavior', + '/unocss/utilities/interactivity/touch-action', + '/unocss/utilities/interactivity/user-select', + '/unocss/utilities/interactivity/will-change', + ], + }, + { + title: 'Layout', + children: [ + // { title: 'Aspect Ratio', link: '/unocss/utilities/layout/aspect-ratio' }, + '/unocss/utilities/layout/columns', + '/unocss/utilities/layout/container', + '/unocss/utilities/layout/display', + '/unocss/utilities/layout/flexbox', + '/unocss/utilities/layout/grid', + '/unocss/utilities/layout/positioning', + '/unocss/utilities/layout/sizing', + '/unocss/utilities/layout/spacing', + '/unocss/utilities/layout/tables', + ], + }, + ] +} const sidebar = { '/guide/': [ @@ -119,7 +222,8 @@ const sidebar = { { title: '小程序跨端组件库 Mpx-cube-ui 开源啦', path: 'mpx-cube-ui' }, { title: 'Mpx-cli 插件化改造', path: 'mpx-cli-next' }, { title: 'Mpx 小程序单元测试能力建设与实践', path: 'unit-test'} - ] + ], + ...unocss } const nav = [ @@ -178,6 +282,27 @@ module.exports = { chainWebpack: (config, isServer) => { // 添加node_modules避免resolve错误 config.resolve.modules.add('node_modules') + config.module.rule('vue').uses.delete('cache-loader') + config.module.rule('tsx').uses.delete('cache-loader') + config.merge({ + cache: false + }) + config.plugin('extract-css').use(require('mini-css-extract-plugin'), [ + { + filename: '[name].css', + chunkFilename: '[name].[hash:9].css' + } + ]) + }, + configureWebpack: { + plugins: [ + UnoCSS({ + presets: [ + presetUno() + ], + configFile: false + }) + ] }, markdown: { // markdown-it-toc 的选项 diff --git a/docs-vuepress/.vuepress/enhanceApp.js b/docs-vuepress/.vuepress/enhanceApp.js index 878e2134de..dc9b21589e 100644 --- a/docs-vuepress/.vuepress/enhanceApp.js +++ b/docs-vuepress/.vuepress/enhanceApp.js @@ -1,3 +1,8 @@ +import a from 'uno.css' + +console.log(a); + + export default ({ router }) => { if (typeof process === 'undefined' || process.env.VUE_ENV !== 'server') { router.onReady(() => { diff --git a/docs-vuepress/.vuepress/theme/global-components/ColorsPalette.vue b/docs-vuepress/.vuepress/theme/global-components/ColorsPalette.vue new file mode 100644 index 0000000000..b51e4dd693 --- /dev/null +++ b/docs-vuepress/.vuepress/theme/global-components/ColorsPalette.vue @@ -0,0 +1,28 @@ + + + diff --git a/docs-vuepress/.vuepress/theme/global-components/SingleColor.vue b/docs-vuepress/.vuepress/theme/global-components/SingleColor.vue new file mode 100644 index 0000000000..6dd577884e --- /dev/null +++ b/docs-vuepress/.vuepress/theme/global-components/SingleColor.vue @@ -0,0 +1,39 @@ + + diff --git a/docs-vuepress/guide/platform/index.md b/docs-vuepress/guide/platform/platform.md similarity index 99% rename from docs-vuepress/guide/platform/index.md rename to docs-vuepress/guide/platform/platform.md index 290c3407c1..f01ebc3a0b 100644 --- a/docs-vuepress/guide/platform/index.md +++ b/docs-vuepress/guide/platform/platform.md @@ -11,7 +11,7 @@ Mpx以微信增强DSL为基础，支持跨端输出至多端小程序、web和 new MpxwebpackPlugin({ // mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt|jd|web|ios|android|harmony) mode: 'ali', - // srcMode为mpx编译的源码平台，目前仅支持wx + // srcMode为mpx编译的源码平台，目前仅支持wx srcMode: 'wx' }) ``` diff --git a/docs-vuepress/guide/platform/web.md b/docs-vuepress/guide/platform/web.md index e69de29bb2..9ec4f99340 100644 --- a/docs-vuepress/guide/platform/web.md +++ b/docs-vuepress/guide/platform/web.md @@ -0,0 +1 @@ +# 123 diff --git a/docs-vuepress/unocss/introduce.md b/docs-vuepress/unocss/introduce.md new file mode 100644 index 0000000000..bfd470dddb --- /dev/null +++ b/docs-vuepress/unocss/introduce.md @@ -0,0 +1 @@ +# 介绍 diff --git a/docs-vuepress/unocss/utilities.md b/docs-vuepress/unocss/utilities.md new file mode 100644 index 0000000000..f310f10e90 --- /dev/null +++ b/docs-vuepress/unocss/utilities.md @@ -0,0 +1,80 @@ +# Utilities + +## General + +- [Colors](/unocss/utilities/general/colors) +- [Typography](/unocss/utilities/general/typography) +- [SVG](/unocss/utilities/general/svg) +- [Variants](/unocss/utilities/general/variants) + +## Accessibility + +- [Screen Readers](/unocss/utilities/accessibility/screen-readers) + +## Animations + +- [Animation](/unocss/utilities/animations/animation) +- [Transforms](/unocss/utilities/animations/transforms) +- [Transitions](/unocss/utilities/animations/transitions) + +## Backgrounds + +- [Background](/unocss/utilities/backgrounds/background) +- [Gradients](/unocss/utilities/backgrounds/gradients) +- [Background Blend Mode](/unocss/utilities/backgrounds/background-blend-mode) + +## Behaviors + +- [Box Decoration Break](/unocss/utilities/behaviors/box-decoration-break) +- [Image Rendering](/unocss/utilities/behaviors/image-rendering) +- [Listings](/unocss/utilities/behaviors/listings) +- [Overflow](/unocss/utilities/behaviors/overflow) +- [Overscroll Behavior](/unocss/utilities/behaviors/overscroll-behavior) +- [Placeholder](/unocss/utilities/behaviors/placeholder) + +## Borders + +- [Border](/unocss/utilities/borders/border) +- [Divider](/unocss/utilities/borders/divider) +- [Outline](/unocss/utilities/borders/outline) +- [Ring](/unocss/utilities/borders/ring) + +## Effects + +- [Box Shadow](/unocss/utilities/effects/box-shadow) +- [Opacity](/unocss/utilities/effects/opacity) +- [Mix Blend Mode](/unocss/utilities/effects/mix-blend-mode) + +## Filters + +- [Filter](/unocss/utilities/filters/filter) +- [Backdrop Filter](/unocss/utilities/filters/backdrop-filter) + +## Interactivity + +- [Accent Color](/unocss/utilities/interactivity/accent-color) +- [Appearance](/unocss/utilities/interactivity/appearance) +- [Cursor](/unocss/utilities/interactivity/cursor) +- [Caret](/unocss/utilities/interactivity/caret) +- [Pointer Events](/unocss/utilities/interactivity/pointer-events) +- [Resize](/unocss/utilities/interactivity/resize) +- [Scroll Behavior](/unocss/utilities/interactivity/scroll-behavior) +- [Touch Action](/unocss/utilities/interactivity/touch-action) +- [User Select](/unocss/utilities/interactivity/user-select) +- [Will Change](/unocss/utilities/interactivity/will-change) + +## Layout + +- [Columns](/unocss/utilities/layout/columns) +- [Container](/unocss/utilities/layout/container) +- [Display](/unocss/utilities/layout/display) +- [Flexbox](/unocss/utilities/layout/flexbox) +- [Grid](/unocss/utilities/layout/grid) +- [Positioning](/unocss/utilities/layout/positioning) +- [Sizing](/unocss/utilities/layout/sizing) +- [Spacing](/unocss/utilities/layout/spacing) +- [Tables](/unocss/utilities/layout/tables) + +::: tip +Use the search bar to quickly find the utilities you need. +::: diff --git a/docs-vuepress/unocss/utilities/accessibility/screen-readers.md b/docs-vuepress/unocss/utilities/accessibility/screen-readers.md new file mode 100644 index 0000000000..7b47a6d6a4 --- /dev/null +++ b/docs-vuepress/unocss/utilities/accessibility/screen-readers.md @@ -0,0 +1,38 @@ +# Screen Readers + +Utilities for improving accessibility with screen readers. + +| Class | Properties | +| :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| sr-only | position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0; | +| not-sr-only | position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal; | + +## Usage + +Use sr-only to hide an element visually without hiding it from screen readers: + +```html + + + Settings + +``` + +Use not-sr-only to undo sr-only, making an element visible to sighted users as well as screen readers. This can be +useful when you want to visually hide something on small screens but show it on larger screens for example: + +```html + + + Settings + +``` + +By default, responsive and focus variants are generated for these utilities. You can use focus:not-sr-only to make an +element visually hidden by default but visible when the user tabs to it — useful for "skip to content" links: + +```html + + Skip to content + +``` \ No newline at end of file diff --git a/docs-vuepress/unocss/utilities/animations/animation.md b/docs-vuepress/unocss/utilities/animations/animation.md new file mode 100644 index 0000000000..798f9ccf6d --- /dev/null +++ b/docs-vuepress/unocss/utilities/animations/animation.md @@ -0,0 +1,48 @@ +# Animation + +Utilities for animating elements with CSS animations. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + animation: { + 'spin-slow': 'spin 3s linear infinite', + }, + }, + }, +} +``` + +To add new animation @keyframes, use the keyframes section of your theme configuration: + +```js windi.config.js +export default { + theme: { + extend: { + keyframes: { + wiggle: { + '0%, 100%': { transform: 'rotate(-3deg)' }, + '50%': { transform: 'rotate(3deg)' }, + }, + }, + }, + }, +} +``` + + \ No newline at end of file diff --git a/docs-vuepress/unocss/utilities/animations/transforms.md b/docs-vuepress/unocss/utilities/animations/transforms.md new file mode 100644 index 0000000000..05076f2dd1 --- /dev/null +++ b/docs-vuepress/unocss/utilities/animations/transforms.md @@ -0,0 +1,431 @@ +# Transforms + +## Transform Type + +Utilities for controlling transform behavior. + + + +## Transform Style + +The transform-style utility sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element. + + + +## Transform Origin + +Utilities for specifying the origin for an element's transformations. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + transformOrigin: { + 24: '6rem', + full: '100%', + }, + }, + }, +} +``` + + + +## Transform Rotate + +Utilities for rotating elements with transform. + + + + + +```js windi.config.js +export default { + theme: { + rotate: { + sq: '90deg', + }, + }, +} +``` + + + +### Rotate X + + + +### Rotate Y + + + +### Rotate Z + + + +## Transform Scale + +Utilities for scaling elements with transform. + + + +### Scale X + + + +### Scale Y + + + +### Scale Z + + + + + +```js windi.config.js +export default { + theme: { + scale: { + half: '.5', + full: '1', + }, + }, +} +``` + + + +## Transform Skew + +Utilities for skewing elements with transform. + +### Skew X + + + +### Skew Y + + + + + +```js windi.config.js +export default { + theme: { + extend: { + skew: { + sq: '90deg', + }, + }, + }, +} +``` + + + +## Transform Translate + +Utilities for translating elements with transform. + +### Translate X + + + +### Translate Y + + + +### Translate Z + + + + + +You can customize the global spacing scale in the theme.spacing or theme.extend.spacing sections of your windi.config.js file: + +```js windi.config.js +export default { + theme: { + extend: { + spacing: { + 72: '18rem', + 84: '21rem', + 96: '24rem', + }, + }, + }, +} +``` + +To customize the translate scale separately, use the theme.translate section of your windi.config.js file. + +```js windi.config.js +export default { + theme: { + extend: { + translate: { + '1/7': '14.2857143%', + '2/7': '28.5714286%', + '3/7': '42.8571429%', + '4/7': '57.1428571%', + '5/7': '71.4285714%', + '6/7': '85.7142857%', + }, + }, + }, +} +``` + + + +## Perspective + +The `perspect` utility determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + perspective: { + '8xl': '96rem', + '9xl': '128rem', + }, + }, + }, +} +``` + + + + +## Perspective Origin + +The `perspect-origin` utility determines the position at which the viewer is looking. It is used as the vanishing point by the [perspect](#perspective) utility. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + perspectiveOrigin: { + tb150: '150% 150%', + tb200: '200% 200%', + }, + }, + }, +} +``` + + \ No newline at end of file diff --git a/docs-vuepress/unocss/utilities/animations/transitions.md b/docs-vuepress/unocss/utilities/animations/transitions.md new file mode 100644 index 0000000000..ed3e2d5f6f --- /dev/null +++ b/docs-vuepress/unocss/utilities/animations/transitions.md @@ -0,0 +1,133 @@ +# Transitions + +## Transition Property + +Utilities for controlling which CSS properties transition. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + transitionProperty: { + height: 'height', + spacing: 'margin, padding', + }, + }, + }, +} +``` + + + +## Transition Duration + +Utilities for controlling the duration of CSS transitions. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + transitionDuration: { + zero: '0ms', + long: '2000ms', + }, + }, + }, +} +``` + + + +## Transition Timing Function + +Utilities for controlling the easing of CSS transitions. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + transitionTimingFunction: { + 'in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)', + 'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)', + }, + }, + }, +} +``` + + + +## Transition Delay + +Utilities for controlling the delay of CSS transitions. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + transitionDelay: { + zero: '0ms', + long: '2000ms', + }, + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/backgrounds/background-blend-mode.md b/docs-vuepress/unocss/utilities/backgrounds/background-blend-mode.md new file mode 100644 index 0000000000..5c75e527a1 --- /dev/null +++ b/docs-vuepress/unocss/utilities/backgrounds/background-blend-mode.md @@ -0,0 +1,14 @@ +# Background Blend Mode + +Utilities for controlling how an element's background image should blend with its background color. + + diff --git a/docs-vuepress/unocss/utilities/backgrounds/background.md b/docs-vuepress/unocss/utilities/backgrounds/background.md new file mode 100644 index 0000000000..cf4a870c60 --- /dev/null +++ b/docs-vuepress/unocss/utilities/backgrounds/background.md @@ -0,0 +1,209 @@ +# Background + +## Background Attachment + +Utilities for controlling how a background image behaves when scrolling. + + + +## Background Clip + +Utilities for controlling the bounding box of an element's background. + + + + + +## Background Color + +Utilities for controlling an element's background color. + + + + + +```js windi.config.js +export default { + theme: { + backgroundColor: theme => ({ + ...theme('colors'), + primary: '#3490dc', + secondary: '#ffed4a', + danger: '#e3342f', + }), + }, +} +``` + + + +## Background Opacity + +Utilities for controlling the opacity of an element's background color. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + opacity: { + light: '0.15', + }, + }, + }, +} +``` + + + +## Background Position + +Utilities for controlling the position of an element's background image. + + + + + +```js windi.config.js +export default { + theme: { + backgroundPosition: { + 'bottom': 'bottom', + 'bottom-4': 'center bottom 1rem', + 'center': 'center', + 'left': 'left', + 'left-bottom': 'left bottom', + 'left-top': 'left top', + 'right': 'right', + 'right-bottom': 'right bottom', + 'right-top': 'right top', + 'top': 'top', + 'top-4': 'center top 1rem', + }, + }, +} +``` + + + +## Background Repeat + +Utilities for controlling the repetition of an element's background image. + + + +## Background Size + +Utilities for controlling the background size of an element's background image. + + + + + +```js +export default { + theme: { + backgroundSize: { + 'auto': 'auto', + 'cover': 'cover', + 'contain': 'contain', + '50%': '50%', + '16': '4rem', + }, + }, +} +``` + + + +## Background Origin + +Utilities for controlling the background origin of an element's background image. + + diff --git a/docs-vuepress/unocss/utilities/backgrounds/gradients.md b/docs-vuepress/unocss/utilities/backgrounds/gradients.md new file mode 100644 index 0000000000..4993730fbb --- /dev/null +++ b/docs-vuepress/unocss/utilities/backgrounds/gradients.md @@ -0,0 +1,68 @@ +# Gradients + +Utilities for controlling background gradients. + +## Gradient Direction + + + + + +```js windi.config.js +export default { + theme: { + extend: { + backgroundImage: theme => ({ + 'hero-pattern': 'url(\'/img/hero-pattern.svg\')', + 'footer-texture': 'url(\'/img/footer-texture.png\')', + }), + }, + }, +} +``` + + + +## Gradient From + + + +## Gradient Via + + + +## Gradient To + + diff --git a/docs-vuepress/unocss/utilities/behaviors/box-decoration-break.md b/docs-vuepress/unocss/utilities/behaviors/box-decoration-break.md new file mode 100644 index 0000000000..69233a7b2b --- /dev/null +++ b/docs-vuepress/unocss/utilities/behaviors/box-decoration-break.md @@ -0,0 +1,16 @@ +# Box Decoration Break + +Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages. + + diff --git a/docs-vuepress/unocss/utilities/behaviors/image-rendering.md b/docs-vuepress/unocss/utilities/behaviors/image-rendering.md new file mode 100644 index 0000000000..1fd210a88e --- /dev/null +++ b/docs-vuepress/unocss/utilities/behaviors/image-rendering.md @@ -0,0 +1,15 @@ +# Image Rendering + +The `image-render` utility defines how the browser should render an image if it is scaled up or down from its original +dimensions. By default, each browser will attempt to apply aliasing to this scaled image in order to prevent distortion, +but this can sometimes be a problem if we want the image to preserve its original pixelated form. + + diff --git a/docs-vuepress/unocss/utilities/behaviors/listings.md b/docs-vuepress/unocss/utilities/behaviors/listings.md new file mode 100644 index 0000000000..b6c5f2de8e --- /dev/null +++ b/docs-vuepress/unocss/utilities/behaviors/listings.md @@ -0,0 +1,54 @@ +# Listings + +## List Style Type + +Utilities for controlling the bullet/number style of a list. + + + + + +```js windi.config.js +export default { + theme: { + listStyleType: { + none: 'none', + disc: 'disc', + decimal: 'decimal', + square: 'square', + roman: 'upper-roman', + }, + }, +} +``` + + + +## List Style Position + +Utilities for controlling the position of bullets/numbers in lists. + + \ No newline at end of file diff --git a/docs-vuepress/unocss/utilities/behaviors/overflow.md b/docs-vuepress/unocss/utilities/behaviors/overflow.md new file mode 100644 index 0000000000..8e3a7d3617 --- /dev/null +++ b/docs-vuepress/unocss/utilities/behaviors/overflow.md @@ -0,0 +1,18 @@ +# Overflow + +Utilities for controlling how an element handles content that is too large for the container. + + diff --git a/docs-vuepress/unocss/utilities/behaviors/overscroll-behavior.md b/docs-vuepress/unocss/utilities/behaviors/overscroll-behavior.md new file mode 100644 index 0000000000..4c098b6849 --- /dev/null +++ b/docs-vuepress/unocss/utilities/behaviors/overscroll-behavior.md @@ -0,0 +1,25 @@ +# Overscroll Behavior + +Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area. + +- Use `auto` to make it possible for the user to continue scrolling a parent scroll area when they reach the boundary of + the primary scroll area. +- Use `none` to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent + "bounce" effects when scrolling past the end of the container. +- Use `contain` to prevent scrolling in the target area from triggering scrolling in the parent element, but preserve + "bounce" effects when scrolling past the end of the container in operating systems that support it. + + \ No newline at end of file diff --git a/docs-vuepress/unocss/utilities/behaviors/placeholder.md b/docs-vuepress/unocss/utilities/behaviors/placeholder.md new file mode 100644 index 0000000000..f0ad7f958e --- /dev/null +++ b/docs-vuepress/unocss/utilities/behaviors/placeholder.md @@ -0,0 +1,61 @@ +# Placeholder + +## Placeholder Color + +Utilities for controlling the color of placeholder text. + + + + + +```js windi.config.js +export default { + theme: { + placeholderColor: { + primary: '#3490dc', + secondary: '#ffed4a', + danger: '#e3342f', + }, + }, +} +``` + + + +## Placeholder Opacity + +Utilities for controlling the opacity of an element's placeholder color. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + placeholderOpacity: { + light: '0.1', + }, + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/borders/border.md b/docs-vuepress/unocss/utilities/borders/border.md new file mode 100644 index 0000000000..37ff0ce167 --- /dev/null +++ b/docs-vuepress/unocss/utilities/borders/border.md @@ -0,0 +1,129 @@ +# Border + +## Border Radius + +Utilities for controlling the border radius of an element. + + + + + +```js windi.config.js +export default { + theme: { + borderRadius: { + none: '0', + sm: '0.125rem', + DEFAULT: '4px', + md: '0.375rem', + lg: '0.5rem', + full: '9999px', + large: '12px', + }, + }, +} +``` + + + +## Border Width + +Utilities for controlling the width of an element's borders. + + + + + +```js windi.config.js +export default { + theme: { + borderWidth: { + DEFAULT: '1px', + none: '0', + sm: '2px', + }, + }, +} +``` + + + +## Border Color + +Utilities for controlling the color of an element's borders. + + + + + +You can customize your color palette by editing the `theme.colors` section of your `windi.config.js` file, or customize just your border colors using the theme.borderColor section. + +```js windi.config.js +export default { + theme: { + borderColor: theme => ({ + ...theme('colors'), + DEFAULT: theme('colors.gray.300', 'currentColor'), + primary: '#3490dc', + secondary: '#ffed4a', + danger: '#e3342f', + }), + }, +} +``` + + + +## Border Opacity + +Utilities for controlling the opacity of an element's border color. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + borderOpacity: { + light: '0.1', + }, + }, + }, +} +``` + + + +## Border Style + +Utilities for controlling the style of an element's borders. + + diff --git a/docs-vuepress/unocss/utilities/borders/divider.md b/docs-vuepress/unocss/utilities/borders/divider.md new file mode 100644 index 0000000000..061bc69b2d --- /dev/null +++ b/docs-vuepress/unocss/utilities/borders/divider.md @@ -0,0 +1,166 @@ +# Divider + +## Divider Width + +Utilities for controlling the border width between elements. + +#### Divide Y + + + +#### Divide X + + + + + +The divide width scale inherits its values from the `borderWidth` scale by default, so if you'd like to customize your values for both border width and divide width together, use the `theme.borderWidth` section of your `windi.config.js` file. + +```js windi.config.js +export default { + theme: { + borderWidth: { + DEFAULT: '1px', + 0: '0', + 2: '2px', + 3: '3px', + 4: '4px', + 6: '6px', + 8: '8px', + }, + }, +} +``` + +To customize only the divide width values, use the theme.divideWidth section of your windi.config.js file. + +```js windi.config.js +export default { + theme: { + divideWidth: { + DEFAULT: '1px', + 0: '0', + 2: '2px', + 3: '3px', + 4: '4px', + 6: '6px', + 8: '8px', + }, + }, +} +``` + + + +## Divider Color + +Utilities for controlling the border color between elements. + + + + + +```js windi.config.js +export default { + theme: { + divideColor: theme => ({ + ...theme('borderColors'), + primary: '#3490dc', + secondary: '#ffed4a', + danger: '#e3342f', + }), + }, +} +``` + + + +## Divider Opacity + +Utilities for controlling the opacity borders between elements. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + divideOpacity: { + 10: '0.1', + 20: '0.2', + 95: '0.95', + }, + }, + }, +} +``` + + + +## Divider Style + +Utilities for controlling the border style between elements. + + diff --git a/docs-vuepress/unocss/utilities/borders/outline.md b/docs-vuepress/unocss/utilities/borders/outline.md new file mode 100644 index 0000000000..4718f866ee --- /dev/null +++ b/docs-vuepress/unocss/utilities/borders/outline.md @@ -0,0 +1,73 @@ +# Outline + +Utilities for controlling an element's outline. + + + +## Outline Solid + + + +## Outline Dotted + + + + + +```js windi.config.js +export default { + theme: { + extend: { + outline: { + blue: '2px solid #0000ff', + }, + }, + }, +} +``` + +You can also provide an outline-offset value for any custom outline utilities using a tuple of the form [outline, outlineOffset]: + +```js windi.config.js +export default { + theme: { + extend: { + outline: { + blue: ['2px solid #0000ff', '1px'], + }, + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/borders/ring.md b/docs-vuepress/unocss/utilities/borders/ring.md new file mode 100644 index 0000000000..cfc30d24cf --- /dev/null +++ b/docs-vuepress/unocss/utilities/borders/ring.md @@ -0,0 +1,170 @@ +# Ring + +## Ring Width + +Utilities for creating outline rings with box-shadows. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + ringWidth: { + DEFAULT: '2px', + 6: '6px', + 10: '10px', + }, + }, + }, +} +``` + + + +## Ring Color + +Utilities for setting the color of outline rings. + + + + + +```js windi.config.js +const colors = require('windicss/colors') + +export default { + theme: { + ringColor: { + white: colors.white, + pink: colors.fuchsia, + }, + }, +} +``` + + + +## Ring Opacity + +Utilities for setting the opacity of outline rings. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + ringOpacity: { + 15: '0.15', + 35: '0.35', + 65: '0.65', + }, + }, + }, +} +``` + + + +## Ring Offset Width + +Utilities for simulating an offset when adding outline rings. + + + + + + +```js windi.config.js +export default { + theme: { + extend: { + ringOffsetWidth: { + 3: '3px', + 6: '6px', + 10: '10px', + }, + }, + }, +} +``` + + + +## Ring Offset Color + +Utilities for setting the color of outline ring offsets. + + + + + +```js windi.config.js +const colors = require('windicss/colors') + +export default { + theme: { + ringOffsetColor: { + white: colors.white, + pink: colors.fuchsia, + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/effects/box-shadow.md b/docs-vuepress/unocss/utilities/effects/box-shadow.md new file mode 100644 index 0000000000..c8aa3d7755 --- /dev/null +++ b/docs-vuepress/unocss/utilities/effects/box-shadow.md @@ -0,0 +1,63 @@ +# Box Shadow + +## Box Shadow Size + +Utilities for controlling the box shadow of an element. + + + + + +```js windi.config.js +export default { + theme: { + boxShadow: { + 'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)', + 'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // If a DEFAULT shadow is provided, it will be used for the non-suffixed shadow utility. + 'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', + 'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', + 'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', + '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', + '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)', + 'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', + 'none': 'none', + }, + }, +} +``` + + + +## Box Shadow Color + + + + + +```js windi.config.js +export default { + theme: { + boxShadowColor: { + gray: '#1c1c1e', + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/effects/mix-blend-mode.md b/docs-vuepress/unocss/utilities/effects/mix-blend-mode.md new file mode 100644 index 0000000000..0dd7b83f7b --- /dev/null +++ b/docs-vuepress/unocss/utilities/effects/mix-blend-mode.md @@ -0,0 +1,17 @@ +# Mix Blend Mode + +Utilities for controlling how an element should blend with the background. + + diff --git a/docs-vuepress/unocss/utilities/effects/opacity.md b/docs-vuepress/unocss/utilities/effects/opacity.md new file mode 100644 index 0000000000..b6aa2a20f3 --- /dev/null +++ b/docs-vuepress/unocss/utilities/effects/opacity.md @@ -0,0 +1,29 @@ +# Opacity + +Utilities for controlling the opacity of an element. + + + + + + +```js windi.config.js +export default { + theme: { + opacity: { + light: '0.25', + full: '1', + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/filters/backdrop-filter.md b/docs-vuepress/unocss/utilities/filters/backdrop-filter.md new file mode 100644 index 0000000000..198ce3a704 --- /dev/null +++ b/docs-vuepress/unocss/utilities/filters/backdrop-filter.md @@ -0,0 +1,312 @@ +# Backdrop Filter + +Utilities for enabling and disabling backdrop filters on an element. + + + +## Backdrop Blur + + + + + +```js windi.config.js +export default { + theme: { + backdropBlur: { + '4xl': '72px', + '5xl': '96px', + '6xl': '128px', + }, + }, +} +``` + + + +## Backdrop Brightness + + + + + +```js windi.config.js +export default { + theme: { + backdropBrightness: { + sm: '50', + md: '100', + lg: '150', + }, + }, +} +``` + + + +## Backdrop Contrast + + + + + +```js windi.config.js +export default { + theme: { + backdropContrast: { + sm: '50', + md: '100', + lg: '150', + }, + }, +} +``` + + + +## Backdrop Grayscale + + + + + +```js windi.config.js +export default { + theme: { + backdropGrayscale: { + 50: '0.5', + 80: '0.8', + }, + }, +} +``` + + + +## Backdrop Hue Rotate + + + + + +```js windi.config.js +export default { + theme: { + backdropHueRotate: { + sm: '60', + lg: '90', + xl: '180', + }, + }, +} +``` + + + +## Backdrop Invert + + + + + +```js windi.config.js +export default { + theme: { + backdropInvert: { + sm: '0.5', + lg: '0.8', + }, + }, +} +``` + + + +## Backdrop Opacity + + + + + + +```js windi.config.js +export default { + theme: { + backdropOpacity: { + sm: '0.5', + lg: '0.8', + }, + }, +} +``` + + + +## Backdrop Saturate + + + + + +```js windi.config.js +export default { + theme: { + backdropSaturate: { + sm: '0.5', + md: '1', + lg: '1.5', + }, + }, +} +``` + + + +## Backdrop Sepia + + + + + +```js windi.config.js +export default { + theme: { + backdropSepia: { + sm: '0.5', + md: '0.8', + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/filters/filter.md b/docs-vuepress/unocss/utilities/filters/filter.md new file mode 100644 index 0000000000..a8c6ff1144 --- /dev/null +++ b/docs-vuepress/unocss/utilities/filters/filter.md @@ -0,0 +1,261 @@ +# Filter + +Utilities for enabling and disabling filters on an element. + + + +## Filter Blur + + + + + +```js windi.config.js +export default { + theme: { + blur: { + '4xl': '72px', + '5xl': '96px', + '6xl': '128px', + }, + }, +} +``` + + + +## Filter Brightness + + + + + +```js windi.config.js +export default { + theme: { + brightness: { + sm: '50', + md: '100', + lg: '150', + }, + }, +} +``` + + + +## Filter Contrast + + + + + +```js windi.config.js +export default { + theme: { + contrast: { + sm: '50', + md: '100', + lg: '150', + }, + }, +} +``` + + + +## Filter Drop Shadow + + + + + +```js windi.config.js +export default { + theme: { + dropShadow: { + '3xl': 'drop-shadow(0 30px 30px rgba(0, 0, 0, 0.2))', + '4xl': 'drop-shadow(0 40px 40px rgba(0, 0, 0, 0.3))', + }, + }, +} +``` + + + +## Filter Grayscale + + + + + +```js windi.config.js +export default { + theme: { + grayscale: { + 50: '0.5', + 80: '0.8', + }, + }, +} +``` + + + +## Filter Hue Rotate + + + + + +```js windi.config.js +export default { + theme: { + hueRotate: { + sm: '60', + lg: '90', + xl: '180', + }, + }, +} +``` + + + +## Filter Invert + + + + + +```js windi.config.js +export default { + theme: { + invert: { + sm: '0.5', + lg: '0.8', + }, + }, +} +``` + + + +## Filter Saturate + + + + + +```js windi.config.js +export default { + theme: { + saturate: { + sm: '0.5', + md: '1', + lg: '1.5', + }, + }, +} +``` + + + +## Filter Sepia + + + + + +```js windi.config.js +export default { + theme: { + sepia: { + sm: '0.5', + md: '0.8', + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/general/colors.md b/docs-vuepress/unocss/utilities/general/colors.md new file mode 100644 index 0000000000..fdd0fcecd2 --- /dev/null +++ b/docs-vuepress/unocss/utilities/general/colors.md @@ -0,0 +1,33 @@ +# Colors + + + +## Customization + +```ts windi.config.js +export default { + theme: { + colors: { + // Configure your color palette here + }, + }, +} +``` + +### Reuse Colors + +All the colors from the palette are enabled by default. If you want to set alias or reuse some colors from the palette, you can import them from `windicss/colors` module. + +```ts windi.config.js +import colors from 'windicss/colors' + +export default { + theme: { + extend: { + colors: { + grey: colors.gray, + }, + }, + }, +} +``` diff --git a/docs-vuepress/unocss/utilities/general/svg.md b/docs-vuepress/unocss/utilities/general/svg.md new file mode 100644 index 0000000000..093987810f --- /dev/null +++ b/docs-vuepress/unocss/utilities/general/svg.md @@ -0,0 +1,159 @@ +# SVG + +## Fill Color + +Utilities for styling the fill of SVG elements. + + + + + +```js windi.config.js +export default { + theme: { + fill: theme => ({ + red: theme('colors.red.500'), + green: theme('colors.green.500'), + blue: theme('colors.blue.500'), + }), + }, +} +``` + + + +## Stroke Color + +Utilities for styling the stroke of SVG elements. + + + + + +```js windi.config.js +export default { + theme: { + stroke: theme => ({ + red: theme('colors.red.500'), + green: theme('colors.green.500'), + blue: theme('colors.blue.500'), + }), + }, +} +``` + + + +## Stroke DashArray + +The `stroke-dash` utility is a presentation utility defining the pattern of dashes and gaps used to paint the outline of the shape; + + + +## Stroke DashOffset + +The `stroke-offset` utility is a presentation utility defining an offset on the rendering of the associated dash array. + + + +## Stroke LineCap + +The `stroke-cap` utility is a presentation utility defining the shape to be used at the end of open subpaths when they are stroked. + + + +## Stroke LineJoin + +The `stroke-join` utility is a presentation utility defining the shape to be used at the corners of paths when they are stroked. + + + +## Stroke Width + +Utilities for styling the stroke width of SVG elements. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + strokeWidth: { + sm: '4', + lg: '8', + }, + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/general/typography.md b/docs-vuepress/unocss/utilities/general/typography.md new file mode 100644 index 0000000000..1ad18e277f --- /dev/null +++ b/docs-vuepress/unocss/utilities/general/typography.md @@ -0,0 +1,742 @@ +# Typography + +## Font Family + +Utilities for controlling the font family of an element. + + + + + +```js +export default { + theme: { + extend: { + fontFamily: { + sans: ['ui-sans-serif', 'system-ui'], + serif: ['ui-serif', 'Georgia'], + mono: ['ui-monospace', 'SFMono-Regular'], + display: ['Oswald'], + body: ['Open Sans'], + }, + }, + }, +} +``` + +Font families can be specified as an array or as a simple comma-delimited string: + +```json5 +{ + // Array format: + "sans": ["Helvetica", "Arial", "sans-serif"], + // Comma-delimited format: + "sans": "Helvetica, Arial, sans-serif", +} +``` + +Note that Windi CSS does not automatically escape font names for you. If you're using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters. + +```json5 +{ + // Won't work: + "sans": ["Exo 2", /* ... */], + // Add quotes: + "sans": ["\"Exo 2\"", /* ... */], +} +``` + + + +## Font Size + +Utilities for controlling the font size of an element. + + + + + +```js windi.config.js +export default { + theme: { + fontSize: { + 'xs': '.75rem', + 'sm': '.875rem', + 'tiny': '.875rem', + 'base': '1rem', + 'lg': '1.125rem', + 'xl': '1.25rem', + '2xl': '1.5rem', + '3xl': '1.875rem', + '4xl': '2.25rem', + '5xl': '3rem', + '6xl': '4rem', + '7xl': '5rem', + }, + }, +} +``` + +You can provide a default line-height for each of your font-sizes using a tuple of the form [fontSize, lineHeight] in your windi.config.js file. + +```js windi.config.js +export default { + theme: { + fontSize: { + sm: ['14px', '20px'], + base: ['16px', '24px'], + lg: ['20px', '28px'], + xl: ['24px', '32px'], + }, + }, +} +``` + +If you also want to provide a default letter-spacing value for a font size, you can do so using a tuple of the form `[fontSize, { letterSpacing, lineHeight }]` in your windi.config.js file. + +```js windi.config.js +export default { + theme: { + fontSize: { + '2xl': ['24px', { + letterSpacing: '-0.01em', + }], + // Or with a default line-height as well + '3xl': ['32px', { + letterSpacing: '-0.02em', + lineHeight: '40px', + }], + }, + }, +} +``` + + + +## Font Smoothing + +Utilities for controlling the font smoothing of an element. + + + +## Font Style + +Utilities for controlling the style of text. + + + +## Font Weight + +Utilities for controlling the font weight of an element. + + + + + +```js windi.config.js +export default { + theme: { + fontWeight: { + 'hairline': 100, + 'extra-light': 100, + 'thin': 200, + 'light': 300, + 'normal': 400, + 'medium': 500, + 'semibold': 600, + 'bold': 700, + 'extrabold': 800, + 'extra-bold': 800, + 'black': 900, + }, + }, +} +``` + + + +## Font Variant Numeric + +Utilities for controlling the variant of numbers. + + + +## Hyphens + +The hyphens utilities specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate. + + + +## Letter Spacing + +Utilities for controlling the tracking (letter spacing) of an element. + + + + + +```js windi.config.js +export default { + theme: { + letterSpacing: { + tightest: '-.075em', + tighter: '-.05em', + tight: '-.025em', + normal: '0', + wide: '.025em', + wider: '.05em', + widest: '.25em', + }, + }, +} +``` + + + +## Line Height + +Utilities for controlling the leading (line height) of an element. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + lineHeight: { + 'extra-loose': '2.5', + }, + }, + }, +} +``` + + + +## Tab Size + +The tab-size utilities are used to customize the width of tab characters (U+0009). + + + + + +```js windi.config.js +export default { + theme: { + tabSize: { + sm: '2', + md: '4', + lg: '8', + }, + }, +} +``` + + + +## Text Alignment + +Utilities for controlling the alignment of text. + + + +## Text Color + +Utilities for controlling the text color of an element. + + + + + +```js windi.config.js +export default { + theme: { + textColor: { + primary: '#3490dc', + secondary: '#ffed4a', + danger: '#e3342f', + }, + }, +} +``` + + + +## Text Decoration + +Utilities for controlling the decoration of text. + +### Text Decoration Type + +Utilities for controlling the type of text decoration. + + + +### Text Decoration Color + +Utilities for controlling the color of text decoration. + + + + + +```js windi.config.js +export default { + theme: { + textDecorationColor: { + primary: '#3490dc', + secondary: '#ffed4a', + danger: '#e3342f', + }, + }, +} +``` + + + +### Text Decoration Style + +Utilities for controlling the style of text decoration. + + + +### Text Decoration Thickness + +Utilities for controlling the thickness of text decorations. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + textDecorationLength: { + sm: '1px', + md: '2px', + lg: '4px', + }, + }, + }, +} +``` + + + +### Text Decoration Offset + +Utilities for controlling the offset of text decoration. + + + + + +```js windi.config.js +export default { + theme: { + textDecorationOffset: { + sm: '1px', + md: '2px', + lg: '4px', + }, + }, +} +``` + + + +### Text Decoration Opacity + +Utilities for controlling the opacity of an element's decoration color. This is a fallback of +[Text Decoration Color](#text-decoration-color) beginning with WindiCSS v3.4.0. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + textDecorationOpacity: { + 10: '0.1', + 20: '0.2', + 95: '0.95', + }, + }, + }, +} +``` + + + +## Text Indent + +Utilities for controlling the indentation of text. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + textIndent: { + '4xl': '5rem', + '5xl': '6rem', + }, + }, + }, +} +``` + + + +## Text Opacity + +Utilities for controlling the opacity of an element's text color. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + textOpacity: { + 10: '0.1', + 20: '0.2', + 95: '0.95', + }, + }, + }, +} +``` + + + +## Text Shadow + +Utilities for controlling the shadow of a text element. + + + + + +```js windi.config.js +export default { + theme: { + textShadow: { + 'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // If a DEFAULT shadow is provided, it will be used for the non-suffixed shadow utility. + '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', + '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)', + }, + }, +} +``` + + + +## Text Stroke + +Utilities for controlling the stroke of a text element. + +### Text Stroke Width + +Utilities for controlling the width of text stroke. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + textStrokeWidth: { + 'xl': '6', + '2xl': '8', + }, + }, + }, +} +``` + + + +### Text Stroke Color + +Utilities for controlling the color of text stroke. + + + + + +```js windi.config.js +export default { + theme: { + textStrokeColor: { + primary: '#3490dc', + secondary: '#ffed4a', + danger: '#e3342f', + }, + }, +} +``` + + + +## Text Transform + +Utilities for controlling the transformation of text. + + + +## Text Overflow + +Utilities for controlling text overflow in an element. + + + +## Vertical Alignment + +Utilities for controlling the vertical alignment of an inline or table-cell box. + + + +## Whitespace + +Utilities for controlling an element's white-space property. + + + +## Word Break + +Utilities for controlling word breaks in an element. + + + +## Writing Mode + +The `writing-mode` utility sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents). + + + +## Writing Orientation + +The `writing-orientation` utility sets the orientation of the text characters in a line. It only affects text in vertical mode (when `writing-mode` is not `horizontal-tb`). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers. + + diff --git a/docs-vuepress/unocss/utilities/general/variables.md b/docs-vuepress/unocss/utilities/general/variables.md new file mode 100644 index 0000000000..a452526573 --- /dev/null +++ b/docs-vuepress/unocss/utilities/general/variables.md @@ -0,0 +1,3 @@ +# Variables + +> TODO: diff --git a/docs-vuepress/unocss/utilities/general/variants.md b/docs-vuepress/unocss/utilities/general/variants.md new file mode 100644 index 0000000000..34bd56086b --- /dev/null +++ b/docs-vuepress/unocss/utilities/general/variants.md @@ -0,0 +1,206 @@ +[pseudo-selector]: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes + +# Variants + +Variants allow you to specify under what circumstances your utilities will be activated. + +You may use the screen size, system theme, or any [pseudo-selector], such as `:hover`. + +You specify a variant by using the `:` separator, and you can combine them arbitrarily as in: + +``` +sm:bg-red-500 sm:hover:bg-green-300 dark:bg-white +``` + +## Screen Variants + +### Mobile First + +| Variant | Rule | Description | +| :------ | :--- | :---------- | +| sm | @media (min-width: 640px) { ... } | Enable utility when the screen width is greater than 640px | +| md | @media (min-width: 768px) { ... } | Enable utility when the screen width is greater than 768px | +| lg | @media (min-width: 1024px) { ... } | Enable utility when the screen width is greater than 1024px | +| xl | @media (min-width: 1280px) { ... } | Enable utility when the screen width is greater than 1280px | +| 2xl | @media (min-width: 1536px) { ... } | Enable utility when the screen width is greater than 1536px | + +### Desktop First + +| Variant | Rule | Description | +| :------ | :--- | :---------- | +| + +### Parent Selectors + +| Variant | Rule | Description | +| :------ | :--- | :---------- | +| group-hover | `.group:hover .${utility} { ... }` | Targets an element when a marked parent matches the hover pseudo-class. | +| group-focus | `.group:focus .${utility} { ... }` | Targets an element when a marked parent matches the focus pseudo-class. | +| group-active | `.group:active .${utility} { ... }` | Targets an element when a marked parent matches the active pseudo-class. | +| group-visited | `.group:visited .${utility} { ... }` | Targets an element when a marked parent matches the visited pseudo-class. | + + +### Child Selectors + +| Variant | Rule | Description | +| :------ | :--- | :---------- | +| svg | `.${utility} svg { ... }` | Targets svg nodes. | +| all | `.${utility} * { ... }` | Targets all nodes. | +| children | `.${utility} > * { ... }` | Targets children nodes. | +| siblings | `.${utility} ~ * { ... }` | Targets siblings nodes . | +| sibling | `.${utility} + * { ... }` | Targets first sibling node. | + + +### Media Query + +| Variant | Rule | Description | +| :------ | :--- | :---------- | +| motion-safe | `@media (prefers-reduced-motion: no-preference) { ... }` | Targets the prefers-reduced-motion: no-preference media query. +| motion-reduce | `@media (prefers-reduced-motion: reduce) { ... }` | Targets the prefers-reduced-motion: reduce media query. + +## Theme Variants + +### Default + +| Variant | Rule | Description | +| :------ | :--- | :---------- | +| dark | `@media (prefers-color-scheme: dark) { ... }` or `.dark .{utility} { ... }` | Enable utility base on user configuration | +| light | `@media (prefers-color-scheme: light) { ... }` or `.light .{utility} { ... }` | Enable utility base on user configuration | + +### Following System + +| Variant | Rule | Description | +| :------ | :--- | :---------- | +| @dark | `@media (prefers-color-scheme: dark) { ... }` | Enable utility when the system turns on dark mode | +| @light | `@media (prefers-color-scheme: light) { ... }` | Enable utility when the system turns on light mode | + +### Following Application + +| Variant | Rule | Description | +| :------ | :--- | :---------- | +| .dark | `.dark .{utility} { ... }` | Enable utility base on application dark mode | +| .light | `.light .{utility} { ... }` | Enable utility base on application light mode | + +## Orientation Variants + +| Variant | Rule | Description | +| :-------- | :---------------------------------------- | :--------------------------------------------------------- | +| portrait | `@media (orientation: portrait) { ... }` | Enable utility when the device is in portrait orientation | +| landscape | `@media (orientation: landscape) { ... }` | Enable utility when the device is in landscape orientation | diff --git a/docs-vuepress/unocss/utilities/interactivity/accent-color.md b/docs-vuepress/unocss/utilities/interactivity/accent-color.md new file mode 100644 index 0000000000..7d77f96ea4 --- /dev/null +++ b/docs-vuepress/unocss/utilities/interactivity/accent-color.md @@ -0,0 +1,14 @@ +# Accent Color + +Utilities for controlling the accented color of a form control. + + diff --git a/docs-vuepress/unocss/utilities/interactivity/appearance.md b/docs-vuepress/unocss/utilities/interactivity/appearance.md new file mode 100644 index 0000000000..5ce662c6ec --- /dev/null +++ b/docs-vuepress/unocss/utilities/interactivity/appearance.md @@ -0,0 +1,21 @@ +# Appearance + +Utilities for suppressing native form control styling. + + diff --git a/docs-vuepress/unocss/utilities/interactivity/caret.md b/docs-vuepress/unocss/utilities/interactivity/caret.md new file mode 100644 index 0000000000..80a82329c0 --- /dev/null +++ b/docs-vuepress/unocss/utilities/interactivity/caret.md @@ -0,0 +1,61 @@ +# Caret + +## Caret Color + +Utilities for controlling the color of insertion text. + + + + + +```js windi.config.js +export default { + theme: { + caretColor: { + primary: '#3490dc', + secondary: '#ffed4a', + danger: '#e3342f', + }, + }, +} +``` + + + +## Caret Opacity + +Utilities for controlling the opacity of an element's caret color. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + caretOpacity: { + light: '0.1', + }, + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/interactivity/cursor.md b/docs-vuepress/unocss/utilities/interactivity/cursor.md new file mode 100644 index 0000000000..db7af303e3 --- /dev/null +++ b/docs-vuepress/unocss/utilities/interactivity/cursor.md @@ -0,0 +1,37 @@ +# Cursor + +Utilities for controlling the cursor style when hovering over an element. + + + + + +```js windi.config.js +export default { + theme: { + cursor: { + 'auto': 'auto', + 'default': 'default', + 'pointer': 'pointer', + 'wait': 'wait', + 'text': 'text', + 'move': 'move', + 'not-allowed': 'not-allowed', + 'crosshair': 'crosshair', + 'zoom-in': 'zoom-in', + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/interactivity/pointer-events.md b/docs-vuepress/unocss/utilities/interactivity/pointer-events.md new file mode 100644 index 0000000000..1012759bff --- /dev/null +++ b/docs-vuepress/unocss/utilities/interactivity/pointer-events.md @@ -0,0 +1,15 @@ +# Pointer Events + +Utilities for controlling whether an element responds to pointer events. + + diff --git a/docs-vuepress/unocss/utilities/interactivity/resize.md b/docs-vuepress/unocss/utilities/interactivity/resize.md new file mode 100644 index 0000000000..010efba148 --- /dev/null +++ b/docs-vuepress/unocss/utilities/interactivity/resize.md @@ -0,0 +1,13 @@ +# Resize + +Utilities for controlling how an element can be resized. + + \ No newline at end of file diff --git a/docs-vuepress/unocss/utilities/interactivity/scroll-behavior.md b/docs-vuepress/unocss/utilities/interactivity/scroll-behavior.md new file mode 100644 index 0000000000..338856f814 --- /dev/null +++ b/docs-vuepress/unocss/utilities/interactivity/scroll-behavior.md @@ -0,0 +1,18 @@ +# Scroll Behavior + +Utilities for controlling the scroll behavior of an element. + +| Class | Properties | +| :------------ | :----------------------- | +| scroll-auto | scroll-behavior: auto; | +| scroll-smooth | scroll-behavior: smooth; | + +## Usage + +Use the `scroll-smooth` utilities to enable smooth scrolling within an element. + +```html + + + +``` diff --git a/docs-vuepress/unocss/utilities/interactivity/scroll-snap.md b/docs-vuepress/unocss/utilities/interactivity/scroll-snap.md new file mode 100644 index 0000000000..8bf8599abb --- /dev/null +++ b/docs-vuepress/unocss/utilities/interactivity/scroll-snap.md @@ -0,0 +1,43 @@ +# Scroll Snap + +## Scroll Snap Align + +| Class | Properties | Description | +| :---------------------------- | :------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | +| `snap-start` | scroll-snap-align: start | | +| `snap-end` | scroll-snap-align: end | | +| `snap-center` | scroll-snap-align: center | | + +## Scroll Snap Stop + +| Class | Properties | Description | +| :---------------------------- | :------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | +| `snap-normal` | scroll-snap-stop: normal | | +| `snap-always` | scroll-snap-stop: always | | + +## Scroll Snap Type + +| Class | Properties | Description | +| :---------------------------- | :------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | +| `snap` | scroll-snap-type:
var(--scroll-snap-axis, both)
var(--scroll-snap-strictness, mandatory) | main snap class | +| __Strictness__ | | | +| `snap-none` | --scroll-snap-strictness: none | | +| `snap-mandatory` | --scroll-snap-strictness: mandatory | | +| `snap-proximity` | --scroll-snap-strictness: proximity | | +| __Axis__ | | | +| `snap-x` | --scroll-snap-axis: x | | +| `snap-y` | --scroll-snap-axis: y | | +| `snap-block` | --scroll-snap-axis: block | | +| `snap-inline` | --scroll-snap-axis: inline | | +| `snap-both` | --scroll-snap-axis: both | | + +## Margin, Padding and Other + +| Class | Properties | Description | +| :---------------------------- | :------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | +| __Margin__ | | | +| `snap-m${direction}-${value}` | scroll-snap-margin`${direction}`: `${value}` | same [Margin Utilities](/utilities/layout/spacing#margin) | +| __Padding__ | | | +| `snap-p${direction}-${value}` | scroll-snap-padding`${direction}`: `${value}` | same [Padding Utilities](/utilities/layout/spacing#padding) | +| __Other__ | | | +| `scrollbar-hide` | scrollbar-width: none
::-webkit-scrollbar: {
  display: none
} | visual hide scrollbar | \ No newline at end of file diff --git a/docs-vuepress/unocss/utilities/interactivity/touch-action.md b/docs-vuepress/unocss/utilities/interactivity/touch-action.md new file mode 100644 index 0000000000..caa23d54a8 --- /dev/null +++ b/docs-vuepress/unocss/utilities/interactivity/touch-action.md @@ -0,0 +1,36 @@ +# Touch Action + +Utilities for controlling how an element can be scrolled and zoomed on touchscreens. + +| Class | Properties | +| :---------------- | :-------------------------- | +| touch-auto | touch-action: auto; | +| touch-none | touch-action: none; | +| touch-pan-x | touch-action: pan-x; | +| touch-pan-left | touch-action: pan-left; | +| touch-pan-right | touch-action: pan-right; | +| touch-pan-y | touch-action: pan-y; | +| touch-pan-up | touch-action: pan-up; | +| touch-pan-down | touch-action: pan-down; | +| touch-pinch-zoom | touch-action: pinch-zoom; | +| touch-manipulation| touch-action: manipulation; | + +## Usage + +Use the `touch-{action}` utilities to control how an element can be scrolled (panned) and zoomed (pinched) on ` +touchscreens. + +```html +
+ +
+
+ +
+
+ +
+
+ +
+``` diff --git a/docs-vuepress/unocss/utilities/interactivity/user-select.md b/docs-vuepress/unocss/utilities/interactivity/user-select.md new file mode 100644 index 0000000000..bf6383c08f --- /dev/null +++ b/docs-vuepress/unocss/utilities/interactivity/user-select.md @@ -0,0 +1,11 @@ +# User Select + +Utilities for controlling whether the user can select text in an element. + + diff --git a/docs-vuepress/unocss/utilities/interactivity/will-change.md b/docs-vuepress/unocss/utilities/interactivity/will-change.md new file mode 100644 index 0000000000..834eb1f5fb --- /dev/null +++ b/docs-vuepress/unocss/utilities/interactivity/will-change.md @@ -0,0 +1,10 @@ +# Will Change + +Utilities for optimizing upcoming animations of elements that are expected to change. + +| Class | Properties | +| :-------------------- | :---------------------------- | +| will-change-auto | will-change: auto; | +| will-change-scroll | will-change: scroll-position; | +| will-change-contents | will-change: contents; | +| will-change-transform | will-change: transform; | diff --git a/docs-vuepress/unocss/utilities/layout/aspect-ratio.md b/docs-vuepress/unocss/utilities/layout/aspect-ratio.md new file mode 100644 index 0000000000..ffecc2362c --- /dev/null +++ b/docs-vuepress/unocss/utilities/layout/aspect-ratio.md @@ -0,0 +1,48 @@ +# Aspect Ratio + +## Utilities + +| Class | Properties | +| :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `aspect-auto` | aspect-ratio: auto; | +| `aspect-square` | aspect-ratio: 1 / 1; | +| `aspect-video` | aspect-ratio: 16 / 9; | +| `aspect-none` | position: 'static';
paddingBottom: '0';
'> *': {
 position: 'static';
 height: 'auto';
 width: 'auto';
 top: 'auto';
 right: 'auto';
 bottom: 'auto';
 left: 'auto';
} | +| `aspect-w-${float}` | --tw-aspect-w: `${float};` | +| `aspect-h-${float}` | --tw-aspect-h: `${float};` | +| `aspect-${fraction}` | position: 'relative';
paddingBottom: `${percent};`
'> *': {
 position: 'absolute';
 height: '100%';
 width: '100%';
 top: '0';
 right: '0';
 bottom: '0';
 left: '0';
} | + +*** + +`aspect-w-${float}` will add the following base styles: + +```css +.aspect-w-${float} { + position: 'relative'; + padding-bottom: 'calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)'; +} + +.aspect-w-${float} > * { + position: 'absolute'; + height: '100%'; + width: '100%'; + top: '0'; + right: '0'; + bottom: '0'; + left: '0'; +} +``` + +## Usage + +```js windi.config.js +export default { + theme: { + // ... + }, + plugins: [ + require('windicss/plugin/aspect-ratio'), + // ... + ], +} +``` diff --git a/docs-vuepress/unocss/utilities/layout/columns.md b/docs-vuepress/unocss/utilities/layout/columns.md new file mode 100644 index 0000000000..1780e7a546 --- /dev/null +++ b/docs-vuepress/unocss/utilities/layout/columns.md @@ -0,0 +1,62 @@ +# Columns + +## Columns + +Utilities for controlling the number of columns within an element. + + + +## Break After + +Utilities for controlling how a column or page should break after an element. + +| Class | Properties | +| :--------------------- | :----------------------- | +| break-after-auto | break-after: auto; | +| break-after-avoid | break-after: avoid; | +| break-after-all | break-after: all; | +| break-after-avoid-page | break-after: avoid-page; | +| break-after-page | break-after: page; | +| break-after-left | break-after: left; | +| break-after-right | break-after: right; | +| break-after-column | break-after: column; | + +## Break Before + +Utilities for controlling how a column or page should break before an element. + +| Class | Properties | +| :---------------------- | :------------------------ | +| break-before-auto | break-before: auto; | +| break-before-avoid | break-before: avoid; | +| break-before-all | break-before: all; | +| break-before-avoid-page | break-before: avoid-page; | +| break-before-page | break-before: page; | +| break-before-left | break-before: left; | +| break-before-right | break-before: right; | +| break-before-column | break-before: column; | + +## Break Inside + +Utilities for controlling how a column or page should break within an element. + +| Class | Properties | +| :------------------------ | :-------------------------- | +| break-inside-auto | break-inside: auto; | +| break-inside-avoid | break-inside: avoid; | +| break-inside-avoid-page | break-inside: avoid-page; | +| break-inside-avoid-column | break-inside: avoid-column; | diff --git a/docs-vuepress/unocss/utilities/layout/container.md b/docs-vuepress/unocss/utilities/layout/container.md new file mode 100644 index 0000000000..ba7c7da579 --- /dev/null +++ b/docs-vuepress/unocss/utilities/layout/container.md @@ -0,0 +1,87 @@ +# Container + +## Container + +A component for fixing an element's width to the current breakpoint. + +| Class | Breakpoint | Properties | +| :-------- | :------------- | :----------------- | +| container | *None* | width: 100%; | +| | sm *(640px)* | max-width: 640px; | +| | md *(768px)* | max-width: 768px; | +| | lg *(1024px)* | max-width: 1024px; | +| | xl *(1280px)* | max-width: 1280px; | +| | 2xl *(1536px)* | max-width: 1536px; | + +### Usage + +To center a container, use the mx-auto utility: + +```html +
+ +
+``` + +To add horizontal padding, use the `px-{size}` utilities: + +```html +
+ +
+``` + +To use a container at only a certain breakpoint and up: + +```html + +
+ +
+``` + + + +#### Centering by default + +```js windi.config.js +export default { + theme: { + container: { + center: true, + }, + }, +} +``` + +#### Horizontal padding + +```js windi.config.js +export default { + theme: { + container: { + padding: '2rem', + }, + }, +} +``` + +Specify a different padding amount for each breakpoint + +```js windi.config.js +export default { + theme: { + container: { + padding: { + 'DEFAULT': '1rem', + 'sm': '2rem', + 'lg': '4rem', + 'xl': '5rem', + '2xl': '6rem', + }, + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/layout/display.md b/docs-vuepress/unocss/utilities/layout/display.md new file mode 100644 index 0000000000..e5b0fec0d9 --- /dev/null +++ b/docs-vuepress/unocss/utilities/layout/display.md @@ -0,0 +1,176 @@ +# Display + +## Block + +The `block` utility generates a block element box, generating line breaks both before and after the element when in the +normal flow. + + + +## Inline Block + +The `inline-block` utility generates a block element box that will be flowed with surrounding content as if it were a +single inline box (behaving much like a replaced element would). + + + +## Inline + +The `inline` utility generates one or more inline element boxes that do not generate line breaks before or after +themselves. In normal flow, the next element will be on the same line if there is space. + + + +## Flow Root + +The `flow-root` utility generates a block element box that establishes a new +[block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining +where the formatting root lies. + +| Class | Properties | +| :-------- | :------------------ | +| flow-root | display: flow-root; | + + + +## Contents + +The `contents` utilities don't produce a specific box by themselves. They are replaced by their pseudo-box and their +child boxes. + + + +## Hidden + +Turns off the `display` of an element so that it has no effect on layout (the document is rendered as though the element +did not exist). All descendant elements also have their display turned off. To have an element take up the space that it +would normally take, but without actually rendering anything, use the [visibility](#visibility) property instead. + + + +## Visibility + +Utilities for controlling the visibility of an element. The `visibility` CSS property shows or hides an element without +changing the layout of a document. The property can also hide rows or columns in a ``. + + + +## Backface Visibility + +The `backface` utility sets whether the back face of an element is visible when turned towards the user. + + + +## List Item + +The `list-item` utility generates a `::marker` pseudo-element with the content specified by its +[list-style](/utilities/general/typography#list-style-type) properties (for example a bullet point) together with a +principal box of the specified type for its own contents. + + \ No newline at end of file diff --git a/docs-vuepress/unocss/utilities/layout/flexbox.md b/docs-vuepress/unocss/utilities/layout/flexbox.md new file mode 100644 index 0000000000..0cda8b7fcd --- /dev/null +++ b/docs-vuepress/unocss/utilities/layout/flexbox.md @@ -0,0 +1,205 @@ +# Flexbox + +## Flex + +Use `flex` to create a block-level flex container. + + + +## Flex Basis + +Utilities for controlling the initial size of flex items. + + + +## Inline Flex + +Use `inline-flex` to create an inline flex container. + + + +## Flex Direction + +Utilities for controlling the direction of flex items. + + + +## Flex Wrap + +Utilities for controlling how flex items wrap. + + + +## Flex Stretch + +Utilities for controlling how flex items both grow and shrink. + + + + + +```js windi.config.js +export default { + theme: { + flex: { + 1: '1 1 0%', + auto: '1 1 auto', + initial: '0 1 auto', + inherit: 'inherit', + none: 'none', + 2: '2 2 0%', + }, + }, +} +``` + + + +## Flex Grow + +Utilities for controlling how flex items grow. + + + + + +```js windi.config.js +export default { + theme: { + flexGrow: { + 0: 0, + DEFAULT: 2, + 1: 1, + }, + }, +} +``` + + + +## Flex Shrink + +Utilities for controlling how flex items shrink. + + + + + +```js windi.config.js +export default { + theme: { + flexShrink: { + 0: 0, + DEFAULT: 2, + 1: 1, + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/layout/grid.md b/docs-vuepress/unocss/utilities/layout/grid.md new file mode 100644 index 0000000000..d3b132c38a --- /dev/null +++ b/docs-vuepress/unocss/utilities/layout/grid.md @@ -0,0 +1,613 @@ +# Grid + +## Grid + +Use `grid` to create a grid container. + + + +## Inline Grid + +Use `inline-grid` to create an inline grid container. + + + +## Grid Template Columns + +Utilities for specifying the columns in a grid layout. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + gridTemplateColumns: { + nt: 'repeat(16, minmax(0, 1fr))', + footer: '200px minmax(900px, 1fr) 100px', + }, + }, + }, +} +``` + + + +## Grid Template Rows + +Utilities for specifying the rows in a grid layout. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + gridTemplateRows: { + layout: '200px minmax(900px, 1fr) 100px', + }, + }, + }, +} +``` + + + +## Grid Column Span + +Utilities for specifying the column size of an element in a grid layout. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + gridColumn: { + 'span-16': 'span 16 / span 16', + }, + }, + }, +} +``` + + + +## Grid Row Span + +Utilities for specifying the row size of an element in a grid layout. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + gridRow: { + 'span-16': 'span 16 / span 16', + }, + }, + }, +} +``` + + + +## Grid Column Start + +Utilities to make an element start at the nth grid line. These utilities should be combined with the [col-end](#grid-column-end) or [col-span](#grid-column-span) utilities to span a specific number of columns. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + gridColumnStart: { + first: '1', + }, + }, + }, +} +``` + + + +## Grid Column End + +Utilities to make an element end at the nth grid line. These utilities should be combined with the [col-start](#grid-column-start) or [col-span](#grid-column-span) utilities to span a specific number of columns. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + gridColumnEnd: { + last: '20', + }, + }, + }, +} +``` + + + +## Grid Row Start + +Utilities to make an element start at the nth grid line. These utilities should be combined with the [row-end](#grid-row-end) or [row-span](#grid-row-span) utilities to span a specific number of rows. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + gridRowStart: { + first: '1', + }, + }, + }, +} +``` + + + +## Grid Row End + +Utilities to make an element end at the nth grid line. These utilities should be combined with the [row-start](#grid-row-start) or [row-span](#grid-row-span) utilities to span a specific number of rows. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + gridRowEnd: { + last: '20', + }, + }, + }, +} +``` + + + +## Grid Auto Flow + +Utilities for controlling how elements in a grid are auto-placed. + + + +## Grid Auto Columns + +Utilities for controlling the size of implicitly-created grid columns. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + gridAutoColumns: { + '2fr': 'minmax(0, 2fr)', + }, + }, + }, +} +``` + + + +## Grid Auto Rows + +Utilities for controlling the size of implicitly-created grid rows. + + + + + +```js windi.config.js +export default { + theme: { + extend: { + gridAutoRows: { + '2fr': 'minmax(0, 2fr)', + }, + }, + }, +} +``` + + + +## Gap + +Utilities for controlling gutters between grid rows and columns. + + + + + +You can customize the global spacing scale in the theme.spacing or theme.extend.spacing sections of your windi.config.js file: + +```js windi.config.js +export default { + theme: { + extend: { + spacing: { + lg: '18rem', + }, + }, + }, +} +``` + +To customize the gap scale separately, use the gap section of your Tailwind theme config. + +```js windi.config.js +export default { + theme: { + extend: { + gap: { + sm: '2.75rem', + }, + }, + }, +} +``` + + + +## Gap X + +Utilities for controlling gutters between grid columns. + + + +## Gap Y + +Utilities for controlling gutters between grid rows. + + diff --git a/docs-vuepress/unocss/utilities/layout/positioning.md b/docs-vuepress/unocss/utilities/layout/positioning.md new file mode 100644 index 0000000000..2a9f58341f --- /dev/null +++ b/docs-vuepress/unocss/utilities/layout/positioning.md @@ -0,0 +1,490 @@ +# Positioning + +## Order + +Utilities for controlling the order of flex and grid items. + + + + + +```js windi.config.js +export default { + theme: { + order: { + first: '-9999', + last: '9999', + none: '0', + normal: '0', + }, + }, +} +``` + + + +## Justify Content + +Utilities for controlling how flex and grid items are positioned along a container's main axis. + + + +## Justify Items + +Utilities for controlling how grid items are aligned along their inline axis. + + + +## Justify Self + +Utilities for controlling how an individual grid item is aligned along its inline axis. + + + +## Align Content + +Utilities for controlling how rows are positioned in multi-row flex and grid containers. + + + +## Align Items + +Utilities for controlling how flex and grid items are positioned along a container's cross axis. + + + +## Align Self + +Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis. + + + +## Place Content + +Utilities for controlling how content is justified and aligned at the same time. + + + +## Place Items + +Utilities for controlling how items are justified and aligned at the same time. + + + +## Place Self + +Utilities for controlling how an individual item is justified and aligned at the same time. + + + +## Position + +Utilities for controlling how an element is positioned in the DOM. + + + +## Top / Right / Bottom / Left + +Utilities for controlling the placement of positioned elements. + +### Inset + + + + + +```js windi.config.js +export default { + theme: { + inset: { + sm: '1rem', + lg: '4rem', + }, + }, +} +``` + + + +### Inset Y + + + +### Inset X + + + +### Top + + + +### Right + + + +### Bottom + + + +### Left + + + +## Floats + +Utilities for controlling the wrapping of content around an element. + + + +## Clear + +Utilities for controlling the wrapping of content around an element. + + + +## Isolation + +Utilities for controlling whether an element should explicitly create a new stacking context. These utilities are especially helpful when used in conjunction with [mix-blend-mode](/utilities/effects/mix-blend-mode) and [z-index](#z-index). + + + +## Object Fit + +Utilities for controlling how a replaced element's content should be resized. + + + +## Object Position + +Utilities for controlling how a replaced element's content should be positioned within its container. + + + + + +```js windi.config.js +export default { + theme: { + objectPosition: { + 'bottom': 'bottom', + 'center': 'center', + 'left': 'left', + 'left-bottom': 'left bottom', + 'left-top': 'left top', + 'right': 'right', + 'right-bottom': 'right bottom', + 'right-top': 'right top', + 'top': 'top', + 'center-bottom': 'center bottom', + 'center-top': 'center top', + }, + }, +} +``` + + + +## Z-Index + +Utilities for controlling the stack order of an element. + + + + + +```js windi.config.js +export default { + theme: { + zIndex: { + first: 10, + second: 20, + }, + }, +} +``` + + diff --git a/docs-vuepress/unocss/utilities/layout/sizing.md b/docs-vuepress/unocss/utilities/layout/sizing.md new file mode 100644 index 0000000000..4c4d294b1c --- /dev/null +++ b/docs-vuepress/unocss/utilities/layout/sizing.md @@ -0,0 +1,223 @@ +# Sizing + +## Width + +Utilities for setting the width of an element + + + + + +```js windi.config.js +export default { + theme: { + extend: { + width: { + half: '50%', + }, + }, + }, +} +``` + + + +## Min-Width + +Utilities for setting the minimum width of an element + + + + + +```js windi.config.js +export default { + theme: { + minWidth: { + half: '50%', + full: '100%', + }, + }, +} +``` + + + +## Max-Width + +Utilities for setting the maximum width of an element + + + + + +```js windi.config.js +export default { + theme: { + maxWidth: { + '1/4': '25%', + '1/2': '50%', + '3/4': '75%', + }, + }, +} +``` + + + +## Height + +Utilities for setting the height of an element + + + + + +```js windi.config.js +export default { + theme: { + height: { + sm: '8px', + md: '16px', + lg: '24px', + xl: '48px', + }, + }, +} +``` + + + +## Min-Height + +Utilities for setting the minimum height of an element + + + + + +```js windi.config.js +export default { + theme: { + minHeight: { + '0': '0', + '1/4': '25%', + '1/2': '50%', + '3/4': '75%', + 'full': '100%', + }, + }, +} +``` + + + +## Max-Height + +Utilities for setting the maximum height of an element + + + + + +```js windi.config.js +export default { + theme: { + maxHeight: { + '0': '0', + '1/4': '25%', + '1/2': '50%', + '3/4': '75%', + 'full': '100%', + }, + }, +} +``` + + + +## Box Sizing + +Utilities for controlling how the browser should calculate an element's total size. + +- Use `box-border` to tell the browser to **include the element's borders and padding when you give it a height or width**. This means a **100px × 100px** element with a **2px border and 4px of padding** on all sides will be rendered as **100px × 100px**, with an internal content area of 88px × 88px. Windi makes this the default for all elements in our preflight base styles. + +- Use `box-content` to tell the browser to **add borders and padding on top of the element's specified width or height**. This means a 100px × 100px element with a **2px border and 4px of padding** on all sides will actually be rendered as **112px × 112px**, with an internal content area of 100px × 100px. + + diff --git a/docs-vuepress/unocss/utilities/layout/spacing.md b/docs-vuepress/unocss/utilities/layout/spacing.md new file mode 100644 index 0000000000..fbb88b8739 --- /dev/null +++ b/docs-vuepress/unocss/utilities/layout/spacing.md @@ -0,0 +1,365 @@ +# Spacing + +## Padding + +Utilities for controlling an element's padding. + + + + + +```js windi.config.js +export default { + theme: { + padding: { + sm: '8px', + md: '16px', + lg: '24px', + xl: '48px', + }, + }, +} +``` + + + +## Padding Y + +Utilities for controlling an element's vertical padding. + + + +## Padding X + +Utilities for controlling an element's horizontal padding. + + + +## Padding Top + +Utilities for controlling an element's top padding. + + + +## Padding Left + +Utilities for controlling an element's left padding. + + + +## Padding Bottom + +Utilities for controlling an element's bottom padding. + + + +## Padding Right + +Utilities for controlling an element's right padding. + + + +## Margin + +Utilities for controlling an element's margin. + + + + + +```js windi.config.js +export default { + theme: { + margin: { + sm: '8px', + md: '16px', + lg: '24px', + xl: '48px', + }, + }, +} +``` + + + +## Margin Y + +Utilities for controlling an element's vertical margin. + + + +## Margin X + +Utilities for controlling an element's horizontal margin. + + + +## Margin Top + +Utilities for controlling an element's top margin. + + + +## Margin Left + +Utilities for controlling an element's left margin. + + + +## Margin Bottom + +Utilities for controlling an element's bottom margin. + + + +## Margin Right + +Utilities for controlling an element's right margin. + + + +## Space Between Y + +Utilities for controlling the space between vertical align child elements. + + + + + +```js windi.config.js +export default { + theme: { + space: { + sm: '8px', + md: '16px', + lg: '24px', + xl: '48px', + }, + }, +} +``` + + + +## Space Between Y Reverse + +If your elements are in reverse order (using say `flex-col-reverse`), use the `space-y-reverse` utilities to ensure the space is added to the correct side of each element. + + + +## Space Between X + +Utilities for controlling the space between horizontal align child elements. + + + + + +```js windi.config.js +export default { + theme: { + space: { + sm: '8px', + md: '16px', + lg: '24px', + xl: '48px', + }, + }, +} +``` + + + +## Space Between X Reverse + +If your elements are in reverse order (using say `flex-row-reverse`), use the `space-x-reverse` utilities to ensure the space is added to the correct side of each element. + + diff --git a/docs-vuepress/unocss/utilities/layout/tables.md b/docs-vuepress/unocss/utilities/layout/tables.md new file mode 100644 index 0000000000..18819bb524 --- /dev/null +++ b/docs-vuepress/unocss/utilities/layout/tables.md @@ -0,0 +1,571 @@ +# Tables + +## Table + +The `table` utility behaves like HTML `
` element. It defines a block-level box. Table element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. + + + +## Inline Table + +The `inline-table` utility does not have a direct mapping in HTML. It behaves like an HTML `
` element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context. + + + +| inline-table | display: inline-table; | + +## Table Caption + +The `table-caption` utility behaves like `` HTML element. The HTML `` element defines a row of cells in a table. The row's cells can then be established using a mix of `` HTML element. The HTML `` element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a `` element. + + + +## Table Row Group + +The `table-row-group` utility behaves like `` HTML element. The HTML Table Body element (``) encapsulates a set of table rows (`` elements), indicating that they comprise the body of the table (`
` HTML element. The HTML `` element specifies the caption (or title) of a table. + + + +## Table Cell + +The `table-cell` utility behaves like `
` HTML element. The HTML `` element defines a cell of a table that contains data. It participates in the table model. + + + +## Table Row + +The `table-row` utility behaves like `
` (data cell) and `` (header cell) elements. + + + +## Table Column + +The `table-column` utility behaves like `
`). + + + +## Table Column Group + +The `table-column-group` utility behaves like `` HTML element. The HTML `` element defines a group of columns within a table. + + + +## Table Header Group + +The `table-header-group` utility behaves like `` HTML element. The HTML `` element defines a set of rows defining the head of the columns of the table. + + + +## Table Footer Group + +The `table-footer-group` utility behaves like `` HTML element. The HTML `` element defines a set of rows summarizing the columns of the table. + + + +## Table Layout + +Utilities for controlling the table layout algorithm. + + + +## Table Border Collapse + +Utilities for controlling whether table borders should collapse or be separated. + + + +## Table Caption Side + +The `caption` utility puts the content of a table's `
` on the specified side. The values are relative to the writing-mode of the table. + + + +## Table Empty Cells + +The `empty-cells` utility sets whether borders and backgrounds appear around ``cells that have no visible content. A good use case for empty-cells could be a situation where you may not know whether a table will or will not contain empty data points and you decide to hide them. + + + +## Example Of Table Utilities + +Use above utilities to create elements that behave like their respective table elements. + +### Raw Html Tags + +```html +
+ + + + + + + + + + + + + + + + + + + + + + + +
Council budget
ItemsExpenditure
Donuts3,000
Stationery18,000
Totals21,000
+``` + +### With Windi Utilities + +```html +
+
Council budget
+
+
+
Items
+
Expenditure
+
+
+
+
+
Donuts
+
3,000
+
+
+
Stationery
+
18,000
+
+
+
+
+
Totals
+
21,000
+
+
+
+``` diff --git a/package.json b/package.json index 3239959915..a14ad37cf5 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,13 @@ "@types/jest": "^27.0.1", "@typescript-eslint/eslint-plugin": "^5.2.0", "@typescript-eslint/parser": "^5.2.0", + "@unocss/webpack": "0.58.9", "@vuepress/plugin-back-to-top": "^1.8.2", "@vuepress/plugin-pwa": "^1.8.0", + "@vueuse/core": "^7.7.0", + "@windicss/shared-components": "^0.1.8", + "codemirror": "^5.65.2", + "codemirror-theme-vars": "^0.1.1", "eslint": "^7.32.0", "eslint-config-standard": "^16.0.3", "eslint-plugin-html": "^6.2.0", @@ -34,9 +39,20 @@ "eslint-plugin-promise": "^5.1.1", "identity-obj-proxy": "^3.0.0", "jest": "^27.2.0", + "json5": "^2.2.0", "lerna": "^8.1.8", + "lz-string": "^1.4.4", + "mini-css-extract-plugin": "^1.6.2", + "mitt": "^3.0.0", + "preact": "^10.6.6", + "prism-theme-vars": "^0.2.2", + "prismjs": "^1.27.0", + "splitpanes": "^3.1.1", "typescript": "^4.1.3", - "vuepress": "^1.9.7" + "unocss": "0.58.9", + "vue": "^3.2.31", + "vuepress": "^1.9.7", + "windicss": "^3.5.1" }, "workspaces": [ "packages/*" From 43219d9cba3f879c923bfce15c29895bd9f2270e Mon Sep 17 00:00:00 2001 From: mater Date: Fri, 3 Jan 2025 14:10:47 +0800 Subject: [PATCH 55/59] fix: docs --- docs-vuepress/.vuepress/config.js | 127 +------------------------- docs-vuepress/.vuepress/enhanceApp.js | 5 - package.json | 19 +--- 3 files changed, 4 insertions(+), 147 deletions(-) diff --git a/docs-vuepress/.vuepress/config.js b/docs-vuepress/.vuepress/config.js index c4714e9bf8..796588e020 100644 --- a/docs-vuepress/.vuepress/config.js +++ b/docs-vuepress/.vuepress/config.js @@ -1,107 +1,4 @@ const { headerPlugin } = require('./headerMdPlugin') -const { presetUno } = require('unocss') -const UnoCSS = require('@unocss/webpack').default - -const unocss = { - '/unocss': [ - { - title: 'General', - children: [ - '/unocss/utilities/general/colors', - '/unocss/utilities/general/typography', - '/unocss/utilities/general/svg', - '/unocss/utilities/general/variants', - ], - }, - { - title: 'Accessibility', - children: [ - '/unocss/utilities/accessibility/screen-readers' - ], - }, - { - title: 'Animations', - children: [ - '/unocss/utilities/animations/animation', - '/unocss/utilities/animations/transforms', - '/unocss/utilities/animations/transitions' - ], - }, - { - title: 'Backgrounds', - children: [ - '/unocss/utilities/backgrounds/background', - '/unocss/utilities/backgrounds/gradients', - '/unocss/utilities/backgrounds/background-blend-mode' - ], - }, - { - title: 'Behaviors', - children: [ - '/unocss/utilities/behaviors/box-decoration-break', - '/unocss/utilities/behaviors/image-rendering', - '/unocss/utilities/behaviors/listings', - '/unocss/utilities/behaviors/overflow', - '/unocss/utilities/behaviors/overscroll-behavior', - '/unocss/utilities/behaviors/placeholder', - ], - }, - { - title: 'Borders', - children: [ - '/unocss/utilities/borders/border', - '/unocss/utilities/borders/divider', - '/unocss/utilities/borders/outline', - '/unocss/utilities/borders/ring', - ], - }, - { - title: 'Effects', - children: [ - '/unocss/utilities/effects/box-shadow', - '/unocss/utilities/effects/opacity', - '/unocss/utilities/effects/mix-blend-mode', - ], - }, - { - title: 'Filters', - children: [ - '/unocss/utilities/filters/filter', - '/unocss/utilities/filters/backdrop-filter', - ], - }, - { - title: 'Interactivity', - children: [ - '/unocss/utilities/interactivity/accent-color', - '/unocss/utilities/interactivity/appearance', - '/unocss/utilities/interactivity/cursor', - '/unocss/utilities/interactivity/caret', - '/unocss/utilities/interactivity/pointer-events', - '/unocss/utilities/interactivity/resize', - '/unocss/utilities/interactivity/scroll-behavior', - '/unocss/utilities/interactivity/touch-action', - '/unocss/utilities/interactivity/user-select', - '/unocss/utilities/interactivity/will-change', - ], - }, - { - title: 'Layout', - children: [ - // { title: 'Aspect Ratio', link: '/unocss/utilities/layout/aspect-ratio' }, - '/unocss/utilities/layout/columns', - '/unocss/utilities/layout/container', - '/unocss/utilities/layout/display', - '/unocss/utilities/layout/flexbox', - '/unocss/utilities/layout/grid', - '/unocss/utilities/layout/positioning', - '/unocss/utilities/layout/sizing', - '/unocss/utilities/layout/spacing', - '/unocss/utilities/layout/tables', - ], - }, - ] -} const sidebar = { '/guide/': [ @@ -222,8 +119,7 @@ const sidebar = { { title: '小程序跨端组件库 Mpx-cube-ui 开源啦', path: 'mpx-cube-ui' }, { title: 'Mpx-cli 插件化改造', path: 'mpx-cli-next' }, { title: 'Mpx 小程序单元测试能力建设与实践', path: 'unit-test'} - ], - ...unocss + ] } const nav = [ @@ -282,27 +178,6 @@ module.exports = { chainWebpack: (config, isServer) => { // 添加node_modules避免resolve错误 config.resolve.modules.add('node_modules') - config.module.rule('vue').uses.delete('cache-loader') - config.module.rule('tsx').uses.delete('cache-loader') - config.merge({ - cache: false - }) - config.plugin('extract-css').use(require('mini-css-extract-plugin'), [ - { - filename: '[name].css', - chunkFilename: '[name].[hash:9].css' - } - ]) - }, - configureWebpack: { - plugins: [ - UnoCSS({ - presets: [ - presetUno() - ], - configFile: false - }) - ] }, markdown: { // markdown-it-toc 的选项 diff --git a/docs-vuepress/.vuepress/enhanceApp.js b/docs-vuepress/.vuepress/enhanceApp.js index dc9b21589e..878e2134de 100644 --- a/docs-vuepress/.vuepress/enhanceApp.js +++ b/docs-vuepress/.vuepress/enhanceApp.js @@ -1,8 +1,3 @@ -import a from 'uno.css' - -console.log(a); - - export default ({ router }) => { if (typeof process === 'undefined' || process.env.VUE_ENV !== 'server') { router.onReady(() => { diff --git a/package.json b/package.json index a14ad37cf5..903e0a3dbd 100644 --- a/package.json +++ b/package.json @@ -23,13 +23,8 @@ "@types/jest": "^27.0.1", "@typescript-eslint/eslint-plugin": "^5.2.0", "@typescript-eslint/parser": "^5.2.0", - "@unocss/webpack": "0.58.9", "@vuepress/plugin-back-to-top": "^1.8.2", "@vuepress/plugin-pwa": "^1.8.0", - "@vueuse/core": "^7.7.0", - "@windicss/shared-components": "^0.1.8", - "codemirror": "^5.65.2", - "codemirror-theme-vars": "^0.1.1", "eslint": "^7.32.0", "eslint-config-standard": "^16.0.3", "eslint-plugin-html": "^6.2.0", @@ -37,22 +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", - "json5": "^2.2.0", "lerna": "^8.1.8", - "lz-string": "^1.4.4", - "mini-css-extract-plugin": "^1.6.2", - "mitt": "^3.0.0", - "preact": "^10.6.6", - "prism-theme-vars": "^0.2.2", - "prismjs": "^1.27.0", - "splitpanes": "^3.1.1", "typescript": "^4.1.3", - "unocss": "0.58.9", - "vue": "^3.2.31", "vuepress": "^1.9.7", - "windicss": "^3.5.1" + "vue-template-compiler": "^2.7.16", + "webpack": "^4.47.0" }, "workspaces": [ "packages/*" From 109149712d862117047123731c040c5478c39a44 Mon Sep 17 00:00:00 2001 From: mater Date: Fri, 3 Jan 2025 14:12:42 +0800 Subject: [PATCH 56/59] fix: docs --- docs-vuepress/.vuepress/config.js | 105 +++++++++++++++++++++++++++++- 1 file changed, 104 insertions(+), 1 deletion(-) diff --git a/docs-vuepress/.vuepress/config.js b/docs-vuepress/.vuepress/config.js index 796588e020..b9f42ca0ab 100644 --- a/docs-vuepress/.vuepress/config.js +++ b/docs-vuepress/.vuepress/config.js @@ -1,5 +1,107 @@ const { headerPlugin } = require('./headerMdPlugin') + +const unocss = { + '/unocss': [ + { + title: 'General', + children: [ + '/unocss/utilities/general/colors', + '/unocss/utilities/general/typography', + '/unocss/utilities/general/svg', + '/unocss/utilities/general/variants', + ], + }, + { + title: 'Accessibility', + children: [ + '/unocss/utilities/accessibility/screen-readers' + ], + }, + { + title: 'Animations', + children: [ + '/unocss/utilities/animations/animation', + '/unocss/utilities/animations/transforms', + '/unocss/utilities/animations/transitions' + ], + }, + { + title: 'Backgrounds', + children: [ + '/unocss/utilities/backgrounds/background', + '/unocss/utilities/backgrounds/gradients', + '/unocss/utilities/backgrounds/background-blend-mode' + ], + }, + { + title: 'Behaviors', + children: [ + '/unocss/utilities/behaviors/box-decoration-break', + '/unocss/utilities/behaviors/image-rendering', + '/unocss/utilities/behaviors/listings', + '/unocss/utilities/behaviors/overflow', + '/unocss/utilities/behaviors/overscroll-behavior', + '/unocss/utilities/behaviors/placeholder', + ], + }, + { + title: 'Borders', + children: [ + '/unocss/utilities/borders/border', + '/unocss/utilities/borders/divider', + '/unocss/utilities/borders/outline', + '/unocss/utilities/borders/ring', + ], + }, + { + title: 'Effects', + children: [ + '/unocss/utilities/effects/box-shadow', + '/unocss/utilities/effects/opacity', + '/unocss/utilities/effects/mix-blend-mode', + ], + }, + { + title: 'Filters', + children: [ + '/unocss/utilities/filters/filter', + '/unocss/utilities/filters/backdrop-filter', + ], + }, + { + title: 'Interactivity', + children: [ + '/unocss/utilities/interactivity/accent-color', + '/unocss/utilities/interactivity/appearance', + '/unocss/utilities/interactivity/cursor', + '/unocss/utilities/interactivity/caret', + '/unocss/utilities/interactivity/pointer-events', + '/unocss/utilities/interactivity/resize', + '/unocss/utilities/interactivity/scroll-behavior', + '/unocss/utilities/interactivity/touch-action', + '/unocss/utilities/interactivity/user-select', + '/unocss/utilities/interactivity/will-change', + ], + }, + { + title: 'Layout', + children: [ + // { title: 'Aspect Ratio', link: '/unocss/utilities/layout/aspect-ratio' }, + '/unocss/utilities/layout/columns', + '/unocss/utilities/layout/container', + '/unocss/utilities/layout/display', + '/unocss/utilities/layout/flexbox', + '/unocss/utilities/layout/grid', + '/unocss/utilities/layout/positioning', + '/unocss/utilities/layout/sizing', + '/unocss/utilities/layout/spacing', + '/unocss/utilities/layout/tables', + ], + }, + ] +} + const sidebar = { '/guide/': [ { @@ -119,7 +221,8 @@ const sidebar = { { title: '小程序跨端组件库 Mpx-cube-ui 开源啦', path: 'mpx-cube-ui' }, { title: 'Mpx-cli 插件化改造', path: 'mpx-cli-next' }, { title: 'Mpx 小程序单元测试能力建设与实践', path: 'unit-test'} - ] + ], + ...unocss } const nav = [ From 3fc9efa731945245e9b8a47bc3d7d7de6f5e390c Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Fri, 3 Jan 2025 16:16:19 +0800 Subject: [PATCH 57/59] [fix]formatValue --- packages/webpack-plugin/lib/react/processStyles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/webpack-plugin/lib/react/processStyles.js b/packages/webpack-plugin/lib/react/processStyles.js index ca6bbeac35..063593c650 100644 --- a/packages/webpack-plugin/lib/react/processStyles.js +++ b/packages/webpack-plugin/lib/react/processStyles.js @@ -63,6 +63,7 @@ module.exports = function (styles, { };\n let __unoClassMap global.__getUnoClassMap = function () { + const formatValue = global.__formatValue if (!__unoClassMap) { __unoClassMap = __unoCssMapPlaceholder__ } From f4132e9f112445a065600e310cfbfff1ad705ace Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Fri, 3 Jan 2025 18:11:43 +0800 Subject: [PATCH 58/59] [feat]support variant check --- packages/unocss-base/preset-rn/index.js | 6 +- .../unocss-base/preset-rn/variants/index.js | 75 +++++++++++++++++++ packages/unocss-plugin/lib/rn-plugin/index.js | 6 ++ .../unocss-plugin/lib/web-plugin/utils.js | 2 +- 4 files changed, 87 insertions(+), 2 deletions(-) create mode 100644 packages/unocss-base/preset-rn/variants/index.js diff --git a/packages/unocss-base/preset-rn/index.js b/packages/unocss-base/preset-rn/index.js index 6636a58e5f..93a09c3cb1 100644 --- a/packages/unocss-base/preset-rn/index.js +++ b/packages/unocss-base/preset-rn/index.js @@ -1,10 +1,14 @@ import rules from './rules/index.js' import theme from './theme.js' +import blocklistVariants from './variants/index.js' export default function presetRnMpx () { return { name: '@mpxjs/unocss-preset-rn', rules, - theme + theme, + blocklist: [ + ...blocklistVariants + ] } } diff --git a/packages/unocss-base/preset-rn/variants/index.js b/packages/unocss-base/preset-rn/variants/index.js new file mode 100644 index 0000000000..dd747cb5ef --- /dev/null +++ b/packages/unocss-base/preset-rn/variants/index.js @@ -0,0 +1,75 @@ +import { + variantAria, + variantTaggedAriaAttributes, + variantChildren, + variantCombinators, + variantContainerQuery, + variantTaggedDataAttributes, + variantLanguageDirections, + variantStartingStyle, + variantSupports, + variantSelector, + variantCssLayer, + variantScope +} from '@unocss/preset-mini/variants' +import { + variantCombinators as windVariantCombinator, + variantContrasts, + variantMotions, + variantSpaceAndDivide, + variantStickyHover, + placeholderModifier +} from '@unocss/preset-wind/variants' + +const wrapVariant = function (variant) { + return function (raw) { + const ctx = { + rawSelector: raw, + theme: this.config, + generator: this + } + const { match } = variant + if (match(raw, ctx)) { + this._mpx2rnUnsuportedRules = this._mpx2rnUnsuportedRules || [] + this._mpx2rnUnsuportedRules.push(raw) + return true + } + } +} + +const transformVariants = function (variantsArr) { + return variantsArr.map(variants => { + if (Array.isArray(variants)) { + return variants.map(variant => wrapVariant(variant)) + } else { + return wrapVariant(variants) + } + }).reduce((preV, curV) => { + if (Array.isArray(curV)) { + return preV.concat(...curV) + } else { + return preV.concat(curV) + } + }, []) +} + +export default transformVariants([ + variantAria, + variantTaggedAriaAttributes, + variantChildren, + variantCombinators, + variantContainerQuery, + variantTaggedDataAttributes, + variantLanguageDirections, + variantStartingStyle, + variantSupports, + variantSelector, + variantCssLayer, + variantScope, + windVariantCombinator, + variantContrasts, + variantMotions, + variantSpaceAndDivide, + variantStickyHover, + placeholderModifier +]) diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js index 084b52bb69..12bb6875a2 100644 --- a/packages/unocss-plugin/lib/rn-plugin/index.js +++ b/packages/unocss-plugin/lib/rn-plugin/index.js @@ -100,6 +100,12 @@ function WebpackPlugin (configOrPath, defaults) { compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, async (compilation) => { const ctx = await createContext(configOrPath, defaults) + ctx.uno.config.blocklist = ctx.uno.config.blocklist.map((item) => { + if (typeof item === 'function') { + return item.bind(ctx.uno) + } + return item + }) compiler.__unoCtx = ctx return ctx }) diff --git a/packages/unocss-plugin/lib/web-plugin/utils.js b/packages/unocss-plugin/lib/web-plugin/utils.js index 89d431a636..b3fef9b891 100644 --- a/packages/unocss-plugin/lib/web-plugin/utils.js +++ b/packages/unocss-plugin/lib/web-plugin/utils.js @@ -25,7 +25,7 @@ async function createContext (configOrPath, defaults = {}, extraConfigSources = const result = await config.loadConfig(root, configOrPath, extraConfigSources, defaults) rawConfig = result.config - uno.setConfig(rawConfig) + await uno.setConfig(rawConfig) rollupFilter = pluginutils.createFilter( rawConfig.include || defaultInclude, rawConfig.exclude || defaultExclude From 51238326db9b7f495b57cc49e03eed9b28af4c9a Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Fri, 3 Jan 2025 18:39:54 +0800 Subject: [PATCH 59/59] [fix]some edge case --- packages/unocss-base/preset-rn/variants/index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/unocss-base/preset-rn/variants/index.js b/packages/unocss-base/preset-rn/variants/index.js index dd747cb5ef..6734bccd6c 100644 --- a/packages/unocss-base/preset-rn/variants/index.js +++ b/packages/unocss-base/preset-rn/variants/index.js @@ -21,14 +21,21 @@ import { placeholderModifier } from '@unocss/preset-wind/variants' -const wrapVariant = function (variant) { +const wrapVariant = function (variant = {}) { return function (raw) { const ctx = { rawSelector: raw, theme: this.config, generator: this } - const { match } = variant + let match + if (typeof variant === 'function') { + match = variant + } else if (variant.match) { + match = variant.match + } else { + return + } if (match(raw, ctx)) { this._mpx2rnUnsuportedRules = this._mpx2rnUnsuportedRules || [] this._mpx2rnUnsuportedRules.push(raw)