Added the possibility to configure the StyleLoader via the method Enc…

index.js

@@ -1294,6 +1294,28 @@ class Encore {
         return this;
     }
 
+    /**
+     * Configure the style-loader.
+     * The style-loader is used only if you also call Encore. disableCssExtraction().
+     *
+     * https://github.com/webpack-contrib/style-loader#options
+     *
+     * ```
+     * Encore.configureStyleLoader(function(config) {
+     *     // change the config
+     *     // config.injectType = 'singletonStyleTag';
+     * });
+     * ```
+     *
+     * @param {function} callback
+     * @returns {Encore}
+     */
+    configureStyleLoader(callback) {
+        webpackConfig.configureStyleLoader(callback);
+
+        return this;
+    }
+
     /**
      * Call this to change how the name of each output
      * file is generated.

lib/WebpackConfig.js

@@ -146,6 +146,7 @@ class WebpackConfig {
         this.babelConfigurationCallback = () => {};
         this.babelPresetEnvOptionsCallback = () => {};
         this.cssLoaderConfigurationCallback = () => {};
+        this.styleLoaderConfigurationCallback = () => {};
         this.splitChunksConfigurationCallback = () => {};
         this.watchOptionsConfigurationCallback = () => {};
         this.devServerOptionsConfigurationCallback = () => {};
@@ -472,6 +473,14 @@ class WebpackConfig {
         this.cssLoaderConfigurationCallback = callback;
     }
 
+    configureStyleLoader(callback) {
+        if (typeof callback !== 'function') {
+            throw new Error('Argument 1 to configureStyleLoader() must be a callback function.');
+        }
+
+        this.styleLoaderConfigurationCallback = callback;
+    }
+
     enableSingleRuntimeChunk() {
         this.shouldUseSingleRuntimeChunk = true;
     }

lib/loaders/css-extract.js

@@ -11,6 +11,7 @@
 
 const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const applyOptionsCallback = require('../utils/apply-options-callback');
 
 module.exports = {
     /**
@@ -22,10 +23,15 @@ module.exports = {
      */
     prependLoaders(webpackConfig, loaders) {
         if (!webpackConfig.extractCss) {
+
+            const options = {};
+
             // If the CSS extraction is disabled, use the
             // style-loader instead.
             return [{
                 loader: 'style-loader',
+                options: applyOptionsCallback(webpackConfig.styleLoaderConfigurationCallback, options)
+
             }, ...loaders];
         }
 

test/functional.js

@@ -2913,6 +2913,33 @@ module.exports = {
                     done();
                 });
             });
+
+            it('With CSS extraction disabled and with options callback of the StyleLoader', (done) => {
+                const config = createWebpackConfig('build', 'dev');
+                config.setPublicPath('/build');
+                config.disableSingleRuntimeChunk();
+                config.addEntry('main', './js/css_import');
+                config.disableCssExtraction();
+                config.configureStyleLoader((options) => {
+                    options.attributes = { id: 'TESTING_ATTRIBUTES' };
+                });
+
+                testSetup.runWebpack(config, (webpackAssert) => {
+                    expect(config.outputPath).to.be.a.directory()
+                        .with.files([
+                            'manifest.json',
+                            'entrypoints.json',
+                            'main.js'
+                        ]);
+
+                    webpackAssert.assertOutputFileContains(
+                        'main.js',
+                        'TESTING_ATTRIBUTES'
+                    );
+
+                    done();
+                });
+            });
         });
 
         if (!process.env.DISABLE_UNSTABLE_CHECKS) {