diff --git a/README.md b/README.md index 72050db..01305b4 100644 --- a/README.md +++ b/README.md @@ -1 +1,55 @@ +

ts-css-modules-vite-plugin ⚡ Welcome 😀

+ +

+ GitHub Actions status +

+ # ts-css-modules-vite-plugin + +Read the definition of `vite.config.ts` and resolve the `CSS Modules` type. +Supports `sass`. + +## Install + +```bash +npm i -D ts-css-modules-vite-plugin +``` + +## Add it to the `tsconfig.json` + +```json +{ + "compilerOptions": { + ... + "plugins": [{"name": "ts-css-modules-vite-plugin"}] + }, +} +``` + +## Resolve the `vite.config.ts` + +Resolve the `preprocessorOptions` setting within the plugin. + +```ts +import path from "path"; +import { defineConfig } from "vite"; + +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")}`, + }; + }, + }, + }, + }, +}); +``` diff --git a/example/src/App.tsx b/example/src/App.tsx index d993dc5..4717721 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -18,7 +18,7 @@ export const App: VFC = (props) => { commonStyles.hoge )} > - vite-plugin-sass-dts-example + ts-css-modules-vite-plugin-example ); }; diff --git a/package.json b/package.json index 91fa4f9..8f22935 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ts-css-modules-vite-plugin", "version": "1.0.6", - "description": "", + "description": "Read the definition of'vite.config.ts' and resolve the CSS Modules type.", "main": "dist/index.js", "scripts": { "build": "tsc --project tsconfig.json", @@ -15,7 +15,7 @@ "type": "git", "url": "git+https://github.com/activeguild/ts-css-modules-vite-plugin.git" }, - "author": "", + "author": "j1ngzoue", "license": "MIT", "bugs": { "url": "https://github.com/activeguild/ts-css-modules-vite-plugin/issues" @@ -40,5 +40,11 @@ "postcss-js": "^3.0.3", "sass": "^1.43.4", "ts-node": "^10.4.0" + }, + "lint-staged": { + "*.{js,ts,jsx,tsx}": [ + "eslint . --fix", + "prettier . --write" + ] } } diff --git a/src/css.ts b/src/css.ts index 278effa..bc2ddf6 100644 --- a/src/css.ts +++ b/src/css.ts @@ -3,19 +3,12 @@ import type { ResolvedConfig } from "vite"; import { getPreprocessorOptions } from "./options"; import { AdditionalData, Log } from "./type"; -const SPLIT_STR = `/* vite-plugin-sass-dts */\n`; - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -let loadedSassPreprocessor: any; - export const parseCss = ( log: Log, file: string, fileName: string, config: ResolvedConfig ): string => { - // const sass = loadSassPreprocessor(config); - const options = getPreprocessorOptions(config); const resolveFn = config.createResolver({ extensions: [".scss", ".sass", ".css"], @@ -73,27 +66,9 @@ const getData = ( filename: string, additionalData?: AdditionalData ): string => { - if (!additionalData) return `\n${SPLIT_STR}${data}`; + if (!additionalData) return `\n${data}`; if (typeof additionalData === "function") { - return additionalData(`\n${SPLIT_STR}${data}`, filename); + return additionalData(`\n${data}`, filename); } - return `${additionalData}\n${SPLIT_STR}${data}`; + return `${additionalData}\n${data}`; }; - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -// const loadSassPreprocessor = (config: ResolvedConfig): any => { -// try { -// if (loadedSassPreprocessor) { -// return loadedSassPreprocessor; -// } -// const fallbackPaths = require.resolve.paths?.("sass") || []; -// const resolved = require.resolve("sass", { -// paths: [config.root, ...fallbackPaths], -// }); -// return (loadedSassPreprocessor = require(resolved)); -// } catch (e) { -// throw new Error( -// `Preprocessor dependency 'sass' not found. Did you install it?` -// ); -// } -// };