gt-agent-company/.agents/skills/vite/references/features-css.md

name, description

name	description
features-css	CSS handling in Vite including modules, pre-processors, PostCSS, and Lightning CSS

CSS Handling

Vite provides rich CSS support with HMR, @import inlining, and automatic URL rebasing.

Basic CSS Import

import './styles.css'  // Injected into page with HMR support

CSS Modules

Files ending with .module.css are treated as CSS modules:

/* example.module.css */
.red {
  color: red;
}

import classes from './example.module.css'
element.className = classes.red

Named Imports with camelCase

// vite.config.ts
export default defineConfig({
  css: {
    modules: {
      localsConvention: 'camelCaseOnly'
    }
  }
})

// .apply-color -> applyColor
import { applyColor } from './example.module.css'

CSS Pre-processors

Install the pre-processor, no Vite plugin needed:

# Sass (sass-embedded recommended for performance)
npm add -D sass-embedded

# Less
npm add -D less

# Stylus
npm add -D stylus

Use by file extension:

import './styles.scss'
import './styles.less'
import './styles.styl'

Pre-processor Options

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`,
        importers: [/* ... */]
      },
      less: {
        math: 'parens-division'
      }
    },
    preprocessorMaxWorkers: true  // Use multiple threads
  }
})

Combined with CSS Modules

import styles from './component.module.scss'

PostCSS

Automatically applied if postcss.config.js exists:

// postcss.config.js
export default {
  plugins: [
    require('postcss-nesting'),
    require('autoprefixer')
  ]
}

Or configure inline:

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        postcssNesting(),
        autoprefixer()
      ]
    }
  }
})

Lightning CSS

Experimental faster CSS processing:

npm add -D lightningcss

export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: {
        chrome: 111
      },
      cssModules: {
        // Lightning CSS modules config
      }
    }
  }
})

Use Lightning CSS for minification only:

export default defineConfig({
  build: {
    cssMinify: 'lightningcss'
  }
})

Disable CSS Injection

Import CSS as string without injecting:

import styles from './styles.css?inline'  // Returns CSS string, not injected

Source Maps

Enable CSS source maps in development:

export default defineConfig({
  css: {
    devSourcemap: true
  }
})

CSS Code Splitting

By default, CSS is extracted per async chunk. Disable to get single CSS file:

export default defineConfig({
  build: {
    cssCodeSplit: false  // Single CSS file for entire app
  }
})

CSS Target

Set different browser target for CSS:

export default defineConfig({
  build: {
    cssTarget: 'chrome61'  // For Android WeChat WebView
  }
})

@import and URL Handling

• @import statements are inlined automatically
• Vite aliases work in @import
• url() references are rebased for correctness
• Works across Sass/Less files in different directories