{"id":20175,"library":"kss-webpack-plugin","title":"KSS Webpack Plugin","description":"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.","status":"maintenance","version":"1.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/jonespen/kss-webpack-plugin","tags":["javascript"],"install":[{"cmd":"npm install kss-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add kss-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add kss-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency: kss-node is required to generate the KSS styleguide.","package":"kss","optional":false}],"imports":[{"note":"Package uses CommonJS; no default ESM export. Use require().","wrong":"import KssWebpackPlugin from 'kss-webpack-plugin';","symbol":"KssWebpackPlugin","correct":"const KssWebpackPlugin = require('kss-webpack-plugin');"},{"note":"TypeScript users should use import = require() for CJS compatibility.","wrong":"import * as KssWebpackPlugin from 'kss-webpack-plugin';","symbol":"KssWebpackPlugin","correct":"import KssWebpackPlugin = require('kss-webpack-plugin');"},{"note":"Required constructor must be instantiated with 'new'.","wrong":"KssWebpackPlugin({ source: 'path/to/css' })","symbol":"Instance","correct":"new KssWebpackPlugin({ source: 'path/to/css' })"}],"quickstart":{"code":"const KssWebpackPlugin = require('kss-webpack-plugin');\nconst path = require('path');\n\nconst kssConfig = {\n  source: path.resolve(__dirname, 'src/styles'),\n  destination: path.resolve(__dirname, 'dist/styleguide'),\n  builder: path.resolve(__dirname, 'kss-template'),\n  chunks: ['main', 'vendor']\n};\n\nconst webpackConfig = {\n  entry: {\n    main: './src/index.js',\n    vendor: ['react', 'react-dom']\n  },\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: '[name].bundle.js'\n  },\n  plugins: [\n    new KssWebpackPlugin(kssConfig)\n  ]\n};\n\nmodule.exports = webpackConfig;","lang":"javascript","description":"Configures KssWebpackPlugin with source, destination, custom template, and automatic chunk insertion."},"warnings":[{"fix":"Define entry points with keys (e.g., entry: { main: './src/index.js' }) to use chunks configuration.","message":"Chunks must be named in Webpack entry; unnamed chunks are not supported.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add a 'chunks' array in kssConfig listing the chunk names to inject.","message":"Plugin does not add any chunks to the styleguide by default; you must specify the chunks array or manually include assets.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use webpack-kss or update plugin; or use kss-node CLI separately for Webpack 5 builds.","message":"This plugin is designed for Webpack 3 and 4. It may not work with Webpack 5.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Evaluate alternative solutions like stylemark or standalone kss-node.","message":"The package has not been updated since 2021; consider it in maintenance mode.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Upgrade Node.js to 12 or newer.","message":"Node.js version older than 12 may cause compatibility issues with dependencies.","severity":"gotcha","affected_versions":">=1.5.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install kss@3 --save-dev","cause":"Missing or incompatible kss-node version installed.","error":"this.render is not a function"},{"fix":"npm install kss --save-dev","cause":"kss (kss-node) is a peer dependency and not installed.","error":"Cannot find module 'kss'"},{"fix":"Ensure the 'source' path exists and contains .css or .scss files.","cause":"Source path is incorrect or does not contain CSS/SCSS files.","error":"Error: No valid source found"},{"fix":"Use webpack-kss for Webpack 5 or downgrade to Webpack 4.","cause":"Plugin uses Webpack 3/4 plugin API which changed in Webpack 5.","error":"Webpack 5 compatibility issue: Tapable.plugin is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}