c2ve v0.0.12-alpha

Convert CSS (SCSS/SASS) to vanilla-extract.

playground

Install

npm i -D c2ve

Usage

Once installed, you can run it to convert css (scss/sass) files to vanilla-extract ts files. For example:

npx c2ve sample/test.css

Output:sample/test.css.ts

Sample

From

.foo {
  background-color: blue;
}
@media (min-width: 1200px) {
  input {
    font-size: 5rem;
  }
  .foo {
    font-size: 5rem;
    color: red;
  }
  .bar {
    font-size: 10rem;
  }
}

To

import { globalStyle, style } from "@vanilla-extract/css";

globalStyle("input", {
  "@media": {
    "(min-width: 1200px)": {
      fontSize: "5rem",
    },
  },
});
export const bar = style({
  "@media": {
    "(min-width: 1200px)": {
      fontSize: "10rem",
    },
  },
});
export const foo = style({
  backgroundColor: "blue",
  "@media": {
    "(min-width: 1200px)": {
      fontSize: "5rem",
      color: "red",
    },
  },
});

Principles of conduct

Please see the principles of conduct when building a site.

License

This library is licensed under the MIT license.