Overriding @utility in CSS

[wiebekaai]

Hey, I'm building websites and I want to have a base configuration and make overrides per project.

For example, in main.css, I would have:

@utility text-heading-1 { font-family: 'Default font'; ... }

In overrides.css, I would create overrides:

@utility text-heading-1 { font-family: 'Custom font'; }

Currently, the styles are combined, but the main one takes priority for some reason. It does not remove duplicate properties. In my example, the generated CSS has 2 font-family properties.

Is there any way I could achieve what I want? I like utilities because I apply different styles for different breakpoints.

[wongjn]

You could consider using @theme configuration, like:

@theme {
  --font-heading-1: 'Default font', …;
}

And then consumers can override this later:

@import "./path/to/main.css";

@theme {
  --font-heading-1: 'Custom font';
}

[wiebekaai]

Thanks! Yea, that works. Though it does feel a bit off to have to define every property of a button as a variable (height, padding, font size, font weight etc).