Interface: UserDefinedOptions
Properties
appType
• Optional
appType: AppType
Description
使用的框架类型(uni-app,taro...),用于找到主要的 css bundle
进 行转化,这个配置会影响默认方法 mainCssChunkMatcher
的行为,不传会去猜测 tailwindcss css var inject scope
的位置
Defined in
arbitraryValues
• Optional
arbitraryValues: IArbitraryValues
Description
针对 tailwindcss arbitrary values 的一些配置
Defined in
cssChildCombinatorReplaceValue
• Optional
cssChildCombinatorReplaceValue: string
| string
[]
Description
用于控制 tailwindcss 子组合器的生效标签范围, 这里我们用一个例子来说明这个配置是干啥用的.
我们布局的时候往往会使用 space-x-4
那么实际上会生成这样的css选择器:
.space-x-4>:not([hidden])~:not([hidden]){}
然而很不幸,这个选择器在小程序中是不支持的,写了会报错导致编译失败。 所以出于保守起见,我把它替换为了:
.space-x-4>view + view{}
这同时也是默认值, 而这个选项就允许你进行自定义子组合器的行为
你可以传入一个 字符串,或者字符串数组
- 传入字符串数组,比如
['view','text']
生成:
.space-y-4>view + view,text + text{}
- 传入一个字符串,此时行为变成了整个替换,比如
'view,text,button,input ~ view,text,button,input'
生成:
.space-y-4>view,text,button,input ~ view,text,button,input{}
Default
'view + view'
Defined in
cssMatcher
• Optional
cssMatcher: string
| string
[] | (name
: string
) => boolean
Description
匹配 wxss
等等样式文件的方法,支持 glob
by micromatch
Defined in
cssPreflight
• Optional
cssPreflight: CssPreflightOptions
Issue
https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/issues/7
Description
在所有 view节点添加的 css 预设,可根据情况自由的禁用原先的规则,或者添加新的规则。 详细用法如下:
// default 默认:
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: "view"
| "all"
Issue
https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/pull/62
Description
全局dom
选择器,只有在这个选择器作用范围内的dom
会被注入 cssPreflight
的变量和默认样式。默认为 'view'
即只对所有的 view
和伪元素生效,想要对所有的元素生效,可切换为 'all'
,此时需要自行处理和客户端默认样式的冲突
Defined in
cssSelectorReplacement
• Optional
cssSelectorReplacement: Object
Type declaration
Name | Type | Description |
---|---|---|
root? | string | false | Default ts 'page' |
universal? | string | false | Default ts 'view' |
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']
}
当然你可以根据自己的需求,定义单个或者多个正则/字符串。
甚至有可能你编写正则表达式,它们匹配的范围,直接包括了插件里自带默认的 class
/hover-class
,那么这种情况下,你完全可以取代插件的默认模板转化器,开启 disabledDefaultTemplateHandler 配置项,禁用默认的模版匹配转化器。
Defined in
customReplaceDictionary
• Optional
customReplaceDictionary: Record
<string
, string
> | "simple"
| "complex"
Description
自定义转化class名称字典,这个配置项用来自定义转化class
名称字典,你可以使用这个选项来简化生成的class
插件中内置了'simple'
模式和'complex'
模式:
'simple'
模式: 把小程序中不允许的字符串,转义为相等长度的代替字符串,这种情况不追求转化目标字符串的一比一绝对等价,即无法从生成结果,反推原先的class
'complex'
模式: 把小程序中不允许的字符串,转义为更长的代替字符串,这种情况转化前后的字符串是等价的,可以从结果进行反推,缺点就是会生成更长的class
导致wxml
和wxss
这类的体积增大
当然,你也可以自定义,传一个 Record<string, string>
类型,只需保证转化后 css 中的 class
选择器,不会和自己定义的 class
产生冲突即可,示例见dic.ts
Default
'simple'
Defined in
customRuleCallback
• Optional
customRuleCallback: CustomRuleCallback
Description
用于自定义处理 css 的回调函数,可根据 Postcss walk 方法自由定制处理方案的 callback 方法
Defined in
disabled
• Optional
disabled: boolean
Description
是否禁用此插件,一般用于构建到多平 台时使用
Defined in
disabledDefaultTemplateHandler
• Optional
disabledDefaultTemplateHandler: boolean
Version
^2.6.2
Description
开启此选项,将会禁用默认 wxml
模板替换器,此时模板的匹配和转化将完全被 customAttributes
接管,
此时你需要自己编写匹配之前默认 class
/hover-class
,以及新的标签属性的正则表达式regex
Default
false
Defined in
htmlMatcher
• Optional
htmlMatcher: string
| string
[] | (name
: string
) => boolean
Description
匹配 wxml
等等模板进行处理的方法,支持 glob
by micromatch
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