CSS Sourcemaps activation in dev mode (1.x)

[et1421]

Problem

It would be useful to be able to activate CSS/SCSS sourcemaps in dev mode.

If I go and edit directly webpack.dev.conf.js inside the node_modules the sourcemaps are working fine, but this is only a temporary solution.

If I understand correctly in #394 there is mention that by adding a config object inside slate.config.js it should override the config inside node_modules, but it doesn't seem to work :

Code inside slate.config.js

/* eslint-disable no-undef */

const path = require('path');

const alias = {
  jquery: path.resolve('./node_modules/jquery'),
  'lodash-es': path.resolve('./node_modules/lodash-es'),
};

module.exports = {
  extends: {
    dev: {
        resolve: {alias},
        module: {
            rules: [
              {
                test: /\.s[ac]ss$/,
                exclude: commonExcludes(),
                use: [
                  {
                    loader: 'style-loader',
                    options: {
                      hmr: true,
                    },
                  },
                  {
                    loader: 'css-loader',
                    // Enabling sourcemaps in styles causes style-loader to inject
                    // styles using a <link> tag instead of <style> tag. This causes
                    // a FOUC content, which can cause issues with JS that is reading
                    // the DOM for styles (width, height, visibility) on page load.
                    options: {importLoaders: 2, sourceMap: true},
                  },
                  {
                    loader: 'postcss-loader',
                    options: {
                      ident: 'postcss',
                      sourceMap: true,
                      plugins: () => [autoprefixer],
                    },
                  },
                  {loader: 'sass-loader', options: {sourceMap: true}},
                ],
              },
            ],
        },
    },
    prod: {resolve: {alias}},
  },
};

Could this be ultimately activated using a flag ?

[t-kelly]

My original plan was to have it activated via a slate.config.js parameter. But a flag might also be worthwhile.

[niedfelj]

Part of the problem here is that you need to nest under slateTools inside your module.exports, the starter theme had it wrong until a few weeks ago

/* eslint-disable no-undef */

const path = require('path');

const alias = {
  jquery: path.resolve('./node_modules/jquery'),
  'lodash-es': path.resolve('./node_modules/lodash-es'),
};

module.exports = {
  slateCssVarLoader: {
    cssVarLoaderLiquidPath: ['src/snippets/css-variables.liquid'],
  },
  slateTools: {
    extends: {
      dev: {
        resolve: {alias},
        output: {
          library: 'Wardrobe',
          jsonpFunction: 'webpackJsonpWardrobe'
        }
      },
      prod: {
        resolve: {alias},
        output: {library: 'Wardrobe', jsonpFunction: 'webpackJsonpWardrobe'}
      },
    },
  },
};

[niedfelj]

Just to add more detail to this ticket, I'm able to get detailed sourcemaps working by directly editing the dev.js in slate-tools node module with this:

    devtool: 'cheap-module-eval-source-map',

    output: {
      devtoolModuleFilenameTemplate(info) {
        const newPath =  'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
        return newPath
      },
    },

    module: {
      rules: [
        {
          test: /^(?:(?!(css|scss|sass)).)*\.(liquid)$/,
          exclude: commonExcludes(),
          use: [
            {loader: 'extract-loader'},
            {
              loader: '@shopify/slate-liquid-asset-loader',
              options: {devServer: true},
            },
          ],
        },
        {
          test: /\.s[ac]ss$/,
          exclude: commonExcludes(),
          use: [
            {
              loader: 'style-loader',
              options: {
                hmr: true
              },
            },
            {
              loader: 'css-loader',
              // Enabling sourcemaps in styles causes style-loader to inject
              // styles using a <link> tag instead of <style> tag. This causes
              // a FOUC content, which can cause issues with JS that is reading
              // the DOM for styles (width, height, visibility) on page load.
              options: {importLoaders: 2, sourceMap: true},
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                sourceMap: true,
                plugins: () => [autoprefixer],
              },
            },
            {loader: 'sass-loader', options: {sourceMap: true}},
          ],
        },
      ],
    },

And then also modifying css-loader according to this ticket webpack-contrib/css-loader#717

A couple of things:

1. This breaks the hot module reloading because style-loader then inserts link tags instead of style tags, is there a way around this? Inline maps, not sure on the right config?

2. Shouldn't slate-tools have at least SOME css sourcemaps enabled by default? It's very hard to work with at the moment, especially trying to convert an old codebase, where I can't see any source/file information in development mode. Is this just because of the FOUC issue? To me I would rather have sourcemaps and an occasional flash than not, or is there something else preventing this?

[niedfelj]

Also for reference webpack/webpack#6400

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.