Migration CSS modules to vanilla-extract

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.