@getkist/action-sass

SASS/SCSS compilation with PostCSS processing for kist build tool.

Features

• SASS/SCSS Compilation - Modern SASS compilation using Dart Sass
• PostCSS Integration - Automatic PostCSS processing with autoprefixer
• Compression Support - Expanded and compressed output styles
• CSS Optimization - Built-in cssnano for minification
• Node Package Importer - Import from node_modules directly

Installation

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

Usage

Basic Style Compilation

Add to your kist.yml:

pipeline:
    stages:
        - name: styles
          steps:
              - name: compile-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/main.scss
                    outputFile: ./dist/styles/main.css
                    styleOption: compressed

Expanded Output

pipeline:
    stages:
        - name: dev-styles
          steps:
              - name: compile-dev-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/app.scss
                    outputFile: ./dist/styles/app.css
                    styleOption: expanded

Action: StyleProcessingAction

Compiles SCSS files to CSS with PostCSS transformations.

Options

| Option | Type | Required | Description | | --- | --- | --- | --- | | inputFile | string | Yes | Path to the input SCSS file | | outputFile | string | No | Single output CSS file path (mutually exclusive with outputs) | | styleOption | string | No | Single output style: 'expanded' or 'compressed' (mutually exclusive with outputs) | | outputs | StyleOutputConfig[] | No | Multiple outputs from a single input, e.g. both expanded and compressed CSS (mutually exclusive with outputFile/styleOption) | | sourceMap | boolean | No | Enable sourcemap generation for single output mode (default: false) | | sourceMapIncludeSources | boolean | No | Include original source content in the sourcemap (default: true when sourceMap is enabled) |

Processing Features

Expanded Mode:

• Readable, formatted CSS output
• Autoprefixer for browser compatibility
• Ideal for development

Compressed Mode:

• Minified CSS with cssnano
• Autoprefixer for browser compatibility
• Optimized for production

PostCSS Plugins

• autoprefixer - Automatically adds vendor prefixes
• cssnano - CSS minification (compressed mode only)

Examples

Multiple Style Files

pipeline:
    stages:
        - name: compile-all-styles
          steps:
              - name: main-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/main.scss
                    outputFile: ./dist/styles/main.css
                    styleOption: compressed

              - name: admin-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/admin.scss
                    outputFile: ./dist/styles/admin.css
                    styleOption: compressed

Development vs Production

pipeline:
    stages:
        - name: dev-build
          steps:
              - name: dev-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/app.scss
                    outputFile: ./dist/dev/app.css
                    styleOption: expanded

        - name: prod-build
          steps:
              - name: prod-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/app.scss
                    outputFile: ./dist/prod/app.css
                    styleOption: compressed

Multiple Outputs from a Single Input

Use outputs to generate several CSS files (e.g. expanded and compressed) from a single SCSS source in one step:

pipeline:
    stages:
        - name: styles
          steps:
              - name: compile-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/app.scss
                    outputs:
                        - file: ./dist/css/app.css
                          style: expanded
                          sourceMap: true
                        - file: ./dist/css/app.min.css
                          style: compressed

TypeScript Types

import { StyleProcessingAction } from "@getkist/action-sass";

const action = new StyleProcessingAction();

StyleProcessingActionOptions

interface StyleOutputConfig {
    file: string;
    style: "expanded" | "compressed";
    sourceMap?: boolean;
}

interface StyleProcessingActionOptions {
    inputFile: string;
    outputFile?: string;
    styleOption?: "expanded" | "compressed";
    outputs?: StyleOutputConfig[];
    sourceMap?: boolean;
    sourceMapIncludeSources?: boolean;
}

Requirements

• Node.js >= 22.0.0
• npm >= 10.0.0
• kist >= 0.1.58

Contributing

See CONTRIBUTING.md for contribution guidelines.

License

MIT © kist

Links

• GitHub Repository
• npm Package
• kist Build Tool
• Issue Tracker