codesandbox / codesandbox/codesandbox-client
Using SCSS's @use import syntax shouldn't trigger linter issue and should enable autocomplete
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13.6k
- Forks
- 2.4k
- Avg merge
- 6d 19h
- Merged PRs (30d)
- 2
Description
🌈 Full support for SASS's @use import syntax
https://sass-lang.com/documentation/at-rules/use
Currently, Codesandbox enables the use of the correct sass package (dart-sass) and therefore compiles when @use is used. However, the editor itself doesn't seem to acknowledge the syntax: there is no auto-completion for the imported module and the linter keeps thinking the syntax is a mistake.
Here's an example https://codesandbox.io/s/theme-with-aliases-forked-qhdop?file=/src/styles.module.scss
- Using
@useshould not trigger anatRulelint error - Using the proper syntax to call
@usemodules should trigger autocompletion and no lint error
The correct behaviour can be observed in any IDE running on a modern SASS project.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox example and its src/styles.module.scss file to reproduce the @use behavior. Trace the editor's SCSS linting and autocomplete integrations, then verify that valid @use rules produce no atRule error and that members of imported modules are offered as completions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- developer-experience
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100