Support extract-text for styles via options.extract #443

timkelty · 2017-11-16T17:49:20Z

Fixes #439

Notes:

This extracts by default, so if you don't want to, you need to pass options.extract = false
Currently, other style rule loaders (e.g. https://github.com/barraponto/neutrino-middleware-postcss) would need to come before this one for the extraction to work.

eliperelman · 2017-11-16T23:09:15Z

packages/style-loader/index.js

-module.exports = ({ config }, options = {}) => config.module
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const merge = require('deepmerge');
+const { pick, mapValues } = require('lodash');


We typically use ramda in place of lodash, so let's swap that out here, or use native implementations where possible.

eliperelman · 2017-11-16T23:10:12Z

packages/style-loader/index.js

+    }));
+
+    options.extract.loader = Object.assign({
+      use: Object.values(pick(loadersByKey, useKeys)),


Object.values isn't available in Node.js v6, so you'll have to map the values out:

Object.keys(object).map(key => object[key])

eliperelman · 2017-11-16T23:10:29Z

packages/style-loader/index.js

+    }, options.extract.loader || {});
+
+    styleRule
+    .uses


Add 2 more spaces of indentation.

eliperelman · 2017-11-16T23:10:54Z

packages/style-loader/index.js

+        .when(options.cssHotLoader, use => use.options(options.cssHotLoader));
+    });
+
+    ExtractTextPlugin.extract(options.extract.loader)


Move .extract to the next line, and increase its indent 2 spaces.

eliperelman · 2017-11-16T23:11:35Z

packages/style-loader/index.js

+    ExtractTextPlugin.extract(options.extract.loader)
+    .forEach(({ loader, options }) => {
+      styleRule
+      .use(loader)


Indent 2 more spaces.

eliperelman · 2017-11-16T23:11:56Z

packages/style-loader/index.js

+        .options(options);
+    });
+
+    neutrino.config.plugin('extract')


Move .plugin to the next line and increase indent 2 spaces from the line above it.

eliperelman · 2017-11-16T23:12:30Z

packages/style-loader/index.js

+  const isBuild = neutrino.options.command === 'start';
+  const options = merge({
+    styleUseId: 'style',
+    cssHotLoaderUseId: 'cssHotLoader',


How would you feel about this just being hot, similar to the hot plugin?

Sure. Do you mean the the option name (cssHotLoaderUseId) or the value 'cssHotLoader'?

Not sure if we even need it configurable as an option, was just following suit with options.styleUseId, options.cssUseId

timkelty · 2017-11-17T04:07:25Z

I think I've tidied up all the indentation from the review…the only one I wasn't sure about was > Move .extract to the next line, and increase its indent 2 spaces.

This isn't a ChainedMap, so I wasn't sure why we'd break and indent…ExtractTextPlugin.extract() → array

timkelty · 2017-11-17T04:08:57Z

I refactored without lodash or ramda. If we end up wanting ramda, we'll probably just want { pick, map };

timkelty · 2017-11-17T04:29:29Z

I'm now passing options.hot directly to css-hot-loader (if it isn't just true), which is I think what you were getting at.

I'm also now passing options.hot from preset-web.

eliperelman

This is great, I'm so happy to see this! Just one small nit, and we can merge!

eliperelman · 2017-11-17T14:20:08Z

packages/style-loader/index.js

+        .clear()
+        .end()
+      .when(options.hot, (rule) => {
+        rule.use(options.cssHotLoaderUseId || 'cssHotLoader')


Yeah, my comment before wasn't very clear, my apologies. I was asking to name this ID from cssHotLoader to just hot, just the HotPlugin does in other middleware.

eliperelman · 2017-11-17T14:20:53Z

packages/web/index.js

@@ -24,6 +24,9 @@ module.exports = (neutrino, opts = {}) => {
    env: [],
    hot: true,
    html: {},
+    style: {
+      hot: opts.hot !== false


eliperelman · 2017-11-17T16:47:52Z

packages/image-loader/index.js

@@ -13,7 +13,7 @@ module.exports = ({ config }, options = {}) => {

  config.module
    .rule('img')
-    .test(/\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/)
+    .test(/\.(png|jpg|jpeg|gif|webp)(\?v=\d+\.\d+\.\d+)?$/)


Looks like the master commit got re-included here. You may want to:

git checkout master git pull upstream master git checkout style-loader-extract git checkout HEAD~1 git rebase master git commit -m "Pass options.hot instead of options.cssHotLoader" --amend git push -f origin style-loader-extract

Whups - yeah I rebased from master

eliperelman · 2017-11-17T18:16:32Z

@timkelty looks like the same thing happened to yargs 🤣

timkelty · 2017-11-17T18:38:17Z

@eliperelman ok, should just have commits for this PR now.

Will this be for 8.x then? (currently would be breaking, only because options.extract defaults to true)

eliperelman · 2017-11-17T18:51:51Z

Yep! Extraction itself is also breaking, since it would modify hashes of file output.

timkelty · 2017-11-17T18:54:31Z

Last thing, just for future reference - is this how you wanted this bit indented? https://github.com/timkelty/neutrino-dev/blob/10ca3bca6615bb8dae7bafe85dcdcd9a435d3586/packages/style-loader/index.js#L53-L60

I didn't expect you to want the .extract indented as it isn't a ChainedMap changing contexts like the others.

eliperelman · 2017-11-17T18:55:37Z

@timkelty yes, my indentation preferences just rely on readability, method chaining, and context.

timkelty · 2017-11-17T19:04:06Z

Yikes, that fell through the cracks! b777bb5

timkelty mentioned this pull request Nov 16, 2017

style-loader: support style extraction via extract-text-webpack-plugin #439

Closed

timkelty changed the title ~~WIP: Support extract-text for styles via options.extract~~ Support extract-text for styles via options.extract Nov 16, 2017

eliperelman suggested changes Nov 16, 2017

View reviewed changes

eliperelman approved these changes Nov 17, 2017

View reviewed changes

eliperelman reviewed Nov 17, 2017

View reviewed changes

ExtractText by default for styles, web

10ca3bc

timkelty force-pushed the style-loader-extract branch from 7b2b5a6 to 10ca3bc Compare November 17, 2017 18:37

eliperelman approved these changes Nov 17, 2017

View reviewed changes

Fix backward condition

b777bb5

eliperelman added the breaking change label Nov 17, 2017

eliperelman merged commit 5d509fa into neutrinojs:master Nov 17, 2017

edmorley mentioned this pull request Apr 18, 2018

CSS extraction includes css-hot-loader even in production #802

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support extract-text for styles via options.extract #443

Support extract-text for styles via options.extract #443

timkelty commented Nov 16, 2017 •

edited

eliperelman Nov 16, 2017

eliperelman Nov 16, 2017

eliperelman Nov 16, 2017

eliperelman Nov 16, 2017

eliperelman Nov 16, 2017

eliperelman Nov 16, 2017

eliperelman Nov 16, 2017

timkelty Nov 17, 2017

timkelty commented Nov 17, 2017

timkelty commented Nov 17, 2017

timkelty commented Nov 17, 2017

eliperelman left a comment

eliperelman Nov 17, 2017

eliperelman Nov 17, 2017

eliperelman Nov 17, 2017

timkelty Nov 17, 2017

eliperelman commented Nov 17, 2017

timkelty commented Nov 17, 2017 •

edited

eliperelman commented Nov 17, 2017

timkelty commented Nov 17, 2017

eliperelman commented Nov 17, 2017

timkelty commented Nov 17, 2017

Support extract-text for styles via options.extract #443

Support extract-text for styles via options.extract #443

Conversation

timkelty commented Nov 16, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timkelty commented Nov 17, 2017

timkelty commented Nov 17, 2017

timkelty commented Nov 17, 2017

eliperelman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eliperelman commented Nov 17, 2017

timkelty commented Nov 17, 2017 • edited

eliperelman commented Nov 17, 2017

timkelty commented Nov 17, 2017

eliperelman commented Nov 17, 2017

timkelty commented Nov 17, 2017

timkelty commented Nov 16, 2017 •

edited

timkelty commented Nov 17, 2017 •

edited