DEV Community

Cover image for Migration CSS modules to vanilla-extract
j1ngzoue
j1ngzoue

Posted on • Updated on

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.

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

output

import { style } from "@vanilla-extract/css";
export const foo = style({
  backgroundColor: "blue",
  "@media": {
    "(min-width: 1200px)": {
      color: "red",
      fontSize: "5rem",
    },
  },
});
Enter fullscreen mode Exit fullscreen mode

This tool was created on a trial basis.I think css modules and other css can be converted with little or no problem.

Discussion (0)