深入浅出 CSS Modules

CSS Modules 是什么？

官方文档的介绍如下：

A CSS Modules is a CSS file in which all class names and animation names are scoped locally by default.

所有的类名和动画名称默认都有各自的作用域的 CSS 文件。CSS Modules 并不是 CSS 官方的标准，也不是浏览器的特性，而是使用一些构建工具，比如 webpack，对 CSS 类名和选择器限定作用域的一种方式（类似命名空间）

本文来介绍一下 CSS Modules 的简单使用，以及 CSS Modules 的实现原理（CSS-loader 中的实现）

CSS Modules 的简单使用

项目搭建以及配置

新建一个项目，本文的 Demo

npx create-react-app learn-css-modules-react
cd learn-css-modules-react
# 显示 webpack 的配置
yarn eject

看到 config/webpack.config.js，默认情况下，React 脚手架搭建出来的项目，只有 .module.css 支持模块化，如果是自己搭建的话，可以支持 .css 文件的后缀等

// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
  test: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
    modules: {
      getLocalIdent: getCSSModuleLocalIdent,
    },
  }),
}

其中 getStyleLoaders 函数，可以看到 css-loader 的配置

const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    // ...
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    // ...
  ];
  // ...
  return loaders;
};

我们就基于这个环境当做示例进行演示

局部作用域

之前的样式

首先，我们将 App.css 修改成 App.module.css，然后导入 css，并设置（这里有个小知识点，实际上 CSS Modules 推荐的命名是驼峰式，主要是这样的话，使用对象 style.className 就可以访问。如果是如下，就需要 styles['***-***']）

import styles from './App.module.css';

// ...
<header className={styles['App-header']}></header>

就会根据特定的规则生成相应的类名

这个命名规则是可以通过 CSS-loader 进行配置，类似如下的配置：

module: {
  loaders: [
    // ...
    {
      test: /\.css$/,
      loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
    },
  ]
}

全局作用域

默认情况下，我们发现，在 css modules 中定义的类名必须得通过类似设置变量的方式给 HTML 设置（如上示例所示）

那么我能像其他的 CSS 文件一样直接使用类名（也就是普通的设置方法），而不是编译后的哈希字符串么？

使用 :global 的语法，就可以声明一个全局的规则

:global(.App-link) {
  color: #61dafb;
}

这样就可以在 HTML 中直接跟使用普通的 CSS 一样了

但这里感觉就是 CSS Modules 给开发者留的一个后门，我们这样的 CSS，还是直接放在普通 .css 文件中比较好，我理解这就是 React 为什么对待 .css 和 .module.css 不同后缀进行不同的处理的原因

Class 的组合

在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为 "组合"（"composition"）

比如，我们定义一个 font-red，然后在 .App-header 中使用 composes: font-red; 继承

.font-red {
  color: red;
}

.App-header {
  composes: font-red;
  /* ... */
}

输入其他的模块

不仅仅可以同一个文件中的，还可以继承其他文件中的 CSS 规则

定义一个 another.module.css

.font-blue {
  color: blue;
}

在 App.module.css 中

.App-header {
  /* ... */
  composes: font-blue from './another.module.css';
  /* ... */
}

使用变量

我们还可以使用变量，定义一个 colors.module.css

@value blue: #0c77f8;

在 App.module.css 中

@value colors: "./colors.module.css";
@value blue from colors;

.App-header {
  /* ... */
  color: blue;
}

使用小结

总体而言，CSS Modules 的使用偏简单，上手非常的快，接下来我们看看 Webpack 中 CSS-loader 是怎么实现 CSS Modules 的

CSS Modules 的实现原理

从 CSS Loader 开始讲起

看 lib/processCss.js 中

var pipeline = postcss([
    ...
    modulesValues,
    modulesScope({
    // 根据规则生成特定的名字
        generateScopedName: function(exportName) {
            return getLocalIdent(options.loaderContext, localIdentName, exportName, {
                regExp: localIdentRegExp,
                hashPrefix: query.hashPrefix || "",
                context: context
            });
        }
    }),
    parserPlugin(parserOptions)
]);

主要看 modulesValues 和 modulesScope 方法，实际上这两个方法又是来自其他两个包

var modulesScope = require("postcss-modules-scope");
var modulesValues = require("postcss-modules-values");

postcss-modules-scope

这个包主要是实现了 CSS Modules 的样式隔离（Scope Local）以及继承（Extend）

它的代码比较简单，基本一个文件完成，源码可以看这里，这里会用到 postcss 处理 AST 相关，我们大致了解它的思想即可

默认的命名规则

实际上，假如你没有设置任何的规则时候会根据如下进行命名

// 生成 Scoped name 的方法（没有传入的时候的默认规则）
processor.generateScopedName = function (exportedName, path) {
  var sanitisedPath = path.replace(/\.[^\.\/\\]+$/, '').replace(/[\W_]+/g, '_').replace(/^_|_$/g, '');
  return '_' + sanitisedPath + '__' + exportedName;
};

这种写法在很多的源码中我们都可以看到，以后写代码的时候也可以采用

var processor = _postcss2['default'].plugin('postcss-modules-scope', function (options) {
  // ...
  return function (css) {
    // 如果有传入，则采用传入的命名规则
       // 否则，采用默认定义的 processor.generateScopedName
    var generateScopedName = options && options.generateScopedName || processor.generateScopedName;
  }
  // ...
})

前置知识—— postcss 遍历样式的方法

css ast 主要有 3 种父类型

AtRule: @xxx 的这种类型，如 @screen，因为下面会提到变量的使用 @value
Comment: 注释
Rule: 普通的 css 规则

还有几个个比较重要的子类型：

decl：指的是每条具体的 css 规则
rule：作用于某个选择器上的 css 规则集合

不同的类型进行不同的遍历

walk: 遍历所有节点信息，无论是 atRule、rule、comment 的父类型，还是 rule、 decl 的子类型
walkAtRules：遍历所有的 atRule
walkComments：遍历注释
walkDecls
walkRules

作用域样式的实现

// Find any :local classes
// 找到所有的含有 :local 的 classes
css.walkRules(function (rule) {
  var selector = _cssSelectorTokenizer2['default'].parse(rule.selector);
  // 获取 selector
  var newSelector = traverseNode(selector);
  rule.selector = _cssSelectorTokenizer2['default'].stringify(newSelector);
  // 遍历每一条规则，假如匹配到则将类名等转换成作用域名称
  rule.walkDecls(function (decl) {
    var tokens = decl.value.split(/(,|'[^']*'|"[^"]*")/);
    tokens = tokens.map(function (token, idx) {
      if (idx === 0 || tokens[idx - 1] === ',') {
        var localMatch = /^(\s*):local\s*\((.+?)\)/.exec(token);
        if (localMatch) {
          // 获取作用域名称
          return localMatch[1] + exportScopedName(localMatch[2]) + token.substr(localMatch[0].length);
        } else {
          return token;
        }
      } else {
        return token;
      }
    });
    decl.value = tokens.join('');
  });
});

css.walkRules 遍历所有节点信息，无论是 atRule、rule、comment 的父类型，还是 rule、 decl 的子类型，获取 selector

// 递归遍历节点，找到目标节点
function traverseNode(node) {
  switch (node.type) {
    case 'nested-pseudo-class':
      if (node.name === 'local') {
        if (node.nodes.length !== 1) {
          throw new Error('Unexpected comma (",") in :local block');
        }
        return localizeNode(node.nodes[0]);
      }
      /* falls through */
    case 'selectors':
    case 'selector':
      var newNode = Object.create(node);
      newNode.nodes = node.nodes.map(traverseNode);
      return newNode;
  }
  return node;
}

walkDecls 遍历每一条规则，生成相应的 Scoped Name

// 生成一个 Scoped Name
function exportScopedName(name) {
  var scopedName = generateScopedName(name, css.source.input.from, css.source.input.css);
  exports[name] = exports[name] || [];
  if (exports[name].indexOf(scopedName) < 0) {
    exports[name].push(scopedName);
  }
  return scopedName;
}

关于实现 composes 的组合语法，有点类似，不再赘述

postcss-modules-values

这个库的主要作用是在模块文件之间传递任意值，主要是为了实现在 CSS Modules 中能够使用变量

它的实现也是只有一个文件，具体查看这里

查看所有的 @value 语句，并将它们视为局部变量或导入的，最后保存到 definitions 对象中

/* Look at all the @value statements and treat them as locals or as imports */
// 查看所有的 @value 语句，并将它们视为局部变量还是导入的
css.walkAtRules('value', atRule => {
  // 类似如下的写法
  // @value primary, secondary from colors 
  if (matchImports.exec(atRule.params)) {
    addImport(atRule)
  } else {
    // 处理定义在文件中的 类似如下
    // @value primary: #BF4040;
        // @value secondary: #1F4F7F;
    if (atRule.params.indexOf('@value') !== -1) {
      result.warn('Invalid value definition: ' + atRule.params)
    }

    addDefinition(atRule)
  }
})

假如是导入的，调用的 addImport 方法

const addImport = atRule => {
  // 如果有 import 的语法
  let matches = matchImports.exec(atRule.params)
  if (matches) {
    let [/*match*/, aliases, path] = matches
    // We can use constants for path names
    if (definitions[path]) path = definitions[path]
    let imports = aliases.replace(/^\(\s*([\s\S]+)\s*\)$/, '$1').split(/\s*,\s*/).map(alias => {
      let tokens = matchImport.exec(alias)
      if (tokens) {
        let [/*match*/, theirName, myName = theirName] = tokens
        let importedName = createImportedName(myName)
        definitions[myName] = importedName
        return { theirName, importedName }
      } else {
        throw new Error(`@import statement "${alias}" is invalid!`)
      }
    })
    // 最后会根据这个生成 import 的语法
    importAliases.push({ path, imports })
    atRule.remove()
  }
}

否则则直接 addDefinition，两个的思想大致我理解都是找到响应的变量，然后替换

// 添加定义
const addDefinition = atRule => {
  let matches
  while (matches = matchValueDefinition.exec(atRule.params)) {
    let [/*match*/, key, value] = matches
    // Add to the definitions, knowing that values can refer to each other
    definitions[key] = replaceAll(definitions, value)
    atRule.remove()
  }
}

总结

CSS Modules 并不是 CSS 官方的标准，也不是浏览器的特性，而是使用一些构建工具，比如 webpack，对 CSS 类名和选择器限定作用域的一种方式（类似命名空间）。通过 CSS Modules，我们可以实现 CSS 的局部作用域，Class 的组合等功能。最后我们知道 CSS Loader 实际上是通过两个库进行实现的。其中， postcss-modules-scope —— 实现CSS Modules 的样式隔离（Scope Local）以及继承（Extend）和 postcss-modules-values ——在模块文件之间传递任意值

深入浅出 CSS Modules

CSS Modules 是什么？

CSS Modules 的简单使用

项目搭建以及配置

局部作用域

全局作用域

Class 的组合

输入其他的模块

使用变量

使用小结

CSS Modules 的实现原理

从 CSS Loader 开始讲起

postcss-modules-scope

默认的命名规则

前置知识—— postcss 遍历样式的方法

作用域样式的实现

postcss-modules-values

总结

参考

Gopal

引用和评论

我的 2022 年终总结：技术、生活还有裁员

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高