https://github.com/himanoa/vite-plugin-css-class-name-extractor-for-purescript
A Vite plugin that enables type-safe usage of CSS Modules in PureScript applications. It automatically generates PureScript APIs and JavaScript FFI code for accessing CSS Module selectors.
https://github.com/himanoa/vite-plugin-css-class-name-extractor-for-purescript
purescript vite
Last synced: 4 months ago
JSON representation
A Vite plugin that enables type-safe usage of CSS Modules in PureScript applications. It automatically generates PureScript APIs and JavaScript FFI code for accessing CSS Module selectors.
- Host: GitHub
- URL: https://github.com/himanoa/vite-plugin-css-class-name-extractor-for-purescript
- Owner: himanoa
- License: mit
- Created: 2024-12-03T14:14:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-09T19:43:24.000Z (over 1 year ago)
- Last Synced: 2025-11-27T12:12:16.223Z (7 months ago)
- Topics: purescript, vite
- Language: PureScript
- Homepage:
- Size: 17.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# ClassNameExtractor Vite Plugin
A Vite plugin that enables type-safe usage of CSS Modules in PureScript applications. It automatically generates PureScript APIs and JavaScript FFI code for accessing CSS Module selectors.
## Key Features
- Type-safe PureScript API generation for CSS Module selectors
- Automatic JavaScript FFI code generation
- Type-safe configuration support for PureScript
## Installation
```bash
npm install vite-plugin-css-class-name-extractor-for-purescript --save-dev
```
## Usage
Just add the plugin to your vite.config.ts:
```typescript
import { defineConfig } from 'vite'
import classNameExtractor from 'vite-plugin-css-class-name-extractor-for-purescript'
export default defineConfig({
plugins: [
classNameExtractor()
]
})
```
The default configuration includes the following rules:
```typescript
{
rules: {
"src/**/*.module.css": {
replacement: "\\2.Styles"
},
"src/**/*.css": {
replacement: "\\2.Styles"
}
}
}
```
To add custom rules, specify glob patterns and their transformation rules:
```typescript
export default defineConfig({
plugins: [
classNameExtractor({
rules: {
"src/features/*/components/*/styles.module.css": {
replacement: "Features.\\1.Components.\\2.Styles"
}
}
})
]
})
```
Path segments can be referenced in replacement patterns using `\\1`, `\\2`, etc. For example:
- `src/components/button/styles.module.css` becomes `Button.Styles`
- `src/pages/user/profile/styles.module.css` becomes `Profile.Styles`
## Generated Code
Given a CSS Module file (`Colors.module.css`):
```css
.wrapper { display: flex; }
.foo > .bar { display: flex; }
```
The plugin generates the following code.
### Generated PureScript Module
`Colors.Styles.purs`:
```purescript
module Colors.Styles (wrapper, foo, bar) where
foreign import _styles :: String -> String
wrapper :: String
wrapper = _styles "wrapper"
foo :: String
foo = _styles "foo"
bar :: String
bar = _styles "bar"
```
### Generated JavaScript FFI File
`Colors.Styles.js`:
```javascript
import s from "./Colors.module.css"
export const _styles = (name) => s[name]
```
The generated code provides:
- Type-safe CSS selector references
- Compile-time type checking
- IDE code completion support
## License
MIT
## Related
- [PureScriptでViteのCSSModuleサポートを使う - 遺言書](https://blog.himanoa.net/93/)