root
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

feat: support css esModule generator options

This commit is contained in:
ahabhgk 2024-04-26 14:53:52 +08:00
parent c586c7b1e0
commit 7ff0a7a13e
24 changed files with 278 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
declarations/WebpackOptions.d.ts vendored
View File

@ -755,6 +755,10 @@ export type AssetParserDataUrlFunction = (
source: string | Buffer,
context: {filename: string; module: import("../lib/Module")}
) => boolean;
/**
* Configure the generated JS modules that use the ES modules syntax.
*/
export type CssGeneratorEsModule = boolean;
/**
* Specifies the convention of exported names.
*/
@ -2862,6 +2866,10 @@ export interface AssetResourceGeneratorOptions {
* Generator options for css/auto modules.
*/
export interface CssAutoGeneratorOptions {
/**
* Configure the generated JS modules that use the ES modules syntax.
*/
esModule?: CssGeneratorEsModule;
/**
* Specifies the convention of exported names.
*/
@ -2888,6 +2896,10 @@ export interface CssAutoParserOptions {
* Generator options for css modules.
*/
export interface CssGeneratorOptions {
/**
* Configure the generated JS modules that use the ES modules syntax.
*/
esModule?: CssGeneratorEsModule;
/**
* Avoid generating and loading a stylesheet and only embed exports from css into output javascript files.
*/
@ -2897,6 +2909,10 @@ export interface CssGeneratorOptions {
* Generator options for css/global modules.
*/
export interface CssGlobalGeneratorOptions {
/**
* Configure the generated JS modules that use the ES modules syntax.
*/
esModule?: CssGeneratorEsModule;
/**
* Specifies the convention of exported names.
*/
@ -2923,6 +2939,10 @@ export interface CssGlobalParserOptions {
* Generator options for css/module modules.
*/
export interface CssModuleGeneratorOptions {
/**
* Configure the generated JS modules that use the ES modules syntax.
*/
esModule?: CssGeneratorEsModule;
/**
* Specifies the convention of exported names.
*/

8
lib/DependencyTemplate.js
View File

@ -41,7 +41,13 @@
/**
* @typedef {Object} CssDependencyTemplateContextExtras
* @property {Map<string, string>} cssExports the css exports
* @property {CssExportsData} cssExportsData the css exports data
*/
/**
* @typedef {Object} CssExportsData
* @property {boolean} esModule whether export __esModule
* @property {Map<string, string>} exports the css exports
*/
/** @typedef {DependencyTemplateContext & CssDependencyTemplateContextExtras} CssDependencyTemplateContext */

1
lib/config/defaults.js
View File

@ -553,6 +553,7 @@ const applyCssGeneratorOptionsDefaults = (
"exportsOnly",
!targetProperties || !targetProperties.document
);
D(generatorOptions, "esModule", true);
};
/**

56
lib/css/CssExportsGenerator.js
View File

@ -16,6 +16,8 @@ const { cssExportConvention } = require("../util/conventions");
/** @typedef {import("../../declarations/WebpackOptions").CssGeneratorExportsConvention} CssGeneratorExportsConvention */
/** @typedef {import("../../declarations/WebpackOptions").CssGeneratorLocalIdentName} CssGeneratorLocalIdentName */
/** @typedef {import("../Dependency")} Dependency */
/** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */
/** @typedef {import("../DependencyTemplate").CssExportsData} CssExportsData */
/** @typedef {import("../Generator").GenerateContext} GenerateContext */
/** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
/** @typedef {import("../Module").ConcatenationBailoutReasonContext} ConcatenationBailoutReasonContext */
@ -33,17 +35,36 @@ class CssExportsGenerator extends Generator {
/**
* @param {CssGeneratorExportsConvention | undefined} convention the convention of the exports name
* @param {CssGeneratorLocalIdentName | undefined} localIdentName css export local ident name
* @param {boolean} esModule whether to use ES modules syntax
*/
constructor(convention, localIdentName) {
constructor(convention, localIdentName, esModule) {
super();
/** @type {CssGeneratorExportsConvention | undefined} */
this.convention = convention;
/** @type {CssGeneratorLocalIdentName | undefined} */
this.localIdentName = localIdentName;
/** @type {boolean} */
this.esModule = esModule;
}
// TODO add getConcatenationBailoutReason to allow concatenation
// but how to make it have a module id
/**
* @param {NormalModule} module module for which the bailout reason should be determined
* @param {ConcatenationBailoutReasonContext} context context
* @returns {string | undefined} reason why this module can't be concatenated, undefined when it can be concatenated
*/
getConcatenationBailoutReason(module, context) {
if (!this.esModule) {
return "Module is not an ECMAScript module";
}
// TODO webpack 6: remove /\[moduleid\]/.test
if (
/\[id\]/.test(this.localIdentName) ||
/\[moduleid\]/.test(this.localIdentName)
) {
return "The localIdentName includes moduleId ([id] or [moduleid])";
}
return undefined;
}
/**
* @param {NormalModule} module module for which the code should be generated
@ -54,14 +75,18 @@ class CssExportsGenerator extends Generator {
const source = new ReplaceSource(new RawSource(""));
/** @type {InitFragment<TODO>[]} */
const initFragments = [];
/** @type {Map<string, string>} */
const cssExports = new Map();
/** @type {CssExportsData} */
const cssExportsData = {
esModule: this.esModule,
exports: new Map()
};
generateContext.runtimeRequirements.add(RuntimeGlobals.module);
let chunkInitFragments;
const runtimeRequirements = new Set();
/** @type {DependencyTemplateContext} */
const templateContext = {
runtimeTemplate: generateContext.runtimeTemplate,
dependencyTemplates: generateContext.dependencyTemplates,
@ -73,7 +98,7 @@ class CssExportsGenerator extends Generator {
concatenationScope: generateContext.concatenationScope,
codeGenerationResults: generateContext.codeGenerationResults,
initFragments,
cssExports,
cssExportsData,
get chunkInitFragments() {
if (!chunkInitFragments) {
const data = generateContext.getData();
@ -109,7 +134,7 @@ class CssExportsGenerator extends Generator {
if (generateContext.concatenationScope) {
const source = new ConcatSource();
const usedIdentifiers = new Set();
for (const [name, v] of cssExports) {
for (const [name, v] of cssExportsData.exports) {
for (let k of cssExportConvention(name, this.convention)) {
let identifier = Template.toIdentifier(k);
let i = 0;
@ -127,26 +152,27 @@ class CssExportsGenerator extends Generator {
}
return source;
} else {
const otherUsed =
const needNsObj =
this.esModule &&
generateContext.moduleGraph
.getExportsInfo(module)
.otherExportsInfo.getUsed(generateContext.runtime) !==
UsageState.Unused;
if (otherUsed) {
UsageState.Unused;
if (needNsObj) {
generateContext.runtimeRequirements.add(
RuntimeGlobals.makeNamespaceObject
);
}
const newCssExports = [];
for (let [k, v] of cssExports) {
const newExports = [];
for (let [k, v] of cssExportsData.exports) {
for (let name of cssExportConvention(k, this.convention)) {
newCssExports.push(`\t${JSON.stringify(name)}: ${JSON.stringify(v)}`);
newExports.push(`\t${JSON.stringify(name)}: ${JSON.stringify(v)}`);
}
}
return new RawSource(
`${otherUsed ? `${RuntimeGlobals.makeNamespaceObject}(` : ""}${
`${needNsObj ? `${RuntimeGlobals.makeNamespaceObject}(` : ""}${
module.moduleArgument
}.exports = {\n${newCssExports.join(",\n")}\n}${otherUsed ? ")" : ""};`
}.exports = {\n${newExports.join(",\n")}\n}${needNsObj ? ")" : ""};`
);
}
}

30
lib/css/CssGenerator.js
View File

@ -15,6 +15,8 @@ const { cssExportConvention } = require("../util/conventions");
/** @typedef {import("../../declarations/WebpackOptions").CssGeneratorExportsConvention} CssGeneratorExportsConvention */
/** @typedef {import("../../declarations/WebpackOptions").CssGeneratorLocalIdentName} CssGeneratorLocalIdentName */
/** @typedef {import("../Dependency")} Dependency */
/** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */
/** @typedef {import("../DependencyTemplate").CssExportsData} CssExportsData */
/** @typedef {import("../Generator").GenerateContext} GenerateContext */
/** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
/** @typedef {import("../NormalModule")} NormalModule */
@ -26,13 +28,16 @@ class CssGenerator extends Generator {
/**
* @param {CssGeneratorExportsConvention | undefined} convention the convention of the exports name
* @param {CssGeneratorLocalIdentName | undefined} localIdentName css export local ident name
* @param {boolean} esModule whether to use ES modules syntax
*/
constructor(convention, localIdentName) {
constructor(convention, localIdentName, esModule) {
super();
/** @type {CssGeneratorExportsConvention | undefined} */
this.convention = convention;
/** @type {CssGeneratorLocalIdentName | undefined} */
this.localIdentName = localIdentName;
/** @type {boolean} */
this.esModule = esModule;
}
/**
@ -45,12 +50,16 @@ class CssGenerator extends Generator {
const source = new ReplaceSource(originalSource);
/** @type {InitFragment[]} */
const initFragments = [];
/** @type {Map<string, string>} */
const cssExports = new Map();
/** @type {CssExportsData} */
const cssExportsData = {
esModule: this.esModule,
exports: new Map()
};
generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
let chunkInitFragments;
/** @type {DependencyTemplateContext} */
const templateContext = {
runtimeTemplate: generateContext.runtimeTemplate,
dependencyTemplates: generateContext.dependencyTemplates,
@ -62,7 +71,7 @@ class CssGenerator extends Generator {
concatenationScope: generateContext.concatenationScope,
codeGenerationResults: generateContext.codeGenerationResults,
initFragments,
cssExports,
cssExportsData,
get chunkInitFragments() {
if (!chunkInitFragments) {
const data = generateContext.getData();
@ -97,16 +106,17 @@ class CssGenerator extends Generator {
if (module.presentationalDependencies !== undefined)
module.presentationalDependencies.forEach(handleDependency);
if (cssExports.size > 0) {
const newCssExports = new Map();
for (let [name, v] of cssExports) {
if (cssExportsData.exports.size > 0) {
const newExports = new Map();
for (let [name, v] of cssExportsData.exports) {
for (let newName of cssExportConvention(name, this.convention)) {
newCssExports.set(newName, v);
newExports.set(newName, v);
}
}
const data = generateContext.getData();
data.set("css-exports", newCssExports);
cssExportsData.exports = newExports;
}
const data = generateContext.getData();
data.set("css-exports", cssExportsData);
return InitFragment.addToSource(source, initFragments, generateContext);
}

11
lib/css/CssLoadingRuntimeModule.js
View File

@ -224,7 +224,9 @@ class CssLoadingRuntimeModule extends RuntimeModule {
withCompression
? Template.asString([
// LZW decode
`var map = {}, char = data[0], oldPhrase = char, decoded = char, code = 256, maxCode = "\uffff".charCodeAt(0), phrase;`,
`var map = {}, char = data[0], oldPhrase = char, decoded = char, code = 256, maxCode = ${"\uffff".charCodeAt(
0
)}, phrase;`,
"for (i = 1; i < data.length; i++) {",
Template.indent([
"cc = data[i].charCodeAt(0);",
@ -246,11 +248,12 @@ class CssLoadingRuntimeModule extends RuntimeModule {
`else if(cc == ${cc(
"/"
)}) { token = token.replace(/^_/, ""); token2 = token2.replace(/^_/, ""); exports[token2] = token; token = ""; token2 = ""; }`,
`else if(cc == ${cc("&")}) { ${
RuntimeGlobals.makeNamespaceObject
}(exports); }`,
`else if(!cc || cc == ${cc(
","
)}) { token = token.replace(/^_/, ""); ${
RuntimeGlobals.makeNamespaceObject
}(exports); target[token] = (${runtimeTemplate.basicFunction(
)}) { token = token.replace(/^_/, ""); target[token] = (${runtimeTemplate.basicFunction(
"exports, module",
`module.exports = exports;`
)}).bind(null, exports); ${

15
lib/css/CssModulesPlugin.js
View File

@ -39,6 +39,7 @@ const CssParser = require("./CssParser");
/** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
/** @typedef {import("../Compilation")} Compilation */
/** @typedef {import("../Compiler")} Compiler */
/** @typedef {import("../DependencyTemplate").CssExportsData} CssExportsData */
/** @typedef {import("../Module")} Module */
/** @typedef {import("../util/memoize")} Memoize */
@ -244,11 +245,13 @@ class CssModulesPlugin {
return generatorOptions.exportsOnly
? new CssExportsGenerator(
generatorOptions.exportsConvention,
generatorOptions.localIdentName
generatorOptions.localIdentName,
generatorOptions.esModule
)
: new CssGenerator(
generatorOptions.exportsConvention,
generatorOptions.localIdentName
generatorOptions.localIdentName,
generatorOptions.esModule
);
});
normalModuleFactory.hooks.createModuleClass
@ -642,9 +645,11 @@ class CssModulesPlugin {
source.add(moduleSource);
source.add("\n");
}
/** @type {Map<string, string> | undefined} */
const exports =
/** @type {CssExportsData | undefined} */
const cssExportsData =
codeGenResult.data && codeGenResult.data.get("css-exports");
const exports = cssExportsData && cssExportsData.exports;
const esModule = cssExportsData && cssExportsData.esModule;
let moduleId = chunkGraph.getModuleId(module) + "";
// When `optimization.moduleIds` is `named` the module id is a path, so we need to normalize it between platforms
@ -660,7 +665,7 @@ class CssModulesPlugin {
([n, v]) => `${escapeCss(n)}:${escapeCss(v)}/`
).join("")
: ""
}${escapeCss(moduleId)}`
}${esModule ? "&" : ""}${escapeCss(moduleId)}`
);
} catch (e) {
/** @type {Error} */

4
lib/dependencies/CssExportDependency.js
View File

@ -79,9 +79,9 @@ CssExportDependency.Template = class CssExportDependencyTemplate extends (
* @param {DependencyTemplateContext} templateContext the context object
* @returns {void}
*/
apply(dependency, source, { cssExports }) {
apply(dependency, source, { cssExportsData }) {
const dep = /** @type {CssExportDependency} */ (dependency);
cssExports.set(dep.name, dep.value);
cssExportsData.exports.set(dep.name, dep.value);
}
};

11
lib/dependencies/CssLocalIdentifierDependency.js
View File

@ -157,7 +157,14 @@ CssLocalIdentifierDependency.Template = class CssLocalIdentifierDependencyTempla
apply(
dependency,
source,
{ module, moduleGraph, chunkGraph, runtime, runtimeTemplate, cssExports }
{
module,
moduleGraph,
chunkGraph,
runtime,
runtimeTemplate,
cssExportsData
}
) {
const dep = /** @type {CssLocalIdentifierDependency} */ (dependency);
const used = moduleGraph
@ -179,7 +186,7 @@ CssLocalIdentifierDependency.Template = class CssLocalIdentifierDependencyTempla
dep.range[1] - 1,
escapeCssIdentifier(localIdent, dep.prefix)
);
if (used) cssExports.set(used, localIdent);
if (used) cssExportsData.exports.set(used, localIdent);
}
};

2
schemas/WebpackOptions.check.js
View File

File diff suppressed because one or more lines are too long

16
schemas/WebpackOptions.json
View File

@ -364,6 +364,9 @@
"type": "object",
"additionalProperties": false,
"properties": {
"esModule": {
"$ref": "#/definitions/CssGeneratorEsModule"
},
"exportsConvention": {
"$ref": "#/definitions/CssGeneratorExportsConvention"
},
@ -401,6 +404,10 @@
}
]
},
"CssGeneratorEsModule": {
"description": "Configure the generated JS modules that use the ES modules syntax.",
"type": "boolean"
},
"CssGeneratorExportsConvention": {
"description": "Specifies the convention of exported names.",
"anyOf": [
@ -432,6 +439,9 @@
"type": "object",
"additionalProperties": false,
"properties": {
"esModule": {
"$ref": "#/definitions/CssGeneratorEsModule"
},
"exportsOnly": {
"$ref": "#/definitions/CssGeneratorExportsOnly"
}
@ -442,6 +452,9 @@
"type": "object",
"additionalProperties": false,
"properties": {
"esModule": {
"$ref": "#/definitions/CssGeneratorEsModule"
},
"exportsConvention": {
"$ref": "#/definitions/CssGeneratorExportsConvention"
},
@ -472,6 +485,9 @@
"type": "object",
"additionalProperties": false,
"properties": {
"esModule": {
"$ref": "#/definitions/CssGeneratorEsModule"
},
"exportsConvention": {
"$ref": "#/definitions/CssGeneratorExportsConvention"
},

2
schemas/plugins/css/CssAutoGeneratorOptions.check.js
View File

@ -3,4 +3,4 @@
* DO NOT MODIFY BY HAND.
* Run `yarn special-lint-fix` to update
*/
"use strict";function t(r,{instancePath:e="",parentData:n,parentDataProperty:o,rootData:a=r}={}){let s=null,l=0;if(0===l){if(!r||"object"!=typeof r||Array.isArray(r))return t.errors=[{params:{type:"object"}}],!1;{const e=l;for(const e in r)if("exportsConvention"!==e&&"exportsOnly"!==e&&"localIdentName"!==e)return t.errors=[{params:{additionalProperty:e}}],!1;if(e===l){if(void 0!==r.exportsConvention){let e=r.exportsConvention;const n=l,o=l;let a=!1;const c=l;if("as-is"!==e&&"camel-case"!==e&&"camel-case-only"!==e&&"dashes"!==e&&"dashes-only"!==e){const t={params:{}};null===s?s=[t]:s.push(t),l++}var i=c===l;if(a=a||i,!a){const t=l;if(!(e instanceof Function)){const t={params:{}};null===s?s=[t]:s.push(t),l++}i=t===l,a=a||i}if(!a){const r={params:{}};return null===s?s=[r]:s.push(r),l++,t.errors=s,!1}l=o,null!==s&&(o?s.length=o:s=null);var p=n===l}else p=!0;if(p){if(void 0!==r.exportsOnly){const e=l;if("boolean"!=typeof r.exportsOnly)return t.errors=[{params:{type:"boolean"}}],!1;p=e===l}else p=!0;if(p)if(void 0!==r.localIdentName){const e=l;if("string"!=typeof r.localIdentName)return t.errors=[{params:{type:"string"}}],!1;p=e===l}else p=!0}}}}return t.errors=s,0===l}function r(e,{instancePath:n="",parentData:o,parentDataProperty:a,rootData:s=e}={}){let l=null,i=0;return t(e,{instancePath:n,parentData:o,parentDataProperty:a,rootData:s})||(l=null===l?t.errors:l.concat(t.errors),i=l.length),r.errors=l,0===i}module.exports=r,module.exports.default=r;
"use strict";function e(r,{instancePath:t="",parentData:o,parentDataProperty:n,rootData:a=r}={}){let s=null,l=0;if(0===l){if(!r||"object"!=typeof r||Array.isArray(r))return e.errors=[{params:{type:"object"}}],!1;{const t=l;for(const t in r)if("esModule"!==t&&"exportsConvention"!==t&&"exportsOnly"!==t&&"localIdentName"!==t)return e.errors=[{params:{additionalProperty:t}}],!1;if(t===l){if(void 0!==r.esModule){const t=l;if("boolean"!=typeof r.esModule)return e.errors=[{params:{type:"boolean"}}],!1;var i=t===l}else i=!0;if(i){if(void 0!==r.exportsConvention){let t=r.exportsConvention;const o=l,n=l;let a=!1;const c=l;if("as-is"!==t&&"camel-case"!==t&&"camel-case-only"!==t&&"dashes"!==t&&"dashes-only"!==t){const e={params:{}};null===s?s=[e]:s.push(e),l++}var p=c===l;if(a=a||p,!a){const e=l;if(!(t instanceof Function)){const e={params:{}};null===s?s=[e]:s.push(e),l++}p=e===l,a=a||p}if(!a){const r={params:{}};return null===s?s=[r]:s.push(r),l++,e.errors=s,!1}l=n,null!==s&&(n?s.length=n:s=null),i=o===l}else i=!0;if(i){if(void 0!==r.exportsOnly){const t=l;if("boolean"!=typeof r.exportsOnly)return e.errors=[{params:{type:"boolean"}}],!1;i=t===l}else i=!0;if(i)if(void 0!==r.localIdentName){const t=l;if("string"!=typeof r.localIdentName)return e.errors=[{params:{type:"string"}}],!1;i=t===l}else i=!0}}}}}return e.errors=s,0===l}function r(t,{instancePath:o="",parentData:n,parentDataProperty:a,rootData:s=t}={}){let l=null,i=0;return e(t,{instancePath:o,parentData:n,parentDataProperty:a,rootData:s})||(l=null===l?e.errors:l.concat(e.errors),i=l.length),r.errors=l,0===i}module.exports=r,module.exports.default=r;

2
schemas/plugins/css/CssGeneratorOptions.check.js
View File

@ -3,4 +3,4 @@
* DO NOT MODIFY BY HAND.
* Run `yarn special-lint-fix` to update
*/
"use strict";function r(t,{instancePath:a="",parentData:e,parentDataProperty:o,rootData:n=t}={}){if(!t||"object"!=typeof t||Array.isArray(t))return r.errors=[{params:{type:"object"}}],!1;{const a=0;for(const a in t)if("exportsOnly"!==a)return r.errors=[{params:{additionalProperty:a}}],!1;if(0===a&&void 0!==t.exportsOnly&&"boolean"!=typeof t.exportsOnly)return r.errors=[{params:{type:"boolean"}}],!1}return r.errors=null,!0}function t(a,{instancePath:e="",parentData:o,parentDataProperty:n,rootData:s=a}={}){let p=null,l=0;return r(a,{instancePath:e,parentData:o,parentDataProperty:n,rootData:s})||(p=null===p?r.errors:p.concat(r.errors),l=p.length),t.errors=p,0===l}module.exports=t,module.exports.default=t;
"use strict";function r(e,{instancePath:t="",parentData:o,parentDataProperty:a,rootData:n=e}={}){if(!e||"object"!=typeof e||Array.isArray(e))return r.errors=[{params:{type:"object"}}],!1;{const t=0;for(const t in e)if("esModule"!==t&&"exportsOnly"!==t)return r.errors=[{params:{additionalProperty:t}}],!1;if(0===t){if(void 0!==e.esModule){const t=0;if("boolean"!=typeof e.esModule)return r.errors=[{params:{type:"boolean"}}],!1;var s=0===t}else s=!0;if(s)if(void 0!==e.exportsOnly){const t=0;if("boolean"!=typeof e.exportsOnly)return r.errors=[{params:{type:"boolean"}}],!1;s=0===t}else s=!0}}return r.errors=null,!0}function e(t,{instancePath:o="",parentData:a,parentDataProperty:n,rootData:s=t}={}){let p=null,l=0;return r(t,{instancePath:o,parentData:a,parentDataProperty:n,rootData:s})||(p=null===p?r.errors:p.concat(r.errors),l=p.length),e.errors=p,0===l}module.exports=e,module.exports.default=e;

2
schemas/plugins/css/CssGlobalGeneratorOptions.check.js
View File

@ -3,4 +3,4 @@
* DO NOT MODIFY BY HAND.
* Run `yarn special-lint-fix` to update
*/
"use strict";function t(r,{instancePath:e="",parentData:n,parentDataProperty:o,rootData:a=r}={}){let s=null,l=0;if(0===l){if(!r||"object"!=typeof r||Array.isArray(r))return t.errors=[{params:{type:"object"}}],!1;{const e=l;for(const e in r)if("exportsConvention"!==e&&"exportsOnly"!==e&&"localIdentName"!==e)return t.errors=[{params:{additionalProperty:e}}],!1;if(e===l){if(void 0!==r.exportsConvention){let e=r.exportsConvention;const n=l,o=l;let a=!1;const c=l;if("as-is"!==e&&"camel-case"!==e&&"camel-case-only"!==e&&"dashes"!==e&&"dashes-only"!==e){const t={params:{}};null===s?s=[t]:s.push(t),l++}var i=c===l;if(a=a||i,!a){const t=l;if(!(e instanceof Function)){const t={params:{}};null===s?s=[t]:s.push(t),l++}i=t===l,a=a||i}if(!a){const r={params:{}};return null===s?s=[r]:s.push(r),l++,t.errors=s,!1}l=o,null!==s&&(o?s.length=o:s=null);var p=n===l}else p=!0;if(p){if(void 0!==r.exportsOnly){const e=l;if("boolean"!=typeof r.exportsOnly)return t.errors=[{params:{type:"boolean"}}],!1;p=e===l}else p=!0;if(p)if(void 0!==r.localIdentName){const e=l;if("string"!=typeof r.localIdentName)return t.errors=[{params:{type:"string"}}],!1;p=e===l}else p=!0}}}}return t.errors=s,0===l}function r(e,{instancePath:n="",parentData:o,parentDataProperty:a,rootData:s=e}={}){let l=null,i=0;return t(e,{instancePath:n,parentData:o,parentDataProperty:a,rootData:s})||(l=null===l?t.errors:l.concat(t.errors),i=l.length),r.errors=l,0===i}module.exports=r,module.exports.default=r;
"use strict";function e(r,{instancePath:t="",parentData:o,parentDataProperty:n,rootData:a=r}={}){let s=null,l=0;if(0===l){if(!r||"object"!=typeof r||Array.isArray(r))return e.errors=[{params:{type:"object"}}],!1;{const t=l;for(const t in r)if("esModule"!==t&&"exportsConvention"!==t&&"exportsOnly"!==t&&"localIdentName"!==t)return e.errors=[{params:{additionalProperty:t}}],!1;if(t===l){if(void 0!==r.esModule){const t=l;if("boolean"!=typeof r.esModule)return e.errors=[{params:{type:"boolean"}}],!1;var i=t===l}else i=!0;if(i){if(void 0!==r.exportsConvention){let t=r.exportsConvention;const o=l,n=l;let a=!1;const c=l;if("as-is"!==t&&"camel-case"!==t&&"camel-case-only"!==t&&"dashes"!==t&&"dashes-only"!==t){const e={params:{}};null===s?s=[e]:s.push(e),l++}var p=c===l;if(a=a||p,!a){const e=l;if(!(t instanceof Function)){const e={params:{}};null===s?s=[e]:s.push(e),l++}p=e===l,a=a||p}if(!a){const r={params:{}};return null===s?s=[r]:s.push(r),l++,e.errors=s,!1}l=n,null!==s&&(n?s.length=n:s=null),i=o===l}else i=!0;if(i){if(void 0!==r.exportsOnly){const t=l;if("boolean"!=typeof r.exportsOnly)return e.errors=[{params:{type:"boolean"}}],!1;i=t===l}else i=!0;if(i)if(void 0!==r.localIdentName){const t=l;if("string"!=typeof r.localIdentName)return e.errors=[{params:{type:"string"}}],!1;i=t===l}else i=!0}}}}}return e.errors=s,0===l}function r(t,{instancePath:o="",parentData:n,parentDataProperty:a,rootData:s=t}={}){let l=null,i=0;return e(t,{instancePath:o,parentData:n,parentDataProperty:a,rootData:s})||(l=null===l?e.errors:l.concat(e.errors),i=l.length),r.errors=l,0===i}module.exports=r,module.exports.default=r;

2
schemas/plugins/css/CssModuleGeneratorOptions.check.js
View File

@ -3,4 +3,4 @@
* DO NOT MODIFY BY HAND.
* Run `yarn special-lint-fix` to update
*/
"use strict";function t(r,{instancePath:e="",parentData:n,parentDataProperty:o,rootData:a=r}={}){let s=null,l=0;if(0===l){if(!r||"object"!=typeof r||Array.isArray(r))return t.errors=[{params:{type:"object"}}],!1;{const e=l;for(const e in r)if("exportsConvention"!==e&&"exportsOnly"!==e&&"localIdentName"!==e)return t.errors=[{params:{additionalProperty:e}}],!1;if(e===l){if(void 0!==r.exportsConvention){let e=r.exportsConvention;const n=l,o=l;let a=!1;const c=l;if("as-is"!==e&&"camel-case"!==e&&"camel-case-only"!==e&&"dashes"!==e&&"dashes-only"!==e){const t={params:{}};null===s?s=[t]:s.push(t),l++}var i=c===l;if(a=a||i,!a){const t=l;if(!(e instanceof Function)){const t={params:{}};null===s?s=[t]:s.push(t),l++}i=t===l,a=a||i}if(!a){const r={params:{}};return null===s?s=[r]:s.push(r),l++,t.errors=s,!1}l=o,null!==s&&(o?s.length=o:s=null);var p=n===l}else p=!0;if(p){if(void 0!==r.exportsOnly){const e=l;if("boolean"!=typeof r.exportsOnly)return t.errors=[{params:{type:"boolean"}}],!1;p=e===l}else p=!0;if(p)if(void 0!==r.localIdentName){const e=l;if("string"!=typeof r.localIdentName)return t.errors=[{params:{type:"string"}}],!1;p=e===l}else p=!0}}}}return t.errors=s,0===l}function r(e,{instancePath:n="",parentData:o,parentDataProperty:a,rootData:s=e}={}){let l=null,i=0;return t(e,{instancePath:n,parentData:o,parentDataProperty:a,rootData:s})||(l=null===l?t.errors:l.concat(t.errors),i=l.length),r.errors=l,0===i}module.exports=r,module.exports.default=r;
"use strict";function e(r,{instancePath:t="",parentData:o,parentDataProperty:n,rootData:a=r}={}){let s=null,l=0;if(0===l){if(!r||"object"!=typeof r||Array.isArray(r))return e.errors=[{params:{type:"object"}}],!1;{const t=l;for(const t in r)if("esModule"!==t&&"exportsConvention"!==t&&"exportsOnly"!==t&&"localIdentName"!==t)return e.errors=[{params:{additionalProperty:t}}],!1;if(t===l){if(void 0!==r.esModule){const t=l;if("boolean"!=typeof r.esModule)return e.errors=[{params:{type:"boolean"}}],!1;var i=t===l}else i=!0;if(i){if(void 0!==r.exportsConvention){let t=r.exportsConvention;const o=l,n=l;let a=!1;const c=l;if("as-is"!==t&&"camel-case"!==t&&"camel-case-only"!==t&&"dashes"!==t&&"dashes-only"!==t){const e={params:{}};null===s?s=[e]:s.push(e),l++}var p=c===l;if(a=a||p,!a){const e=l;if(!(t instanceof Function)){const e={params:{}};null===s?s=[e]:s.push(e),l++}p=e===l,a=a||p}if(!a){const r={params:{}};return null===s?s=[r]:s.push(r),l++,e.errors=s,!1}l=n,null!==s&&(n?s.length=n:s=null),i=o===l}else i=!0;if(i){if(void 0!==r.exportsOnly){const t=l;if("boolean"!=typeof r.exportsOnly)return e.errors=[{params:{type:"boolean"}}],!1;i=t===l}else i=!0;if(i)if(void 0!==r.localIdentName){const t=l;if("string"!=typeof r.localIdentName)return e.errors=[{params:{type:"string"}}],!1;i=t===l}else i=!0}}}}}return e.errors=s,0===l}function r(t,{instancePath:o="",parentData:n,parentDataProperty:a,rootData:s=t}={}){let l=null,i=0;return e(t,{instancePath:o,parentData:n,parentDataProperty:a,rootData:s})||(l=null===l?e.errors:l.concat(e.errors),i=l.length),r.errors=l,0===i}module.exports=r,module.exports.default=r;

8
test/Defaults.unittest.js
View File

@ -2280,11 +2280,11 @@ describe("snapshots", () => {
+ "resolve": Object {
+ "fullySpecified": true,
+ },
@@ ... @@
+ },
+ ],
+ "type": "webassembly/async",
+ },
@@ ... @@
+ Object {
+ "resolve": Object {
+ "fullySpecified": true,
+ "preferRelative": true,
@ -2305,14 +2305,14 @@ describe("snapshots", () => {
+ "resolve": Object {
+ "fullySpecified": true,
+ "preferRelative": true,
+ },
@@ ... @@
+ "type": "css",
+ },
+ Object {
@@ ... @@
- "generator": Object {},
+ "generator": Object {
+ "css": Object {
+ "esModule": true,
+ "exportsOnly": false,
+ },
+ "css/auto": Object {

52
test/__snapshots__/Cli.basictest.js.snap
View File

@ -1429,6 +1429,19 @@ Object {
"multiple": false,
"simpleType": "string",
},
"module-generator-css-auto-es-module": Object {
"configs": Array [
Object {
"description": "Configure the generated JS modules that use the ES modules syntax.",
"multiple": false,
"path": "module.generator.css/auto.esModule",
"type": "boolean",
},
],
"description": "Configure the generated JS modules that use the ES modules syntax.",
"multiple": false,
"simpleType": "boolean",
},
"module-generator-css-auto-exports-convention": Object {
"configs": Array [
Object {
@ -1475,6 +1488,19 @@ Object {
"multiple": false,
"simpleType": "string",
},
"module-generator-css-es-module": Object {
"configs": Array [
Object {
"description": "Configure the generated JS modules that use the ES modules syntax.",
"multiple": false,
"path": "module.generator.css.esModule",
"type": "boolean",
},
],
"description": "Configure the generated JS modules that use the ES modules syntax.",
"multiple": false,
"simpleType": "boolean",
},
"module-generator-css-exports-only": Object {
"configs": Array [
Object {
@ -1488,6 +1514,19 @@ Object {
"multiple": false,
"simpleType": "boolean",
},
"module-generator-css-global-es-module": Object {
"configs": Array [
Object {
"description": "Configure the generated JS modules that use the ES modules syntax.",
"multiple": false,
"path": "module.generator.css/global.esModule",
"type": "boolean",
},
],
"description": "Configure the generated JS modules that use the ES modules syntax.",
"multiple": false,
"simpleType": "boolean",
},
"module-generator-css-global-exports-convention": Object {
"configs": Array [
Object {
@ -1534,6 +1573,19 @@ Object {
"multiple": false,
"simpleType": "string",
},
"module-generator-css-module-es-module": Object {
"configs": Array [
Object {
"description": "Configure the generated JS modules that use the ES modules syntax.",
"multiple": false,
"path": "module.generator.css/module.esModule",
"type": "boolean",
},
],
"description": "Configure the generated JS modules that use the ES modules syntax.",
"multiple": false,
"simpleType": "boolean",
},
"module-generator-css-module-exports-convention": Object {
"configs": Array [
Object {

8
test/__snapshots__/ConfigCacheTestCases.longtest.js.snap
View File

File diff suppressed because one or more lines are too long

8
test/__snapshots__/ConfigTestCases.basictest.js.snap
View File

File diff suppressed because one or more lines are too long

12
test/configCases/css/cjs-module-syntax/index.js Normal file
View File

@ -0,0 +1,12 @@
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
it("should able to require the css module as commonjs", () => {
const style = require("./style.module.css");
console.log(style)
const interoperatedStyle = _interopRequireDefault(require("./style.module.css"));
expect(style).toEqual({ foo: '-_style_module_css-foo' });
expect(style).not.toEqual(nsObj({ foo: '-_style_module_css-foo' }));
expect(style.__esModule).toEqual(undefined);
expect(interoperatedStyle.default.foo).toEqual("-_style_module_css-foo");
});

3
test/configCases/css/cjs-module-syntax/style.module.css Normal file
View File

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

10
test/configCases/css/cjs-module-syntax/test.config.js Normal file
View File

@ -0,0 +1,10 @@
module.exports = {
moduleScope(scope) {
if (scope.document) {
const link = scope.document.createElement("link");
link.rel = "stylesheet";
link.href = "bundle0.css";
scope.document.head.appendChild(link);
}
}
};

31
test/configCases/css/cjs-module-syntax/webpack.config.js Normal file
View File

@ -0,0 +1,31 @@
/** @type {import("../../../../").Configuration} */
module.exports = [
{
target: "web",
mode: "development",
module: {
generator: {
"css/auto": {
esModule: false
}
}
},
experiments: {
css: true
}
},
{
target: "node",
mode: "development",
module: {
generator: {
"css/auto": {
esModule: false
}
}
},
experiments: {
css: true
}
}
];

20
types.d.ts vendored
View File

@ -2948,6 +2948,11 @@ type CreateWriteStreamFSImplementation = FSImplementation & {
* Generator options for css/auto modules.
*/
declare interface CssAutoGeneratorOptions {
/**
* Configure the generated JS modules that use the ES modules syntax.
*/
esModule?: boolean;
/**
* Specifies the convention of exported names.
*/
@ -2984,6 +2989,11 @@ declare interface CssAutoParserOptions {
* Generator options for css modules.
*/
declare interface CssGeneratorOptions {
/**
* Configure the generated JS modules that use the ES modules syntax.
*/
esModule?: boolean;
/**
* Avoid generating and loading a stylesheet and only embed exports from css into output javascript files.
*/
@ -2994,6 +3004,11 @@ declare interface CssGeneratorOptions {
* Generator options for css/global modules.
*/
declare interface CssGlobalGeneratorOptions {
/**
* Configure the generated JS modules that use the ES modules syntax.
*/
esModule?: boolean;
/**
* Specifies the convention of exported names.
*/
@ -3035,6 +3050,11 @@ declare interface CssImportDependencyMeta {
* Generator options for css/module modules.
*/
declare interface CssModuleGeneratorOptions {
/**
* Configure the generated JS modules that use the ES modules syntax.
*/
esModule?: boolean;
/**
* Specifies the convention of exported names.
*/