Parser doesn't understand the new `@use` syntax

[algomaster99]

The snippet:

@use "namespace" as alias

selector
  prop: alias.$var

throws

src/components/cover/index.sass
 68:1  ✖  Please check validity of the block starting from line #68   CssSyntaxError

Checkout the demo here.

Further Reference:

• Fix Sass parser incompatibility with at-use stylelint/stylelint#4711
• https://stackoverflow.com/questions/61293176/sugarss-throwing-unecessary-csssyntaxerror/61305305#61305305

[AleshaOleg]

As written in project readme: "Not all Sass syntax supported. Parser under development.".

So, for now I'm not planning to add @use support. If you need it, PR is very welcome. Thanks!

[algomaster99]

@AleshaOleg can you just tell me which sections of code should I be looking at?

[AleshaOleg]

@algomaster99 this is the main parser (better to say converter from one tree to another) file - https://github.com/AleshaOleg/postcss-sass/blob/master/parser.es6.

Basically it's just a large loop with a lot of nestings for a tree which comes from gonzales-pe (real SASS parser) - https://github.com/AleshaOleg/postcss-sass/blob/master/parser.es6#L34
and after manipulations, returns PostCSS AST. Documentation here for PostCSS tree you can find here - http://api.postcss.org/.

What you need to do:

1. Create a new case from your example here - https://github.com/AleshaOleg/postcss-sass/tree/master/__tests__/cases
2. Remove all other cases for now (do not forget to revert before committing) or simply filter case which you want to test here - https://github.com/AleshaOleg/postcss-sass/blob/master/__tests__/parse.test.js#L10
3. Run yarn test
4. Debug https://github.com/AleshaOleg/postcss-sass/blob/master/parser.es6#L34 with console.log

[algomaster99]

@AleshaOleg So I tried to make @use parse but I couldn't do it without registering it here SUPPORTED_AT_KEYWORDS like this:

const SUPPORTED_AT_KEYWORDS = [
  'media',
  'use'
]

But I think this is wrong because these are css atrules and use is not one of them.

Then I tried to extrapolate how @import was parsed but I couldn't get anything. Every time I run the tests, I get:

Expected: ""
    Received: "@use 'namespace' as alias"

      24 |       console.log(JSON.stringify(sass), JSON.stringify(root), output)
      25 |     }
    > 26 |     expect(sass.trim()).toEqual(output.trim())
         |                         ^
      27 |   })
      28 | }

I created my case something like this:

@use 'namespace' as alias

[AleshaOleg]

You're actually on the correct way to resolve this. This happens because the parser returns an empty string for this case.

As I see gonzales-pe return that node for your case:

Node {
        type: 'stylesheet',
        content: [
          Node {
            type: 'ruleset',
            content: [Array],
            syntax: 'sass',
            start: [Object],
            end: [Object]
          }
        ],
        syntax: 'sass',
        start: { line: 1, column: 1 },
        end: { line: 5, column: 16 }
      }

You can console.log full node after this code and you'll see it.

So, as you can see parser returns as a ruleset node. And you need to handle it somewhere here - https://github.com/AleshaOleg/postcss-sass/blob/master/parser.es6#L81

You need to determine the type of children node of the ruleset and handle it after block case - https://github.com/AleshaOleg/postcss-sass/blob/master/parser.es6#L87.

That children node might be block too, I didn't check. Then you need to handle it inside block case. Good luck!

[roydukkey]

@algomaster99 Where have you gotten with this? I might consider taking this up depending on what else you might have found out.

[algomaster99]

@roydukkey hi! You can go ahead with this issue. I couldn't make time to solve it.

[AleshaOleg]

Hi @roydukkey, from what I see gonzales-pe (parser from where postcss-sass getting Sass AST), not supporting use-cases for @use keywords, like using variables from @use alias, or @include keyword. I don't think it's possible to resolve this issue now. AS you can see from screenshots alias.$var not supported, gonzales-pe simply doesn't understand this syntax. And on the next screenshot without $ sign I was able to receive AST. On the last screenshot, I tried to use the @include keyword, but no luck with this too, unfortunately.

[roydukkey]

Interesting. Do you know if there is an issue upstream to track for this one? Seems we're getting deep. :)

[AleshaOleg]

@roydukkey I checked issues for gonzales-pe, didn't find anything related. Feel free to create a new one I guess