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

Option to not use style-loader #68

Closed
cheald opened this issue Feb 20, 2022 · 5 comments
Closed

Option to not use style-loader #68

cheald opened this issue Feb 20, 2022 · 5 comments

Comments

@cheald
Copy link
Contributor

cheald commented Feb 20, 2022

Ruby version: 2.7.4
Rails version: ~> 5.2.6
Webpacker version: 6.1.1

Desired behavior:

mini-css-extract-plugin is capable of HMR now. I'd like the ability to opt into just using it all the time, even when HMR is set in webpacker.yml. I'd like to get style-loader out of the dev pipeline so that my development and production environments more closely match, while retaining HMR. It turns out this isn't too hard!

Actual behavior:

Currently, hmr: true in webpacker.yml sets Webpack.inlining_css?, which prevents stylesheet_pack_tag form emitting <link> tags for CSS, on the assumption that style-loader is in play. I monkey patched my install with:

class Webpacker::Instance
  def inlining_css?
    false
  end
end

And my Webpack css loader with:

// Swap all style-loader rules for mini-css-extract-plugin, even if HMR. MCEP supports HMR now.
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
webpackConfig.module.rules.forEach((rule) => {
  if ("test.css".match(rule.test) || "test.scss".match(rule.test)) {
    rule.use = rule.use.map((loader) => {
      if (loader === "style-loader") {
        return MiniCssExtractPlugin.loader;
      } else {
        return loader;
      }
    });
  }
});

and it works just dandy.

The fix should be as simple as allowing the explicit disabling of inlining css (perhaps inlineCss: false in webpacker.yml), then updating the Webpack::Instance#inlining_css? method and its partner in shakapacker/package/inliningCss.js to respect the flag if it's set.

@justin808
Copy link
Member

@cheald can you submit a PR? This sounds reasonable.

Yes, we can have inline_css inside of the HMR config.

@tomdracz, thoughts?

cheald added a commit to cheald/shakapacker that referenced this issue Feb 20, 2022
…ll cause only mini-css-extract-plugin to be used. See shakacode#68
@cheald
Copy link
Contributor Author

cheald commented Feb 20, 2022

Sure, I whipped something up. If you have further direction on what you'd like to see, I'm happy to further improve it.

cheald added a commit to cheald/shakapacker that referenced this issue Feb 21, 2022
…ll cause only mini-css-extract-plugin to be used. See shakacode#68
justin808 pushed a commit that referenced this issue Feb 28, 2022
* inline_css: false will cause only mini-css-extract-plugin to be used. See #68
* Fix readme and add inline_css to the config template
@matoni109
Copy link

matoni109 commented Mar 7, 2022

Ruby version: 2.5.0
Rails version: ~> 5.2.3
Webpacker version: 6.0.0.rc.5

@cheald just i've got a rails 5 setup just wondering where you placed below code ?

I've tried lib/webpacker/instance_methods.rb

class Webpacker::Instance
  def inlining_css?
    false
  end
end

@justin808
Copy link
Member

@matoni109 please see comments here: https://github.com/shakacode/shakapacker/pull/75/files

@tomdracz
Copy link
Collaborator

@justin808 good to close!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants