Vite

Installation

1. Install stilvoll and @stilvoll/vite-plugin

   npm install -D stilvoll @stilvoll/vite-plugin

2. Include the plugin in your vite config

   vite.config.js

   import { defineConfig } from "vite";
   import stilvoll from "@stilvoll/vite-plugin";
   
   export default defineConfig({
     plugins: [stilvoll()],
   });

3. Create a stilvoll.config.js file:

   stilvoll.config.js

   export default {
     input: ["./src/index.css"],
     rules: [
       // Define or use imported rules here
     ],
   };

4. Add virtual:stilvoll.css to your main entry file

   main.js

   import "virtual:stilvoll.css";

5. You can now use your utility classes directly, or by importing the sv object

   page.jsx

   import React from 'react';
   import cn from 'classnames';
   import { sv } from 'stilvoll';
   
   function Page() {
     return (
       <div className={cn(sv.flex, sv.items_center, sv.gap_l)}>
         <div className={sv.invisible}>
           OMG, typesafe utility classes, so nice.
         </div>
       </div>
     );
   }
   
   export default Page;

Examples

Vite