Inlined styles link element is not removed from the HTML template

[nathanosdev]

I'm using a very basic config copied from the readme and everything works fine, but the link tag for my CSS file is still present in the HTML template causing a 404 error in the browser.

[numical]

Can you give me the config and any html template you are using?

[dictions]

I'm getting the same thing. The inlined CSS is not removed as a external CSS file chunk.

const criticalCSS = new ExtractTextPlugin('[name].critical.css');
const entrypointCSS = new ExtractTextPlugin('[name].css');

const appCriticalCssLoader = {
	test: /\.critical\.scss$/,
	use: criticalCSS.extract(...),
	include: path.resolve(ROOT_DIR, 'src')
};

const appCssLoader = {
	test: /^(?!.*\.critical).*\.scss$/,
	use: entrypointCSS.extract(...),
	include: path.resolve(ROOT_DIR, 'src')
};

var config = {
	module: {
		rules: [
			...
			appCriticalCssLoader,
			appCssLoader,
		]
	},
	entry: {
		'client': './client.js',
		
	},
        ...
	plugins: [
		// Make App vendor chunk
		new webpack.optimize.CommonsChunkPlugin({
			name: 'vendor',
			chunks: ['client'],
			minChunks: function(module) {
				return isVendor(module);
			}
		}),
		// Create app index template
		new HtmlWebpackPlugin({
			template: 'templates/app.ejs',
			filename: '../app.html', // place at root public folder
			inject: false,
			chunks: [
				'vendor',
				'client'
			],
			minify: htmlMinifySettings
		}),
		// External CSS Files
		criticalCSS,		
		entrypointCSS,
		// Inline Critical CSS
		new StyleExtHtmlWebpackPlugin({
			chunks: ['vendor', 'client'],
			cssRegExp: appCriticalCssLoader.test,
			minify: true,
			position: 'head-top',
		}),
	]
}

[orenklein]

Same problem here. I use pretty simple config:

{
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: [
            new webpack.DefinePlugin({ 
                'process.env': {
                    'NODE_ENV': JSON.stringify('production')
                },
            }),
            new HtmlWebpackPlugin({
                hash: true,
                template: 'src/index.html'
            }),
            new ExtractTextPlugin("styles.css"),
            new StyleExtHtmlWebpackPlugin(),
            new webpack.optimize.UglifyJsPlugin(), 
            new webpack.optimize.AggressiveMergingPlugin(),
        ],
        module: {
            rules: [
                {
                    test: /\.html$/,
                    exclude: /node_modules/,
                    loader: 'html-loader'
                },
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [
                            {
                                loader: "css-loader",
                                options: { importLoaders: 1 }
                            },
                            "postcss-loader"
                        ]
                    })
                },
                {
                    test: /\.(png|svg|jpg|gif)$/,
                    use: [
                        'file-loader'
                    ]
                },
                {
                    test: /\.js$/,
                    include: [
                        path.resolve(__dirname, "src"),
                    ],
                    // exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',

                        options: {
                            presets: ['es2015', 'env'],
                            plugins: ['transform-runtime']
                        }
                    },

                }

            ]
        }
    };

[medynski]

With webpack 1.12.13 everything was fine, but now we are using webpack 3.8.1 and we have the same problem. 😢

[numical]

Hi - @medi71, @orenklein, @dictions, @AnimaMundi - can i confirm you are all using the latest version v3.4.3?
Also can I check that none of your html templates have explicit elements for stylesheets?

[medynski]

Yes, we are using the latest version 3.4.3.

[nathanosdev]

Sorry I haven't been much help here, I actually ended up abandoning this approach. I was using the latest version of Webpack and this plugin at the time of writing and did not have any explicit elements for stylesheets.

My index.html looks like this:

<!DOCTYPE html>
<html>

<head>
  <base href="/">

  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta charset="UTF-8">

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <title>My Project</title>
</head>

<body>
  <my-app>Loading...</my-app>
</body>

</html>

My Webpack config was extremely basic:

  new HtmlWebpackPlugin({
    template: 'app/index.html'
  }),
  new ExtractTextWebpackPlugin('styles.css'),
  new StyleExtHtmlWebpackPlugin()

[nathanosdev]

That's not my whole Webpack config, just the plugins section

[numical]

Thanks for the feedback. I'm struggling to reproduce the problem in my unit tests - once I can I'll hopefully be be able to come up with a fix.

[orenklein]

@numical I debugged it.
isCssLinkTag function at replaceTag.js is returning false when HtmlWebpackPlugin hash option is set to true because stylePath is not equal to stylePath?hash, therefore the link tag is not removed. (https://github.com/numical/style-ext-html-webpack-plugin/blob/master/lib/replaceTag.js#L46)

[numical]

Thanks @orenklein - I have incorporated a fix in version 3.4.4 for the bug you spotted.
Not closing this issue yet as I still get some failing tests for edge cases (with css regex's) and this cannot be the reason for @dictions issue as he's not using the hash.

[numical]

@dictions : my failing tests are t0 do with the use of the cssRegExp option so hopefully I'm onto your problem now...

[dictions]

@numical aha! good find.

[numical]

@dictions : version 3.4.5 has a fix for my failing tests - to do with having a '?' in the css filename. Don't think it is your issue but could you give it a try?

[jodelamo]

FWIW, I'm having this exact same issue. Using 3.4.5.