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.

Installation

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

npm i -D svelte-windicss-preprocess

Configuration

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

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

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