Sfumato browser support and compatibility with other tooling.
Sfumato was built to support modern web browsers, and the core features of the framework depend on these browser versions:
Sfumato also includes support for some newer CSS features like @starting-style, text-wrap: balance, and text-wrap: pretty that have limited browser support. As is true for all Sfumato features, if your target web browsers don't support a feature, don't use it.
If you're unsure about the support for a modern platform feature, visit https://caniuse.com/ to see if your target web browser is listed.
Sfumato is a full-featured CSS build tool designed for a specific workflow, and is not suitable for use with other CSS preprocessors like Sass, Less, or Stylus.
Since Sfumato is designed for modern browsers, you don't really need a preprocessor for things like nesting or variables. And Sfumato will bundle your imports, add vendor prefixes, etc.
Sfumato is all you need to style your web front-end.
Sfumato automatically bundles other CSS files you include with @import, without the need for a separate preprocessing tool.
In the example above the CSS code from framework.css is merged into your CSS and processed with the rest for Sfumato features. Because it specifies the components layer its styles can be overridden by utility classes.
The styles from buttons.css cannot be overridden by utility classes unless you append them with the important flag, like text-xl!.
All modern browsers support CSS custom properties (variables) without the need for a preprocessor. Internally, Sfumato relies heavily on CSS custom properties, so if you can use Sfumato in your project, you can use them too.
The web browsers supported by Sfumato also support CSS class nesting, so there's no need to use a preprocessor for that feature.
Note: Using nesting in your custom CSS works in the browsers supported by Sfumato.
If you're using Sfumato with these tools, for the best experience we recommend avoiding <style> blocks in your components. Just use utility classes in the markup, following the Sfumato pattern.
