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"]
]
`

$3

在源代码引入组件库样式时，比如混合云主题样式，通过在后面加上?fusionPrefix=.my-prefix 实现：

`js
import '@alicloudfe/components/dist/hybridcloud-no-var.css?fusionPrefix=.custom-prefix-';
`

它的作用是对这个 css 文件中的 CSS 选择器进行转换，把 .next-btn 的类名修改成 .my-prefix-btn。从而限制 fusion 组件样式作用范围，避免多份 fusion 同时存在时出现样式冲突。

$3

上述用法会自动对 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 冲突。

$3

即使按照上面的方式替换了 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;
}
`

$3

如果想要更改主题变量，我们可以通过在 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`

$3