Css-to-vanilla-extract NPM

Generate vanilla-extract typescript file from the CSS (SCSS/SASS) file.

The following APIs are covered.

Motivation

Generate style definitions received from designers without any errors.
Cost-effective migration of existing projects using css modules.

Install

npm i -D css-to-vanilla-extract

Usage

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

npx css-to-vanilla-extract sample/test.css

Output:sample/test.css.ts

Sample

Input

.foo {
  background-color: blue;
}
@media (min-width: 1200px) {
  input {
    font-size: 5rem;
  }
  .foo {
    font-size: 5rem;
    color: red;
  }
  .bar {
    font-size: 10rem;
  }
}
@font-face {
  font-family: "Roboto";
  src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
}

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

.fizz .buzz {
  background-color: blue;
}

.fizz .buzz {
  font-size: 5rem;
}

Output

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

globalFontFace("Roboto", {
  src: "url(https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap)",
});

globalKeyframes("slidein", {
  from: {
    transform: "translateX(0%)",
  },
  to: {
    transform: "translateX(100%)",
  },
});

export const fizz = style({});

export const bar = style({
  "@media": {
    "(min-width: 1200px)": {
      fontSize: "10rem",
    },
  },
});

export const buzz = style({
  selectors: {
    [`${fizz} &`]: {
      backgroundColor: "blue",
      fontSize: "5rem",
    },
  },
});

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

globalStyle("input", {
  "@media": {
    "(min-width: 1200px)": {
      fontSize: "5rem",
    },
  },
});