CSS variables are not compiled correctly

[vugar005]

Hi. In angular application where I use node-sass ,css variables.
I tested same html template and css sheets in jsfiddle. https://jsfiddle.net/Vugar005/zza6624e/2/
it works there but node-sass seems does not compile correctly. What might be problem?
Interestingly, when placing media query inside a component styles are applied,
Thanks!

- NPM version : 5.5.1
- Node version : 8.9.1:
- Node Process : 
{ http_parser: '2.7.0',
  node: '8.9.0',
  v8: '6.1.534.46',
  uv: '1.15.0',
  zlib: '1.2.11',
  ares: '1.10.1-DEV',
  modules: '57',
  nghttp2: '1.25.0',
  openssl: '1.0.2l',
  icu: '59.1',
  unicode: '9.0',
  cldr: '31.0.1',
  tz: '2017b' }
- Node Platform: win32:
- Node architecture: x64:
- node-sass version (`node -p "require('node-sass').info"`): 
node-sass       4.9.0   (Wrapper)       [JavaScript]
libsass         3.5.4   (Sass Compiler) [C/C++]

- npm node-sass versions (`npm ls node-sass`): `esas@0.0.0 D:\vugar\ESAS
+-- @angular/cli@1.6.5
| `-- node-sass@4.9.0  deduped
`-- node-sass@4.9.0

[xzyfer]

Please search issues before opening a new one. Your questions have already been answered.

…

On Tue., 1 May 2018, 10:39 pm Vugar, ***@***.***> wrote: Hi. In angular application where I use node-sass ,css variables are not compiled correctly. I tested same html template and css sheets in jsfiddle. https://jsfiddle.net/Vugar005/zza6624e/2/ it works there but node-sass seems does not compile correctly. What might be problem? Thanks! - NPM version : 5.5.1 - Node version : 8.9.1: - Node Process : { http_parser: '2.7.0', node: '8.9.0', v8: '6.1.534.46', uv: '1.15.0', zlib: '1.2.11', ares: '1.10.1-DEV', modules: '57', nghttp2: '1.25.0', openssl: '1.0.2l', icu: '59.1', unicode: '9.0', cldr: '31.0.1', tz: '2017b' } - Node Platform: win32: - Node architecture: x64: - node-sass version (`node -p "require('node-sass').info"`): node-sass 4.9.0 (Wrapper) [JavaScript] libsass 3.5.4 (Sass Compiler) [C/C++] - npm node-sass versions (`npm ls node-sass`): `-- (empty) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2358>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjZWFdpRetJYXEShZPy-HZPJyRyXEydks5tuFedgaJpZM4Tt4_C> .

[vugar005]

@xzyfer Could you please at least mention that questions. I searched and did not find closed issues helpful.

[xzyfer]

Please define "not compile correctly". I'm not going to read and try to understand your hundreds of lines of code.

A simple < 10 line example of your input, the expected output, and the real output is required.

[vugar005]

@xzyfer . I simplified and added code to stackblitz

Problem is variables from :root are not applied. But when I rename :root => .component. It works as expected. The box is shown. Why :root variables are not taken?
Thanks in advance!

[xzyfer]

Please just provide the input css, expected output, and actual output here.

[vugar005]

@xzyfer . When I compile with node-sass the output file is as expected. But when run in browser, :root values are not set to elements. Can you please check stackblitz and tell what is wrong ?
variables are assigned if I change ": root" to ".component" .It is kind of specificity problem

[vugar005]

@xzyfer Please look .I added the file to https://codepen.io/vugar005/pen/ELmeEx
it compiles to css as expected. So it is obvious that node-sass does not compile correctly.

[vugar005]

@xzyfer I move :root to global style.css and it works as expected. It causes problem within component.
What might be issue?

[tornography]

Same problem here. Here are the examples and current/expexted outputs. Expected output seems to work up to v4.7.2. At least that's the fallback we use.

Input:

$color: #f1f3f6;

:root {
    --color-not-working: $color;
}

.class {
    color: $color;
}

Output:

:root {
  --color-not-working: $color;
}

.class {
  color: #f1f3f6;
}

Expected:

:root {
  --color-not-working: #f1f3f6;
}

.class {
  color: #f1f3f6;
}

What does work:

$color: #f1f3f6;

:root {
    --color-not-working: #{$color};
}

.class {
    color: $color;
}

[xzyfer]

You read more in why it has to be this way in http://sass.logdown.com/posts/809572-sass-35-release-candidate

…

On Mon., 7 May 2018, 3:01 pm Manuel Schulz, ***@***.***> wrote: Same problem here. Here are the examples and current/expexted outputs. Expected output seems to work up to v4.7.2. At least that's the fallback we use. Input: $color: #f1f3f6; :root { --color-not-working: $color; } .class { color: $color; } Output: :root { --color-not-working: $color; } .class { color: #f1f3f6; } Expected: :root { --color-not-working: #f1f3f6; } .class { color: #f1f3f6; } What does work: $color: #f1f3f6; :root { --color-not-working: #{$color}; } .class { color: $color; } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2358 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjZWOFom8jVCtnrIa9HbVESvFYVv7hdks5twEWYgaJpZM4Tt4_C> .

[tornography]

Ah, ok. Thanks for pointing out. Strange though it occurs since v4.8.
Must have missed that on the changelogs.

[xzyfer]

It would have possiblly been listed as a bug fix since the old behaviour was a bug

…

On Mon., 7 May 2018, 3:18 pm Manuel Schulz, ***@***.***> wrote: Ah, ok. Thanks for pointing out. Strange though it occurs since v4.8. Must have missed that on the changelogs. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2358 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjZWAvc8zsTGJhdgUx1suBVonyUCjrYks5twEm-gaJpZM4Tt4_C> .