未来可能实现的CSS模块（本地模块）介绍

它们实际上被称为 "CSS模块脚本"，是一种原生的浏览器功能，与流行的开源项目不同，后者基本上是通过在HTML和CSS中创建唯一的类名标识符来做范围性样式。

原生CSS模块是ES模块的一部分（很像我们最近介绍的JSON模块）。

// Regular ES Modules
import React from "https://cdn.skypack.dev/react@17.0.1";

// Newfangled JSON Modules
import configData from './config-data.json' assert {type: 'json'};

// Newfangled CSS Modules
import styleSheet from "./styles.css" assert { type: "css" };

我第一次从Justin的推特上看到这个：

JS和CSS模块，而且不需要构建!

在即将到来的CSS模块中，我们将很快拥有：

✅ JS模块
✅ 指定器
✅ CSS模块
✅ 组件
✅ 范围内的样式

都内置于平台中，不需要构建，可使用`python -m SimpleHTTPServer 8000` 😎

在我写这篇文章的时候，它只在Chrome Canary中开着实验性网络平台功能的情况下工作。如果你的问题是，我什么时候能在有各种用户使用任何浏览器的生产项目中使用这个？我想说。我不知道。可能要等几年。也许永远不会。但它仍然很有趣，可以看看。也许支持会快速发展。也许你会在一个Electron项目或其他项目上工作，你可以指望特定的浏览器功能。

这看起来像是Constructable Stylesheets的扩展，而Constructable Stylesheets也只在Chrome浏览器中使用，所以在这方面 "落后 "的浏览器将不得不从这里开始。

如果我记录下我从CSS模块导入得到的东西，它是一个CSSStyleSheet ：

如果你要真正使用这些样式......那是你的事。贾斯汀的想法基本上是将样式作为一个单行字来应用，因为恰好lit-html支持CSSStyleSheet（那些文档没有明确说明，但我想他们在某些时候会支持）。对于本地Web组件来说，这没有什么不同：你导入它，得到CSSStyleSheet ，然后把它应用到Web组件中：

this.shadowRoot.adoptedStyleSheets = [myCSSStyleSheet];

我认为这一切的重点是：

• 我们需要一种在JavaScript中导入样式表的方法，这基本上是我所知道的第一个真正明确的破解方法。
• 现在，如果我们想的话，我们可以在使用CSS之前对其进行编程访问，而且
• 它对Web组件的使用看起来特别好，但它是通用的。一旦你有了样式表，你想做什么都可以。