Keep :export also for non-CSS-modules

[kroko]

• Operating System: nix
• Node Version: v12.17.0
• NPM Version: 6.14.5
• webpack Version: 4.44.1
• css-loader Version: 4.2.1

Expected Behavior / Situation

Previously my setup was as follows

   // --------
    // SCSS GENERAL
    {
      test: /\.(scss)$/,
      exclude: /\.module\.(scss)$/,
      use: [
        // ...
        {
          loader: 'css-loader',
          options: {
            importLoaders: 3,
            sourceMap: true
          }
        },
        // ...
      ]
    },
    // --------
    // SCSS MODULES
    {
      test: /\.module\.(scss)$/,
      use: [
        // ...
        {
          loader: 'css-loader',
          options: {
            importLoaders: 3,
            sourceMap: true,
            modules: {
              mode: 'local',
              localIdentName: (development) ? '[name]__[local]--[hash:base64:5]' : '[hash:base64:16]'
            },
            localsConvention: 'asIs',
            onlyLocals: false
          }
        },
        // ...
      ]
    },

and having :export directive in non-module scss file worked

variables.scss

:export {
  canvasTouchPointColor: $colorSelectionText;
  canvasBackgroundColor: $colorHeaderBackground;
}

somejavascript.js

import styles from 'shared/scss/variables.scss';
console.log('styles.canvasTouchPointColor', styles.canvasTouchPointColor);
console.log('styles.canvasBackgroundColor', styles.canvasBackgroundColor);

Actual Behavior / Situation

Now, using the new configuration syntax

    // --------
    // SCSS GENERAL
    {
      test: /\.(scss)$/,
      exclude: /\.module\.(scss)$/,
      use: [
        // ...
        {
          loader: 'css-loader',
          options: {
            importLoaders: 3,
            sourceMap: true,
            modules: {auto: false} // unnecessary, but let us be verbose 
          }
        },
        // ...
      ]
    },
    // --------
    // SCSS MODULES
    {
      test: /\.module\.(scss)$/,
      use: [
        // ...
        {
          loader: 'css-loader',
          options: {
            importLoaders: 3,
            sourceMap: true,
            modules: {
              mode: 'local',
              localIdentName: (development) ? '[name]__[local]--[hash:base64:5]' : '[hash:base64:16]',
              exportLocalsConvention: 'asIs',
              exportOnlyLocals: false
            }
          }
        },
        // ...
      ]
    },

bringing SCSS variables into JavaScript does not work for SCSS files which are not considered modules.

Note, that moving :export to module file does bring back variables into JS ->

variables.module.scss

@import "variables.scss";
:export {
  canvasTouchPointColor: $colorSelectionText;
  canvasBackgroundColor: $colorHeaderBackground;
}

somejavascript.js

import styles from 'shared/scss/variables.module.scss';
console.log('styles.canvasTouchPointColor', styles.canvasTouchPointColor);
console.log('styles.canvasBackgroundColor', styles.canvasBackgroundColor);

does work.

Modification Proposal

Is the assumption that the new implementation allows SCSS :export only to be used when modules are true?
If so can it be reverted to the previous behaviour?

Thanks!

[alexander-akait]

Please set https://github.com/webpack-contrib/css-loader/blob/master/src/options.json#L39 compileType: 'icss'

[kroko]

    // --------
    // SCSS GENERAL
    {
      test: /\.(scss)$/,
      exclude: /\.module\.(scss)$/,
      use: [
        // ...
        {
          loader: 'css-loader',
          options: {
            importLoaders: 3,
            sourceMap: true,
            modules: {
              compileType: 'icss'
            }
          }
        },
        // ...
      ]
    },
    // --------
    // SCSS MODULES
    {
      test: /\.module\.(scss)$/,
      // ...
    },

This setup works

Tried compileType before submitting the issue and it did not work. Was using it as shown below as I did not want modules for this loader chain

            modules: {
              compileType: 'icss'
              auto: false
            }

Apparently auto needs not to be defined. Together with the fact that previously modules could be left out altogether (see OP Expected Behavior / Situation) the behaviour has changed quite a lot.

What about having loader behave as

            modules: {
              compileType: 'icss'
            }

if modules key is left out, instead of behaving as

            modules: undefined

as that would kind of resemble as what css-loader in practice did before v4?

[alexander-akait]

There are two cases:

• icss and modules together
• only icss and no modules

So both configuration is valid, but maybe we should docs this

[alexander-akait]

Using compileType: 'icss' is rare case, let's add docs about it

[kroko]

see the pull request

Using compileType: 'icss' is rare case, let's add docs about it

containing project variables in some variables.scss (and not variables.module.scss) and then @import'ing them in both component.module.scss'es as well as JavaScript files directly IMHO is not some edge case.

[kroko]

@evilebottnawi PR for doc addition passing now, please review. thanks!