Error after migrating from v4.1.1 to v6.0.2

[mllustosa]

Sass-loader version: from 4.1.1 to 6.0.2
Node-sass version: from 3.13.1 to 4.5.0

After updating the packages, the project that I'm working on is not building anymore. I believe the problem is related to the fact that my .css files are configured to make the class names scoped locally. (:local). I'm literally researching for this problem for 3 hours, and if I downgrade to the previous version that I had installed before, everything works again. Could anyone shed some light on this subject?

index.sass

:local(.content-container)
  padding-top: 50px
  height: 100vh
  box-sizing: border-box

webpack.config.js

/// (...) webpack.config.js

{
  test: /\.sass$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
        camelCase: true,
        localIdentName: '[hash:base64:8]',
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        plugins: () =>
          autoprefixer({
            browsers: ['last 2 versions'],
          }),
      },
    },
    {
      loader: 'sass-loader',
      options: {
        indentedSyntax: true,
        includePaths: [
          path.join(baseDir, 'src', 'styles'),
        ],
      },
    },
  ],
},

/// webpack.config.js (...)

ERROR

ERROR in ./~/css-loader?{"modules":true,"camelCase":true,"localIdentName":"[hash:base64:8]"}!./~/postcss-loader?{}!./~/sass-loader/lib/loader.js?{"indentedSyntax":true,"includePaths":["/src/styles"]}!./index.sass
Module build failed: 
:local(.content-container)
^
      Invalid CSS after "l": expected 1 selector or at-rule, was "local(.content-cont"
      in index.sass (line 1, column 1) ...
      ....
      ....

[mllustosa]

With further debugging I realized that the problem is with node-sass ^4.0.0. I believe is something to do with the :property_syntax option from Sass. From the docs:

Forces indented-syntax documents to use one syntax for properties. If the correct syntax isn’t used, an error is thrown. :new forces the use of a colon after the property name. For example: color: #0f3 or width: $main_width. :old forces the use of a colon before the property name. For example: :color #0f3 or :width $main_width. By default, either syntax is valid. This has no effect on SCSS documents.

So, as I'm using local scoped class names from css-loader :local(.className), this syntax would be a valid property syntax if the property_syntax is set to :old. Node sass interprets it as something like local(.className): $value --- in a $prop_key: $prop_value syntax.

Any ideas on how I can fix this? For now, I'm just keeping ^3.0.0 from node-sass, but its not a solution as I always get an UNMET PEER DEPENDENCY from sass-loader when I npm install my project.

index.sass

:local(.container)
  padding-top: 20px

node-sass ^3.0.0

import sass from 'node-sass';
const result = sass.renderSync({ file: './index.sass' });
console.log(result);
/*
{
  stats: 
  {
    entry: './index.sass',
    start: 1488802011040,
    includedFiles: [ './index.sass' ],
    end: 1488802011047,
    duration: 7,
  },
  css: <Buffer 3a 6c 6f 63 61 6c 28 2e ... >
}
*/

node-sass ^4.0.0

import sass from 'node-sass';
const result = sass.renderSync({ file: './index.sass' });
/*
Error: Invalid CSS after "l": expected 1 selector or at-rule, was "local(.container): "
    at Object.module.exports.renderSync (./node_modules/node-sass/lib/index.js:439:16)
    at repl:1:19
    at ContextifyScript.Script.runInThisContext (vm.js:23:33)
    at REPLServer.defaultEval (repl.js:336:29)
    at bound (domain.js:280:14)
    at REPLServer.runBound [as eval] (domain.js:293:12)
    at REPLServer.onLine (repl.js:533:10)
    at emitOne (events.js:101:20)
    at REPLServer.emit (events.js:191:7)
    at REPLServer.Interface._onLine (readline.js:238:10)
*/

[jhnns]

The sass syntax is not compatible with css modules. You can escape the colon like this:

\:local(.container)
  padding-top: 20px

See sass/libsass#2245

[mllustosa]

Thank you very much, @jhnns. Priceless help.

[bartwitt]

Thanks @jhnns! Already spent a lot more time on this issue than I hoped, but I'm pretty sure your post saved me from spending a lot lot more ;)