https://github.com/quackquackquack/vite-plugin-env-color
vite-plugin-env-color
https://github.com/quackquackquack/vite-plugin-env-color
Last synced: 6 months ago
JSON representation
vite-plugin-env-color
- Host: GitHub
- URL: https://github.com/quackquackquack/vite-plugin-env-color
- Owner: QuackQuackQuack
- Created: 2024-08-07T01:31:39.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-09T06:37:14.000Z (almost 2 years ago)
- Last Synced: 2025-03-10T18:44:38.176Z (over 1 year ago)
- Language: TypeScript
- Size: 40 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
vite-plugin-env-color
Create a color file with your environment variables in Vite.js
## When? 🧐
Register color with ENV and use it when you want to make it into a Javascript or Css or Scss file.
## Installation 💻
Install the package as a development dependency:
```bash
npm i -D vite-plugin-env-color
# pnpm add -D vite-plugin-env-color
# yarn add -D vite-plugin-env-color
```
## Usage 🚀
You can provide a list of environment variable names to expose to your client code:
```js
import { defineConfig } from 'vite'
import VitePluginEnvColor from 'vite-plugin-env-color'
export default defineConfig({
plugins: [
VitePluginEnvColor(),
],
})
```
### Usage with default values 📌
```js
VitePluginEnvColor({
// DEFAULT ENV FILTER NAME
ENV_FILTER_NAME: 'VITE_COLOR',
// DEFAULT ENV FILTER THEME NAME
ENV_THEME_FILTER_NAME: 'VITE_THEME',
// DEFAULT ENV FILTER THEMES
ENV_THEME_COLOR_FILTER_NAMES: ['VITE_THEME_DARK', 'VITE_THEME_LIGHT'],
// DEFAULT SCRIPT FILE NAME
TS_FILE_NAME: 'color',
// DEFAULT SCRIPT PATH
TS_BASE_PATH: './src',
// DEFAULT CSS FILE NAME
CSS_FILE_NAME: 'color',
// DEFAULT CSS PATH
CSS_BASE_PATH: './public/css',
// DEFAULT SCSS FILE NAME
SCSS_FILE_NAME: 'color',
// DEFAULT SCSS PATH
SCSS_BASE_PATH: './src/assets',
// BUILD JS
IS_BUILD_JS: true,
// BUILD CSS
IS_BUILD_CSS: true,
// BUILD SCSS
IS_BUILD_SCSS: true,
}),
```
## Default Output Example ⚖️
#### ENV
```shell
VITE_COLOR_BLACK=000
VITE_COLOR_GRAY=EEE
VITE_COLOR_WHITE_SMOKE=F5F5F5
VITE_THEME_DARK_RED=E71717
VITE_THEME_DARK_SKY_BLUE=2B6FE6
VITE_THEME_LIGHT_FONT_COLOR=222
VITE_THEME_LIGHT_SUB_FONT_COLOR=666
```
#### Created Ts File
```ts
// color
export type ColorType = 'black' |'gray' |'whiteSmoke' ;
export type Color = Record;
// dark theme color
export type DarkColorType = 'red' |'skyBlue' ;
export type DarkColor = Record;
// light theme color
export type LightColorType = 'fontColor' |'subFontColor' ;
export type LightColor = Record;
export const color: Color = {
black: '#000',
gray: '#EEE',
whiteSmoke: '#F5F5F5',
}
export const darkColor: DarkColor = {
red: '#E71717',
skyBlue: '#2B6FE6',
}
export const lightColor: LightColor = {
fontColor: '#222',
subFontColor: '#666',
}
```
#### Created Css File
```css
html {
/* color */
--black: #000;
--gray: #EEE;
--whiteSmoke: #F5F5F5;
/* rgb */
--black-RGB: 0, 0, 0;
--gray-RGB: 238, 238, 238;
--whiteSmoke-RGB: 245, 245, 245;
}
/* dark theme */
html[data-theme=dark] {
/* color */
--red: #E71717;
--skyBlue: #2B6FE6;
/* rgb */
--red-RGB: 231, 23, 23;
--skyBlue-RGB: 43, 111, 230;
}
/* light theme */
html[data-theme=light] {
/* color */
--fontColor: #222;
--subFontColor: #666;
/* rgb */
--fontColor-RGB: 34, 34, 34;
--subFontColor-RGB: 102, 102, 102;
}
```
#### Created Scss File
``` scss
html {
// color
--black: #000;
--gray: #EEE;
--whiteSmoke: #F5F5F5;
// rgb
--black-RGB: 0, 0, 0;
--gray-RGB: 238, 238, 238;
--whiteSmoke-RGB: 245, 245, 245;
}
// dark theme
html[data-theme=dark] {
// color
--red: #E71717;
--skyBlue: #2B6FE6;
// rgb
--red-RGB: 231, 23, 23;
--skyBlue-RGB: 43, 111, 230;
}
// light theme
html[data-theme=light] {
// color
--fontColor: #222;
--subFontColor: #666;
// rgb
--fontColor-RGB: 34, 34, 34;
--subFontColor-RGB: 102, 102, 102;
}
```
## License 📝
This library is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).