CSS-Modules do not work anymore after update to node-sass 4.0.0

[delijah]

Before updating (node-sass 1.13.1), the following worked without any problems:

input.sass

:global
    .my-global-class-name
        background-color: red

Now i get the following error:

ERROR in ./~/css-loader?modules&importLoaders=2&camelCase&sourceMap!./~/postcss-loader?sourceMap=inline!./~/sass-loader?sourceMap!./app/styles/modules/resourceForm.sass
Module build failed:
        .my-global-class-name
       ^
      Illegal nesting: Only properties may be nested beneath properties.
      in .../app/styles/modules/resourceForm.sass (line 7, column 9)
 @ ./app/styles/modules/resourceForm.sass 4:14-254 13:2-17:4 14:20-260

version info:

$ node-sass --version
node-sass	4.0.0	(Wrapper)	[JavaScript]
libsass  	3.4.0	(Sass Compiler)	[C/C++]

• NPM version (npm -v): 3.10.3
• Node version (node -v): 6.7.0
• Node Process (node -p process.versions):
  { http_parser: '2.7.0',
  node: '6.7.0',
  v8: '5.1.281.83',
  uv: '1.9.1',
  zlib: '1.2.8',
  ares: '1.10.1-DEV',
  icu: '57.1',
  modules: '48',
  openssl: '1.0.2j' }
• Node Platform (node -p process.platform): darwin
• Node architecture (node -p process.arch): x64
• node-sass version (node -p "require('node-sass').info"):
  node-sass 4.0.0 (Wrapper) [JavaScript]
  libsass 3.4.0 (Sass Compiler) [C/C++]
• npm node-sass versions (npm ls node-sass): [email protected]

[xzyfer]

This project is an implementation of the Sass language. Our goal is to be 100% compatible with Sass. We're closing this issue since Ruby Sass produces the same output. In the future please confirm that LibSass' output differs from Ruby Sass before opening an issue.

If you wish to suggest features of file bugs in the Sass language please open an issue with Sass - https://github.com/sass/sass

[xzyfer]

It was compiling with LibSass because of a bug that has been patched. This code is not valid Sass and should never have compiled. You can confirm this by testing your code with Ruby Sass.

:global
    .my-global-class-name
        background-color: red

Error: Properties are only allowed within rules, directives, mixin includes, or other properties.
       If ":global" should be a selector, use "\:global" instead.
        on line 1 of test.sass
  Use --trace for backtrace.

The Ruby Sass error message is much better than ours and suggests a work around. In order to get this behaviour changed you'd need to open a feature request with Ruby Sass

[xzyfer]

It's noting that the CSS module syntax is valid in with the scss format

:global {
    .my-global-class-name {
        background-color: red
    }
}

[jhnns]

@xzyfer Do you know why :global is not valid Sass? It's a valid CSS selector and will probably become more common in the future as soon as more people are using the :host selector when writing web components.

[xzyfer]

@jhnns there are a couple different elements in play here. The OP is using the old indented syntax.

:global
    .my-global-class-name
        background-color: red

In that syntax :foo selectors have special meaning. This meaning predates the inclusion of : prefixed selectors in CSS by almost a decade. As I said above, changing this behaviour is not within scope of LibSass and needs to be addressed by the offical Sass team.

On the other hand the newer scss syntax guarantees to (mostly) be a super set of CSS. For this reason : prefixed selectors work as expected.

[mattfysh]

@delijah I was able to get this working again after upgrading by escaping the colon i.e.

\:global
    .my-global-class-name
        background-color: red

[delijah]

@mattfysh I can confirm this. Using a "\" solves the problem. Now my sass-linter doesn't like it ;) I will open an issue for that.