Libsass: CSS-Modules do not work anymore after update to node-sass 4.0.0
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]
delijah
All 7 comments
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
on 13 Dec 2016
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
on 13 Dec 2016
It's noting that the CSS module syntax is valid in with the scss format
:global {
.my-global-class-name {
background-color: red
}
}
@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.
jhnns
on 27 Dec 2016
@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.
xzyfer
on 28 Dec 2016
@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
mattfysh
on 28 Dec 2016
@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.
delijah
on 28 Apr 2017
Related issues
ashleykolodziej
·
3Comments
xzyfer
·
7Comments
xzyfer
·
9Comments
catamphetamine
·
7Comments
nex3
·
9Comments
Most helpful comment
@delijah I was able to get this working again after upgrading by escaping the colon i.e.