Merge pull request #17346 from burhanuday/feat/style-field-resolution

feat: resolve style fields in package json

lib/config/defaults.js

@@ -298,7 +298,10 @@ const applyWebpackOptionsDefaults = options => {
 			cache,
 			context: /** @type {Context} */ (options.context),
 			targetProperties,
-			mode: /** @type {Mode} */ (options.mode)
+			mode: /** @type {Mode} */ (options.mode),
+			css:
+				/** @type {NonNullable<ExperimentsNormalized["css"]>} */
+				(options.experiments.css)
 		}),
 		options.resolve
 	);
@@ -1399,9 +1402,16 @@ const applyOptimizationDefaults = (
  * @param {string} options.context build context
  * @param {TargetProperties | false} options.targetProperties target properties
  * @param {Mode} options.mode mode
+ * @param {CssExperimentOptions|false} options.css is css enabled
  * @returns {ResolveOptions} resolve options
  */
-const getResolveDefaults = ({ cache, context, targetProperties, mode }) => {
+const getResolveDefaults = ({
+	cache,
+	context,
+	targetProperties,
+	mode,
+	css
+}) => {
 	/** @type {string[]} */
 	const conditions = ["webpack"];
 
@@ -1469,6 +1479,24 @@ const getResolveDefaults = ({ cache, context, targetProperties, mode }) => {
 		}
 	};
 
+	if (css) {
+		const styleConditions = [];
+
+		styleConditions.push("webpack");
+		styleConditions.push(mode === "development" ? "development" : "production");
+		styleConditions.push("style");
+
+		resolveOptions.byDependency["css-import"] = {
+			// We avoid using any main files because we have to be consistent with CSS `@import`
+			// and CSS `@import` does not handle `main` files in directories,
+			// you should always specify the full URL for styles
+			mainFiles: [],
+			mainFields: ["style", "..."],
+			conditionNames: styleConditions,
+			extensions: [".css"]
+		};
+	}
+
 	return resolveOptions;
 };
 

test/Defaults.unittest.js

@@ -2208,8 +2208,6 @@ describe("snapshots", () => {
 			+     },
 			+     "futureDefaults": true,
 			@@ ... @@
-			+       },
-			+       Object {
 			+         "rules": Array [
 			+           Object {
 			+             "descriptionData": Object {
@@ -2262,7 +2260,8 @@ describe("snapshots", () => {
 			+           "fullySpecified": true,
 			+         },
 			+         "type": "css/module",
-			@@ ... @@
+			+       },
+			+       Object {
 			+         "mimetype": "text/css",
 			+         "resolve": Object {
 			+           "fullySpecified": true,
@@ -2288,6 +2287,22 @@ describe("snapshots", () => {
 			+     "hashDigestLength": 16,
 			+     "hashFunction": "xxhash64",
 			@@ ... @@
+			+       "css-import": Object {
+			+         "conditionNames": Array [
+			+           "webpack",
+			+           "production",
+			+           "style",
+			+         ],
+			+         "extensions": Array [
+			+           ".css",
+			+         ],
+			+         "mainFields": Array [
+			+           "style",
+			+           "...",
+			+         ],
+			+         "mainFiles": Array [],
+			+       },
+			@@ ... @@
 			-       "<cwd>/node_modules/",
 			+       /^(.+?[\\\\/]node_modules[\\\\/])/,
 		`)

test/configCases/css/css-import/directory/index.css

@@ -0,0 +1,3 @@
+.directory-css {
+    color: red;
+}

test/configCases/css/css-import/errors.js

@@ -0,0 +1,6 @@
+module.exports = [
+	/Can't resolve 'non-exported-css'/,
+	/Can't resolve '\.\/directory'/,
+	/Can't resolve 'condition-names-subpath\/non-valid\.css'/,
+	/Can't resolve '\.\/no-extension-in-request'/
+];

test/configCases/css/css-import/extensions-imported.mycss

@@ -0,0 +1,3 @@
+.custom-extension{
+    color: green;
+}

test/configCases/css/css-import/file.less

@@ -0,0 +1,5 @@
+@link-color: #428bca;
+
+.link {
+	color: @link-color;
+}

test/configCases/css/css-import/prefer-relative.css

@@ -0,0 +1,3 @@
+.relative {
+	color: red;
+}

test/configCases/css/css-import/some-file.js

@@ -0,0 +1,3 @@
+function doNotImportCss() {
+  return 'doNotImportCss';
+}

test/configCases/css/css-import/string-loader.js

@@ -1,4 +1,3 @@
 module.exports = function loader(content) {
 	return content + `.using-loader { color: red; }`;
 };
-

test/configCases/css/css-import/style-import.css

@@ -0,0 +1,28 @@
+@import "style-library";
+@import "main-field";
+@import "package-with-exports";
+@import "./extensions-imported.mycss";
+@import "./with-less-import.css";
+@import "prefer-relative.css";
+@import "condition-names-style";
+@import "condition-names-style-mode";
+@import "condition-names-subpath/custom.css";
+@import "condition-names-subpath-extra/custom.css";
+@import "condition-names-style-less";
+@import "condition-names-custom-name";
+@import "style-and-main-library";
+@import "condition-names-webpack";
+@import "condition-names-style-nested";
+
+/* Technically, this is not entirely true, but we allow it because the final file can be processed by the loader and return the CSS code */
+
+@import "js-import";
+@import "condition-names-webpack-js";
+@import url("some-file.js");
+
+/* Failed */
+
+@import "non-exported-css";
+@import "./directory";
+@import "condition-names-subpath/non-valid.css";
+@import "./no-extension-in-request";

test/configCases/css/css-import/style.css

@@ -1,3 +1,4 @@
+@import "./style-import.css";
 @import "print.css?foo=1";
 @import url("print.css?foo=2");
 @import "print.css?foo=3" layer(default);
@@ -124,6 +125,7 @@ le3.css?=bar4');
 @import url('   ./string-loader.js?esModule=false!./test.css   ') screen and (orientation: landscape);
 @import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);
 @import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20blue%3B%0D%0A%7D) screen and (orientation:landscape);
+@import url("data:text/css;charset=utf-8;base64,YSB7DQogIGNvbG9yOiByZWQ7DQp9");
 
 @import url("./style5.css?foo=1") supports();
 @import url("./style5.css?foo=2") supports(    );