feat(css): implement @layer and @import rules by noreiller · Pull Request #15892 · webpack/webpack

noreiller · 2022-06-01T14:03:46Z

The changes add the support of @layer css at-rule and implements the rules when using @import CSS at-rule.

It is part of CSS experiment.

@layer
The following code would be handled by webpack, especially in CSS modules.

@layer base, special;

body {
  background: green;
  font-family: "Open Sans";
}

@layer special {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: black;
    border: 5px solid black;
    font-size: 1.3em;
    padding: .5em;
  }
}

@import rules
This code:

/* style.css */
@import url( "style2.css" ) layer( base ) supports( font-weight: bold ) screen and (min-width: 1024px);

/* style2.css */
body {
  font-weight: bold;
  text-decoration: underline;
}

would be transformed to:

@layer base {
  @supports(font-weight: bold) {
    @media screen and (min-width: 1024px) {
      body {
        font-weight: bold;
        text-decoration: underline;
      }
    }
  }
}

Tests
Some tests have been added for CSS modules.
The ones dedicated to @import rules have also been added but, unfortunately, JSDOM (which relies on CSSOM) does not handle well at-rules so they are disabled until the support is updated.

webpack-bot · 2022-06-01T14:03:52Z

For maintainers only:

This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
This needs to be backported to webpack 4 (issue will be created when merged)

alexander-akait · 2022-06-01T19:38:07Z

lib/dependencies/CssImportDependency.js

+
+		if (
+			// Do nothing more for external modules
+			/^(\/\/|https?:\/\/|std:)/.test(dep.request) ||


We can handle externals styles

External styles are already considered as externals assets and so, no need to transform them. It's done there: https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsApply.js#L119-L163.

I mean https://webpack.js.org/configuration/experiments/#experimentsbuildhttp, we can bundle http/https CSS

Oh yes, I forgot that. Thanks, I will check and update the PR.

@alexander-akait The code is updated with buildHttp experiment and also with assets replacements.

alexander-akait

Looks good to me

sokra · 2022-07-01T10:29:40Z

lib/dependencies/CssImportDecoratorDependency.js

+		const replacedSource = `${source.source()}`;
+
+		// We use the replaced source and reset the replacements as a patch for to replace all the code
+		// @ts-expect-error
+		source._replacements = [];
+
+		source.replace(
+			0,
+			source.size(),
+			`
+${decorations
+	.map(([before, after], idx) => {
+		return Array(idx)
+			.fill()
+			.reduce(tpl => Template.indent(tpl), before);
+	})
+	.join("\n")}
+${Array(decorations.length)
+	.fill()
+	.reduce(tpl => Template.indent(tpl), replacedSource)}
+${decorations
+	.map(([before, after], idx) => {
+		return Array(decorations.length - 1 - idx)
+			.fill()
+			.reduce(tpl => Template.indent(tpl), after);
+	})
+	.join("\n")}`
+		);
+	}


replacing the whole source shouldn't be done here. It breaks all SourceMapping.
Instead insert the decorations before and after the existing code with source.insert

I did it aft first try but I add issues with source mapping. I think it's related to the issue you mentioned in another comment.

sokra · 2022-07-01T10:30:22Z

lib/dependencies/CssImportDecoratorDependency.js

+	get type() {
+		return "css @import decorator";
+	}
+}


It needs serialize and deserialize methods to take care of serialization of this.decorations

sokra · 2022-07-01T10:31:40Z

lib/dependencies/CssImportDependency.js

+		);
+		const decoratorDep = new CssImportDecoratorDependency(decorations);
+
+		dependencyModule.addDependency(decoratorDep);


You can't add dependencies during code generation. This need to be added during parsing.

And you should not add dependencies to other modules. So this need to be handled differently.

There is also the problem that a single module might be imported multiple times with different layer, supports and/or media.

So what need to be done here is that CssImportDependency need to have layer supports and media properties.
It then need to resolve to different CssModules depending on that. CssModule also need to have layer supports and media properties. These need to be inherited to imported module.

CssImportDependency need to override getResourceIdentifier() to add layer supports and media, because they influence resolving and dependencies are grouped based on that identifier.

CssImportDependency can't use the normalModuleFactory (in CssModulesPlugin). It need to have a custom factory that takes care of copying these properties from the dependency to the module.

I would also omit the decorator dependency at all and take care of adding the decorations in CssModulePlugin.renderChunk. Here you can also use the PrefixSource to apply indent in a SourceMap compatible way.

Hello @sokra, I rewrote the implementation. I hope it fits with what you said.

sokra · 2022-07-01T10:32:59Z

lib/dependencies/CssImportDecoratorDependency.js

@@ -0,0 +1,112 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Ivan Kopeykin @vankop


You can put your name here

sokra · 2022-07-01T10:40:48Z

lib/css/walkCssTokens.js

+		pos++;
+		let cc = input.charCodeAt(pos);
+		while (_isWhiteSpace(cc)) {
+			pos++;
+			if (pos === input.length) return pos;
+			cc = input.charCodeAt(pos);
+		}
+		const contentStart = pos;
+		let contentEnd;
+		for (;;) {
+			while (_isWhiteSpace(cc)) {
+				pos++;
+				if (pos === input.length) return pos;
+				cc = input.charCodeAt(pos);
+			}
+			if (cc === CC_RIGHT_PARENTHESIS) {
+				if (level > 0) {
+					level -= 1;
+					pos++;
+				} else {
+					contentEnd = pos;
+					let previousPos = pos - 1;
+					let previousCc = input.charCodeAt(previousPos);
+					while (_isWhiteSpace(previousCc)) {
+						contentEnd -= 1;
+						previousPos -= 1;
+						previousCc = input.charCodeAt(previousPos);
+					}
+					pos++;
+					if (callbacks.supports !== undefined) {
+						return callbacks.supports(
+							input,
+							start,
+							pos,
+							contentStart,
+							contentEnd
+						);
+					}
+					return pos;
+				}
+			} else if (cc === CC_LEFT_PARENTHESIS) {
+				level += 1;
+				pos++;
+			} else {
+				pos++;
+			}
+			if (pos === input.length) return pos;
+			cc = input.charCodeAt(pos);
+		}


supports and layer share a lot of code. Could we put that into a shared function?

Yes, I will refactor that.

noreiller · 2022-07-08T13:51:11Z

@sokra Thanks for the review, I will change the proposal according to what you asked but it won't be until a few weeks since I have some holidays.
In the mean time, if you can check other PRs related to Webpack CSS (#15812 #15818), I would be really thankful.

noreiller · 2023-02-06T08:48:16Z

Hello @sokra @alexander-akait, will you continue to implement the webpack experimental CSS feature or accept new PRs?

alexander-akait · 2023-04-05T16:48:51Z

@noreiller Let's do rebase, thank you

webpack-bot · 2023-04-05T17:21:49Z

@noreiller Thanks for your update.

I labeled the Pull Request so reviewers will review it again.

@alexander-akait Please review the new changes.

alexander-akait · 2023-04-05T18:04:39Z

Thank you I will review soon

alexander-akait · 2023-04-14T13:43:22Z

After merge - #16978 (because it fixed some bugs in tokenizer), I will focus on it, I have idea how we can simplify it

noreiller · 2023-04-14T13:48:44Z

After merge - #16978 (because it fixed some bugs in tokenizer), I will focus on it, I have idea how we can simplify it

It's gonna be another complicated rebase... 😮
I'll wait for your merge and then take care of it.

alexander-akait · 2023-04-14T13:52:21Z

@noreiller don't worry, you have

Maintainers are allowed to edit this pull request.

So I will do rebase

noreiller · 2023-04-14T13:53:59Z

@noreiller don't worry, you have

Maintainers are allowed to edit this pull request.

So I will do rebase

Ok, thanks 🙏

webpack-bot added the PR: unreviewed label Jun 1, 2022

noreiller force-pushed the css-at-import-rules-and-at-layer branch from 1aa90ae to 9bdbf80 Compare June 1, 2022 14:04

noreiller mentioned this pull request Jun 1, 2022

fix(css parser): handle nested atRule #15812

Merged

alexander-akait reviewed Jun 1, 2022

View reviewed changes

alexander-akait approved these changes Jun 2, 2022

View reviewed changes

webpack-bot added PR: reviewed-approved and removed PR: unreviewed labels Jun 2, 2022

noreiller mentioned this pull request Jun 9, 2022

feat(css) add experimental webpack CSS support vercel/next.js#37578

Closed

11 tasks

sokra requested changes Jul 1, 2022

View reviewed changes

webpack-bot added the PR: reviewed-changes-requested label Jul 1, 2022

webpack-bot added PR: review-outdated and removed PR: reviewed-approved PR: reviewed-changes-requested labels Aug 5, 2022

noreiller force-pushed the css-at-import-rules-and-at-layer branch 3 times, most recently from d0f5e5f to 6ae916d Compare August 5, 2022 15:37

alexander-akait approved these changes Feb 15, 2023

View reviewed changes

webpack-bot added PR: reviewed-approved and removed PR: review-outdated labels Feb 15, 2023

webpack-bot added the PR: conflict label Apr 5, 2023

noreiller force-pushed the css-at-import-rules-and-at-layer branch from 6ae916d to fa8bd27 Compare April 5, 2023 17:21

webpack-bot added PR: review-outdated and removed PR: conflict PR: reviewed-approved labels Apr 5, 2023

feat(css): implement @layer and @import rules

8af5b74

noreiller force-pushed the css-at-import-rules-and-at-layer branch from fa8bd27 to 8af5b74 Compare April 14, 2023 07:12

alexander-akait mentioned this pull request Apr 25, 2023

feat: CSS import and allow to hook module creation #17057

Merged

TheLarkInn closed this in #17057 Apr 26, 2023

webpack-bot mentioned this pull request Apr 26, 2023

Document webpack change: feat: CSS import and allow to hook module creation webpack/webpack.js.org#6778

Closed

Uh oh!

Conversation

noreiller commented Jun 1, 2022

Uh oh!

webpack-bot commented Jun 1, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexander-akait left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

noreiller commented Jul 8, 2022

Uh oh!

noreiller commented Feb 6, 2023

Uh oh!

alexander-akait commented Apr 5, 2023

Uh oh!

webpack-bot commented Apr 5, 2023

Uh oh!

alexander-akait commented Apr 5, 2023

Uh oh!

alexander-akait commented Apr 14, 2023

Uh oh!

noreiller commented Apr 14, 2023

Uh oh!

alexander-akait commented Apr 14, 2023

Uh oh!

noreiller commented Apr 14, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants