tessl/npm-unocss

The instant on-demand Atomic CSS engine for generating styles dynamically without parsing, AST, or scanning.

—

Pending

Overview

Eval results

Files

Build Tool Integrations

Name: tessl/npm-unocss
Author: tessl

Integration plugins for popular build tools and frameworks, providing seamless UnoCSS integration with development and build processes.

Capabilities

Vite Integration

Vite plugin for UnoCSS integration with hot module replacement and development server support.

/**
 * UnoCSS Vite plugin with preset defaults
 * @param configOrPath - Configuration object or path to config file
 * @returns Array of Vite plugins
 */
export default function UnocssVitePlugin<Theme>(
  configOrPath?: VitePluginConfig<Theme> | string
): Plugin[];

interface VitePluginConfig<Theme = object> extends UserConfig<Theme> {
  /** Mode for CSS generation */
  mode?: 'global' | 'vue-scoped' | 'svelte-scoped' | 'shadow-dom' | 'per-module' | 'dist-chunk';
  /** Inspector configuration */
  inspector?: boolean | InspectorOptions;
  /** Virtual CSS modules */
  virtualModules?: string[] | boolean;
  /** Enable source maps */
  sourcemap?: boolean;
  /** HMR configuration */
  hmr?: boolean | { port?: number };
}

interface InspectorOptions {
  /** Inspector port */
  port?: number;
  /** Enable inspector */
  enabled?: boolean;
}

Usage Examples:

// vite.config.ts
import { defineConfig } from 'vite';
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [
    UnoCSS({
      // Configuration here, or use defineConfig in uno.config.ts
      inspector: true,
      mode: 'global'
    })
  ]
});

// With config file path
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [
    UnoCSS('./uno.config.ts')
  ]
});

Astro Integration

Astro integration for UnoCSS with SSR and component support.

/**
 * UnoCSS Astro integration with preset defaults
 * @param config - Configuration object
 * @returns Astro integration
 */
export default function UnocssAstroIntegration<Theme>(
  config?: AstroIntegrationConfig<Theme>
): AstroIntegration;

interface AstroIntegrationConfig<Theme = object> extends UserConfig<Theme> {
  /** Include patterns for files to process */
  include?: string | string[];
  /** Exclude patterns for files to ignore */
  exclude?: string | string[];
  /** Enable inspector */
  inspector?: boolean;
  /** Astro-specific mode */
  mode?: 'global' | 'per-module';
}

interface AstroIntegration {
  name: string;
  hooks: Record<string, any>;
}

Usage Examples:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import UnoCSS from 'unocss/astro';

export default defineConfig({
  integrations: [
    UnoCSS({
      include: ['**/*.astro', '**/*.vue', '**/*.tsx'],
      inspector: true
    })
  ]
});

// With separate config file
import UnoCSS from 'unocss/astro';

export default defineConfig({
  integrations: [UnoCSS()]
});

Webpack Integration

Webpack plugin for UnoCSS integration with module federation and code splitting support.

/**
 * UnoCSS Webpack plugin with preset defaults
 * @param configOrPath - Configuration object or path to config file
 * @returns Webpack plugin
 */
export default function UnocssWebpackPlugin<Theme>(
  configOrPath?: WebpackPluginOptions<Theme> | string
): any;

interface WebpackPluginOptions<Theme = object> extends UserConfig<Theme> {
  /** Test pattern for files to process */
  test?: RegExp;
  /** Include patterns */
  include?: string | RegExp | (string | RegExp)[];
  /** Exclude patterns */
  exclude?: string | RegExp | (string | RegExp)[];
  /** Enable minification */
  minify?: boolean;
  /** Webpack-specific mode */
  mode?: 'global' | 'chunk' | 'module';
}

Usage Examples:

// webpack.config.js
const UnoCSS = require('unocss/webpack');

module.exports = {
  plugins: [
    new UnoCSS({
      test: /\.(vue|jsx?|tsx?)$/,
      minify: true
    })
  ]
};

// ESM syntax
import UnoCSS from 'unocss/webpack';

export default {
  plugins: [
    new UnoCSS('./uno.config.ts')
  ]
};

PostCSS Integration

PostCSS plugin for UnoCSS integration with existing PostCSS workflows. This is a direct re-export of the @unocss/postcss plugin.

/**
 * UnoCSS PostCSS plugin (re-exported from @unocss/postcss)
 * @param options - PostCSS plugin configuration options
 * @returns PostCSS plugin
 */
export default function unocss(options?: any): any;

Usage Examples:

// postcss.config.js
module.exports = {
  plugins: {
    'unocss/postcss': {
      content: ['**/*.html', '**/*.js', '**/*.vue']
    }
  }
};

// With Tailwind migration
module.exports = {
  plugins: {
    'unocss/postcss': {
      configOrPath: './uno.config.ts'
    },
    'autoprefixer': {}
  }
};

/* CSS file using PostCSS plugin */
@unocss preflights;
@unocss default;

/* Your custom CSS */
.custom-class {
  @apply text-center py-4;
}

@unocss utilities;

Integration-Specific Features

Development Tools

// Enable inspector across integrations
export default defineConfig({
  // Vite
  plugins: [UnoCSS({ inspector: true })],
  
  // Astro  
  integrations: [UnoCSS({ inspector: true })],
  
  // Webpack
  plugins: [new UnoCSS({ inspector: true })]
});

Hot Module Replacement

// Vite HMR configuration
export default defineConfig({
  plugins: [
    UnoCSS({
      hmr: {
        port: 3456
      }
    })
  ]
});

Content Sources

// File watching configuration
export default defineConfig({
  // Global content configuration
  content: {
    filesystem: ['**/*.{html,js,jsx,ts,tsx,vue,svelte}'],
    inline: ['<div class="text-red-500">...</div>']
  },
  
  // Integration-specific
  plugins: [
    UnoCSS({
      include: ['src/**/*.{vue,jsx,tsx}'],
      exclude: ['node_modules/**']
    })
  ]
});

Framework-Specific Configurations

React/Next.js Setup

// next.config.js
const UnoCSS = require('unocss/webpack');

module.exports = {
  webpack: (config) => {
    config.plugins.push(
      new UnoCSS({
        test: /\.(jsx?|tsx?)$/
      })
    );
    return config;
  }
};

// Or with Vite (if using Vite with React)
export default defineConfig({
  plugins: [
    react(),
    UnoCSS({
      mode: 'global'
    })
  ]
});

Vue Setup

// vite.config.ts (Vue)
import vue from '@vitejs/plugin-vue';
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS({
      mode: 'vue-scoped'
    })
  ]
});

Svelte Setup

// vite.config.js (SvelteKit)
import { sveltekit } from '@sveltejs/kit/vite';
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [
    UnoCSS({
      mode: 'svelte-scoped',
      inspector: true
    }),
    sveltekit()
  ]
});

Nuxt Setup

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@unocss/nuxt'],
  css: ['@unocss/reset/tailwind.css'],
  unocss: {
    // UnoCSS options
    inspector: true
  }
});

CSS Output Modes

Global Mode

// Single global CSS file
export default defineConfig({
  plugins: [
    UnoCSS({
      mode: 'global' // Default mode
    })
  ]
});

Per-Module Mode

// CSS modules per component
export default defineConfig({
  plugins: [
    UnoCSS({
      mode: 'per-module'
    })
  ]
});

Scoped Modes

// Framework-specific scoping
export default defineConfig({
  plugins: [
    UnoCSS({
      mode: 'vue-scoped'    // Vue scoped styles
      // mode: 'svelte-scoped' // Svelte scoped styles
      // mode: 'shadow-dom'    // Shadow DOM encapsulation
    })
  ]
});

Integration Import Patterns

Direct Integration Imports

// Import from specific integration paths
import UnoCSS from 'unocss/vite';
import UnoCSS from 'unocss/astro';
import UnoCSS from 'unocss/webpack';
import unocss from 'unocss/postcss';

Plugin Configuration

// Standard plugin configuration pattern
export default defineConfig({
  plugins: [
    UnoCSS({
      // UnoCSS configuration
      presets: [presetUno()],
      // Integration-specific options
      inspector: true,
      mode: 'global'
    })
  ]
});

Install with Tessl CLI