Introduction
We have created a tool to generate typescript files for vanilla-extract, a Zero-runtime Stylesheets, from css (scss/sass) style definitions.
https://github.com/activeguild/css-to-vanilla-extract
The tools described here can be tried in the playground.
The following APIs are covered.
- styling-api/#style
- styling-api/#globalstyle
- styling-api/#globalfontface
- styling-api/#globalkeyframes
Motivation
- Convert style definitions received from designers without any errors.
- Cost-effective migration of existing projects using css modules.
e.g.
input
.foo {
background-color: blue;
}
@media (min-width: 1200px) {
.foo {
font-size: 5rem;
color: red;
}
}
output
import { style } from "@vanilla-extract/css";
export const foo = style({
backgroundColor: "blue",
"@media": {
"(min-width: 1200px)": {
color: "red",
fontSize: "5rem",
},
},
});
This tool was created on a trial basis.I think css modules and other css can be converted with little or no problem.
Top comments (0)