Parser doesn't understand the new `@use` syntax
Opened this issue · 10 comments
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:
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!
@AleshaOleg can you just tell me which sections of code should I be looking at?
@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:
- Create a new case from your example here - https://github.com/AleshaOleg/postcss-sass/tree/master/__tests__/cases
- 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
- Run
yarn test
- Debug https://github.com/AleshaOleg/postcss-sass/blob/master/parser.es6#L34 with
console.log
@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
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!
@algomaster99 Where have you gotten with this? I might consider taking this up depending on what else you might have found out.
@roydukkey hi! You can go ahead with this issue. I couldn't make time to solve it.
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.
Interesting. Do you know if there is an issue upstream to track for this one? Seems we're getting deep. :)
@roydukkey I checked issues for gonzales-pe, didn't find anything related. Feel free to create a new one I guess