any plan to support scss like syntax of styles?

[aelbore]

it would be great atomico will support scss like im been using goober https://www.npmjs.com/package/goober

[UpperCod]

The objective of the css function is only to create a CSSStyleSheet according to the browser, this function does not manipulate the css, but you can create a layer that does support the desired syntax, example:

import { css } from "atomico";
import parse from "./my-css-syntax";

const scss = (...args) => css.call(null, [parse(args)]);

function component() {
  return <host shadowDom></host>;
}

component.props = { show: { type: Boolean, reflect: true } };

component.styles = scss`
  :host {
    display: none;
    &([show]) {
      display: block;
    }
  }
`;

a while ago I created a package that parses the CSS, you could use it to cover the desired syntax https://github.com/UpperCod/css-to-object

[aelbore]

wow this is really great thanks @UpperCod