Skip to content
This repository has been archived by the owner on Feb 18, 2024. It is now read-only.

Allow style-loader to accept loaders #566

Merged
merged 4 commits into from
Dec 8, 2017
Merged

Allow style-loader to accept loaders #566

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c5553df
Pass loaders
Dec 6, 2017
9149de0
Allow users to pass loaders, adjust `importLoaders`
Dec 7, 2017
3414cd1
Allow loaders to be one dimensional, assign dummy useId.
Dec 7, 2017
c60f5e5
Code style fixes.
Dec 8, 2017
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
44 changes: 32 additions & 12 deletions packages/style-loader/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,14 @@ module.exports = (neutrino, opts = {}) => {
ruleId: 'style',
styleUseId: 'style',
cssUseId: 'css',
css: { importLoaders: 0 },
style: {},
hot: true,
hotUseId: 'hot',
modules: true,
modulesSuffix: '-modules',
modulesTest: cssModulesTest,
loaders: [],
extractId: 'extract',
extract: {
plugin: {
Expand Down Expand Up @@ -52,23 +55,40 @@ module.exports = (neutrino, opts = {}) => {
}

rules.forEach(options => {
neutrino.config.module
.rule(options.ruleId)
const styleRule = neutrino.config.module.rule(options.ruleId);
const loaders = [{
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's mess with the formatting a little here:

const loaders = [
  {
    ...
  },
  {
    ...
  },
  ...options.loaders
]
.map(() => {
  ...
});

loader: require.resolve('style-loader'),
options: options.style,
useId: options.styleUseId
},
{
loader: require.resolve('css-loader'),
options: Object.assign(options.css, {
importLoaders: options.css.importLoaders + options.loaders.length
}),
useId: options.cssUseId
}, ...options.loaders]
.map((loader, index) => {
const obj = typeof loader === 'object' ? loader : { loader };

return Object.assign(obj, {
useId: obj.useId || `${options.cssUseId}-${index}`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this, but this will need to be clearly noted in the documentation, that without the useId, it will generate an id in this format.

Copy link
Member

@eliperelman eliperelman Dec 8, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I already have the docs written in #574.

});
});

loaders.forEach(loader => {
styleRule
.test(options.test)
.use(options.styleUseId)
.loader(require.resolve('style-loader'))
.when(options.style, use => use.options(options.style))
.end()
.use(options.cssUseId)
.loader(require.resolve('css-loader'))
.when(options.css, use => use.options(options.css));
.use(loader.useId)
.loader(loader.loader)
.when(loader.options, use => use.options(loader.options));
});

if (options.extract) {
const styleRule = neutrino.config.module.rule(options.ruleId);
const styleEntries = styleRule.uses.entries();
const useKeys = Object.keys(styleEntries).filter(key => key !== options.styleUseId);
const useIds = Object.keys(styleEntries).filter(key => key !== options.styleUseId);
const extractLoader = Object.assign({
use: useKeys.map(key => ({
use: useIds.map(key => ({
loader: styleEntries[key].get('loader'),
options: styleEntries[key].get('options')
})),
Expand Down