Facebook? ?? 4 ? ?? ??? ??????. ??? ?? ? ??????, ?? ???? ?? ??? ? ???? ??????. ?? ???? ?? ??? React, GraphQL, Relay ? Stylex?? ??? CSS-in-JS ?????? ?? ????? ???? ?? ??? ???? ? ?? ??? ??????.

? ??? ?????? Facebook?? ????? ????? Style9 ?? ??? ??? ? ??? ??? ??? ??????.

?? CIJ ???? ??? ??? ??????

CIJ (CSS-in-JS) ?????? ?? ???? ?? ?????? ??? ??? ???? ?? ? ????. Christopher Chedeau? ????? Style9? SCOPE SELECTORS, DEAD CODE ??, ?? ?? ?? ?? ? CSS? JavaScript ?? ??? ???? ??? ??? ?? ?? CIJ ???? ??? ??? ??? ????.

??? ??? 9? ???? ??? ? ?? ??? ????.

?? ???

???? JavaScript? ????? ????? ?? ?? CSS ??? ?????. ?? ?? JavaScript ??? ???? ???? ?? ??? ?????. ?? ??? ?? ?? ??? ????, ?? ?? ???? ??????? ??? ???? ?????. ?? ?? ?? ???? ???? ??? ??? ???? ???? ????.

??? ??? ?? ????? ???? ?? ?? ??? ? ????. ???? ??? ?? ????? ??? ???? ??? ??? ??? ????? ????. ? ????? ???? ??? ???? ???? ????. ?? ?????. Babel? ?? ??? ??, ?? ?? ? ?? ??? ?????.

?? ??

Style9? ???? ???? ?? ? ?? ??? ?? ??? ?? ??? ???? ? ? ????. ?? ??, ??? ?? ???? ???? : 0? ???? ?? ?? ? CSS?? ? ?? ?????. ??? ??? CSS ??? ??? ? ?? ?? ??? ?? ? ?? ?? ?? ????? ????. ???? ??? ?? ? ????? CSS ??? ?? ?? ? ????. ?? ??, Facebook? ??? ????? 413kb? GZIP ?? CSS? ??????. ?? ? ?? ???? CSS ??? 74KB???. ????? ?? ??? ???? ??? ?????.

?? ???? ?? ?? ?? ? ? ????. ?? ? ??? ??? ?? ??? ???, ????? ?????? ????? ?????. ??? ?????. ??? CSS? ??? ??? ?????. ??? ?? ??? ????. ??? ?? ? ?? ? ??? ??? ?????? ???? ??? ??? ??? ???? ? ????.

?? Style9?? ??? ?? ?? ??? ??? ????. ?? ?????? ?? ???, ???? ?? ??? ??, JavaScript ??? ???? ??, ??? ??, ?? ??? ? ? ??? ??? ??? ?? ?? ??? ??? ????.

???? ??

?? ??? ?? ??????.

 <code>npm install style9</code>

Style9?? Babel ????? ???? ??, ? ?, Gatsby ? Next.js ? ????? ????. ?? ??? ?? ??? ???? ????. ???? Webpack ????? ?????.

 <code>const Style9Plugin = require('style9/webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ // 這將轉(zhuǎn)換style9調(diào)用{ test: /\.(tsx|ts|js|mjs|jsx)$/, use: Style9Plugin.loader }, // 這是正常的Webpack CSS提取的一部分{ test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins: [ // 這將對最終的CSS文件中的聲明進(jìn)行排序并刪除重復(fù)的聲明new Style9Plugin(), // 這是正常的Webpack CSS提取的一部分new MiniCssExtractPlugin() ] };</code>

???? ??????

??? ????? ??? ?? ?????? ?? ?????. ??? ?? Style9? ?????. ??? ??? ???? ??? :

 <code>import style9 from 'style9'; const styles = style9.create({ button: { padding: 0, color: 'rebeccapurple' }, padding: { padding: 12 }, icon: { width: 24, height: 24 } });</code>

?? ??? ?? ???? ???? ??? Flex : 1 ? Background : Blue? ?? ??? ?? ??? ???? ??? ???? ????. ??, ??, ???? ?? ?? ?? ? ??? ??? ???? ?? ??? ?????. TypeScript? ???? ?? ???? ?? ??? ??? ? ??? ?????.

?? ???

??? ??? ????? ?? Style9.Create? ?? ? ??? ?? ? ? ????. ?? ??? ????? ??? ?? ?????.

 <code>const className = styles('button');</code>

??? ??? ?? ?????. ???? ???? ?? ??? ???? Object.Assign? ????? ??? ???? ?????. ??? 12px? ??? ??? ???? ???? Rebeccapurple???.

 <code>const className = styles('button', 'padding');</code>

?? ?? ? ??? ???? ??? ???? ?? ? ? ????.

 <code>// 邏輯與styles('button', hasPadding && 'padding'); // 三元運算符styles('button', isGreen ? 'green' : 'red'); // 布爾對象styles({ button: true, green: isGreen, padding: hasPadding });</code>

??? ?? ??? ??? ?? ???? ?? ??? ??? ?????. ? ??? ? ?? ?? 'C1R9F2E5'Haspadding? ?? ??? ?????. 'cu2kwdz': ''. ??? ??? ?? ????.

?? ???

?? ???? ??? ??? ????? Style9? ???? ??? ??? ?? ? ? ????.

 <code>const styles = style9.create({ blue: { color: 'blue; } }); const otherStyles = style9.create({ red: { color: 'red; } }); // 將為紅色const className = style9(styles.blue, otherStyles.red);</code>

?? ??? ????? ??? ???? ?????. ???? ?? ??? ??? ???? ?? ?? ? ? ????. ??, ?? ?? ???? ???? ???? ?????. ??? ??? ?? CSS ??? ?????.

??

CSS-in-JS? ??? ?????. ?, ??? ???? ???? ? ?? ??? ????. ?? ??? ?? ?????? ??? ? ??? ??? ??? ?? ? ? ????. ??? ????? ???? ???? ?? JavaScript ???? ???? ??? ??? ??? ??? ?????? ??? ?? ? ????.

Style9? ???? ??? ???? ???? ???????. ??? ???? ???? ????? ???? ??????.

??? ?

??? ??? DSS ??? ?? Giuseppe Gurgone ??? Nicolas Gallagher? Linaria, Christopher Chedeau, Sebastian McKenzie, Frank Yan, Ashley Watkins, Naman Goel ? ??? ?? ???? ???? Linaria, Christopher Chedeau, Sebastian McKenzie, Sebastian McKenzie, Sebastian McKenzie, Sebastian McKenzie, Sebastian McKenzie, Sebastian McKenzie? ?? ??? ?? Callstack? ?? ??? ?? ?? ??? ?? ?? ??? ??????. ??? ?? ?? ?? ???.

??

• Johanholmerin/Style9
• React, GraphQL ? Relay? ??? Facebook.com? ?????? - 2019 ? 4 ? 30 ?
• React and Relay |? ??? Facebook? ?????? ??? ? - 2019 ? 10 ? 30 ?
• New Facebook.com? ?? ?? ?? - 2020 ? 5 ? 8 ?
• johanholmerin/style9-components.macro : ??? 9 ? ??? ?? ?? API-??

? ??? ??? 9 : ?? ?? CSS-in-JS? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!