Bug in Node.js <= 14. No sourceMap for CSS. about pug-plugin HOT 17 CLOSED

Hm, I tried your example locally under Windows and on an Ubuntu 20.04.1 LTS server.
On Windows it does have the source map at the end of the file but not on Ubuntu.

So I checked the NodeJS version and the server had v14.18.3 while locally I have v16.13.2 installed.
After updating the server to v16.13.2 it was creating the source map there too.

Weird that there was no error being thrown.

Note: With the mini-css-extract-plugin it was creating the source map with NodeJS v14

Grüße zurück, aus der Augsburg/München Umgebung.

from pug-plugin.

Hallo @Sir-Will,

the pug-plugin extract css and sourceMap from result of the css-loader.

The example of webpack.config.js from the test case:

const path = require('path');
const PugPlugin = require('pug-plugin');

// if is FALSE then will be generated the sourceMap
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  mode: isProduction ? 'production' : 'development', // <-- only in mode  'development' is generated sourceMap
  devtool: isProduction ? false : 'source-map',  // <-- if devtool is not false then is generated sourceMap

  output: {
    path: path.join(__dirname, 'public/'),
    publicPath: '/',
  },

  entry: {
    styles: './src/assets/main.scss',
    index: './src/index.pug',
  },

  plugins: [
    new PugPlugin({
      modules: [
        PugPlugin.extractCss({
          filename: isProduction ? '[name].[contenthash:8].css' : '[name].css',
        }),
      ],
    }),
  ],

  module: {
    rules: [
      {
        test: /\.(pug)$/,
        loader: PugPlugin.loader,
      },
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader'],
      },
    ],
  },
};

If the isProduction is false then the sourceMap is generated as embedded data in self css-file, like following:

h1 {
  color: darkred;
}
/*# sourceURL=webpack://./src/assets/main.scss */
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9hc3NldHMvbWFpbi5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBO0VBQ0UsY0FGTTtBQUVSIiwic291cmNlc0NvbnRlbnQiOlsiJGNvbG9yOiBkYXJrcmVkO1xuaDEge1xuICBjb2xvcjogJGNvbG9yO1xufSJdLCJzb3VyY2VSb290IjoiIn0= */

It's legal, supported by all browsers. Additional *.css.map files are no longer generated. It's very practical. Instead of two files, only one is loaded in the browser. The mapping to source of scss works fine in all browser. The mapping is only relevant for development. In Production will be generate pure css w/o sourceMap.

from pug-plugin.

Ah, I liked to have the source map enabled for production, as the file only loads with dev tools active, as far as I know.

Unfortunately, I don't see the inline sourceMap at the end of the .css file, like in your example.

This is my config:

let webpackConfig = {
    entry: {
        app: './scss/app.scss',
    },
    mode: 'development',
    devtool: 'source-map',
    output: {
        publicPath: paths.dest.css
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [          // Extract and save the final CSS.
                    // Load the CSS, set url = false to prevent following urls to fonts and images.
                    { loader: "css-loader", options: { url: false, importLoaders: 1,  sourceMap: true } },
                    // Add browser prefixes and minify CSS.
                    { loader: 'postcss-loader', options: { postcssOptions: { plugins: [autoprefixer(), cssnano()] }, sourceMap: true } },
                    // Load the SCSS/SASS
                    { loader: 'sass-loader', options: { sourceMap: true } },
                ]
            }
        ],
    },
    plugins: [
        // Extract css to .css file
        new PugPlugin({
            modules: [
                PugPlugin.extractCss({
                    filename: '[name].[contenthash:8].bundle.min.css',
                    sourceMap: true
                }),
            ],
        }),
    ]
};

from pug-plugin.

hm, by me local it works.

I have created new test case with your webpack config.
See expected CSS with sourceMap.
The test is passed.

Can you please try the example "Hallo World". This example has the mode: 'production' and devtool: 'source-map'

git clone https://github.com/webdiscus/pug-plugin.git
cd ./pug-plugin/examples/hello-world/
npm i

Start local app in browser:

npm run start

Open the Web Inspector and see the mapped style on this element:

...
<div class="autoprefixer-example">The block with autoprefixer.</div>
...

I see the style .autoprefixer-example is mapped to post-css-demo.scss:3

Or build public assets:

npm run build

And see generated file ./public/assets/css/post-css-demo.min.css

Can you please find any different with your case?

P.S. I want help you and and locate the problem.

Schöne Grüße aus Köln :-)

from pug-plugin.

Note: the PugPlugin.extractCss() has not the option sourceMap, because the css-loader generate it.

P.S.: Maybe later I can implement the feature to save the sourceMap in a separate file.

from pug-plugin.

Oh, and the sourceMap: true options for the loaders don't seem to be needed.

from pug-plugin.

Thank you for the investigation! It is very important bug repport.
I will to fix it for Node.js 12, 14.

from pug-plugin.

yes, I can now reproduce the problem.
In Node.js 14, 12 is generated css without source map.

This is the bug in css-loader runtime:

...
if (typeof btoa === "function") { // <=== HERE is the bug in `css-loader`
    const base64 = btoa(
      unescape(encodeURIComponent(JSON.stringify(cssMapping)))
    );
    const data = `sourceMappingURL=data:application/json;charset=utf-8;base64,${base64}`;
    const sourceMapping = `/*# ${data} */`;

    const sourceURLs = cssMapping.sources.map(
      (source) => `/*# sourceURL=${cssMapping.sourceRoot || ""}${source} */`
    );

    return [content].concat(sourceURLs).concat([sourceMapping]).join("\n");
  }
...

The css-loader self not export the source map when the btoa function is undefined.

I will no longer use the css-loader runtime to export the source map. I will make own extract function that can write the source map in separate file.

What do you think about embedded source map?
Is any reason make this as an option?
Or extract source map in separate file only?

from pug-plugin.

Hallo @Sir-Will,
in new version 1.3.0 is fixed the issue for node <=14.
Now the source map is saved in separate file.
Do you can please try new version and if OK close the ticket?
Thank you!

from pug-plugin.

I no longer have NodeJS 14 installed to test it.

Does it respect the webpack devtool option for inline-source-map and source-map?

from pug-plugin.

The new version does not depend on the node version.
All tests passed for node 12.x, 14x, 16.x, see GitHub workflow.

Webpack option devtool is relevant for css-loader, the pug-plugin extract all what generates the css-loader.
Yes, the options source-map, inline-source-map, etc. works. I have tested both source-map and inline-source-map, it will be generate same .css.map file.

from pug-plugin.

the problem is solved

from pug-plugin.

Hm, I just tested the source-map and when using devtool: inline-source-map it creates the .map file, shouldn't it inline the map if it's set to inline-source-map?

I thought pug-plugin is going to either create the .map file or inline the map like it was in version 1.2.4 depending on the devtool setting. Like webpack does for the javascript files.

from pug-plugin.

Hallo @Sir-Will,
thank you for feedback.
Inline source map is fixed In the version 1.4.3. Now the option devtool: inline-source-map works.

from pug-plugin.

I updated to 1.4.3 and it's still not inlining it for me with devtool: inline-source-map

from pug-plugin.

@Sir-Will
can you please see the test case devtool-inline-source-map.

webpack.config.js

module.exports = {
  devtool: 'inline-source-map',
  ...
}

expected css with inline (embedded source map)

body{color:red}
/*# sourceURL=webpack://./src/assets/main.scss */
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjoz... */

What is your usage case?
Try please test local:

clone https://github.com/webdiscus/pug-plugin.git
cd pug-plugin
npm i
npm run test

from pug-plugin.

Oh, I just realized that I changed the devtool setting for my JavaScript task and not the CSS task, sorry, my bad. It's working.

from pug-plugin.