Gathering detailed insights and metrics for @visulima/rollup-css-plugin
Gathering detailed insights and metrics for @visulima/rollup-css-plugin
Gathering detailed insights and metrics for @visulima/rollup-css-plugin
Gathering detailed insights and metrics for @visulima/rollup-css-plugin
A fast and modern bundler for Node.js and TypeScript.
npm install @visulima/rollup-css-plugin
Typescript
Module System
Min. Node Version
Node Version
NPM Version
@visulima/packem@2.0.0-alpha.2
Updated on Jul 02, 2025
@visulima/packem@2.0.0-alpha.1
Updated on Jul 02, 2025
@visulima/rollup-css-plugin@1.0.0-alpha.2
Updated on Jul 02, 2025
@visulima/packem-rollup@1.0.0-alpha.2
Updated on Jul 02, 2025
@visulima/packem-share@1.0.0-alpha.2
Updated on Jul 02, 2025
@visulima/css-style-inject@1.0.0-alpha.2
Updated on Jul 02, 2025
TypeScript (97.95%)
JavaScript (0.75%)
Handlebars (0.71%)
Shell (0.22%)
SCSS (0.14%)
CSS (0.13%)
Less (0.04%)
SugarSS (0.03%)
Stylus (0.02%)
Sass (0.01%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
5 Stars
314 Commits
1 Forks
1 Watchers
14 Branches
1 Contributors
Updated on Jun 30, 2025
Latest Version
1.0.0-alpha.1
Package Id
@visulima/rollup-css-plugin@1.0.0-alpha.1
Unpacked Size
122.17 kB
Size
34.06 kB
File Count
48
NPM Version
10.9.3
Node Version
20.19.2
Published on
Jul 02, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
9
18
A comprehensive CSS processing plugin for Packem that provides support for multiple CSS preprocessors, CSS modules, and advanced optimization features.
.css
files1npm install @visulima/rollup-css-plugin
Install the CSS processors you need:
1# PostCSS (recommended) 2npm install postcss 3 4# Sass/SCSS 5npm install sass 6 7# Less 8npm install less 9 10# Stylus 11npm install stylus 12 13# LightningCSS (for fast processing and minification) 14npm install lightningcss 15 16# cssnano (for CSS minification) 17npm install cssnano
1import { rollupCssPlugin, cssModulesTypesPlugin } from "@visulima/rollup-css-plugin"; 2 3export default { 4 plugins: [ 5 rollupCssPlugin({ 6 // Extract CSS to separate files 7 mode: "extract", 8 9 // Enable CSS modules for .module.css files 10 autoModules: /\.module\./, 11 12 // Enable source maps 13 sourceMap: true, 14 }), 15 16 // Generate TypeScript declarations for CSS modules 17 cssModulesTypesPlugin({ 18 // CSS processing options (same as rollupCssPlugin) 19 autoModules: /\.module\./, 20 postcss: { 21 modules: true, 22 }, 23 }, process.cwd(), logger) 24 ] 25};
1import { rollupCssPlugin, cssModulesTypesPlugin } from "@visulima/rollup-css-plugin"; 2 3export default { 4 plugins: [ 5 rollupCssPlugin({ 6 // File extensions to process 7 extensions: [".css", ".scss", ".sass", ".less", ".styl"], 8 9 // CSS Modules configuration 10 autoModules: true, 11 namedExports: true, 12 13 // PostCSS configuration 14 postcss: { 15 plugins: [ 16 require("autoprefixer"), 17 require("tailwindcss"), 18 ], 19 modules: { 20 generateScopedName: "[name]__[local]___[hash:base64:5]", 21 }, 22 }, 23 24 // Sass configuration 25 sass: { 26 includePaths: ["node_modules"], 27 outputStyle: "compressed", 28 }, 29 30 // Minification 31 minifier: "lightningcss", 32 33 // Custom loaders 34 loaders: [ 35 { 36 name: "postcss", 37 test: /\.css$/, 38 }, 39 { 40 name: "sass", 41 test: /\.s[ac]ss$/, 42 }, 43 ], 44 }), 45 46 // Generate TypeScript declarations for CSS modules 47 cssModulesTypesPlugin({ 48 autoModules: true, 49 postcss: { 50 modules: { 51 generateScopedName: "[name]__[local]___[hash:base64:5]", 52 }, 53 }, 54 }, process.cwd()) 55 ] 56};
Main CSS processing plugin for Rollup/Packem.
mode
- Processing mode: "inject"
| "extract"
| "emit"
extensions
- File extensions to processinclude/exclude
- File inclusion/exclusion patternsautoModules
- Enable CSS modules automaticallynamedExports
- Enable named exports for CSS classespostcss
- PostCSS configuration and pluginssass
- Sass/SCSS compiler optionsless
- Less compiler optionsstylus
- Stylus compiler optionssourceMap
- Source map generationminifier
- CSS minification strategydts
- Generate TypeScript declaration filesTypeScript declaration generator for CSS modules.
options
- CSS processing options (same as rollupCssPlugin
)rootDirectory
- Root directory for relative path resolutionlogger
- Logger instance for build messagesautoModules
- CSS modules detection patternpostcss.modules
- PostCSS modules configurationlightningcss.modules
- LightningCSS modules configurationThe plugin automatically generates .d.ts
files alongside your CSS modules with proper TypeScript declarations.
Enable CSS modules for better component isolation:
1/* styles.module.css */ 2.button { 3 background: blue; 4 color: white; 5} 6 7.primary { 8 background: green; 9}
1import styles from "./styles.module.css"; 2 3// Use the generated class names 4console.log(styles.button); // "styles__button___2J3K9" 5console.log(styles.primary); // "styles__primary___1A2B3"
The cssModulesTypesPlugin
plugin automatically generates TypeScript declaration files for your CSS modules, providing full type safety and IntelliSense support.
When you have a CSS module file:
1/* Button.module.css */ 2.container { 3 display: flex; 4 align-items: center; 5} 6 7.primary { 8 background-color: blue; 9} 10 11.secondary { 12 background-color: gray; 13}
The plugin automatically generates:
1/* Button.module.css.d.ts */ 2declare const styles: { 3 readonly container: string; 4 readonly primary: string; 5 readonly secondary: string; 6}; 7 8export default styles;
1import styles from "./Button.module.css"; 2 3// Full IntelliSense and type checking 4const button = ( 5 <button className={styles.primary}> 6 {/* TypeScript knows 'primary' exists */} 7 Click me 8 </button> 9); 10 11// TypeScript error if class doesn't exist 12// const invalid = styles.nonExistent; // ❌ Property 'nonExistent' does not exist
1import { cssModulesTypesPlugin } from "@visulima/rollup-css-plugin"; 2 3export default { 4 plugins: [ 5 // Your main CSS plugin 6 rollupCssPlugin({ 7 autoModules: /\.module\./, 8 postcss: { 9 modules: true, 10 }, 11 }), 12 13 // TypeScript declarations generator 14 cssModulesTypesPlugin( 15 { 16 // Same options as rollupCssPlugin for CSS processing 17 autoModules: /\.module\./, 18 postcss: { 19 modules: { 20 generateScopedName: "[name]__[local]___[hash:base64:5]", 21 }, 22 }, 23 lightningcss: { 24 modules: true, 25 }, 26 }, 27 process.cwd(), // Root directory for relative paths 28 ) 29 ] 30};
Leverage the PostCSS ecosystem:
1rollupCssPlugin({ 2 postcss: { 3 plugins: [ 4 require("autoprefixer"), 5 require("postcss-nested"), 6 require("postcss-custom-properties"), 7 ], 8 }, 9})
MIT © Daniel Bannert
No vulnerabilities found.
Reason
update tool detected
Details
Reason
security policy file detected
Details
Reason
no dangerous workflow patterns detected
Reason
30 commit(s) and 3 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
SAST tool is run on all commits
Details
Reason
1 out of 1 merged PRs checked by a CI test -- score normalized to 10
Reason
project has 4 contributing companies or organizations
Details
Reason
0 existing vulnerabilities detected
Reason
dependency not pinned by hash detected -- score normalized to 8
Details
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Score
Last Scanned on 2025-07-08T07:34:44Z
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More