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.

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: exportOnlyLocals option #824

Merged
merged 1 commit into from Nov 29, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 17 additions & 2 deletions README.md
Expand Up @@ -102,6 +102,7 @@ It's useful when you, for instance, need to post process the CSS as a string.
|**[`sourceMap`](#sourcemap)**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
|**[`camelCase`](#camelcase)**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase|
|**[`importLoaders`](#importloaders)**|`{Number}`|`0`|Number of loaders applied before CSS loader|
|**[`exportOnlyLocals`](#exportonlylocals)**|`{Boolean}`|`false`|Export only locals|

### `url`

Expand Down Expand Up @@ -277,8 +278,6 @@ You can also specify the absolute path to your custom `getLocalIdent` function t
}
```

> ℹ️ For prerendering with extract-text-webpack-plugin you should use `css-loader/locals` instead of `style-loader!css-loader` **in the prerendering bundle**. It doesn't embed CSS but only exports the identifier mappings.

### `sourceMap`

To include source maps set the `sourceMap` option.
Expand Down Expand Up @@ -352,6 +351,22 @@ The query parameter `importLoaders` allows you to configure how many loaders bef

This may change in the future when the module system (i. e. webpack) supports loader matching by origin.

### `exportOnlyLocals`

Export only locals (**useful** when you use **css modules**).
For pre-rendering with `mini-css-extract-plugin` you should use this option instead of `style-loader!css-loader` **in the pre-rendering bundle**.
It doesn't embed CSS but only exports the identifier mappings.

**webpack.config.js**
```js
{
loader: 'css-loader',
options: {
exportOnlyLocals: true
}
}
```

<h2 align="center">Examples</h2>

### Assets
Expand Down
28 changes: 21 additions & 7 deletions lib/loader.js
Expand Up @@ -47,11 +47,30 @@ module.exports = function loader(content, map) {
return callback(err);
}

let cssAsString = JSON.stringify(result.source);

// for importing CSS
const importUrlPrefix = getImportPrefix(this, options);

let exportJs = compileExports(
result,
placeholderImportItemReplacer(
this,
result,
importUrlPrefix,
options.exportOnlyLocals
),
options.camelCase
);

if (options.exportOnlyLocals) {
if (exportJs) {
exportJs = `module.exports = ${exportJs};`;
}

return callback(null, exportJs);
}

let cssAsString = JSON.stringify(result.source);

const alreadyImported = {};
const importJs = result.importItems
.filter((imp) => {
Expand Down Expand Up @@ -127,11 +146,6 @@ module.exports = function loader(content, map) {
});
}

let exportJs = compileExports(
result,
placeholderImportItemReplacer(this, result, importUrlPrefix),
options.camelCase
);
if (exportJs) {
exportJs = `exports.locals = ${exportJs};`;
}
Expand Down
45 changes: 0 additions & 45 deletions lib/localsLoader.js

This file was deleted.

5 changes: 0 additions & 5 deletions locals.js

This file was deleted.