Grid repeat() doesn't work with no spaces in between slashes

[stanhu]

input.scss

The sassc engine is failing to render the following input:

.grid-layout2 {
  grid: 1fr/repeat(2, 1fr);
}

Here are the following errors:

Error: 1fr/repeat isn't a valid CSS value.
        on line 7049 of stdin
>>   grid: 1fr/repeat(2, 1fr); }

   --------^

stdin:7049
/Users/stanhu/.rbenv/versions/2.4.4/lib/ruby/gems/2.4.0/gems/sassc-2.0.0/lib/sassc/engine.rb:49:in `render'
/Users/stanhu/.rbenv/versions/2.4.4/lib/ruby/gems/2.4.0/gems/middleman-core-4.3.3/lib/middleman-core/extensions/minify_css.rb:31:in `compress'
/Users/stanhu/.rbenv/versions/2.4.4/lib/ruby/gems/2.4.0/gems/middleman-core-4.3.3/lib/middleman-core/extensions/minify_css.rb

To work around the problem, I did:

diff --git a/source/stylesheets/_base.scss b/source/stylesheets/_base.scss
index 05db7949c0..6accddf7cf 100644
--- a/source/stylesheets/_base.scss
+++ b/source/stylesheets/_base.scss
@@ -1107,7 +1107,7 @@ iframe {

 // scss-lint:disable DuplicateProperty,PropertyUnits,PropertySpelling
 .grid-layout2 {
-  grid: 1fr / repeat(2, 1fr);
+  grid: 1fr / 1fr 1fr;

   @media all and (max-width: $screen-md-min) {
     grid: 1fr / 1fr;
@@ -1120,10 +1120,10 @@ iframe {
 }
 // scss-lint:disable DuplicateProperty,PropertyUnits,PropertySpelling
 .grid-layout3 {
-  grid: 1fr / repeat(3, 1fr);
+  grid: 1fr / 1fr 1fr 1fr;

   @media all and (max-width: $screen-lg-min) {
-    grid: 1fr / repeat(2, 1fr);
+    grid: 1fr / 1fr 1fr;
   }

   @media all and (max-width: $screen-sm-min) {

[nschonni]

I think this might be an issue with https://github.com/sass/sassc-ruby rather than libsass since I couldn't reproducte this on sassmeister

[stanhu]

I've reproduced the problem with sassc as well:

$ bin/sassc /tmp/fail.txt
Error: 1fr/repeat isn't a valid CSS value.
        on line 7049 of ../../../../tmp/fail.txt
>>   grid: 1fr/repeat(2, 1fr); }

   --------^

Attached is the failing input.

fail.txt

[stanhu]

It looks like 1fr/repeat(2, 1fr) doesn't work, but 1fr / repeat(2, 1fr) does:

Sample input:

.grid-layout2 {
  grid: 1fr/repeat(2, 1fr);
}

[nschonni]

@nex3 looks like the slash sticking to the unit causes the error here. It doesn't seem to matter about the trailing though.

.grid-layout2 {
  grid: 1fr/ repeat(2, 1fr);
}

Tagging you because I believe there was some work before around making the some of those operators sticking errors, but it looks like DartSass currently compiles this

[nex3]

The only operator that can behave differently depending on whitespace is -. 1fr/ repeat(2, 1fr) is valid.

[nschonni]

@nex3 thanks for confirming