Skip to content

Commit c323610

Browse files
alexander-akaitalexander-akait
authored
feat: added string value for the exportType option
1 parent c6d2066 commit c323610

10 files changed

+486
-62
lines changed

‎CHANGELOG.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ All notable changes to this project will be documented in this file. See [standa
77

88
### Features
99

10-
* allow the `exportLocalsConvention` option can be a function useful for named export ([#1351](https://github.com/webpack-contrib/css-loader/issues/1351)) ([3c4b357](https://github.com/webpack-contrib/css-loader/commit/3c4b35718273baaf9e0480db715b596fbe5d7453))
10+
* allow the `exportLocalsConvention` option can be a function, useful for named export ([#1351](https://github.com/webpack-contrib/css-loader/issues/1351)) ([3c4b357](https://github.com/webpack-contrib/css-loader/commit/3c4b35718273baaf9e0480db715b596fbe5d7453))
1111

1212
## [6.1.0](https://github.com/webpack-contrib/css-loader/compare/v6.0.0...v6.1.0) (2021-07-17)
1313

‎README.md

+41-40
Original file line numberDiff line numberDiff line change
@@ -54,48 +54,19 @@ module.exports = {
5454

5555
And run `webpack` via your preferred method.
5656

57-
### `toString`
58-
59-
You can also use the css-loader results directly as a string, such as in Angular's component style.
60-
61-
**webpack.config.js**
62-
63-
```js
64-
module.exports = {
65-
module: {
66-
rules: [
67-
{
68-
test: /\.css$/i,
69-
use: ["to-string-loader", "css-loader"],
70-
},
71-
],
72-
},
73-
};
74-
```
75-
76-
or
77-
78-
```js
79-
const css = require("./test.css").toString();
80-
81-
console.log(css); // {String}
82-
```
83-
84-
If there are SourceMaps, they will also be included in the result string.
85-
8657
If, for one reason or another, you need to extract CSS as a file (i.e. do not store CSS in a JS module) you might want to check out the [recommend example](https://github.com/webpack-contrib/css-loader#recommend).
8758

8859
## Options
8960

90-
| Name | Type | Default | Description |
91-
| :-----------------------------------: | :------------------------------: | :----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
92-
| **[`url`](#url)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `url()`/`image-set()` functions handling |
93-
| **[`import`](#import)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `@import` at-rules handling |
94-
| **[`modules`](#modules)** | `{Boolean\|String\|Object}` | `{auto: true}` | Allows to enables/disables or setup CSS Modules options |
95-
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |
96-
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports |
97-
| **[`esModule`](#esmodule)** | `{Boolean}` | `true` | Use ES modules syntax |
98-
| **[`exportType`](#exporttype)** | `{'array' \| 'css-style-sheet'}` | `array` | Allows exporting styles as array with modules or [constructable stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) (i.e. [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet)) |
61+
| Name | Type | Default | Description |
62+
| :-----------------------------------: | :------------------------------------------: | :----------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
63+
| **[`url`](#url)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `url()`/`image-set()` functions handling |
64+
| **[`import`](#import)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `@import` at-rules handling |
65+
| **[`modules`](#modules)** | `{Boolean\|String\|Object}` | `{auto: true}` | Allows to enables/disables or setup CSS Modules options |
66+
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |
67+
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports |
68+
| **[`esModule`](#esmodule)** | `{Boolean}` | `true` | Use ES modules syntax |
69+
| **[`exportType`](#exporttype)** | `{'array' \| 'string' \| 'css-style-sheet'}` | `array` | Allows exporting styles as array with modules, string or [constructable stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) (i.e. [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet)) |
9970

10071
### `url`
10172

@@ -1272,10 +1243,10 @@ module.exports = {
12721243

12731244
### `exportType`
12741245

1275-
Type: `'array' | 'css-style-sheet'`
1246+
Type: `'array' | 'string' | 'css-style-sheet'`
12761247
Default: `'array'`
12771248

1278-
Allows exporting styles as array with modules or [constructable stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) (i.e. [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet)).
1249+
Allows exporting styles as array with modules, string or [constructable stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) (i.e. [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet)).
12791250
Default value is `'array'`, i.e. loader exports array of modules with specific API which is used in `style-loader` or other.
12801251

12811252
**webpack.config.js**
@@ -1331,6 +1302,36 @@ module.exports = {
13311302
import "./styles.css";
13321303
```
13331304

1305+
#### `'string'`
1306+
1307+
> ⚠ You don't need [`style-loader`](https://github.com/webpack-contrib/style-loader) anymore, please remove it.
1308+
> ⚠ The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
1309+
1310+
The default export is `string`.
1311+
1312+
**webpack.config.js**
1313+
1314+
```js
1315+
module.exports = {
1316+
module: {
1317+
rules: [
1318+
{
1319+
test: /\.(sa|sc|c)ss$/i,
1320+
use: ["css-loader", "postcss-loader", "sass-loader"],
1321+
},
1322+
],
1323+
},
1324+
};
1325+
```
1326+
1327+
**src/index.js**
1328+
1329+
```js
1330+
import sheet from "./styles.css";
1331+
1332+
console.log(sheet);
1333+
```
1334+
13341335
#### `'css-style-sheet'`
13351336

13361337
> ⚠ `@import` rules not yet allowed, more [information](https://web.dev/css-module-scripts/#@import-rules-not-yet-allowed)

‎src/options.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -195,9 +195,9 @@
195195
"type": "boolean"
196196
},
197197
"exportType": {
198-
"description": "Allows exporting styles as array with modules or constructable stylesheet (i.e. `CSSStyleSheet`).",
198+
"description": "Allows exporting styles as array with modules, string or constructable stylesheet (i.e. `CSSStyleSheet`).",
199199
"link": "https://github.com/webpack-contrib/css-loader#exporttype",
200-
"enum": ["array", "css-style-sheet"]
200+
"enum": ["array", "string", "css-style-sheet"]
201201
}
202202
},
203203
"type": "object"

‎src/utils.js

+25-11
Original file line numberDiff line numberDiff line change
@@ -540,7 +540,8 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
540540

541541
// eslint-disable-next-line no-underscore-dangle
542542
const { outputOptions } = loaderContext._compilation;
543-
const isExportCSSStyleSheet = exportType === "css-style-sheet";
543+
const needNamedExport =
544+
exportType === "css-style-sheet" || exportType === "string";
544545
const modulesOptions = {
545546
auto,
546547
mode: "local",
@@ -555,9 +556,9 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
555556
localIdentRegExp: undefined,
556557
// eslint-disable-next-line no-undefined
557558
getLocalIdent: undefined,
558-
namedExport: isExportCSSStyleSheet || false,
559+
namedExport: needNamedExport || false,
559560
exportLocalsConvention:
560-
(rawModulesOptions.namedExport === true || isExportCSSStyleSheet) &&
561+
(rawModulesOptions.namedExport === true || needNamedExport) &&
561562
typeof rawModulesOptions.exportLocalsConvention === "undefined"
562563
? "camelCaseOnly"
563564
: "asIs",
@@ -625,16 +626,16 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
625626
modulesOptions.mode = modulesOptions.mode(loaderContext.resourcePath);
626627
}
627628

628-
if (isExportCSSStyleSheet) {
629+
if (needNamedExport) {
629630
if (rawOptions.esModule === false) {
630631
throw new Error(
631-
"The 'exportType' option with the 'css-style-sheet' value requires the 'esModules' option to be enabled"
632+
"The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'esModules' option to be enabled"
632633
);
633634
}
634635

635636
if (modulesOptions.namedExport === false) {
636637
throw new Error(
637-
"The 'exportType' option with the 'css-style-sheet' value requires the 'modules.namedExport' option to be enabled"
638+
"The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'modules.namedExport' option to be enabled"
638639
);
639640
}
640641
}
@@ -1142,11 +1143,24 @@ function getExportCode(exports, replacements, icssPluginUsed, options) {
11421143
"___CSS_LOADER_STYLE_SHEET___.replaceSync(___CSS_LOADER_EXPORT___.toString());\n";
11431144
}
11441145

1145-
code += `${options.esModule ? "export default" : "module.exports ="} ${
1146-
isCSSStyleSheetExport
1147-
? "___CSS_LOADER_STYLE_SHEET___"
1148-
: "___CSS_LOADER_EXPORT___"
1149-
};\n`;
1146+
let finalExport;
1147+
1148+
switch (options.exportType) {
1149+
case "string":
1150+
finalExport = "___CSS_LOADER_EXPORT___.toString()";
1151+
break;
1152+
case "css-style-sheet":
1153+
finalExport = "___CSS_LOADER_STYLE_SHEET___";
1154+
break;
1155+
default:
1156+
case "array":
1157+
finalExport = "___CSS_LOADER_EXPORT___";
1158+
break;
1159+
}
1160+
1161+
code += `${
1162+
options.esModule ? "export default" : "module.exports ="
1163+
} ${finalExport};\n`;
11501164

11511165
return code;
11521166
}

0 commit comments

Comments
 (0)