PostCSS-DSS is a PostCSS plugin that generates UI documentation from CSS files based on the output from DSS.
See PostCSS on Github for how to get started with PostCSS.
Installation: npm install postcss-dss --save or yarn add postcss-dss
With Webpack via postcss-loader:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => {
return [
require('postcss-dss', {
fileName: 'styles.json'
})
]
}
}
}
]
}
]
}
}fileName
Type: string
Name of output file for styles documention.
parsers
Type: array of objects in the format: { atRule: 'name', func: function(){} }
Example Custom Parser Config
See DSS Readme for more information on custom parsers.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => {
return [
require('postcss-dss', {
fileName: 'styles.json',
parsers: [
{
atRule: 'version',
func: function () {
return this.line.contents;
}
}
]
})
]
}
}
}
]
}
]
}
}