Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: esModule option #1026

Merged
merged 1 commit into from
Dec 17, 2019
Merged

feat: esModule option #1026

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ module.exports = {
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Enables/Disables or setups number of loaders applied before CSS loader |
| **[`localsConvention`](#localsconvention)** | `{String}` | `'asIs'` | Style of exported classnames |
| **[`onlyLocals`](#onlylocals)** | `{Boolean}` | `false` | Export only locals |
| **[`esModule`](#esmodule)** | `{Boolean}` | `false` | Use ES modules syntax |

### `url`

Expand Down Expand Up @@ -857,6 +858,34 @@ module.exports = {
};
```

### `esModule`

Type: `Boolean`
Default: `false`

By default, `css-loader` generates JS modules that use the CommonJS modules syntax.
There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).

You can enable a ES module syntax using:

**webpack.config.js**

```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: 'css-loader',
options: {
esModule: true,
},
},
],
},
};
```

## Examples

### Assets
Expand Down
12 changes: 6 additions & 6 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 7 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,12 +107,16 @@ export default function loader(content, map, meta) {
}

const { importLoaders, localsConvention } = options;
const esModule =
typeof options.esModule !== 'undefined' ? options.esModule : false;

const importCode = getImportCode(
this,
imports,
exportType,
sourceMap,
importLoaders
importLoaders,
esModule
);
const moduleCode = getModuleCode(
this,
Expand All @@ -126,7 +130,8 @@ export default function loader(content, map, meta) {
exports,
exportType,
replacers,
localsConvention
localsConvention,
esModule
);

return callback(null, [importCode, moduleCode, exportCode].join(''));
Expand Down
4 changes: 4 additions & 0 deletions src/options.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,10 @@
"onlyLocals": {
"description": "Export only locals (https://github.com/webpack-contrib/css-loader#onlylocals).",
"type": "boolean"
},
"esModule": {
"description": "Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule).",
"type": "boolean"
}
},
"type": "object"
Expand Down
87 changes: 62 additions & 25 deletions src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,8 @@ function getImportCode(
imports,
exportType,
sourceMap,
importLoaders
importLoaders,
esModule
) {
const importItems = [];
const codeItems = [];
Expand All @@ -216,12 +217,21 @@ function getImportCode(

if (exportType === 'full') {
importItems.push(
`var ___CSS_LOADER_API_IMPORT___ = require(${stringifyRequest(
loaderContext,
require.resolve('./runtime/api')
)});`
esModule
? `import ___CSS_LOADER_API_IMPORT___ from ${stringifyRequest(
loaderContext,
require.resolve('./runtime/api')
)};`
: `var ___CSS_LOADER_API_IMPORT___ = require(${stringifyRequest(
loaderContext,
require.resolve('./runtime/api')
)});`
);
codeItems.push(
esModule
? `var exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});`
: `exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});`
);
codeItems.push(`exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});`);
}

imports.forEach((item) => {
Expand Down Expand Up @@ -251,10 +261,15 @@ function getImportCode(

importName = `___CSS_LOADER_AT_RULE_IMPORT_${atRuleImportNames.size}___`;
importItems.push(
`var ${importName} = require(${stringifyRequest(
loaderContext,
importPrefix + url
)});`
esModule
? `import ${importName} from ${stringifyRequest(
loaderContext,
importPrefix + url
)};`
: `var ${importName} = require(${stringifyRequest(
loaderContext,
importPrefix + url
)});`
);

atRuleImportNames.set(url, importName);
Expand All @@ -267,10 +282,15 @@ function getImportCode(
{
if (urlImportNames.size === 0) {
importItems.push(
`var ___CSS_LOADER_GET_URL_IMPORT___ = require(${stringifyRequest(
loaderContext,
require.resolve('./runtime/getUrl.js')
)});`
esModule
? `import ___CSS_LOADER_GET_URL_IMPORT___ from ${stringifyRequest(
loaderContext,
require.resolve('./runtime/getUrl.js')
)};`
: `var ___CSS_LOADER_GET_URL_IMPORT___ = require(${stringifyRequest(
loaderContext,
require.resolve('./runtime/getUrl.js')
)});`
);
}

Expand All @@ -281,10 +301,15 @@ function getImportCode(
if (!importName) {
importName = `___CSS_LOADER_URL_IMPORT_${urlImportNames.size}___`;
importItems.push(
`var ${importName} = require(${stringifyRequest(
loaderContext,
url
)});`
esModule
? `import ${importName} from ${stringifyRequest(
loaderContext,
url
)};`
: `var ${importName} = require(${stringifyRequest(
loaderContext,
url
)});`
);

urlImportNames.set(url, importName);
Expand All @@ -311,10 +336,15 @@ function getImportCode(
}

importItems.push(
`var ${importName} = require(${stringifyRequest(
loaderContext,
importPrefix + url
)});`
esModule
? `import ${importName} from ${stringifyRequest(
loaderContext,
importPrefix + url
)};`
: `var ${importName} = require(${stringifyRequest(
loaderContext,
importPrefix + url
)});`
);

if (exportType === 'full') {
Expand Down Expand Up @@ -380,7 +410,8 @@ function getExportCode(
exports,
exportType,
replacers,
localsConvention
localsConvention,
esModule
) {
const exportItems = [];
let exportLocalsCode;
Expand Down Expand Up @@ -448,13 +479,19 @@ function getExportCode(
}

if (exportType === 'locals') {
exportItems.push(`module.exports = {\n${exportLocalsCode}\n};`);
exportItems.push(
`${
esModule ? 'export default' : 'module.exports ='
} {\n${exportLocalsCode}\n};`
);
} else {
if (exportLocalsCode) {
exportItems.push(`exports.locals = {\n${exportLocalsCode}\n};`);
}

exportItems.push('module.exports = exports;');
exportItems.push(
`${esModule ? 'export default' : 'module.exports ='} exports;`
);
}

return `// Exports\n${exportItems.join('\n')}\n`;
Expand Down
Loading