背景
在 React 項目中使用 CSS 時，如果不使用 CSS in JS 的方案，一般會直接在 JS 文件中導入一個 CSS 文件，比如 import './index.css'，但這樣 CSS 會在全局作用域內都有效，所以我們會使用 CSS Modules 來解決作用域的問題，使用方法如下：
import styles from './index.css';
const App = () => (
<div className={styles.App}>App</div>
);
其原理就是將 CSS 文件中的每個 className 按照一定的規(guī)則映射為另一個唯一的字符串，以保證 className 在全局作用域內不會重復和沖突。配置方法也很簡單，只需要在 webpack 的 css-loader 中添加一個 modules 配置項即可，具體請參考 css-loader 的文檔。
有時候我們需要使某個 CSS 文件全局有效，雖然 CSS Modules 也提供了全局有效的方案，但不如直接 import './foo.css' 來的爽快。在 Create React App 中提供了一種解決方案，以 .module.css 為后綴的文件會啟用 CSS Modules，以 .css 為后綴的文件不啟用，很多腳手架或工具也都采用了這種方案。
緣由
用后綴名區(qū)分的方案一直沒覺得有什么不妥，只是文件名有點長，不夠優(yōu)雅。直到前幾天看到 Umi 發(fā)布了 3.0 版本，出于好奇隨便翻了翻文檔，發(fā)現(xiàn)了一個特別有意思的功能：
Umi 會自動識別 CSS Modules 的使用，你把他當做 CSS Modules 用時才是 CSS Modules。
比如：
// CSS Modules import styles from './foo.css'; // 非 CSS Modules import './foo.css';
這個功能很巧妙啊，符合直覺又簡單易用。又是出于好奇，看了一下 Umi 的源碼，探究一下這是怎么實現(xiàn)的。
實現(xiàn)
通過翻看 Umi 的源碼發(fā)現(xiàn)，實現(xiàn)這個功能并不復雜，很簡單巧妙。
我們可以看到是否使用 CSS Modules 時，兩種導入方式不一樣，所以我們可以通過 Babel 來將兩者做一個區(qū)分。
Babel 的運行流程主要分三個階段：
- 解析，將源碼轉成 AST（抽象語法樹）
- 轉換，對 AST 的節(jié)點進行增加、刪除或修改
- 生成，將 AST 轉回源碼
Babel 插件工作在第二個階段，根據(jù)需求訪問不同類型的 AST 節(jié)點，并對其進行增刪改。所以我們可以編寫一個插件來識別兩種導入方式，并添加標識以便 webpack 中進行區(qū)分。
具體如何編寫一個 Babel 插件不在本文的討論范圍內，你可以查看文末的參考鏈接進行了解和學習。
我們先打開 AST explorer 對比兩種語句的 AST 的區(qū)別，兩者的 AST 如下：
// import './index.css';
{
"type": "Program",
"start": 0,
"end": 21,
"body": [
{
"type": "ImportDeclaration",
"start": 0,
"end": 21,
"specifiers": [],
"source": {
"type": "Literal",
"start": 7,
"end": 20,
"value": "./index.css",
"raw": "'./index.css'"
}
}
],
"sourceType": "module"
}
// import styles from './index.css';
{
"type": "Program",
"start": 0,
"end": 33,
"body": [
{
"type": "ImportDeclaration",
"start": 0,
"end": 33,
"specifiers": [
{
"type": "ImportDefaultSpecifier",
"start": 7,
"end": 13,
"local": {
"type": "Identifier",
"start": 7,
"end": 13,
"name": "styles"
}
}
],
"source": {
"type": "Literal",
"start": 19,
"end": 32,
"value": "./index.css",
"raw": "'./index.css'"
}
}
],
"sourceType": "module"
}
很明顯兩者的 specifiers 字段是有區(qū)別的，那就可以通過這個字段和文件后綴名（畢竟不能處理非 CSS 文件）來識別，并對需要啟用 CSS Modules 的 CSS 文件加一個 query 參數(shù)，不能直接修改文件名，不然后面 webpack 就找不到文件了，Babel 插件代碼如下：
const { extname } = require('path');
const CSS_FILE_EXTENSIONS = ['.css', '.scss', '.sass', '.less'];
module.exports = () => {
return {
visitor: {
ImportDeclaration(path) {
const { specifiers, source } = path.node;
const { value } = source;
if (
specifiers.length > 0
&& CSS_FILE_EXTENSIONS.includes(extname(value))
) {
source.value = `${value}?css_modules`;
}
},
},
};
};
我們通過這個插件訪問 AST 中類型為 ImportDeclaration 的節(jié)點，判斷該節(jié)點的 specifiers 不為空且文件后綴名為樣式文件時，在文件名后面添加一個 ?css_modules query 參數(shù)。該參數(shù)用于后面在 webpack 中區(qū)分是否啟用 CSS Modules。
在 Babel 配置文件中配置上該插件，然后開始配置 webpack 的 loader。我們在 webpack 配置的 modules.rules.oneOf 中添加了兩條 CSS 相關的規(guī)則，兩條規(guī)則的區(qū)別在于前者啟用了 CSS Modules，并且規(guī)則里多了 resourceQuery 配置項，當匹配到第一條規(guī)則后就不會再向下匹配剩余的規(guī)則了。需要啟用 CSS Modules 的 CSS 文件會匹配到第一條規(guī)則，不啟用的會匹配到第二條。
因為 test 是用于匹配文件路徑的，并不能匹配到路徑 ? 后的參數(shù)，所以需要使用 resourceQuery 來匹配 query 參數(shù)。注意 resourceQuery 配置的值要和 Babel 插件中添加的參數(shù)保持一致。
簡略的配置如下：
// webpack.config.js
module.exports = {
modules: {
rules: {
oneOf: [
{
test: /\.css$/,
resourceQuery: /css_modules/,
loader: 'css-loader',
options: {
modules: true,
},
},
{
test: /\.css$/,
loader: 'css-loader',
},
],
},
},
};
Less 和 Sass 等的配置同理，多加一個相關的 loader 即可。
這樣就實現(xiàn)了自動識別 CSS Modules 的功能，實現(xiàn)難度不大，但很巧妙很實用。
如果想在你的項目中使用這個 Babel 插件，可以直接安裝 Umi 已經(jīng)發(fā)布到 npm 的 @umijs/babel-plugin-auto-css-modules，它可以通過 flag 配置項自定義 query 參數(shù)。
參考
- Umi 中 Babel 插件的源碼
- 如何創(chuàng)建 Babel 插件
- AST explorer
- css-loader 中配置 CSS Modules
- CSS Modules 文檔
- webpack loader 配置
- Create React App 中的 CSS Modules
- Umi 3 的介紹
