UNPKG

build-plugin-fusion-css

Version:

用于修改fusion css-prefix & css-variable作用域

135 lines (100 loc) 4.65 kB
# build-plugin-fusion-css build-scripts 插件,用来修改 fusion-based 组件库的 css 的选择器类名前缀& css-variable 作用域。比如:`.next-btn` => `.my-prefix-btn``:root` = `.my-custom-scope`。 这样做的目的是,**控制 fusion 样式的作用范围,让一个页面中可以同时存在多份不同版本的 fusion 样式或者不同主题,同时不会出现样式冲突。** ## 如何使用`build.json` 文件中引入 `build-plugin-fusion-css````json ... "plugins": [ ..., ["build-plugin-fusion-css"] ] ``` ### 自定义样式类名前缀 在源代码引入组件库样式时,比如[混合云主题样式](https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/hybridcloud.css),通过在后面加上`?fusionPrefix=.my-prefix` 实现: ```js import '@alicloudfe/components/dist/hybridcloud-no-var.css?fusionPrefix=.custom-prefix-'; ``` 它的作用是对这个 css 文件中的 CSS 选择器进行转换,把 `.next-btn` 的类名修改成 `.my-prefix-btn`。从而限制 fusion 组件样式作用范围,避免多份 fusion 同时存在时出现样式冲突。 ### 自动 fusion icon 字体隔离 上述用法会自动对 fusion icon 的字体做隔离,避免多份 fusion 出现 icon 冲突。 问题背景:过去,如果一个页面中同时存在多份不同版本的 fusion,并且这些 fusion 对有不同的 icon 定义。那么其中一份 fusion 的 icon 字体会被另一份覆盖,造成前者的 icon 错乱甚至不显示。问题根源是所有 icon 使用了相同的`font-family`名字`NextIcon`。 如果按照上述方式使用本 loader,它会自动将输入中的这种样式: ```css @font-face { font-family: NextIcon; src: url("//at.alicdn.com/t/font_1899989_e0hzok75tkg.eot"); src: url("//at.alicdn.com/t/font_1899989_e0hzok75tkg.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1899989_e0hzok75tkg.woff2") format("woff2"), url("//at.alicdn.com/t/font_1899989_e0hzok75tkg.woff") format("woff"), url("//at.alicdn.com/t/font_1899989_e0hzok75tkg.ttf") format("truetype"), url("//at.alicdn.com/t/font_1899989_e0hzok75tkg.svg#NextIcon") format("svg"); } .next-icon { display: inline-block; font-family: NextIcon; } ``` 转换成这样: ```css @font-face { font-family: MyPrefixIcon; src: url("//at.alicdn.com/t/font_1899989_e0hzok75tkg.eot"); src: url("//at.alicdn.com/t/font_1899989_e0hzok75tkg.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1899989_e0hzok75tkg.woff2") format("woff2"), url("//at.alicdn.com/t/font_1899989_e0hzok75tkg.woff") format("woff"), url("//at.alicdn.com/t/font_1899989_e0hzok75tkg.ttf") format("truetype"), url("//at.alicdn.com/t/font_1899989_e0hzok75tkg.svg#NextIcon") format("svg"); } .my-prefix-icon { display: inline-block; font-family: MyPrefixIcon; } ``` 因此,每份 fusion 使用的是各自指定的`font-family`名字,避免 icon 冲突。 ### 限制 fusion reset 样式的影响范围 即使按照上面的方式替换了 fusion prefix,在 fusion 样式中的 reset 样式依然是全局性的,比如 ```css body { margin: 0; } h1 { font-size: 2em; margin: 0.67em 0; } ``` > 很多时候,全局 reset 样式不会造成什么问题,因此你可以忽略这一小节。 如果你希望限制这种 fusion reset 样式的影响范围,你可以在 import 的 query 中增加`styleContainer`,比如: ```js import "path/to/fusion.css?fusionPrefix=.my-prefix-&styleContainer=my-style-container"; ``` 会把上面例子的样式转化成 ```css my-style-container { margin: 0; } my-style-container h1 { font-size: 2em; margin: 0.67em 0; } ``` ### 自定义 css-variale 作用域 如果想要更改[主题变量](https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/hybridcloud-var.css),我们可以通过在 `build-plugin-fusion-css` 添加配置项来实现: ```json ... "plugins": [ ..., ["build-plugin-fusion-css", { "oldSelector": ".theme-hybridcloud", "newSelector": ".custom-scope" }] ] ``` 然后在源代码引入主题变量的时候后面加上 `?customVarScope` 即可: ```js import '@alicloudfe/components/dist/hybridcloud-var.css?customVarScope'; ``` 它的作用是将这个 css 文件中的所有 `oldSelector` 选择器转换成 `newSelector`。从而限制该主题的 css-variable 作用范围,避免多份主题同时存在时出现样式冲突。 其中 `oldSelector` 默认值为 `:root` ### 示例 [Teamix 业务组件样式隔离示例](http://gitlab.alibaba-inc.com/teamix-components/teamix-example-custom-css)