如何从Emotion CSS-in-JS库迁移到Stylify CSS
这篇指南是为了帮助你快速比较Emotion CSS-in-JS库和Stylify的实用优先CSS的特性和语法，并让你了解如何从Emotion迁移到Stylify。
简介
Emotion是一个为使用JavaScript编写CSS样式而设计的库。它提供了强大的和可预测的样式组合，此外还提供了良好的开发者体验，如源码图、标签和测试工具。同时支持字符串和对象样式。
Stylify CSS是一个库，它使用原生的类似于CSS的选择器color:blue, width:640px, margin:0_auto以及变量、组件、自定义选择器来根据你编写的内容动态生成优化的CSS。
选择器和CSS工具
在Emotion中，你可以使用CSS道具直接对元素进行样式设置，就像这样：
<div css={css`
color: blue;
font-weight: bold;
@media (min-width: 640px) {
color: red;
}
`}></div>
Stylify使用类似CSS的工具，可以直接在class属性中使用。默认情况下没有捷径，选择器不能包含空格，因为要进一步优化:
<div class="
color:blue
font-weight:bold
md:color:red
md&&landscape:font-size:32px
minw123px:font-size:123px
"></div>当一些选择器有相同的伪类甚至是媒体查询时，你可以像这样分组:
<div class="
hover:{color:blue;text-decoration:underline}
md:hover:{transform:scale(1.1);left:4px}
"></div>全局选择器
有时我们需要对应用程序的某些部分进行全局风格化。为了在Emotion中做到这一点，我们需要使用Global组件：
import { Global, css } from '@emotion/react'
render(
<Global styles={css`
.some-class {
color: hotpink !important;
}
`}/>
)Stylify提供了自定义选择器，您可以用它来对元素进行全局样式。这些选择器可以直接在类属性中定义，或在全局配置中定义，或在文件中使用内容选项。
使用class属性的例子:
<div class="[.button_.icon]{font-size:14px}">
<button class="
[.icon]{color:#fff;border-radius:12px}
[&+button]{margin-left:24px}
">
<i class="icon"></i>
</button>
<button></button>
<div>类属性中的语法模式看起来像这样:
[css selectors]{stylify selectors split by ;}在CSS和Stylify的选择器中，_（下划线）被用来代替空格，&字符总是指的是当前元素。
同样的代码，但在全局配置中会是这样的:
const compilerConfig = {
customSelectors: {
'.buttons-wrapper .button .icon': 'font-size:14px',
'.button': `
.icon { color:#fff border-radius:12px }
& + button { margin-left:24px }
`,
}
}当在全局配置中通过内容选项定义`customSelectors`时，该语法让你使用嵌套功能。&字符指的是像SCSS中的上层。
全局配置的用法:
<div class="buttons-wrapper">
<button class="button">
<i class="icon"></i>
</button>
<button></button>
<div>组件
在Emotion中，组件通常是这样定义的：
const Title = styled.h1`
color: blue
font-weight: bold
@media (max-width: 640px) {
color:red
}
`;
<Title>你好，世界！🎉</Title>Stylify默认没有提供任何预定义的CSS组件。但是，它提供了两种方法来定义它们，并且有一套复制和粘贴的无头组件，您可以在您的项目中使用。
组件可以在文件（使用内容选项）中配置，在使用它们的地方，或者在$projectConfig中全局配置。
以文件内的配置为例。stylify-components之间的内容期待没有周围括号的javascript对象:
<!--
stylify-components
title: 'color:blue font-weight:bold md:color:red'
/stylify-components
-->
<h1 class="title"></h1>全局编译器配置中的例子:
const compilerConfig = {
components: {
title: 'color:blue font-weight:bold md:color:red'
}
};使用方法:
<h1 class="title"></h1>当定义组件时，你也可以像在SCSS中那样使用嵌套语法。这在全局配置和内容选项中都适用。:
const compilerConfig = {
components: {
button: `
color:black font-weight:bold
&:hover { color:grey }
&--red {
color:red
&:hover { color: darkred }
}
`
}
};配置、定制和变量
在Emotion CSS中，你主要使用在Javascript中定义的变量，或者一些配置文件或CSS变量。
const color = 'blue';
const Title = styled.h1`
color: ${color},
font-size: var(--font-size)
`;在Stylify中，没有类似 "主题 "的东西，也没有$projectConfig中的扩展部分。只有变量。
变量在Stylify中可以通过两种方式定义。在全局配置中或在一个文件中，通过内容选项使用。
全局配置的例子:
const compilerConfig = {
variables: {
primary: '#000',
secondary: '#eee',
titleFontSize: '24px',
shadow: '0 2px 3px #000'
}
}变量也可以根据媒体查询来定义:
const compilerConfig = {
variables: {
dark: { blue: 'lightblue' },
md: { fontSize: 24px },
'minw640px': { fontSize: 32px },
// When screen is not found, it falls back to a random custom selector
'.dark': { blue: 'lightblue' },
':root[data-theme="dark"]': { blue: 'lightblue' }
}
}使用内容选项的例子:
<!--
stylify-variables
primary: '#000',
secondary: '#eee'
titleFontSize: '24px',
shadow: '0 2px 3px #000'
/stylify-variables
-->
<div class="color:$primary"></div>当你需要使用道具将颜色传递给组件时，可以使用本地的CSS变量:
<div
style={{ '--localTextColor': props.textColor }}
className="title color:$localTextColor"
">
</div>我们只需要告诉Stylify用CSS变量来代替变量的值，并告诉他localTextColor是外部变量。:
const compilerConfig = {
externalVariables: ['localTextColor']
}外部变量也可以只在使用它的文件中定义:
<!--
stylify-externalVariables
localTextColor
/stylify-externalVariables
-->
<div
style={{ '--localTextColor': props.textColor }}
className="title color:$localTextColor"
">
</div>
