Support SCSS syntax

Issue 1: Can’t use comma

[!] (plugin svelte) ParseError: Selector is expected
apps/web/src/components/seat/layout.svelte
113: }
114: .seat.tw,
115:     &.bn,
         ^
116:     &.pp .cushion {
117:   background: rgba(210, 42, 248, 0.8);

Issue 2: Can’t use scss variables

[!] (plugin svelte) ParseError: Unexpected input
packages/components/src/app-bar/index.svelte
46: }
47: .app-bar.bg {
48:   background: $theme-color;
                  ^
49:   color: #fff;
50: }

Issue 3: Can’t use single-line comment

[!] (plugin svelte) ParseError: Identifier `deep` is expected
node_modules/@responsive-ui/loader/src/Loader.svelte
34:   border-width: 2px;
35: }
36: // .responsive-ui-loader__spinner:after {
     ^
37:   //   content: "";
38:   //   width: 5px;

[ahku]

This is unfortunate though. In a lot of real world projects, the code base isn’t just javascript. For example, our agency work with HubSpot which is like a SaaS platform where you can work both locally and online when creating websites. Sometimes CTA button markup needs to be edited in a custom editor, and WindiCSS not being able to generate classes on the fly, or without a build system, means that you have to come up with other solutions.

SCSS helps you work with a more traditional CSS approach, adding features such as line commends, nesting, variables that developers expect.

Right now I’m evaluating Windi in some SPA applications, but my hope is that I can somehow marry it with our agency projects. And perhaps there is a way to run the old SCSS code alongside WindiCSS, or maybe you can find a replacement for it. I spent a lot of time getting the postcss nesting to work for example, but not having line comments it annoying.

[voorjaar]

Issue 1 and Issue 3 has been solved. Next step, we will support using variables, keep tracking.