Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/activeguild/vite-plugin-sass-dts
This is a plugin that automatically creates a type file when using the CSS module type-safely.
https://github.com/activeguild/vite-plugin-sass-dts
css cssmodules plugin react sass scss vite
Last synced: about 2 months ago
JSON representation
This is a plugin that automatically creates a type file when using the CSS module type-safely.
- Host: GitHub
- URL: https://github.com/activeguild/vite-plugin-sass-dts
- Owner: activeguild
- License: mit
- Created: 2021-10-12T15:32:09.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-07-25T02:56:54.000Z (about 2 months ago)
- Last Synced: 2024-07-26T03:01:54.205Z (about 2 months ago)
- Topics: css, cssmodules, plugin, react, sass, scss, vite
- Language: HTML
- Homepage:
- Size: 2.23 MB
- Stars: 113
- Watchers: 5
- Forks: 18
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-sass-dts - This is a plugin that automatically creates a type file when using the CSS module type-safely. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-sass-dts - This is a plugin that automatically creates a type file when using the CSS module type-safely. (Plugins / Framework-agnostic Plugins)
README
vite-plugin-sass-dts ⚡ Welcome 😀
# vite-plugin-sass-dts
A plugin that automatically creates a type file when using the CSS module type-safely.
## Demo
## Install
```bash
npm i -D vite-plugin-sass-dts
```
## Options
| Parameter | Type | Description |
| --------------------- | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| enabledMode | string[] | Create d.ts files for css modules of file extension css, sass, scss included in the project at build time.
Valid enumerations 'development' and 'production'. By default it is enabled only for development.
We recommend that you turn off the flag once you have created the d.ts file, as it will take a long time to build. (default [`development`]) |
| global.generate | boolean | Outputs the common style set in additionalData of preprocessorOptions as a global type definition file. |
| global.outputFilePath | string | Specify the file that outputs the global common style with an absolute path.Relative paths will be supported. |
| typeName.replacement | string \| (fileName: string) => string | Type name can be changed to any value. (default is the classname key as a string. e.g. `theClassName: 'theClassName';`) |
| outputDir | string | An absolute path to the output directory. If undefined, declaration files will be generated in the source directories. `) |
| sourceDir | string | An absolute path to your source code directory. The plugin will replace this path with `outputDir` option when writing declaration files. `) |
| esmExport | boolean | Specify dts export type. If enabled, going to use ESM style export `export default ...`. Otherwise `export = ...`. |
| prettierFilePath | string | Specify the path to the prettier configuration file. |
## Add it to vite.config.ts
```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](https://github.com/activeguild/vite-plugin-sass-dts/tree/master/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]
```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'),
}),
],
})
```
```bash
npm run dev
```
Then save the following file ...
[src/assets/styles/_index.scss]
```scss
.row {
display: flex;
}
```
[src/App.module.scss]
```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]
```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]
```ts
declare const classNames: {
readonly row: 'row'
}
export = classNames
```
## Principles of conduct
Please see [the principles of conduct](https://github.com/activeguild/vite-plugin-sass-dts/blob/master/.github/CONTRIBUTING.md) when building a site.
## License
This library is licensed under the [MIT license](https://github.com/activeguild/vite-plugin-sass-dts/blob/master/LICENSE).