CSS Modules (The Native Ones)

The CSS module natively supported by the browser is actually called "CSS module script". This is different from popular open source projects, which implement scope styles by creating unique class name identifiers in HTML and CSS.

The native CSS module is part of the ES module (much like the JSON module we introduced recently):

 // Regular ES module import React from "https://cdn.skypack.dev/[email protected]";

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

// New CSS module import styleSheet from "./styles.css" assert { type: "css" };

The first time I saw this was from Justin's tweet:

Currently, this is just a feature of Chrome. Related links:

• Intent implementation: CSS module V1
• Chrome platform status: CSS module script
• GitHub/WhatWG: Introducing CSS module scripts

At the time of writing, it only works in Chrome Canary with experimental web platform features enabled. If you want to ask, "When can I use it in production projects and users of these projects use a variety of browsers?" I would say: I don't know. It may take years. Maybe never. But it's still interesting. Perhaps support will develop rapidly. Maybe you'll work on an Electron project or other project you can rely on specific browser features.

This looks like an extension to constructable stylesheets, and they are also limited to Chrome browsers, so browsers that "lagged" in this regard must start from there.

I tried Justin's idea here:

If I record what I get from the CSS module import, it is a CSSStyleSheet:

If you want to actually use styles...it's up to you. Justin's idea basically applies styles as a single line of code, because it happens to lit-html support CSSStyleSheet (these documents don't explicitly state this, but I think they'll explain it at some point). For native web components, the difference is not much: you import it, get the CSSStyleSheet, and then apply it to the web components, for example:

 this.shadowRoot.adoptedStyleSheets = [myCSSStyleSheet];

I think the meaning of all this is:

• We need a way to import stylesheets in JavaScript, and this is basically the first really clear way I know,
• Now, if we want, we can programmatic access to the CSS to operate,
• It looks particularly good for web components usage, but it is universal. Once you have a stylesheet, you can use it as you like.

The above is the detailed content of CSS Modules (The Native Ones). For more information, please follow other related articles on the PHP Chinese website!