CSS Modules V1是Microsoft提出的一项新建议，它是ES Script模块系统提出了一项扩展。在CSS模块的帮助下，Web开发人员可以将CSS加载到组件定义中（例如import styles from “styles.css”;），并且与其他模块类型无缝对接。

为什么我们需要CSS模块？

ES6规范引入了JavaScript模块系统，为Web开发人员带来了诸多好处；引入模块后JS代码更趋于组件化，开发人员也更容易管理依赖项。但组件定义中缺少对CSS的支持，之前一直没有对应的解决方案。现有的实践总有以下一种或几种缺陷：

副作用，比如将<style>元素附加到文档中的操作就会有副作用。如果在文档的顶级作用域内完成此操作，那么它会破坏shadow根样式作用域。如果这个操作在shadow根内部完成，则组件的每个独立实例必须在其shadow根实例中包含它自己的<style>元素。
内联CSS文本作为JavaScript中的字符串。这种操作没有作充分的性能优化（它同时由JS和CSS解析器处理），并且会为开发人员带来糟糕的体验。
动态fetch()ing CSS通常不是静态可分析的，并且需要开发人员对复杂应用程序的依赖项做非常细致的管理工作。

CSS模块扩展了ES模块基础结构，允许从CSS文件导入CSSStyleSheet对象，然后就可以通过adoptStyleSheets数组将其添加到文档或shadowRoot中了。引入CSS模块后，上述问题也都能得到解决。

这个功能也是开发社区呼吁的——可以参阅这里的讨论，其中有许多开发人员对其表示了兴趣。JS bundler中的CSS加载器大受欢迎，也是这项功能潜在需求的佐证之一。

导入CSS模块

可以继续使用导入其他ES模块所用的import语句导入CSS模块：

import styles from "styles.css";
document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];

模块的默认导出是从CSS文件生成的CSSStyleSheet。CSS模块没有命名导出。

一些实现细节

程序会检查HTTP响应头中的MIME类型以确定如何解析指定模块。MIME类型的text/css将被视为CSS模块。导入的每个CSS模块都有自己的模块记录，符合ES6规范的定义；这些模块还会参与模块映射，并进入模块依赖关系图。

CSS模块的V1版本将使用Synthetic模块构建。具体来说，给定一个text/css文件，要创建一个新的CSS模块遵循以下步骤：

通过constructor创建一个CSSStyleSheet()。
在新样式表上调用CSSStyleSheet.replaceSync，并将文件内容作为参数（关于为什么这里用replaceSync而不是replace，后文会具体说明）。此调用抛出的错误会导致模块创建失败并出现解析错误。
通过CreateSyntheticModule创建一个新的Synthetic模块，其中“default”作为exportNames的唯一条目，并使用evaluateSteps调用SetMutableBinding(“default”, sheet)，其中sheet是在步骤1中创建的CSSStyleSheet。
使用在步骤3中创建的Synthetic模块创建新的CSS模块脚本作为其记录。

为什么使用CSSStyleSheet.replaceSync而不是CSSStyleSheet.replace？

CSS模块的V1版本功能不全，暂时不支持@import。这里的原因在于，不清楚CSS模块中的@import是否应该被视为模块图中它自己的CSS模块，也不知道CSS模块是否应该是leaf module。我们正在考虑三种可行方法：

CSS模块是leaf module，且不允许@import引用（遵循可构造样式表中的replaceSync示例。这就是CSS模块V1版本采用的实现方法，这也是为什么上文描述的CSS模块创建的第2步使用replaceSync而不是replace；如果给定输入包含@import规则，则抛出replaceSync。
CSS模块是leaf module；在为CSS模块创建模块记录之前，加载其样式表的完整@import树，如果无法解析，则将其视为模块的解析错误。
CSS模块不是leaf modul。将CSS模块的@import后的样式表作为模块图中请求的子模块处理，子模块带有自己的模块记录。它们将被实例化并作为不同的模块评估。

从长远来看，1号选项会引入不必要的限制。

选项2和3之间的主要区别之一是，3意味着如果CSS文件对于给定领域多次@import，则每个导入都会共享单独的一份CSSStyleSheet（因为对于给定的模块specifier，一个模块仅会被实例化/评估一次）。如果开发人员错误地多次包含一个样式表或者由于共享的CSS依赖，就有可能带来内存/性能损失。另一方面这也是与现有行为背道而驰，现在同一.css文件的多个@import各自带有自己的CSSStyleSheet。

@justinfagnani在这里指出，在选项3中共享@imported样式表后，开发人员用工具编辑CSS或主题系统时，可以动态更改共享样式表，并在样式表的所有不同导入器上应用更改。

但正如@tabatkins在这里提到的那样，选项3与当前的@import行为有很大的不同，它无法动态再现：CSS对象模型不能用来使多个样式表依赖于单个子样式表。.parentStyleSheet和.ownerRule引用这里也存在问题，因为这些引用当前仅引用单个表，并且如果样式表具有多个导入器就会糊涂了。

这里的讨论更加深入一些。鉴于目前大家尚未达成共识，我们现在的V1版本会使用选项1来回避问题。这是向前兼容的，因为在CSS模块中只要使用@import就会阻止模块加载。我们不准备等待选项2和3争出结果后才推进工作，因为早早发布版本后我们就可以获得早期开发人员对该功能的反馈，更好地了解它在实践中的使用方式，从而作出更加合适的决策。此外，CSS模块的V1版本完成后，HTML模块的开发工作也能正常推进了。

示例：使用CSS模块的自定义元素定义

以下是关于定义自定义元素的示例，其中CSS是作为JavaScript字符串内联置入的：

<!doctype html>
<html>
    <head>
        <script type="module">
            class HTML5Element extends HTMLElement {
                constructor() {
                    super();
                    let shadowRoot = this.attachShadow({ mode: "open" });

                    let style = document.createElement("style");
                    style.innerText = `
                        .outerDiv {
                            border:0.1em solid blue;
                            display:inline-block;
                            padding: 0.4em;
                        }

                        .devText {
                            font-weight: bold;
                            font-size: 1.2em;
                            text-align: center;
                            margin-top: 0.3em;
                        }

                        .mainImage {
                            height:254px;
                        }
                        `;

                    let outerDiv = document.createElement("div");
                    outerDiv.className = "outerDiv";
                    let mainImage = document.createElement("img");
                    mainImage.className = "mainImage";
                    mainImage.src = "https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";
                    let devText = document.createElement("div");
                    devText.className = "devText";
                    devText.innerText = "CSS Modules Are Great!";

                    this.shadowRoot.appendChild(outerDiv);
                    outerDiv.appendChild(mainImage);
                    outerDiv.appendChild(devText);
                    this.shadowRoot.appendChild(style);
                }
            }

            window.customElements.define("my-html5-element", HTML5Element);
        </script>
    </head>
    <body>
        <my-html5-element></my-html5-element>
    </body>
</html>

以下示例中，上面的自定义元素定义合并到一个CSS模块，以避免CSS-as-a-JS-string（或插入<style>标记等）：

<!doctype html>
<html>
    <head>
        <script type="module">
            import styles from './html5Element.css';

            class HTML5Element extends HTMLElement {
                constructor() {
                    super();
                    let shadowRoot = this.attachShadow({ mode: "closed" });

                    this.shadowRoot.adoptedStyleSheets = [styles];

                    let outerDiv = document.createElement("div");
                    outerDiv.className = "outerDiv";
                    let mainImage = document.createElement("img");
                    mainImage.className = "mainImage";
                    mainImage.src = "https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";
                    let devText = document.createElement("div");
                    devText.className = "devText";
                    devText.innerText = "CSS Modules Are Great!";

                    shadowRoot.appendChild(outerDiv);
                    outerDiv.appendChild(mainImage);
                    outerDiv.appendChild(devText);
                }
            }

      window.customElements.define("my-html5-element", HTML5Element);
       </script>
    </head>
    <body>
        <my-html5-element></my-html5-element>
    </body>
</html>

英文原文：CSS Modules V1 Explainer

创作场景

微软提出 CSS Modules V1 ：通过 import 语句将 CSS 模块导入到组件中