SASS not compiling

[johansedgeware]

Just a minor typo

╷
49 │ @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints.
│ ^
╵
node_modules/@elastic/eui/src/global_styling/mixins/_responsive.scss 49:81 root stylesheet
node_modules/@elastic/eui/src/global_styling/mixins/_index.scss 1:9 @import
node_modules/@elastic/eui/src/global_styling/index.scss 10:9 @import
src/assets/scss/main.scss 5:9 root stylesheet
Error: Expected ".
   ╷
49 │       @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints.
   │                                                                                 ^
   ╵
  node_modules/@elastic/eui/src/global_styling/mixins/_responsive.scss 49:81  root stylesheet
  node_modules/@elastic/eui/src/global_styling/mixins/_index.scss 1:9         @import
  node_modules/@elastic/eui/src/global_styling/index.scss 10:9                @import
  src/assets/scss/main.scss 5:9                                               root stylesheet

The error is in this else clause.

...
    } @else {
      @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints.
        The acceptable values are '#{$euiBreakpointKeys}'";
    }

Fix:

@warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints.\nThe acceptable values are '#{$euiBreakpointKeys}'";

[snide]

Just so that I'm clear in how to respond to this one. Is this about not being able to compile? Or that you're not seeing the full error in your terminal when you use an incorrect breakpoint size? Sounds like the latter?

[johansedgeware]

Just so that I'm clear in how to respond to this one. Is this about not being able to compile? Or that you're not seeing the full error in your terminal when you use an incorrect breakpoint size? Sounds like the latter?

This is the result of me simply importing the stylesheets into my project and doing nothing else, breakpoint and all that should be set by what's imported from global_styling. From the file that breaks:

@import '../variables/responsive';

The warning message doesn't escape the line-break and the file doesn't compile correctly, resulting in the somewhat cryptic error message I posted above. When adding an escaped line-break, as shown in the example above, stylesheets compiles. I.e. the breakpoints are set but the file doesn't compile because you can have unescaped line-breaks in @warn "some text that need\nespaced line-breaks".

[johansedgeware]

Solution that worked for me was:

    } @else {
+     @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints.\nThe acceptable values are '#{$euiBreakpointKeys}'";
-      @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints.
-        The acceptable values are '#{$euiBreakpointKeys}'";
    }

Hence:

Error: Expected ". <--- It expected a double quote but got a line-break
   ╷
49 │       @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints.

[chandlerprall]

A quick search shows that Sass does not support multiline strings, it [perhaps errantly] did in the past, and some implementations/parsers still do. We should correct our usage here as suggested.

@johansedgeware what library & version are you using to compile the sass?

[johansedgeware]

A quick search shows that Sass does not support multiline strings, it [perhaps errantly] did in the past, and some implementations/parsers still do. We should correct our usage here as suggested.

@johansedgeware what library & version are you using to compile the sass?

I'm using parcel which automatically downloads the the following package when sass is being used in the project.

"sass": "^1.18.0"

Seems to be this one on github!
https://github.com/sass/dart-sass