Scoped CSS. Could it support SCSS in the future?

[Dorian Iacobescu]

Hello.
Happy user of surface here :)

I have a short question ref to the scoped CSS feature introduced in 0.8.
Is there a plan to allow SCSS as well in some future releases?
Eg like VUE JS: <style lang="scss">

I'm using SCSS in my project and started converting it to scoped CSS. The dynamic values would simplify the logic quite a bit.
However, I quickly realized I was using many variables and other SCSS features. eg:

    font-family: $myproject-font-button;

So before starting to commit to this direction and convert everything to CSS, I just wanted to ask if there is any plan to support SCSS.

Thanks again for this great library!

[Marlus Saraiva]

Hi @iacobson!

All the Surface compiler does is collect the CSS styles from all components, add scope information, and then save everything in assets/css/_component.css, which is imported by the main /css/app.css. If you're already using SCSS there, it should just work. We won't be adding non-standard CSS syntax, for now, to make sure users can keep using whatever CSS variant solution they need.

[Dorian Iacobescu]

Thank you for the response. I tried a small test. Adding this snippet at the top of a component

<style>
  .test_surface_scoped {
  width: 100%;
  height: 100%;
  background-color: $bsr-orange-1;
  }
</style>

and this line in the template HTML

  <div class="test_surface_scoped" />

where the $bsr-orange-1; is a variable defined in the project scss.
All CSS is already converted to SCSS (using :dart_sass)

So, when compiling getting this error:

Error: Sass variables aren't allowed in plain CSS.
   ╷
10 │   background-color: $bsr-orange-1;
   │                     ^^^^^^^^^^^^^
   ╵
  css/_components.css 10:21  @import
  css/app.scss 20:9          root stylesheet

I suppose if it would be possible to configure somehow the _components.css to be actually _components.scss it would work

[Marlus Saraiva]

@iacobson you can try this in your config:

  config :surface, :compiler,
    css_output_file: "assets/css/_components.scss"

[Dorian Iacobescu]

oh! it works perfectly!
Thank you so much 🙏