Option CSS

npm install -D @tsdown/css

// src/index.ts
import './style.css'
export function greet() { return 'Hello' }

import './style.css'                   // → .css file
import css from './theme.css?inline'   // → JS string

# Sass (either one)
npm install -D sass-embedded  # recommended, faster
npm install -D sass

# Less
npm install -D less

# Stylus
npm install -D stylus

import './style.scss'
import './theme.less'
import './global.styl'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$brand-color: #ff7e17;`,
      },
      less: {
        math: 'always',
      },
      stylus: {
        define: { '$brand-color': '#ff7e17' },
      },
    },
  },
})

// String form
scss: {
  additionalData: `@use "src/styles/variables" as *;`,
}

// Function form
scss: {
  additionalData: (source, filename) => {
    if (filename.includes('theme')) return source
    return `@use "src/styles/variables" as *;\n${source}`
  },
}

export default defineConfig({
  css: {
    minify: true,
  },
})

export default defineConfig({
  target: 'node18',
  css: {
    target: 'chrome90', // CSS-specific target
  },
})

export default defineConfig({
  css: {
    transformer: 'postcss',
  },
})

export default defineConfig({
  css: {
    transformer: 'postcss',
    postcss: {
      plugins: [require('autoprefixer')],
    },
    // Or: postcss: './config' — path to search for postcss.config.js
  },
})

npm install -D lightningcss

/* Input */
.foo { & .bar { color: red } }

/* Output (chrome108) */
.foo .bar { color: red }

import { Features } from 'lightningcss'

export default defineConfig({
  css: {
    lightningcss: {
      targets: { chrome: 100 << 16 },
      include: Features.Nesting,
    },
  },
})

import styles from './app.module.css'
console.log(styles.title) // "scoped_title_hash"

export default defineConfig({
  css: {
    modules: {
      scopeBehaviour: 'local',             // 'local' (default) | 'global'
      generateScopedName: '[hash]_[local]', // Lightning CSS pattern string
      localsConvention: 'camelCase',       // 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'
    },
  },
})

npm install -D postcss postcss-modules

export default defineConfig({
  css: {
    fileName: 'my-library.css', // Custom name (default: 'style.css')
  },
})

export default defineConfig({
  css: {
    splitting: true, // Each JS chunk gets a corresponding .css file
  },
})

export default defineConfig({
  css: {
    inject: true,
  },
})

npm install -D postcss postcss-import postcss-modules