Skip to content

Commit b656c5c

Browse files
alexander-akaitalexander-akait
authoredFeb 1, 2024
feat: support named exports with any characters
·
v2.9.2v2.8.0
1 parent aeb97fc commit b656c5c

File tree

19 files changed

+401
-54
lines changed

19 files changed

+401
-54
lines changed
 

‎package-lock.json

+12-12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
"bootstrap": "^4.6.2",
6969
"cross-env": "^7.0.3",
7070
"cspell": "^6.31.1",
71-
"css-loader": "^6.9.0",
71+
"css-loader": "^6.10.0",
7272
"del": "^6.0.0",
7373
"del-cli": "^4.0.0",
7474
"es-check": "^7.1.0",

‎src/loader.js

+34-12
Original file line numberDiff line numberDiff line change
@@ -245,22 +245,44 @@ function pitch(request) {
245245
return;
246246
}
247247

248-
const result = locals
249-
? namedExport
250-
? Object.keys(locals)
248+
const result = (function makeResult() {
249+
if (locals) {
250+
if (namedExport) {
251+
const identifiers = Array.from(
252+
(function* generateIdentifiers() {
253+
let identifierId = 0;
254+
255+
for (const key of Object.keys(locals)) {
256+
identifierId += 1;
257+
258+
yield [`_${identifierId.toString(16)}`, key];
259+
}
260+
})()
261+
);
262+
263+
const localsString = identifiers
251264
.map(
252-
(key) =>
253-
`\nexport var ${key} = ${stringifyLocal(
265+
([id, key]) =>
266+
`\nvar ${id} = ${stringifyLocal(
254267
/** @type {Locals} */ (locals)[key]
255268
)};`
256269
)
257-
.join("")
258-
: `\n${
259-
esModule ? "export default" : "module.exports ="
260-
} ${JSON.stringify(locals)};`
261-
: esModule
262-
? `\nexport {};`
263-
: "";
270+
.join("");
271+
const exportsString = `export { ${identifiers
272+
.map(([id, key]) => `${id} as ${JSON.stringify(key)}`)
273+
.join(", ")} }`;
274+
275+
return `${localsString}\n${exportsString}\n`;
276+
}
277+
278+
return `\n${
279+
esModule ? "export default" : "module.exports = "
280+
} ${JSON.stringify(locals)};`;
281+
} else if (esModule) {
282+
return "\nexport {};";
283+
}
284+
return "";
285+
})();
264286

265287
let resultSource = `// extracted by ${MiniCssExtractPlugin.pluginName}`;
266288

‎test/cases/custom-loader-with-functional-exports/expected/main.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@
77

88
__webpack_require__.r(__webpack_exports__);
99
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
10-
/* harmony export */ cnA: () => (/* binding */ cnA),
11-
/* harmony export */ cnB: () => (/* binding */ cnB)
10+
/* harmony export */ cnA: () => (/* binding */ _1),
11+
/* harmony export */ cnB: () => (/* binding */ _2)
1212
/* harmony export */ });
1313
// extracted by mini-css-extract-plugin
14-
var cnA = () => "class-name-a";
15-
var cnB = () => "class-name-b";
14+
var _1 = () => "class-name-a";
15+
var _2 = () => "class-name-b";
16+
17+
1618

1719
/***/ })
1820
/******/ ]);

‎test/cases/es-module-concatenation-modules/expected/main.js

+13-7
Original file line numberDiff line numberDiff line change
@@ -41,21 +41,21 @@ __webpack_require__.r(__webpack_exports__);
4141
__webpack_require__.d(__webpack_exports__, {
4242
a: () => (/* reexport */ a_namespaceObject),
4343
b: () => (/* reexport */ b_namespaceObject),
44-
c: () => (/* reexport */ c)
44+
c: () => (/* reexport */ c_1)
4545
});
4646

4747
// NAMESPACE OBJECT: ./a.css
4848
var a_namespaceObject = {};
4949
__webpack_require__.r(a_namespaceObject);
5050
__webpack_require__.d(a_namespaceObject, {
51-
a: () => (a)
51+
a: () => (_1)
5252
});
5353

5454
// NAMESPACE OBJECT: ./b.css
5555
var b_namespaceObject = {};
5656
__webpack_require__.r(b_namespaceObject);
5757
__webpack_require__.d(b_namespaceObject, {
58-
b: () => (b)
58+
b: () => (b_1)
5959
});
6060

6161
// NAMESPACE OBJECT: ./index.js
@@ -64,18 +64,24 @@ __webpack_require__.r(index_namespaceObject);
6464
__webpack_require__.d(index_namespaceObject, {
6565
a: () => (a_namespaceObject),
6666
b: () => (b_namespaceObject),
67-
c: () => (c)
67+
c: () => (c_1)
6868
});
6969

7070
;// CONCATENATED MODULE: ./a.css
7171
// extracted by mini-css-extract-plugin
72-
var a = "foo__a";
72+
var _1 = "foo__a";
73+
74+
7375
;// CONCATENATED MODULE: ./b.css
7476
// extracted by mini-css-extract-plugin
75-
var b = "foo__b";
77+
var b_1 = "foo__b";
78+
79+
7680
;// CONCATENATED MODULE: ./c.css
7781
// extracted by mini-css-extract-plugin
78-
var c = "foo__c";
82+
var c_1 = "foo__c";
83+
84+
7985
;// CONCATENATED MODULE: ./index.js
8086
/* eslint-disable import/no-namespace */
8187

‎test/cases/es-named-export-as-is-output-module/expected/main.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.Xh041yLR4iCP4RGjge50 {
2+
background: red;
3+
}
4+
5+
.NMuRsxoDwvW8BhSXhFAY {
6+
color: green;
7+
}
8+
9+
.ayWIv09rPsAqE2JznIsI {
10+
color: blue;
11+
}
12+

‎test/cases/es-named-export-as-is-output-module/expected/main.mjs

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/******/ var __webpack_modules__ = ([
2+
/* 0 */,
3+
/* 1 */
4+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
5+
6+
__webpack_require__.r(__webpack_exports__);
7+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
8+
/* harmony export */ "a-class": () => (/* binding */ _1),
9+
/* harmony export */ b__class: () => (/* binding */ _2),
10+
/* harmony export */ cClass: () => (/* binding */ _3)
11+
/* harmony export */ });
12+
// extracted by mini-css-extract-plugin
13+
var _1 = "Xh041yLR4iCP4RGjge50";
14+
var _2 = "NMuRsxoDwvW8BhSXhFAY";
15+
var _3 = "ayWIv09rPsAqE2JznIsI";
16+
17+
18+
19+
/***/ })
20+
/******/ ]);
21+
/************************************************************************/
22+
/******/ // The module cache
23+
/******/ var __webpack_module_cache__ = {};
24+
/******/
25+
/******/ // The require function
26+
/******/ function __webpack_require__(moduleId) {
27+
/******/ // Check if module is in cache
28+
/******/ var cachedModule = __webpack_module_cache__[moduleId];
29+
/******/ if (cachedModule !== undefined) {
30+
/******/ return cachedModule.exports;
31+
/******/ }
32+
/******/ // Create a new module (and put it into the cache)
33+
/******/ var module = __webpack_module_cache__[moduleId] = {
34+
/******/ // no module.id needed
35+
/******/ // no module.loaded needed
36+
/******/ exports: {}
37+
/******/ };
38+
/******/
39+
/******/ // Execute the module function
40+
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
41+
/******/
42+
/******/ // Return the exports of the module
43+
/******/ return module.exports;
44+
/******/ }
45+
/******/
46+
/************************************************************************/
47+
/******/ /* webpack/runtime/define property getters */
48+
/******/ (() => {
49+
/******/ // define getter functions for harmony exports
50+
/******/ __webpack_require__.d = (exports, definition) => {
51+
/******/ for(var key in definition) {
52+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
53+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
54+
/******/ }
55+
/******/ }
56+
/******/ };
57+
/******/ })();
58+
/******/
59+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
60+
/******/ (() => {
61+
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
62+
/******/ })();
63+
/******/
64+
/******/ /* webpack/runtime/make namespace object */
65+
/******/ (() => {
66+
/******/ // define __esModule on exports
67+
/******/ __webpack_require__.r = (exports) => {
68+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
69+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
70+
/******/ }
71+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
72+
/******/ };
73+
/******/ })();
74+
/******/
75+
/************************************************************************/
76+
var __webpack_exports__ = {};
77+
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
78+
(() => {
79+
__webpack_require__.r(__webpack_exports__);
80+
/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
81+
82+
83+
// eslint-disable-next-line no-console
84+
console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__["default"], aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__["a-class"], bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.b__class, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass });
85+
86+
})();
87+

‎test/cases/es-named-export-as-is-output-module/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import css, {
2+
"a-class" as aClass,
3+
"b__class" as bClass,
4+
cClass,
5+
} from "./style.css";
6+
7+
// eslint-disable-next-line no-console
8+
console.log({ css, aClass, bClass, cClass });

‎test/cases/es-named-export-as-is-output-module/style.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.a-class {
2+
background: red;
3+
}
4+
5+
.b__class {
6+
color: green;
7+
}
8+
9+
.cClass {
10+
color: blue;
11+
}

‎test/cases/es-named-export-as-is-output-module/webpack.config.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Self from "../../../src";
2+
3+
module.exports = {
4+
entry: "./index.js",
5+
module: {
6+
rules: [
7+
{
8+
test: /\.css$/,
9+
use: [
10+
{
11+
loader: Self.loader,
12+
},
13+
{
14+
loader: "css-loader",
15+
options: {
16+
esModule: true,
17+
modules: {
18+
namedExport: true,
19+
exportLocalsConvention: "asIs",
20+
},
21+
},
22+
},
23+
],
24+
},
25+
],
26+
},
27+
output: {
28+
module: true,
29+
},
30+
experiments: {
31+
outputModule: true,
32+
},
33+
plugins: [
34+
new Self({
35+
filename: "[name].css",
36+
}),
37+
],
38+
};

‎test/cases/es-named-export-as-is/expected/main.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.Xh041yLR4iCP4RGjge50 {
2+
background: red;
3+
}
4+
5+
.NMuRsxoDwvW8BhSXhFAY {
6+
color: green;
7+
}
8+
9+
.ayWIv09rPsAqE2JznIsI {
10+
color: blue;
11+
}
12+

‎test/cases/es-named-export-as-is/expected/main.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/******/ (() => { // webpackBootstrap
2+
/******/ "use strict";
3+
/******/ var __webpack_modules__ = ([
4+
/* 0 */,
5+
/* 1 */
6+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
7+
8+
__webpack_require__.r(__webpack_exports__);
9+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
10+
/* harmony export */ "a-class": () => (/* binding */ _1),
11+
/* harmony export */ b__class: () => (/* binding */ _2),
12+
/* harmony export */ cClass: () => (/* binding */ _3)
13+
/* harmony export */ });
14+
// extracted by mini-css-extract-plugin
15+
var _1 = "Xh041yLR4iCP4RGjge50";
16+
var _2 = "NMuRsxoDwvW8BhSXhFAY";
17+
var _3 = "ayWIv09rPsAqE2JznIsI";
18+
19+
20+
21+
/***/ })
22+
/******/ ]);
23+
/************************************************************************/
24+
/******/ // The module cache
25+
/******/ var __webpack_module_cache__ = {};
26+
/******/
27+
/******/ // The require function
28+
/******/ function __webpack_require__(moduleId) {
29+
/******/ // Check if module is in cache
30+
/******/ var cachedModule = __webpack_module_cache__[moduleId];
31+
/******/ if (cachedModule !== undefined) {
32+
/******/ return cachedModule.exports;
33+
/******/ }
34+
/******/ // Create a new module (and put it into the cache)
35+
/******/ var module = __webpack_module_cache__[moduleId] = {
36+
/******/ // no module.id needed
37+
/******/ // no module.loaded needed
38+
/******/ exports: {}
39+
/******/ };
40+
/******/
41+
/******/ // Execute the module function
42+
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
43+
/******/
44+
/******/ // Return the exports of the module
45+
/******/ return module.exports;
46+
/******/ }
47+
/******/
48+
/************************************************************************/
49+
/******/ /* webpack/runtime/define property getters */
50+
/******/ (() => {
51+
/******/ // define getter functions for harmony exports
52+
/******/ __webpack_require__.d = (exports, definition) => {
53+
/******/ for(var key in definition) {
54+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
55+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
56+
/******/ }
57+
/******/ }
58+
/******/ };
59+
/******/ })();
60+
/******/
61+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
62+
/******/ (() => {
63+
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
64+
/******/ })();
65+
/******/
66+
/******/ /* webpack/runtime/make namespace object */
67+
/******/ (() => {
68+
/******/ // define __esModule on exports
69+
/******/ __webpack_require__.r = (exports) => {
70+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
71+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
72+
/******/ }
73+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
74+
/******/ };
75+
/******/ })();
76+
/******/
77+
/************************************************************************/
78+
var __webpack_exports__ = {};
79+
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
80+
(() => {
81+
__webpack_require__.r(__webpack_exports__);
82+
/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
83+
84+
85+
// eslint-disable-next-line no-console
86+
console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__["default"], aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__["a-class"], bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.b__class, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass });
87+
88+
})();
89+
90+
/******/ })()
91+
;

‎test/cases/es-named-export-as-is/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import css, {
2+
"a-class" as aClass,
3+
"b__class" as bClass,
4+
cClass,
5+
} from "./style.css";
6+
7+
// eslint-disable-next-line no-console
8+
console.log({ css, aClass, bClass, cClass });

‎test/cases/es-named-export-as-is/style.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.a-class {
2+
background: red;
3+
}
4+
5+
.b__class {
6+
color: green;
7+
}
8+
9+
.cClass {
10+
color: blue;
11+
}

‎test/cases/es-named-export-as-is/webpack.config.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import Self from "../../../src";
2+
3+
module.exports = {
4+
entry: "./index.js",
5+
module: {
6+
rules: [
7+
{
8+
test: /\.css$/,
9+
use: [
10+
{
11+
loader: Self.loader,
12+
},
13+
{
14+
loader: "css-loader",
15+
options: {
16+
esModule: true,
17+
modules: {
18+
namedExport: true,
19+
exportLocalsConvention: "asIs",
20+
},
21+
},
22+
},
23+
],
24+
},
25+
],
26+
},
27+
plugins: [
28+
new Self({
29+
filename: "[name].css",
30+
}),
31+
],
32+
};

‎test/cases/es-named-export-output-module/expected/main.mjs

+8-6
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,16 @@
55

66
__webpack_require__.r(__webpack_exports__);
77
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
8-
/* harmony export */ aClass: () => (/* binding */ aClass),
9-
/* harmony export */ bClass: () => (/* binding */ bClass),
10-
/* harmony export */ cClass: () => (/* binding */ cClass)
8+
/* harmony export */ aClass: () => (/* binding */ _1),
9+
/* harmony export */ bClass: () => (/* binding */ _2),
10+
/* harmony export */ cClass: () => (/* binding */ _3)
1111
/* harmony export */ });
1212
// extracted by mini-css-extract-plugin
13-
var aClass = "foo__style__a-class";
14-
var bClass = "foo__style__b__class";
15-
var cClass = "foo__style__cClass";
13+
var _1 = "foo__style__a-class";
14+
var _2 = "foo__style__b__class";
15+
var _3 = "foo__style__cClass";
16+
17+
1618

1719
/***/ })
1820
/******/ ]);

‎test/cases/es-named-export/expected/main.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,16 @@
77

88
__webpack_require__.r(__webpack_exports__);
99
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
10-
/* harmony export */ aClass: () => (/* binding */ aClass),
11-
/* harmony export */ bClass: () => (/* binding */ bClass),
12-
/* harmony export */ cClass: () => (/* binding */ cClass)
10+
/* harmony export */ "a-class": () => (/* binding */ _1),
11+
/* harmony export */ b__class: () => (/* binding */ _2),
12+
/* harmony export */ cClass: () => (/* binding */ _3)
1313
/* harmony export */ });
1414
// extracted by mini-css-extract-plugin
15-
var aClass = "foo__style__a-class";
16-
var bClass = "foo__style__b__class";
17-
var cClass = "foo__style__cClass";
15+
var _1 = "foo__style__a-class";
16+
var _2 = "foo__style__b__class";
17+
var _3 = "foo__style__cClass";
18+
19+
1820

1921
/***/ })
2022
/******/ ]);

‎test/cases/es-named-export/webpack.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ module.exports = {
1616
esModule: true,
1717
modules: {
1818
namedExport: true,
19+
exportLocalsConvention: "asIs",
1920
localIdentName: "foo__[name]__[local]",
2021
},
2122
},

‎test/cases/export-only-locals-and-es-named-export/expected/main.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,16 @@
77

88
__webpack_require__.r(__webpack_exports__);
99
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
10-
/* harmony export */ aClass: () => (/* binding */ aClass),
11-
/* harmony export */ bClass: () => (/* binding */ bClass),
12-
/* harmony export */ cClass: () => (/* binding */ cClass)
10+
/* harmony export */ aClass: () => (/* binding */ _1),
11+
/* harmony export */ bClass: () => (/* binding */ _2),
12+
/* harmony export */ cClass: () => (/* binding */ _3)
1313
/* harmony export */ });
1414
// extracted by mini-css-extract-plugin
15-
var aClass = "foo__style__a-class";
16-
var bClass = "foo__style__b__class";
17-
var cClass = "foo__style__cClass";
15+
var _1 = "foo__style__a-class";
16+
var _2 = "foo__style__b__class";
17+
var _3 = "foo__style__cClass";
18+
19+
1820

1921
/***/ })
2022
/******/ ]);

0 commit comments

Comments
 (0)
Please sign in to comment.