Migration CSS modules to vanilla-extract

#vanillaextract #css #cssmodules #migration

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.

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.