Skip to content

postcss-dss is a PostCSS Plugin that builds documentation based on the DSS Parser

Notifications You must be signed in to change notification settings

benmcginnis/postcss-dss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PostCSS-DSS build status

PostCSS-DSS is a PostCSS plugin that generates UI documentation from CSS files based on the output from DSS.

Getting started

See PostCSS on Github for how to get started with PostCSS.

Installation: npm install postcss-dss --save or yarn add postcss-dss

Plugin Usage

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'
                  })
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

Settings

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;
                        }
                      }
                    ]
                  })
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

About

postcss-dss is a PostCSS Plugin that builds documentation based on the DSS Parser

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published