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

Conversation

timkelty
Copy link
Contributor

@timkelty timkelty commented Dec 7, 2017

This adds a loaders option to style-loader, in which users may pass their own custom css loaders (postcss, sass, etc)

Why?

Example usage

module.exports = {
  use: [
    [
      '@neutrinojs/web',
      {
        style: {
          loaders: [

            // No options, auto-generated useId (css-*)
            require.resolve('postcss-loader'),

            // With options, specified useId
            {
              useId: 'postcss',
              loader: require.resolve('postcss-loader'),
              options: {}
            }
          ]
        }
      }
    ],
  ]
};
  • The result is the loaders added in order: style, css, sass-loader, postcss-loader.
  • css-loaders's importLoaders has been set properly, taking into account the # loaders your have, and options.modules.
  • Everything still works with extract-text, and HMR :)

Related: #20

@timkelty timkelty self-assigned this Dec 7, 2017
Copy link
Member

@eliperelman eliperelman left a comment

Choose a reason for hiding this comment

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

First, let me say that this is sooooo what I've been wanting. This is exactly the direction this middleware needs to go.

My only concern is making sure we have appropriate docs for this. Otherwise, this is great! 😍

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(() => {
  ...
});

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

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.

@eliperelman eliperelman merged commit 6434219 into neutrinojs:master Dec 8, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Development

Successfully merging this pull request may close these issues.

2 participants