Plugins

Extend kist with official and community plugins.

What are Plugins?

Plugins add new actions to kist. Actions are the building blocks of your pipeline - each action performs a specific task like compiling TypeScript, processing SCSS, or running tests.

Installing Plugins

# Install one or more plugins
npm install --save-dev @getkist/action-sass @getkist/action-typescript

# Then declare them in kist.yml

plugins:
  - @getkist/action-sass
  - @getkist/action-typescript

Official Plugins

Official plugins are maintained by the kist team and follow strict quality standards.

Style Plugins

Plugin	Actions	Description
@getkist/action-sass	StyleProcessingAction	SCSS/Sass compilation with source maps
@getkist/action-postcss	PostCssAction	PostCSS processing with autoprefixer, cssnano

Build Plugins

Plugin	Actions	Description
@getkist/action-typescript	TypeScriptCompilerAction	TypeScript compilation
@getkist/action-terser	JavaScriptMinifyAction	JavaScript minification
@getkist/action-tsup	BundleAction	Bundle with tsup (esbuild)

Quality Plugins

Plugin	Actions	Description
@getkist/action-eslint	LintAction	ESLint code linting
@getkist/action-prettier	PrettierAction	Prettier code formatting
@getkist/action-jest	JestAction	Jest test runner

Asset Plugins

Plugin	Actions	Description
@getkist/action-svg	SvgSpriteAction, SvgReaderAction, SvgPackagerAction, SvgToPngAction	SVG processing and sprite generation
@getkist/action-nunjucks	TemplateRenderAction	Nunjucks template rendering

Plugin Versions

Plugin	Version	npm
@getkist/action-sass	1.0.5
@getkist/action-postcss	1.0.3
@getkist/action-typescript	0.0.9
@getkist/action-eslint	1.0.3
@getkist/action-prettier	1.0.7
@getkist/action-jest	1.0.5
@getkist/action-terser	1.0.3
@getkist/action-tsup	1.0.3
@getkist/action-svg	1.0.5
@getkist/action-nunjucks	2.0.10

Community Plugins

Community plugins follow the naming convention kist-plugin-*.

Creating a Plugin?

Check out the Plugin Development Guide to create your own plugin.

Quick Start Examples

SCSS Compilation

npm install --save-dev @getkist/action-sass

plugins:
  - @getkist/action-sass

pipeline:
  build:
    stages:
      - name: styles
        steps:
          - action: StyleProcessingAction
            options:
              inputFile: src/styles/main.scss
              outputFile: dist/css/main.css
              style: compressed
              sourceMap: true

TypeScript + Linting

npm install --save-dev @getkist/action-typescript @getkist/action-eslint

plugins:
  - @getkist/action-typescript
  - @getkist/action-eslint

pipeline:
  build:
    stages:
      - name: lint
        steps:
          - action: LintAction
            options:
              files: ["src/**/*.ts"]
              
      - name: compile
        steps:
          - action: TypeScriptCompilerAction
            options:
              tsconfig: tsconfig.json

SVG Sprites

npm install --save-dev @getkist/action-svg

plugins:
  - @getkist/action-svg

pipeline:
  build:
    stages:
      - name: icons
        steps:
          - action: SvgSpriteAction
            options:
              inputDir: src/icons
              outputDir: dist/sprites
              spriteFilename: icons.sprite.svg

Next Steps

• Using Plugins - Detailed usage guide
• Plugin Development - Create your own plugin
• Configuration - Full configuration reference