PostCSS

Installation

1. Install stilvoll and @stilvoll/postcss

   npm install -D stilvoll @stilvoll/postcss

2. Include the plugin in your postcss config

   postcss.config.js

   module.exports = {
     plugins: { "@stilvoll/postcss": {} },
   };

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 the @stilvoll directive to your main CSS file. This will get replaced by the generated utility class in the build step.

   main.css

   @stilvoll;

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 with Postcss

Next.js