Skip to content

Commit cafae23

Browse files
alexander-akaitalexander-akait
authored
feat: added options to control renaming of identifiers in CSS modules
1 parent e8dca82 commit cafae23

20 files changed

+10621
-876
lines changed

‎.changeset/green-jeans-flow.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"webpack": minor
3+
---
4+
5+
Added options to control the renaming of at-rules and various identifiers in CSS modules.

‎cspell.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,7 @@
248248
"submodules",
249249
"subpath",
250250
"substack",
251+
"subgrid",
251252
"symlinked",
252253
"syncloader",
253254
"systemjs",

‎declarations/WebpackOptions.d.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -786,6 +786,30 @@ export type CssGeneratorLocalIdentName = string;
786786
* Configure how CSS content is exported as default.
787787
*/
788788
export type CssParserExportType = "link" | "text" | "css-style-sheet";
789+
/**
790+
* Enable/disable renaming of `@keyframes`.
791+
*/
792+
export type CssParserAnimation = boolean;
793+
/**
794+
* Enable/disable renaming of `@container` names.
795+
*/
796+
export type CssParserContainer = boolean;
797+
/**
798+
* Enable/disable renaming of custom identifiers.
799+
*/
800+
export type CssParserCustomIdents = boolean;
801+
/**
802+
* Enable/disable renaming of dashed identifiers, e. g. custom properties.
803+
*/
804+
export type CssParserDashedIdents = boolean;
805+
/**
806+
* Enable/disable renaming of `@function` names.
807+
*/
808+
export type CssParserFunction = boolean;
809+
/**
810+
* Enable/disable renaming of grid identifiers.
811+
*/
812+
export type CssParserGrid = boolean;
789813
/**
790814
* Enable/disable `@import` at-rules handling.
791815
*/
@@ -3011,10 +3035,34 @@ export interface CssModuleGeneratorOptions {
30113035
* Parser options for css/module modules.
30123036
*/
30133037
export interface CssModuleParserOptions {
3038+
/**
3039+
* Enable/disable renaming of `@keyframes`.
3040+
*/
3041+
animation?: CssParserAnimation;
3042+
/**
3043+
* Enable/disable renaming of `@container` names.
3044+
*/
3045+
container?: CssParserContainer;
3046+
/**
3047+
* Enable/disable renaming of custom identifiers.
3048+
*/
3049+
customIdents?: CssParserCustomIdents;
3050+
/**
3051+
* Enable/disable renaming of dashed identifiers, e. g. custom properties.
3052+
*/
3053+
dashedIdents?: CssParserDashedIdents;
30143054
/**
30153055
* Configure how CSS content is exported as default.
30163056
*/
30173057
exportType?: CssParserExportType;
3058+
/**
3059+
* Enable/disable renaming of `@function` names.
3060+
*/
3061+
function?: CssParserFunction;
3062+
/**
3063+
* Enable/disable renaming of grid identifiers.
3064+
*/
3065+
grid?: CssParserGrid;
30183066
/**
30193067
* Enable/disable `@import` at-rules handling.
30203068
*/

‎lib/config/defaults.js‎

Lines changed: 85 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -894,6 +894,51 @@ const applyModuleDefaults = (
894894
true
895895
);
896896

897+
for (const type of [
898+
CSS_MODULE_TYPE_AUTO,
899+
CSS_MODULE_TYPE_MODULE,
900+
CSS_MODULE_TYPE_GLOBAL
901+
]) {
902+
F(module.parser, type, () => ({}));
903+
904+
D(
905+
/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
906+
(module.parser[type]),
907+
"animation",
908+
true
909+
);
910+
D(
911+
/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
912+
(module.parser[type]),
913+
"container",
914+
true
915+
);
916+
D(
917+
/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
918+
(module.parser[type]),
919+
"customIdents",
920+
true
921+
);
922+
D(
923+
/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
924+
(module.parser[type]),
925+
"dashedIdents",
926+
true
927+
);
928+
D(
929+
/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
930+
(module.parser[type]),
931+
"function",
932+
true
933+
);
934+
D(
935+
/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
936+
(module.parser[type]),
937+
"grid",
938+
true
939+
);
940+
}
941+
897942
F(module.generator, CSS_MODULE_TYPE, () => ({}));
898943

899944
applyCssGeneratorOptionsDefaults(
@@ -913,101 +958,48 @@ const applyModuleDefaults = (
913958
const localIdentHashDigestLength = 6;
914959
const exportsConvention = "as-is";
915960

916-
F(module.generator, CSS_MODULE_TYPE_AUTO, () => ({}));
917-
D(
918-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]>} */
919-
(module.generator[CSS_MODULE_TYPE_AUTO]),
920-
"localIdentName",
921-
localIdentName
922-
);
923-
D(
924-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]>} */
925-
(module.generator[CSS_MODULE_TYPE_AUTO]),
926-
"localIdentHashSalt",
927-
localIdentHashSalt
928-
);
929-
D(
930-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]>} */
931-
(module.generator[CSS_MODULE_TYPE_AUTO]),
932-
"localIdentHashDigest",
933-
localIdentHashDigest
934-
);
935-
D(
936-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]>} */
937-
(module.generator[CSS_MODULE_TYPE_AUTO]),
938-
"localIdentHashDigestLength",
939-
localIdentHashDigestLength
940-
);
941-
D(
942-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]>} */
943-
(module.generator[CSS_MODULE_TYPE_AUTO]),
944-
"exportsConvention",
945-
exportsConvention
946-
);
961+
for (const type of [
962+
CSS_MODULE_TYPE_AUTO,
963+
CSS_MODULE_TYPE_MODULE,
964+
CSS_MODULE_TYPE_GLOBAL
965+
]) {
966+
F(module.generator, type, () => ({}));
947967

948-
F(module.generator, CSS_MODULE_TYPE_MODULE, () => ({}));
949-
D(
950-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
951-
(module.generator[CSS_MODULE_TYPE_MODULE]),
952-
"localIdentName",
953-
localIdentName
954-
);
955-
D(
956-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
957-
(module.generator[CSS_MODULE_TYPE_MODULE]),
958-
"localIdentHashSalt",
959-
localIdentHashSalt
960-
);
961-
D(
962-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
963-
(module.generator[CSS_MODULE_TYPE_MODULE]),
964-
"localIdentHashDigest",
965-
localIdentHashDigest
966-
);
967-
D(
968-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
969-
(module.generator[CSS_MODULE_TYPE_MODULE]),
970-
"localIdentHashDigestLength",
971-
localIdentHashDigestLength
972-
);
973-
D(
974-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
975-
(module.generator[CSS_MODULE_TYPE_MODULE]),
976-
"exportsConvention",
977-
exportsConvention
978-
);
968+
D(
969+
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
970+
(module.generator[type]),
971+
"localIdentName",
972+
localIdentName
973+
);
979974

980-
F(module.generator, CSS_MODULE_TYPE_GLOBAL, () => ({}));
981-
D(
982-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
983-
(module.generator[CSS_MODULE_TYPE_GLOBAL]),
984-
"localIdentName",
985-
localIdentName
986-
);
987-
D(
988-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
989-
(module.generator[CSS_MODULE_TYPE_GLOBAL]),
990-
"localIdentHashSalt",
991-
localIdentHashSalt
992-
);
993-
D(
994-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
995-
(module.generator[CSS_MODULE_TYPE_GLOBAL]),
996-
"localIdentHashDigest",
997-
localIdentHashDigest
998-
);
999-
D(
1000-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
1001-
(module.generator[CSS_MODULE_TYPE_GLOBAL]),
1002-
"localIdentHashDigestLength",
1003-
localIdentHashDigestLength
1004-
);
1005-
D(
1006-
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
1007-
(module.generator[CSS_MODULE_TYPE_GLOBAL]),
1008-
"exportsConvention",
1009-
exportsConvention
1010-
);
975+
D(
976+
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
977+
(module.generator[type]),
978+
"localIdentHashSalt",
979+
localIdentHashSalt
980+
);
981+
982+
D(
983+
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
984+
(module.generator[type]),
985+
"localIdentHashDigest",
986+
localIdentHashDigest
987+
);
988+
989+
D(
990+
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
991+
(module.generator[type]),
992+
"localIdentHashDigestLength",
993+
localIdentHashDigestLength
994+
);
995+
996+
D(
997+
/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
998+
(module.generator[type]),
999+
"exportsConvention",
1000+
exportsConvention
1001+
);
1002+
}
10111003
}
10121004

10131005
A(module, "defaultRules", () => {

‎lib/css/CssModulesPlugin.js‎

Lines changed: 15 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -153,17 +153,17 @@ const validateParserOptions = {
153153
parserValidationOptions
154154
),
155155
"css/auto": createSchemaValidation(
156-
require("../../schemas/plugins/css/CssParserOptions.check"),
156+
require("../../schemas/plugins/css/CssModuleParserOptions.check"),
157157
() => getSchema("CssModuleParserOptions"),
158158
parserValidationOptions
159159
),
160160
"css/module": createSchemaValidation(
161-
require("../../schemas/plugins/css/CssParserOptions.check"),
161+
require("../../schemas/plugins/css/CssModuleParserOptions.check"),
162162
() => getSchema("CssModuleParserOptions"),
163163
parserValidationOptions
164164
),
165165
"css/global": createSchemaValidation(
166-
require("../../schemas/plugins/css/CssParserOptions.check"),
166+
require("../../schemas/plugins/css/CssModuleParserOptions.check"),
167167
() => getSchema("CssModuleParserOptions"),
168168
parserValidationOptions
169169
)
@@ -260,45 +260,31 @@ class CssModulesPlugin {
260260
normalModuleFactory.hooks.createParser
261261
.for(type)
262262
.tap(PLUGIN_NAME, (parserOptions) => {
263-
validateParserOptions[type](parserOptions);
264-
const {
265-
url,
266-
import: importOption,
267-
namedExports,
268-
exportType
269-
} = parserOptions;
270-
271263
switch (type) {
272264
case CSS_MODULE_TYPE:
273-
return new CssParser({
274-
importOption,
275-
url,
276-
namedExports,
277-
exportType
278-
});
265+
validateParserOptions[type](parserOptions);
266+
267+
return new CssParser(parserOptions);
279268
case CSS_MODULE_TYPE_GLOBAL:
269+
validateParserOptions[type](parserOptions);
270+
280271
return new CssParser({
281272
defaultMode: "global",
282-
importOption,
283-
url,
284-
namedExports,
285-
exportType
273+
...parserOptions
286274
});
287275
case CSS_MODULE_TYPE_MODULE:
276+
validateParserOptions[type](parserOptions);
277+
288278
return new CssParser({
289279
defaultMode: "local",
290-
importOption,
291-
url,
292-
namedExports,
293-
exportType
280+
...parserOptions
294281
});
295282
case CSS_MODULE_TYPE_AUTO:
283+
validateParserOptions[type](parserOptions);
284+
296285
return new CssParser({
297286
defaultMode: "auto",
298-
importOption,
299-
url,
300-
namedExports,
301-
exportType
287+
...parserOptions
302288
});
303289
}
304290
});

0 commit comments

Comments
 (0)