Consider leverage css layers to control rule priorities.

[hackwaly]

Describe the enhancement

Inspired from https://github.com/unocss/unocss#layers

linaria.config.js

module.exports = {
  layers: ["utility", "component", "application"],
  defaultLayer: "application"
}

Add optional options argument which can be used to pass layer option to css function.

function Button(props: { className?: string; children?: ReactNode }) {
  return (
    <button
      className={cx(
        css({ layer: "component" })`
          border-radius: 4px;
        `,
        props.className
      )}
    >
      {props.children}
    </button>
  );
}

function App() {
  return (
    <Button
      className={css`
        border-radius: 8px;
      `}
    ></Button>
  );
}

Output rules with care of layers order, except that in development environment could just simply rely on browser's native css layers feature.

Motivation

The cx function of@linaria/atomic has high runtime overhead.

Possible implementations

Related Issues

[jpnelson]

I think this is a good idea too. What do you think about doing something similar to what we do with @media rules, and supporting the native API? Eg.

const class = css`
    @layer component {
        border-radius: 8px;
    }
`;

[hackwaly]

I think this is a good idea too. What do you think about doing something similar to what we do with @media rules, and supporting the native API? Eg.

const class = css`
    @layer component {
        border-radius: 8px;
    }
`;

I think the native syntax is better.