Interface: UserDefinedOptions
0.重要配置
cssPreflight?
optional
cssPreflight:CssPreflightOptions
Issue
https://github.com/sonofmagic/weapp-tailwindcss/issues/7
Description
在所有 view节点添加的 css 预设,可根据情况自由的禁用原先的规则,或者添加新的规则。默认预置 css
同 tailwindcss
类似,详细用法如下:
// default 默认,这代表会添加给所有的 view / text 元素, 受到 cssPreflightRange 配置项影响 :
cssPreflight: {
'box-sizing': 'border-box',
'border-width': '0',
'border-style': 'solid',
'border-color': 'currentColor'
}
// result
// box-sizing: border-box;
// border-width: 0;
// border-style: solid;
// border-color: currentColor
// case 禁用所有
cssPreflight: false
// result
// none
// case 禁用单个属性
cssPreflight: {
'box-sizing': false
}
// border-width: 0;
// border-style: solid;
// border-color: currentColor
// case 更改和添加单个属性
cssPreflight: {
'box-sizing': 'content-box',
'background': 'black'
}
// result
// box-sizing: content-box;
// border-width: 0;
// border-style: solid;
// border-color: currentColor;
// background: black
Defined in
cssPreflightRange?
optional
cssPreflightRange:"all"
Issue
https://github.com/sonofmagic/weapp-tailwindcss/pull/62
Description
全局dom
选择器,只有在这个选择器作用范围内的dom
会被注入 cssPreflight
的变量和默认样式。只对所有的 view
,text
和伪元素生效,想要对所有的元素生效,可切换为 'all'
,此时需要自行处理和客户端默认样式的冲突
Defined in
cssSelectorReplacement?
optional
cssSelectorReplacement:object
root?
optional
root:string
|false
|string
[]
Default
'page'
Description
把css
中的全局选择器 :root
替换为指定值,默认替换为 'page'
,设置为 false
时不进行替换
universal?
optional
universal:string
|false
|string
[]
Issue
https://github.com/sonofmagic/weapp-tailwindcss/issues/81
Default
['view','text']
Description
把css
中的全局选择器 *
替换为指定值,默认替换为 'view','text'
,设置为 false
时不进行替换,此时小程序会由于不认识*
选择器而报错
Description
用于处理 css 选择器的替换
Defined in
customAttributes?
optional
customAttributes:ICustomAttributes
Description
这是一个重要的配置!
它可以自定义wxml
标签上的attr
转化属性。默认转化所有的class
和hover-class
,这个Map
的 key
为匹配标签,value
为属性字符串或者匹配正则数组。
如果你想要增加,对于所有标签都生效的转化的属性,你可以添加 *
: (string | Regexp)[]
这样的键值对。(*
是一个特殊值,代表所有标签)
更复杂的情况,可以传一个 Map<string | Regex, (string | Regex)[]>
实例。
假如你要把 className
通过组件的prop
传递给子组件,又或者想要自定义转化的标签属性时,需要用到此配置,案例详见:issue#129,issue#134
Example
const customAttributes = {
// 匹配所有带 Class / class 相关的标签,比如某个组件上的 `a-class`, `testClass` , `custom-class` 里面的值
'*': [ /[A-Za-z]?[A-Za-z-]*[Cc]lass/ ],
// 额外匹配转化 `van-image` 标签上属性为 `custom-class` 的值
'van-image': ['custom-class'],
// 转化所有 `ice-button` 标签上属性为 `testClass` 的值
'ice-button': ['testClass']
}
当然你可以根据自己的需求,定义单个或者多个正则/字符串。
甚至有可能你编写正则表达式,它们匹配的范围,直接包括了插件里自带默认的 class
/hover-class
,那么这种 情况下,你完全可以取代插件的默认模板转化器,开启 disabledDefaultTemplateHandler 配置项,禁用默认的模版匹配转化器。
Defined in
customReplaceDictionary?
optional
customReplaceDictionary:Record
<string
,string
>
Description
自定义转化class名称字典,这个配置项用来自定义转化class
名称字典,你可以使用这个选项来简化生成的class
插件中默认使用'simple'
模式:
'simple'
模式: 把小程序中不允许的字符串,转义为相等长度的代替字符串,这种情况不追求转化目标字符串的一比一绝对等价,即无法从生成结果,反推原先的class
当然,你也可以自定义,传一个 Record<string, string>
类型,只需保证转化后 css 中的 class
选择器,不会和自己定义的 class
产生 冲突即可,示例见dic.ts
Default
SimpleMappingChars2String
Defined in
disabled?
optional
disabled:boolean
Description
是否禁用此插件,一般用于构建到多平台时使用,比如小程序时不传,非小程序环境(h5,app)传入一个 true
Defined in
injectAdditionalCssVarScope?
optional
injectAdditionalCssVarScope:boolean
Version
^2.6.0
Description
是否注入额外的 tailwindcss css var scope
区域,这个选项用于这样的场景
比如 taro vue3
使用 NutUI, 需要使用 @tarojs/plugin-html
,而这个插件会启用 postcss-html-transform
从而移除 所有带 *
选择器
这会导致 tailwindcss css var scope
区域被移除导致一些样式,比如渐变等等功能失效
这种场景下,启用这个选项会再次重新注入整个 tailwindcss css var scope
Default
false
Defined in
jsAstTool?
optional
jsAstTool:"babel"
|"ast-grep"
Version
^3.1.0
Description
对解析 js 使用的 ast 工具,默认情况使用 babel
,可以通过安装 @ast-grep/napi
,同时启用 ast-grep
配置项,来启用 ast-grep
来处理 js
,速度会是 babel
的 2
倍左右
Defined in
rem2rpx?
optional
rem2rpx:boolean
|UserDefinedOptions
Version
^3.0.0
Description
rem 转 rpx 配置,默认为 undefined
不开启,可传入 true
启用默认配置项,也可传入自定义配置项,配置项列表见 postcss-rem-to-responsive-pixel
Defined in
1.文件匹配
cssMatcher()?
optional
cssMatcher: (name
) =>boolean
Parameters
• name: string
Returns
boolean