vite-plugin-sass-dts-plus v1.3.7

vite-plugin-sass-dts

A plugin that automatically creates a type file when using the CSS module type-safely.

Demo

Install

npm i -D vite-plugin-sass-dts

Options

Add it to vite.config.ts

import { defineConfig } from 'vite'
import sassDts from 'vite-plugin-sass-dts'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [sassDts()],
})

Usage

You can create a dts file by saving the scss file during development. You can check the usage example when the following options are set. Prepare the vite.config.ts file with the following options and start it in development mode.

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import sassDts from 'vite-plugin-sass-dts'
import path from 'path'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles" as common;`,
        importer(...args) {
          if (args[0] !== '@/styles') {
            return
          }

          return {
            file: `${path.resolve(__dirname, './src/assets/styles')}`,
          }
        },
      },
    },
  },
  plugins: [
    react(),
    sassDts({
      enabledMode: ['development', 'production'],
      global: {
        generate: true,
        outputFilePath: path.resolve(__dirname, './src/style.d.ts'),
      },
      sourceDir: path.resolve(__dirname, './src'),
      outputDir: path.resolve(__dirname, './dist'),
    }),
  ],
})

npm run dev

Then save the following file ...

src/assets/styles/_index.scss

.row {
  display: flex;
}

src/App.module.scss

.header-1 {
  background-color: common.$primary;
  &.active {
    background-color: black;
  }
}

.input {
  @media (min-width: 768px) {
    max-width: 370px;
  }
}

Saving the scss file creates a d.ts file in the outputDir hierarchy.

Note: if outputDir is not set, declaration files are output to the same directory as the source files.

dist/App.scss.d.ts

import globalClassNames, { ClassNames as GlobalClassNames } from './style.d'
declare const classNames: typeof globalClassNames & {
  readonly 'header-1': 'header-1'
  readonly active: 'active'
  readonly input: 'input'
}
export = classNames

The optional global type definition is output to the output path of the common style specified in the options.

src/style.d.ts

declare const classNames: {
  readonly row: 'row'
}
export = classNames

Principles of conduct

Please see the principles of conduct when building a site.

License

This library is licensed under the MIT license.