Registry / devops / kss-webpack-plugin

kss-webpack-plugin

JSON →
library1.6.0jsnpmunverified

KSS Webpack Plugin (v1.6.0) generates a KSS styleguide from CSS/SCSS sources during Webpack builds. It integrates kss-node into the Webpack pipeline, allowing styleguide generation as part of the build process. The plugin supports custom templates and automatic insertion of named chunks (JS or CSS) into the styleguide. Compatible with KSS (Knyle Style Sheets) documentation format. Last updated in 2021 with a low release cadence; peer dependencies require Webpack 3 or 4. Alternative to standalone kss-node CLI with tighter Webpack integration.

npm install kss-webpack-plugin
INSTALL
IMPORT
SIG · KSS-WEBPACK-PLUGIN
K
kss-webpack-plugin
devopsjavascriptv1.6.0
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

KssWebpackPlugin
const KssWebpackPlugin = require('kss-webpack-plugin');
import KssWebpackPlugin from 'kss-webpack-plugin';
Package uses CommonJS; no default ESM export. Use require().
KssWebpackPlugin
import KssWebpackPlugin = require('kss-webpack-plugin');
import * as KssWebpackPlugin from 'kss-webpack-plugin';
TypeScript users should use import = require() for CJS compatibility.
Instance
new KssWebpackPlugin({ source: 'path/to/css' })
KssWebpackPlugin({ source: 'path/to/css' })
Required constructor must be instantiated with 'new'.

Configures KssWebpackPlugin with source, destination, custom template, and automatic chunk insertion.

const KssWebpackPlugin = require('kss-webpack-plugin'); const path = require('path'); const kssConfig = { source: path.resolve(__dirname, 'src/styles'), destination: path.resolve(__dirname, 'dist/styleguide'), builder: path.resolve(__dirname, 'kss-template'), chunks: ['main', 'vendor'] }; const webpackConfig = { entry: { main: './src/index.js', vendor: ['react', 'react-dom'] }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js' }, plugins: [ new KssWebpackPlugin(kssConfig) ] }; module.exports = webpackConfig;
Debug
Known issues
gotchaChunks must be named in Webpack entry; unnamed chunks are not supported.
fix
Define entry points with keys (e.g., entry: { main: './src/index.js' }) to use chunks configuration.
affects: >=1.0.0
gotchaPlugin does not add any chunks to the styleguide by default; you must specify the chunks array or manually include assets.
fix
Add a 'chunks' array in kssConfig listing the chunk names to inject.
affects: >=1.0.0
breakingThis plugin is designed for Webpack 3 and 4. It may not work with Webpack 5.
fix
Use webpack-kss or update plugin; or use kss-node CLI separately for Webpack 5 builds.
affects: >=1.0.0
deprecatedThe package has not been updated since 2021; consider it in maintenance mode.
fix
Evaluate alternative solutions like stylemark or standalone kss-node.
affects: >=1.0.0
gotchaNode.js version older than 12 may cause compatibility issues with dependencies.
fix
Upgrade Node.js to 12 or newer.
affects: >=1.5.0
Errors
Common errors & fixes
this.render is not a function
Missing or incompatible kss-node version installed.
fix
npm install kss@3 --save-dev
Cannot find module 'kss'
kss (kss-node) is a peer dependency and not installed.
fix
npm install kss --save-dev
Error: No valid source found
Source path is incorrect or does not contain CSS/SCSS files.
fix
Ensure the 'source' path exists and contains .css or .scss files.
Webpack 5 compatibility issue: Tapable.plugin is not a function
Plugin uses Webpack 3/4 plugin API which changed in Webpack 5.
fix
Use webpack-kss for Webpack 5 or downgrade to Webpack 4.
Upgrade
Version history
1.6.0latest on npm
Audit
Dependencies
kssrequiredRuntime peer dependency: kss-node is required to generate the KSS styleguide.
Agent activity
2 hits · last 30 days
node
2
Resources
kss-webpack-plugin — npm install kss-webpack-plugin · libregistry