encre-css-vite

A vite plugin to generate CSS styles from utility classes using encre-css.

Getting started

Requirement: you need to have a valid Rust toolchain installed. You can easily install one using rustup.

Install the library:

npm install encre-css-vite
# OR yarn add encre-css-vite
# OR pnpm add encre-css-vite

Then, use it in your vite.config.js:

import { defineConfig } from 'vite'
import encrecss from 'encre-css-vite'

export default defineConfig({
  plugins: [encrecss()],
})

Finally, import the virtual:encre.css file in your entrypoint JS file.

// In e.g main.js
import 'virtual:encre.css'

You can then use any encre-css utility class in every JS, TS, HTML, … file and it will have its CSS generated and bundled.

Configuration

By default all (and only) the files matching that regex will be scanned: /\.(vue|svelte|[jt]sx|vine.ts|mdx?|astro|elm|php|phtml|html|js|ts)($|\?)/.

If you want to include or exclude some files, you can give configuration parameters to the plugin, e.g

import { defineConfig } from 'vite'
import encrecss from 'encre-css-vite'

export default defineConfig({
  plugins: [encrecss({
    include: [
      /\.(vue|svelte|[jt]sx|[jt]s|vine.ts|mdx?|astro|elm|php|phtml|html)($|\?)/,
      'src/**/*.tera',
    ],
    exclude: [
      'ignored/**',
    ],
  })],
})

If you use Gleam, you should use

include: [
  /\.([jt]sx|[jt]s|html)($|\?)/,
  /build\/dev\/javascript\/<project name>/,
]

(and replace <projet name> with your Gleam's project name). It's because Gleam generates a lot of .mjs files in the build directory and scanning all of them is really slow. However, only those in /build\/dev\/javascript\/<project name>/ could contain encre-css classes because the files in this directory are compiled from your main source files.

License

encre-css-vite is released under the MIT license.