Skip to content

Commit

Permalink
feat: esModule option (#1026)
Browse files Browse the repository at this point in the history
  • Loading branch information
evilebottnawi authored Dec 17, 2019
1 parent 23bc1e9 commit d358cdb
Show file tree
Hide file tree
Showing 17 changed files with 704 additions and 43 deletions.
29 changes: 29 additions & 0 deletions README.md
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

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

0 comments on commit d358cdb

Please sign in to comment.