Skip to content

[scss] Support bracketed lists - #507

Open
Rusty Raven (kakiuwang-ui) wants to merge 2 commits into
microsoft:mainfrom
kakiuwang-ui:fix/scss-bracketed-lists
Open

[scss] Support bracketed lists#507
Rusty Raven (kakiuwang-ui) wants to merge 2 commits into
microsoft:mainfrom
kakiuwang-ui:fix/scss-bracketed-lists

Conversation

@kakiuwang-ui

Copy link
Copy Markdown
Contributor

Fixes #231
Fixes #399

Problem

Sass bracketed lists are reported as syntax errors:

.a { $x: [1px, 2px]; }
//        ^ ] expected
//               ^ semi-colon expected
//                 ^ at-rule or selector expected

The only production that accepts [ in a value position is _parseNamedLine, which implements the CSS named-line syntax and therefore only accepts a bare sequence of identifiers. That happens to cover [a b c], so space-separated lists of idents already worked — but anything else (commas, numbers, strings, variables, interpolation, function calls, nesting) fell through and produced a cascade of errors.

Fix

Override _parseNamedLine in SCSSParser so the brackets hold a full expression. A Sass bracketed list is a superset of the CSS named-line syntax, so the one production covers both; CSS and LESS are untouched.

Now parsing cleanly

$x: [];                            // empty
$x: [a];
$x: [a, b, c];                     // comma separated
$x: [a, b,];                       // trailing comma
$x: [1px, 2em, 3%];
$x: [$a, $b];
$x: [#{$a}, b];                    // interpolation
$x: [[a, b], [c d]];               // nested
$x: [math.div(6, 2), 2];           // function call
$m: (k: [a, b], j: [c]);           // as a map value
@mixin m($x: [a, b]) { }           // as a default parameter
@each $i in [a, b] { }
.a { color: list.nth([a, b], 2); } // as an argument

Still reported as errors:

$x: [a, b;   // ] expected
$x: a];      // semi-colon expected

And the CSS named-line syntax keeps working in both CSS and SCSS:

.a { grid-template-columns: [full-start] 1fr [full-end]; }
.a { grid-template-rows: [r1-start r2] 25% [r2-end]; }

Testing

npm run test — 712 passing, 0 failing (710 before, plus the new cases).

New tests in src/test/scss/parser.test.ts: a Bracketed list block covering the forms above plus the RightSquareBracketExpected error case, a Bracketed list in a stylesheet block covering the end-to-end usages from both issues, and two cases added to VariableDeclaration.

Sass bracketed lists (`[a, b]`) are a superset of the CSS named-line
syntax: the brackets may hold any space or comma separated list of
values, not just a sequence of identifiers. The parser only accepted the
CSS form, so valid Sass was reported as a syntax error.

Fixes microsoft#231
Fixes microsoft#399
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Missing support for []-enclosed lists in SCSS styles Error message for SCSS bracketed lists

1 participant