npmpackage.info

Gathering detailed insights and metrics for vite-plugin-css-class-name-extractor-for-purescript

vite-plugin-css-class-name-extractor-for-purescript - 0.0.5 | npmpackage.info

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.

0.0.5

MIT

PureScript

2.97 MB

Installations

npm install vite-plugin-css-class-name-extractor-for-purescript

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

20.12.0

NPM Version

10.5.0 Pull Requests

Open

0

Total

4

Closed

0

Merged

4

Issues

Open

0

Total

0

Closed

0

Releases

v0.0.5

Updated on Jan 09, 2025

v0.0.3

Updated on Dec 10, 2024

0.0.1

Updated on Dec 07, 2024

View All 3 releases

Languages

PureScript

Dhall

TypeScript

JavaScript

HTML

CSS

PureScript (82.19%)

Dhall (10.71%)

TypeScript (3.42%)

JavaScript (2.2%)

HTML (1.18%)

CSS (0.3%)

Developer

himanoa

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

68 Commits

1 Watchers

1 Branches

1 Contributors

Updated on Jan 09, 2025

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

0.0.5

Package Id

vite-plugin-css-class-name-extractor-for-purescript@0.0.5

Unpacked Size

2.97 MB

Size

570.91 kB

File Count

NPM Version

10.5.0

Node Version

20.12.0

Published on

Jan 09, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

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

1npm install vite-plugin-css-class-name-extractor-for-purescript --save-dev

Usage

Just add the plugin to your vite.config.ts:

1import { defineConfig } from 'vite'
2import classNameExtractor from 'vite-plugin-css-class-name-extractor-for-purescript'
3
4export default defineConfig({
5  plugins: [
6    classNameExtractor()
7  ]
8})

The default configuration includes the following rules:

1{
2  rules: {
3    "src/**/*.module.css": {
4      replacement: "\\2.Styles"
5    },
6    "src/**/*.css": {
7      replacement: "\\2.Styles"
8    }
9  }
10}

To add custom rules, specify glob patterns and their transformation rules:

1export default defineConfig({
2  plugins: [
3    classNameExtractor({
4      rules: {
5        "src/features/*/components/*/styles.module.css": {
6          replacement: "Features.\\1.Components.\\2.Styles"
7        }
8      }
9    })
10  ]
11})

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):

1.wrapper { display: flex; }
2.foo > .bar { display: flex; }

The plugin generates the following code.

Generated PureScript Module

Colors.Styles.purs:

1module Colors.Styles (wrapper, foo, bar) where
2
3foreign import _styles :: String -> String
4
5wrapper :: String
6wrapper = _styles "wrapper"
7
8foo :: String
9foo = _styles "foo"
10
11bar :: String
12bar = _styles "bar"

Generated JavaScript FFI File

Colors.Styles.js:

1import s from "./Colors.module.css"
2export const _styles = (name) => s[name]

The generated code provides:

Type-safe CSS selector references
Compile-time type checking
IDE code completion support

License

MIT

PureScriptでViteのCSSModuleサポートを使う - 遺言書

No vulnerabilities found.

No security vulnerabilities found.

vite-plugin-css-class-name-extractor-for-purescript

Installations

Developer Guide

Yes

CommonJS, ESM

20.12.0

10.5.0

Pull Requests

0

4

0

4

Issues

0

0

0

Releases

Languages

Developer

himanoa

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

ClassNameExtractor Vite Plugin

Key Features

Installation

Usage

Generated Code

Generated PureScript Module

Generated JavaScript FFI File

License

Related