@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 | Yes | Path for the output CSS file | | styleOption | string | Yes | Output style: 'expanded' or 'compressed' |

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

TypeScript Types

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

const action = new StyleProcessingAction();

StyleProcessingActionOptions

interface StyleProcessingActionOptions {
    inputFile: string;
    outputFile: string;
    styleOption: "expanded" | "compressed";
}

Requirements

• Node.js >= 18.0.0
• kist >= 0.1.0

Contributing

See CONTRIBUTING.md for contribution guidelines.

License

MIT © kist

Links

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