Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(rn-style-transformer): 新增样式变量编译插件 #16035

Merged
merged 1 commit into from
Jul 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 36 additions & 21 deletions packages/taro-rn-style-transformer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

`object`

`postcss` 相关配置,其他样式语言预处理后经过此配置。
`postcss` 相关配置,其他样式语言预处理后经过此配置。

```js
module.exports = {
Expand All @@ -15,39 +15,52 @@ module.exports = {
// ...
postcss: {
// postcss 配置,参考 https://github.com/postcss/postcss#options
options: { /* ... */ },
options: {
/* ... */
},
// 默认true,控制是否对 css value 进行 scalePx2dp 转换,pxtransform配置 enable 才生效
scalable: boolean,
pxtransform: {
enable: boolean, // 默认true
config: { /* ... */ } // 插件 pxtransform 配置项,参考尺寸章节
config: {
/* ... */
}, // 插件 pxtransform 配置项,参考尺寸章节
},
// 跟其他端 css module 配置保持统一
cssModules: {
enable: true, // 默认为 false,如需使用 css modules 功能,则设为 true
}
},
// postcss-css-variables 配置,样式变量编译相关
'postcss-css-variables': {
enable: boolean, // 默认 true
config: {
/* ... */
}, // 插件 postcss-css-variables 配置项,参考 https://github.com/MadLittleMods/postcss-css-variables?tab=readme-ov-file#options
},
},
}
},
}
```

### rn.sass

`object`

`sass` 相关配置。`options` 配置项参考[官方文档](https://github.com/sass/node-sass#options)。
`sass` 相关配置。`options` 配置项参考[官方文档](https://github.com/sass/node-sass#options)。

```js
module.exports = {
// ...
rn: {
// ...
sass: {
options: { /* ... */ },
// 加入到脚本注入的每个 sass 文件头部,在 config.sass 之前
options: {
/* ... */
},
// 加入到脚本注入的每个 sass 文件头部,在 config.sass 之前
additionalData: '', // {String|Function}
}
}
},
},
}
```

Expand All @@ -63,18 +76,20 @@ module.exports = {
rn: {
// ...
less: {
options: { /* ... */ },
options: {
/* ... */
},
additionalData: '', // {String|Function}
}
}
},
},
}
```

### rn.stylus

`object`

`stylus` 相关配置。`options` 配置项如下。
`stylus` 相关配置。`options` 配置项如下。

```js
module.exports = {
Expand All @@ -89,23 +104,23 @@ module.exports = {
* @type {(string|Function)[]}
* @default []
*/
use: ["nib"],
use: ['nib'],

/**
* Add path(s) to the import lookup paths.
*
* @type {string[]}
* @default []
*/
include: [path.join(__dirname, "src/styl/config")],
include: [path.join(__dirname, 'src/styl/config')],

/**
* Import the specified Stylus files/paths.
*
* @type {string[]}
* @default []
*/
import: ["nib", path.join(__dirname, "src/styl/mixins")],
import: ['nib', path.join(__dirname, 'src/styl/mixins')],

/**
* Define Stylus variables or functions.
Expand All @@ -115,8 +130,8 @@ module.exports = {
*/
// Array is the recommended syntax: [key, value, raw]
define: [
["$development", process.env.NODE_ENV === "development"],
["rawVar", 42, true],
['$development', process.env.NODE_ENV === 'development'],
['rawVar', 42, true],
],
// Object is deprecated syntax (there is no possibility to specify "raw')
// define: {
Expand Down Expand Up @@ -153,7 +168,7 @@ module.exports = {
hoistAtrules: true,
},
additionalData: '', // {String|Function}
}
}
},
},
}
```
1 change: 1 addition & 0 deletions packages/taro-rn-style-transformer/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"@tarojs/helper": "workspace:*",
"fbjs": "^3.0.5",
"less": "^4.2.0",
"postcss-css-variables": "^0.19.0",
"postcss-import": "^16.1.0",
"postcss-pxtransform": "workspace:*",
"postcss-reporter": "^7.1.0",
Expand Down
15 changes: 14 additions & 1 deletion packages/taro-rn-style-transformer/src/transforms/postcss.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import * as path from 'node:path'
import { isNpmPkg, printLog, processTypeEnum, recursiveMerge, resolveSync } from '@tarojs/helper'
import postcss from 'postcss'
import postcssImport from 'postcss-import'
import postcssCssVariables from 'postcss-css-variables'
import pxtransform from 'postcss-pxtransform'
import stylelint from 'stylelint'

Expand All @@ -19,6 +20,13 @@ const defaultPxtransformOption: {
}
}

const defaultPostcssCssVariablesOption: {
[key: string]: any
} = {
enable: true,
config: {}
}

export function makePostcssPlugins ({
filename,
designWidth,
Expand All @@ -27,7 +35,7 @@ export function makePostcssPlugins ({
transformOptions,
additionalData
}) {
const optionsWithDefaults = ['pxtransform', 'postcss-import', 'postcss-reporter', 'stylelint', 'cssModules']
const optionsWithDefaults = ['pxtransform', 'postcss-import', 'postcss-reporter', 'stylelint', 'cssModules', 'postcss-css-variables']

if (designWidth) {
defaultPxtransformOption.config.designWidth = designWidth
Expand All @@ -37,6 +45,7 @@ export function makePostcssPlugins ({
defaultPxtransformOption.config.deviceRatio = deviceRatio
}
const pxtransformOption = recursiveMerge({}, defaultPxtransformOption, postcssConfig.pxtransform)
const postcssCssVariablesOption = recursiveMerge({}, defaultPostcssCssVariablesOption, postcssConfig['postcss-css-variables'])

const plugins = [
postcssImport({
Expand All @@ -60,6 +69,10 @@ export function makePostcssPlugins ({
plugins.push(pxtransform(pxtransformOption.config))
}

if (postcssCssVariablesOption.enable) {
plugins.push(postcssCssVariables(postcssCssVariablesOption.config))
}

const skipRows = additionalData ? additionalData.split('\n').length : 0

plugins.push(
Expand Down
Loading