w3c standardising "css modules" differently

[graingert]

https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md

[graingert]

WICG/webcomponents#759 (comment)

[justinfagnani]

I'm proposing only the most basic useful semantics there, which can either be completely ignored by existing userland systems, or ideally should be usable by them. If there are any real blockers to this goal, I'd really like to hear and work through them.

I wrote up how CSS Modules semantics could utilize native loading in that thread:

The example taken from https://github.com/css-modules/css-modules:

style.css:

.className {
  color: green;
}

app.js:

import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

can be transformed to:

style.css:

.a /* renamed from .className */ {
  color: green;
}

style.css.js:

import {style} from './style.js';
document. adoptedStyleSheets = [...document. adoptedStyleSheets, style];
const classes = {
  className: 'a',
};
export default classes;
export const className = classes.a;

app.js:

import styles from "./style.css.js";
// import { className } from "./style.css.js";

element.innerHTML = '<div class="' + styles.className + '">';

I'm sure a more realistic transform using multiple CSS files would be more involved, but the general idea should apply: Native CSS modules only add the ability to import a stylesheet, what's done with it before (build time) and after (run time) are up to tools and libraries. This should only be a benefit to developers and tools.

Also note that this proposal is designed to fit into a larger picture with Constructible Stylesheets, and the CSS References proposal to incrementally add more features common to the userland solutions.