Skip to content

Commit

Permalink
feat: added string value for the exportType option
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait authored Sep 18, 2021
1 parent c6d2066 commit c323610
Show file tree
Hide file tree
Showing 10 changed files with 486 additions and 62 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ All notable changes to this project will be documented in this file. See [standa

### Features

* 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))
* 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))

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

Expand Down
81 changes: 41 additions & 40 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,48 +54,19 @@ module.exports = {

And run `webpack` via your preferred method.

### `toString`

You can also use the css-loader results directly as a string, such as in Angular's component style.

**webpack.config.js**

```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["to-string-loader", "css-loader"],
},
],
},
};
```

or

```js
const css = require("./test.css").toString();

console.log(css); // {String}
```

If there are SourceMaps, they will also be included in the result string.

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).

## Options

| Name | Type | Default | Description |
| :-----------------------------------: | :------------------------------: | :----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **[`url`](#url)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `url()`/`image-set()` functions handling |
| **[`import`](#import)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `@import` at-rules handling |
| **[`modules`](#modules)** | `{Boolean\|String\|Object}` | `{auto: true}` | Allows to enables/disables or setup CSS Modules options |
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports |
| **[`esModule`](#esmodule)** | `{Boolean}` | `true` | Use ES modules syntax |
| **[`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)) |
| Name | Type | Default | Description |
| :-----------------------------------: | :------------------------------------------: | :----------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **[`url`](#url)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `url()`/`image-set()` functions handling |
| **[`import`](#import)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `@import` at-rules handling |
| **[`modules`](#modules)** | `{Boolean\|String\|Object}` | `{auto: true}` | Allows to enables/disables or setup CSS Modules options |
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports |
| **[`esModule`](#esmodule)** | `{Boolean}` | `true` | Use ES modules syntax |
| **[`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)) |

### `url`

Expand Down Expand Up @@ -1272,10 +1243,10 @@ module.exports = {

### `exportType`

Type: `'array' | 'css-style-sheet'`
Type: `'array' | 'string' | 'css-style-sheet'`
Default: `'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)).
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)).
Default value is `'array'`, i.e. loader exports array of modules with specific API which is used in `style-loader` or other.

**webpack.config.js**
Expand Down Expand Up @@ -1331,6 +1302,36 @@ module.exports = {
import "./styles.css";
```

#### `'string'`

> ⚠ You don't need [`style-loader`](https://github.com/webpack-contrib/style-loader) anymore, please remove it.
> ⚠ 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).
The default export is `string`.

**webpack.config.js**

```js
module.exports = {
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/i,
use: ["css-loader", "postcss-loader", "sass-loader"],
},
],
},
};
```

**src/index.js**

```js
import sheet from "./styles.css";

console.log(sheet);
```

#### `'css-style-sheet'`

> ⚠ `@import` rules not yet allowed, more [information](https://web.dev/css-module-scripts/#@import-rules-not-yet-allowed)
Expand Down
4 changes: 2 additions & 2 deletions src/options.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,9 +195,9 @@
"type": "boolean"
},
"exportType": {
"description": "Allows exporting styles as array with modules or constructable stylesheet (i.e. `CSSStyleSheet`).",
"description": "Allows exporting styles as array with modules, string or constructable stylesheet (i.e. `CSSStyleSheet`).",
"link": "https://github.com/webpack-contrib/css-loader#exporttype",
"enum": ["array", "css-style-sheet"]
"enum": ["array", "string", "css-style-sheet"]
}
},
"type": "object"
Expand Down
36 changes: 25 additions & 11 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -540,7 +540,8 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {

// eslint-disable-next-line no-underscore-dangle
const { outputOptions } = loaderContext._compilation;
const isExportCSSStyleSheet = exportType === "css-style-sheet";
const needNamedExport =
exportType === "css-style-sheet" || exportType === "string";
const modulesOptions = {
auto,
mode: "local",
Expand All @@ -555,9 +556,9 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
localIdentRegExp: undefined,
// eslint-disable-next-line no-undefined
getLocalIdent: undefined,
namedExport: isExportCSSStyleSheet || false,
namedExport: needNamedExport || false,
exportLocalsConvention:
(rawModulesOptions.namedExport === true || isExportCSSStyleSheet) &&
(rawModulesOptions.namedExport === true || needNamedExport) &&
typeof rawModulesOptions.exportLocalsConvention === "undefined"
? "camelCaseOnly"
: "asIs",
Expand Down Expand Up @@ -625,16 +626,16 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
modulesOptions.mode = modulesOptions.mode(loaderContext.resourcePath);
}

if (isExportCSSStyleSheet) {
if (needNamedExport) {
if (rawOptions.esModule === false) {
throw new Error(
"The 'exportType' option with the 'css-style-sheet' value requires the 'esModules' option to be enabled"
"The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'esModules' option to be enabled"
);
}

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

code += `${options.esModule ? "export default" : "module.exports ="} ${
isCSSStyleSheetExport
? "___CSS_LOADER_STYLE_SHEET___"
: "___CSS_LOADER_EXPORT___"
};\n`;
let finalExport;

switch (options.exportType) {
case "string":
finalExport = "___CSS_LOADER_EXPORT___.toString()";
break;
case "css-style-sheet":
finalExport = "___CSS_LOADER_STYLE_SHEET___";
break;
default:
case "array":
finalExport = "___CSS_LOADER_EXPORT___";
break;
}

code += `${
options.esModule ? "export default" : "module.exports ="
} ${finalExport};\n`;

return code;
}
Expand Down
Loading

0 comments on commit c323610

Please sign in to comment.