feature #539 Add Encore.disableCssExtraction() to the public API (Lyr…

…kan)

This PR was merged into the master branch.

Discussion
----------

Add Encore.disableCssExtraction() to the public API

This PR adds an `Encore.disableCssExtraction()` method that allows to disable the `mini-css-extract-plugin` and use the `style-loader` instead.

It can be used to solve various problems that, until now, required a really ugly workaround that relied on our internal implementation (for instance the following commit probably broke some builds that used previous versions of it: 6867443#diff-8beacd21a12ca072bafa4e8e3f1aae6b).

Related issues: #3, #256, #348, #527

Commits
-------

347feed Add Encore.disableCssExtraction() to the public API

fixtures/js/css_import.js

@@ -0,0 +1,2 @@
+
+require('./../css/h1_style.css');

index.js

@@ -1046,6 +1046,22 @@ class Encore {
         return this;
     }
 
+    /**
+     * Call this if you don't want imported CSS to be extracted
+     * into a .css file. All your styles will then be injected
+     * into the page by your JS code.
+     *
+     * Internally, this disables the mini-css-extract-plugin
+     * and uses the style-loader instead.
+     *
+     * @returns {Encore}
+     */
+    disableCssExtraction() {
+        webpackConfig.disableCssExtraction();
+
+        return this;
+    }
+
     /**
      * Call this to change how the name of each output
      * file is generated.

lib/WebpackConfig.js

@@ -53,6 +53,7 @@ class WebpackConfig {
         this.useVersioning = false;
         this.useSourceMaps = false;
         this.cleanupOutput = false;
+        this.extractCss = true;
         this.useImagesLoader = true;
         this.useFontsLoader = true;
         this.usePostCssLoader = false;
@@ -657,6 +658,10 @@ class WebpackConfig {
         this.useFontsLoader = false;
     }
 
+    disableCssExtraction() {
+        this.extractCss = false;
+    }
+
     configureFilenames(configuredFilenames = {}) {
         if (typeof configuredFilenames !== 'object') {
             throw new Error('Argument 1 to configureFilenames() must be an object.');

lib/config-generator.js

@@ -397,7 +397,9 @@ class ConfigGenerator {
     buildPluginsConfig() {
         const plugins = [];
 
-        miniCssExtractPluginUtil(plugins, this.webpackConfig);
+        if (this.webpackConfig.extractCss) {
+            miniCssExtractPluginUtil(plugins, this.webpackConfig);
+        }
 
         // register the pure-style entries that should be deleted
         deleteUnusedEntriesPluginUtil(plugins, this.webpackConfig);

lib/loaders/css-extract.js

@@ -20,6 +20,17 @@ module.exports = {
      * @return {Array}
      */
     prependLoaders(webpackConfig, loaders) {
+        if (!webpackConfig.extractCss) {
+            // If the CSS extraction is disabled, use the
+            // style-loader instead.
+            return [{
+                loader: 'style-loader',
+                options: {
+                    sourceMap: webpackConfig.useSourceMaps,
+                }
+            }, ...loaders];
+        }
+
         return [MiniCssExtractPlugin.loader, ...loaders];
     }
 };

test/WebpackConfig.js

@@ -1033,6 +1033,21 @@ describe('WebpackConfig object', () => {
         });
     });
 
+    describe('disableCssExtraction', () => {
+        it('By default the CSS extraction is enabled', () => {
+            const config = createConfig();
+
+            expect(config.extractCss).to.be.true;
+        });
+
+        it('Calling it disables the CSS extraction', () => {
+            const config = createConfig();
+            config.disableCssExtraction();
+
+            expect(config.extractCss).to.be.false;
+        });
+    });
+
     describe('configureFilenames', () => {
         it('Calling method sets it', () => {
             const config = createConfig();

test/functional.js

@@ -2204,5 +2204,55 @@ module.exports = {
                 });
             });
         });
+
+        describe('CSS extraction', () => {
+            it('With CSS extraction enabled', (done) => {
+                const config = createWebpackConfig('build', 'dev');
+                config.setPublicPath('/build');
+                config.disableSingleRuntimeChunk();
+                config.addEntry('main', './js/css_import');
+
+                testSetup.runWebpack(config, (webpackAssert) => {
+                    expect(config.outputPath).to.be.a.directory()
+                        .with.files([
+                            'manifest.json',
+                            'entrypoints.json',
+                            'main.js',
+                            'main.css',
+                        ]);
+
+                    webpackAssert.assertOutputFileContains(
+                        'main.css',
+                        'font-size: 50px;'
+                    );
+
+                    done();
+                });
+            });
+
+            it('With CSS extraction disabled', (done) => {
+                const config = createWebpackConfig('build', 'dev');
+                config.setPublicPath('/build');
+                config.disableSingleRuntimeChunk();
+                config.addEntry('main', './js/css_import');
+                config.disableCssExtraction();
+
+                testSetup.runWebpack(config, (webpackAssert) => {
+                    expect(config.outputPath).to.be.a.directory()
+                        .with.files([
+                            'manifest.json',
+                            'entrypoints.json',
+                            'main.js'
+                        ]);
+
+                    webpackAssert.assertOutputFileContains(
+                        'main.js',
+                        'font-size: 50px;'
+                    );
+
+                    done();
+                });
+            });
+        });
     });
 });

test/index.js

@@ -324,6 +324,15 @@ describe('Public API', () => {
 
     });
 
+    describe('disableCssExtraction', () => {
+
+        it('must return the API object', () => {
+            const returnedValue = api.disableCssExtraction();
+            expect(returnedValue).to.equal(api);
+        });
+
+    });
+
     describe('configureFilenames', () => {
 
         it('must return the API object', () => {