What are the Native CSS Modules that are dissed by you?

Hi everyone, this is Kasong.

Yesterday morning, I was eating breakfast, singing, and happily fishing, when I saw a very big tweet:

Native CSS Modules : To be honest, I think the 06125c049cfb76 standard is hasty, which once again shows the arrogance of the people who participated in the standard-setting process

I often see Youda and other big guys communicating technology. hasty and arrogant are rarely seen.

Today, let’s take a look at what kind of standard it is, and diss couldn’t help but 06125c049cfbc6.

This CSS Modules is not that Modules

Presumably the front-end students are CSS Modules , here is a brief introduction.

CSS Modules is an open source specification to solve the following problems of CSS

• Naming conflict
• No modularity
• Unknown dependencies (style coverage issues)

The specification needs to be implemented by packaging tools.

We use an example to briefly understand his implementation details:

After CSS file style.css as the style object, use style.title by way of title class :

import style from './style.css';

export default () => {
  return (
    <p className={style.title}>
      I am KaSong.
    </p>
  );
};

Corresponding to style.css :

.title {
  color: red;
}

The packaging tool will compile style.title string with hash :

<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

At the same time style.css will also compile:

._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

In this way, a unique class is produced, which solves the modularization problem CSS

And today's protagonist is not this CSS Modules .

Native CSS Modules

In June of this year, Google engineer Justin Fagnani announced the latest development CSS Modules

This CSS Modules is not the open source solution mentioned above, but a standard under the ES Modules

The actual name of the standard is CSS Module Scripts , but the community is customary to call it CSS Modules .

In order to distinguish it from the open source solution, it is called Native CSS Modules hereinafter.

The standard used to JS import CSS , the syntax is similar ES Modules :

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

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

The imported CSS can be applied to the document object or shadow DOM .

The imported styleSheet data structure is as follows:

With the Constructable Stylesheets CSS can be solved:

• Multiplexing between shadow DOM
• FOUC problem ( Flash of Unstyled Content , that is, the flickering situation of DOM style from scratch because the style has not been loaded)

It looks like nice , so where is the point of diss

So many questions?

First, we can find through comparison:

• The standard naming conflicts with existing open source solutions
• The standard syntax is the same as the existing open source program syntax

First, if a beginner searches for CSS Modules in the future, the result may confuse him. Who am I searching for?

The second point is that all major packaging tools currently CSS Modules program.

If you need to implement Native CSS Modules polyfill future, it will cause duplication of work at the slightest level, and will encounter confusion caused by the change of the two schemes (think about how many problems the CJS transition ES Modules

In addition, the program may be unfriendly SSR

In addition, because Native CSS Modules needs to JS loaded asynchronously after its own 06125c049d0359 module is loaded, a lot of fragmented CSS file requests may be generated.

With so many potential problems, Justin Fagnani still actively advancing the implementation of the standard. Perhaps this is why arrogant and .

You can discuss 1 and discuss 2 see the full discussion of the parties

Summarize

The new standard requires a breakthrough on the original basis, and is limited by the status quo and cannot be drastically changed.

This game of breakthroughs and trade-offs is played every moment in the open source world.

During the development, have you encountered any features that you particularly like or want to complain about? Welcome to discuss in the comment section~