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