Bootstrapping Master CSS with Vite in seconds

As Vite continues to grow rapidly and become the mainstream tool for development, developers are increasingly turning to Vite to build their applications. Initially, we created a Vite plugin solely to integrate the Master CSS static extraction mode, with other modes requiring manual setup. Now, with the @master/css.vite plugin, all rendering modes of Master CSS can be integrated with zero configuration.

All-in-one Vite plugin

We've simplified the setup process, reducing the number of steps and removing the need for guides on different rendering modes, as the setup has become easier.

If you don't have a project yet, create one using npm create vite@latest my-app.

npm i @master/css.vite@rc

Once installed, simply add the plugin to vite.config.js to enable any mode:

import { defineConfig } from 'vite'import masterCSS from '@master/css.vite' export default defineConfig({    plugins: [        masterCSS()     ]})

By default, the options.mode is set to the classic runtime mode, and you can choose other available modes as needed.

Now run your vite development server and start using Master CSS!

npm run run dev

Other integrations

Thanks to Vite's thriving ecosystem, we’ve also established framework integrations for Nuxt

export default defineNuxtConfig({    modules: [        '@master/css.nuxt' // 'progressive'        // ['@master/css.nuxt', { mode: 'extract' }]        // ['@master/css.nuxt', { mode: 'runtime' }]        // ['@master/css.nuxt', { mode: 'pre-render' }]    ]})

and Astro.

import masterCSS from '@master/css.astro'export default defineConfig({    integrations: [        masterCSS() // 'runtime'        // masterCSS({ mode: 'extract' })    ]})

That's it! You can now use Master CSS in your any project with ease. For full information, check out the installation guide.