svelte-windicss-preprocess

svelte-windicss-preprocess

A svelte preprocessor for windicss. Windi CSS is a next generation utility-first CSS framework.

If you are already familiar with Tailwind CSS, think about Windi CSS as an on-demanded alternative to Tailwind, which provides faster load times, fully compatible with Tailwind v2.0 and with a bunch of additional cool features.

⚠️⚠️⚠️ SVELTE KIT ⚠️⚠️⚠️

For svelte-kit with vite please try to use our vite-plugin first. This repo is meant for special use cases or bundler solution without SSR.

we do have an experimental option flag kit: true on svelte-windicss-preprocess

Installation

Now we have a great playground, you can try it online before installing it.

npm i -D svelte-windicss-preprocess

Configuration

Default Options shown below

// svelte.config.js
module.exports = {
  preprocess: require('svelte-windicss-preprocess').preprocess({
    compile: false,
    prefix: 'windi-',
    verbosity: 1,
    debug: false,
    devTools: {
      completions: false,
    },
  }),
};

option	description
config	string that represent the location of windicss configuration
safeList	array of classes windicss should include even if not used in markup
compile	boolean wether windicss runs in compilation or interpretion mode
prefix	class prefix if preprocessor is running in compilation mode
silent	boolean of logging
devTools	object to configure optional windicss devTools
devTools.enabled	boolean to activate windi devtools in runtime
devTools.completions	boolean to activate css class auto-completion in devtools

Integrations

Vanilla Svelte

// rollup.config.js
export default {
  // ...
  plugins: [
    svelte({
      // ...
      preprocess: [
        require('svelte-windicss-preprocess').preprocess({
          config: 'windi.config.js', // windi config file path (optional)
          compile: true, // false: interpretation mode; true: compilation mode (optional)
          prefix: 'windi-', // set compilation mode style prefix
          safeList: ['bg-gray-600', 'text-white'], // (optional)
        }),
      ],
    }),
  ],
  // ...
};

Snowpack Svelte

// svelte.config.js
module.exports = {
  preprocess: [
    require('svelte-windicss-preprocess').preprocess({
      config: 'windi.config.js', // windi config file path (optional)
      compile: true, // false: interpretation mode; true: compilation mode (optional)
      prefix: 'windi-', // set compilation mode style prefix
      safeList: ['bg-gray-600', 'text-white'], // (optional)
    }),
  ],
};

Rollup Sapper

// rollup.config.js
export default {
  client: {
    // ...
    plugins: [
      // ...
      svelte({
        // ...
        preprocess: [
          require('svelte-windicss-preprocess').preprocess({
            config: 'windi.config.js', // windi config file path (optional)
            compile: true, // false: interpretation mode; true: compilation mode (optional)
            prefix: 'windi-', // set compilation mode style prefix
            safeList: ['bg-gray-600', 'text-white'], // (optional)
          }),
        ],
      }),
      // ...
    ],
  },

  server: {
    // ...
    plugins: [
      // ...
      svelte({
        // ...
        preprocess: [
          require('svelte-windicss-preprocess').preprocess({
            config: 'windi.config.js', // windi config file path (optional)
            compile: true, // false: interpretation mode; true: compilation mode (optional)
            prefix: 'windi-', // set compilation mode style prefix
            safeList: ['bg-gray-600', 'text-white'], // (optional)
          }),
        ],
      }),
      // ...
    ],
  },
};

Resources

• Documents

• MIT License