Sass forward prefixes parsing as a word and operator instead of just a word

Question

Sass forward prefixes parsing as a word and operator instead of just a word

wegry opened this issue 5 years ago · 8 comments

Operating System (or Browser):
macOS 10.15.4
Node Version:
12.16.1
postcss-values-parser Version:
2.0.1

How Do We Reproduce?

@forward "src/list" as list-*;

is being parsed as

{
  "raws": {
    "before": "",
    "after": ""
  },
  "type": "value-root",
  "group": {
    "raws": {
      "before": "",
      "after": ""
    },
    "type": "value-value",
    "unbalanced": 0,
    "group": {
      "groups": [
        {
          "raws": {
            "before": "",
            "after": "",
            "quote": "\""
          },
          "value": "src/list",
          "source": {
            "start": {
              "line": 1,
              "column": 1
            },
            "end": {
              "line": 1,
              "column": 10
            }
          },
          "sourceIndex": 0,
          "quoted": true,
          "type": "value-string"
        },
        {
          "raws": {
            "before": " ",
            "after": ""
          },
          "value": "as",
          "source": {
            "start": {
              "line": 1,
              "column": 12
            },
            "end": {
              "line": 1,
              "column": 13
            }
          },
          "sourceIndex": 11,
          "type": "value-word",
          "isHex": false,
          "isColor": false
        },
        {
          "raws": {
            "before": " ",
            "after": ""
          },
          "value": "list-",
          "source": {
            "start": {
              "line": 1,
              "column": 15
            },
            "end": {
              "line": 1,
              "column": 19
            }
          },
          "sourceIndex": 14,
          "type": "value-word",
          "isHex": false,
          "isColor": false
        },
        {
          "raws": {
            "before": "",
            "after": ""
          },
          "value": "*",
          "source": {
            "start": {
              "line": 1,
              "column": 20
            },
            "end": {
              "line": 1,
              "column": 20
            }
          },
          "sourceIndex": 1,
          "type": "value-operator"
        }
      ],
      "type": "value-comma_group"
    }
  }
}

Expected Behavior

I'm jousting with prettier/prettier#7019. Sass @forward prefixes are tough. I've already stopped by postcss-scss with the same concern.

* should be part of the preceding value-word node list-.

Actual Behavior

* isn't part of the preceding value-word node list-.

Answer 1 · 2020-04-12T01:08:52.000Z

Have a link to the spec for that one by chance?

Answer 2 · 2020-04-12T04:47:34.000Z

@shellscape https://github.com/sass/sass-spec/blob/master/spec/directives/forward/member/as.hrx might help? It’s test cases for the reference implementation.

Answer 3 · 2020-04-12T12:10:33.000Z

Thanks. This package isn't a sass parser. If it's not in the css spec, were unlikely to support it.

Answer 4 · 2021-09-14T19:48:42.000Z

@wegry is this issue being resolved? This is causing a big problem for us. Is there a way to turn this off?

Answer 5 · 2021-09-15T15:45:10.000Z

@michaelfaith I've been out of this stack since I created this (Angular 11), but I vaguely recall that we had issues with the underlying parser elsewhere.

What sort of issue are you having and what versions of the associated libraries are you using?

Answer 6 · 2021-09-15T22:36:35.000Z

@wegry yeah I followed the trail over from the Prettier issue you referenced: prettier/prettier#7019
Where it's messing up @forward statements, separating the * out.
e.g.

// Before: 
@forward 'src/list' as list-*;

// After: 
@forward 'src/list' as list- *;

Dealing with this in Angular 12 and Prettier 2.4.0 which appears to use 2.0.1 of this library.

Answer 7 · 2021-09-16T00:57:13.000Z

@michaelfaith if you're willing to just kick the can down the road a bit:

// prettier-ignore
@forward 'src/list' as list-*;

This prettier playground shows it in action with latest.

Answer 8 · 2021-09-16T03:34:19.000Z

@wegry right on. I can go with that until there's a fix in, which i guess will need to come in the form of a new sass parser on the Prettier side. Appreciate the recommendation.