No/Incomplete CSS sourcemaps generated when building

[Shyiy]

I just reproduced an issue I'm having with a more complex Neutrino (latest version) project, by creating a completely new @neutrinojs/react project, and trying some small modifications to the .neutrinorc file.
During project set up I enabled Jest and Airbnb linting.

The objective in the end is to have sourcemaps for both JS and CSS in the build folder.

The sample modified .neutrinorc looks as follows:

module.exports = {
  use: [
    neutrino => neutrino.config.devtool("source-map"),
    '@neutrinojs/airbnb',
    [
      '@neutrinojs/react',
      {
        html: {
          title: 'test-project'
        },
        style: {
          style: {
            sourceMap: true
          },
          css: {
            sourceMap: true
          }
        }
      }
    ],
    '@neutrinojs/jest'
  ]
};

If I then try to build the project, the build folder will correctly contain .js.map files for the .js files, however, no .css.map file for the relative .css file is generated.

I couldn't find any other documentation around mentioning the best way to achieve this, is this actually supposed to work via some other config option or it's not available at the moment?

This seem to be related to the internally used mini-css-extract-plugin, but I couldn't find any working option to pass to extract to make it work correctly.

[Shyiy]

After some more investigation I managed to get the .map file to be generated by setting the following in the react section of the config:

minify: {
  style: {
    plugin: {
      cssProcessorOptions: {
        map: {
          annotation: true,
          inline: false
        }
       }
    }
  }
}

The next problem however is that the generated sourcemap only references and points to the combined final .css file instead of the single .css file(s) it was extracted and combined into (the actual imported files). You can see the difference when looking at the sourcemapped data on development (yarn start).

[edmorley]

Hi!

Neutrino 8 (the latest version published to NPM) uses webpack 3 and so extract-text-webpack-plugin for CSS extraction. (The upcoming Neutrino 9 on master uses webpack 4 and mini-css-extract-plugin.)

Looking at the yarn build --inspect-new output from Neutrino 8.3.0, it seems that the configuration is nothing like what's suggested in the extract-text-webpack-plugin docs. ie style-loader and hot loader are still included in the loaders list (which seems like a bug to me):

      /* neutrino.config.module.rule('style-modules') */
      {
        test: /\.(module.css)$/,
        use: [
          /* neutrino.config.module.rule('style-modules').use('hot-modules') */
          {
            loader: 'C:\\Users\\Ed\\src\\test-n8\\node_modules\\css-hot-loader\\index.js'
          },
          /* neutrino.config.module.rule('style-modules').use('C:\Users\Ed\src\test-n8\node_modules\extract-text-webpack-plugin\dist\loader.js') */
          {
            loader: 'C:\\Users\\Ed\\src\\test-n8\\node_modules\\extract-text-webpack-plugin\\dist\\loader.js',
            options: {
              omit: 1,
              remove: true
            }
          },
          /* neutrino.config.module.rule('style-modules').use('C:\Users\Ed\src\test-n8\node_modules\style-loader\index.js') */
          {
            loader: 'C:\\Users\\Ed\\src\\test-n8\\node_modules\\style-loader\\index.js'
          },
          /* neutrino.config.module.rule('style-modules').use('C:\Users\Ed\src\test-n8\node_modules\css-loader\index.js') */
          {
            loader: 'C:\\Users\\Ed\\src\\test-n8\\node_modules\\css-loader\\index.js',
            options: {
              importLoaders: 0,
              sourceMap: true,
              modules: true
            }
          }
        ]
      },

The configuration isn't being correctly generated here:
https://github.com/neutrinojs/neutrino/blob/v8.3.0/packages/style-loader/index.js#L98-L115

On master things are very different, since (a) we've switched to mini-css-extract-plugin, which is less buggy overall, and (b) I refactored a bit to make the code easier to understand:

neutrino/packages/style-loader/index.js

Lines 50 to 78 in 985e179

	rules.forEach(options => {
	const styleRule = neutrino.config.module.rule(options.ruleId);
	const loaders = [
	{
	loader: options.extract ? MiniCssExtractPlugin.loader : require.resolve('style-loader'),
	options: options.extract ? options.extract.loader : options.style,
	useId: options.extract ? options.extractId : options.styleUseId
	},
	{
	loader: require.resolve('css-loader'),
	options: options.css,
	useId: options.cssUseId
	},
	...options.loaders
	]
	.map((loader, index) => ({
	useId: `${options.cssUseId}-${index}`,
	...(typeof loader === 'object' ? loader : { loader })
	}));
	loaders.forEach(loader => {
	styleRule
	.test(options.test)
	.when(options.exclude, rule => rule.exclude.add(options.exclude))
	.use(loader.useId)
	.loader(loader.loader)
	.when(loader.options, use => use.options(loader.options));
	});
	});

Testing a project locally using Neutrino master I get CSS sourcemaps from using neutrino.config.devtool('source-map'), with no further changes required.

If someone has a chance to open a PR against Neutrino 8, we'd probably accept it - but perhaps the best option is for us to double down on getting an alpha/beta of Neutrino 9 out, which fixes this and a lot more (plus gives up to 5x faster build times etc).

[edmorley]

@Shyiy, Hi! We've just released a Neutrino 9 beta, if you'd like to try it out? I think it would fix this issue.
See #1129.

[Shyiy]

I can confirm that this now works flawlessly by just specifying the devtool option on the new beta. Thanks for the great work!