or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

advanced-features.md configuration.md index.md

tile.json

tessl/npm-rollup-plugin-sass

Rollup plugin for processing and bundling Sass/SCSS files with support for CSS modules, PostCSS integration, and multiple output formats

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/rollup-plugin-sass@1.15.x

To install, run

npx @tessl/cli install tessl/npm-rollup-plugin-sass@1.15.0

Rollup Plugin Sass

Rollup Plugin Sass is a Rollup plugin that enables processing and bundling of Sass/SCSS files during the build process. It provides comprehensive configuration options including output control (write to file, callback function, or inject into HTML head), CSS processing pipeline support through custom processor functions, CSS modules generation capabilities, and flexible Sass compiler runtime selection.

Package Information

Package Name: rollup-plugin-sass
Package Type: npm
Language: TypeScript
Installation: npm install rollup-plugin-sass -D

Core Imports

ES Module syntax (requires esModuleInterop in tsconfig.json):

import sass from 'rollup-plugin-sass';

CommonJS syntax (actual export pattern):

const sass = require('rollup-plugin-sass');

Basic Usage

// rollup.config.js
import sass from 'rollup-plugin-sass';

export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [sass()],
};

Architecture

The plugin is built around several key components:

Plugin Factory Function: Main export that creates and returns a Rollup plugin instance
Dual API Support: Supports both legacy and modern Sass APIs for maximum compatibility
Processing Pipeline: Transforms Sass/SCSS files through compilation, optional processing, and output generation
File Resolution: Handles node_modules imports using custom importers for both API modes
Output Management: Flexible output system supporting file writing, callbacks, and style injection

Capabilities

Basic Plugin Configuration

Core plugin setup with essential options for Sass file processing and output control.

/**
 * Main plugin factory function that creates a Rollup plugin for Sass processing
 * @param options - Configuration options for the plugin
 * @returns Rollup plugin object with transform and bundle generation hooks
 */
function plugin(options?: RollupPluginSassOptions): RollupPlugin;
export = plugin;

type RollupPluginSassOptions = 
  | RollupPluginSassWithModernOptions
  | RollupPluginSassWithLegacyOptions;

interface RollupPluginSassSharedOptions {
  /** File globs to exclude from processing. Default 'node_modules/**' */
  exclude?: string | string[];
  /** File globs to include in processing. Default ['**/*.sass', '**/*.scss'] */
  include?: string | string[];
  /** Controls whether to insert generated styles into HTML head */
  insert?: boolean;
  /** Custom CSS processor function */
  processor?: RollupPluginSassProcessorFn;
  /** Output control - false (default), true, string path, or callback function */
  output?: boolean | string | RollupPluginSassOutputFn;
  /** Sass runtime instance - sass, node-sass or other */
  runtime?: any;
}

type RollupPluginSassWithModernOptions = RollupPluginSassSharedOptions & {
  api: 'modern';
  options?: RollupPluginSassModernOptions;
};

type RollupPluginSassWithLegacyOptions = RollupPluginSassSharedOptions & {
  api?: 'legacy';
  options?: RollupPluginSassLegacyOptions;
};

Configuration Options

CSS Processing and Output

Advanced features for CSS processing, modules generation, and flexible output handling through custom processors and output functions.

type RollupPluginSassProcessorFn<T = RollupPluginSassProcessorFnOutput> = 
  (styles: string, id: string) => Promise<T> | T;

type RollupPluginSassProcessorFnOutput = 
  | string
  | {
      css: string;
      cssModules?: Record<string, string>;
      [key: string]: unknown;
    };

type RollupPluginSassOutputFn = (
  styles: string,
  styleNodes: StyleSheetIdAndContent[]
) => unknown;

interface StyleSheetIdAndContent {
  id?: string;
  content?: string;
}

Style Injection

Inject compiled CSS directly into the HTML document head using the built-in style injection utility.

/**
 * Client-side utility function for injecting styles into document head
 * This function is automatically included when using insert: true option
 * @param css - CSS string to inject into document head
 * @returns The injected CSS string or undefined if no CSS or not in browser
 */
function insertStyle(css: string | undefined): string | undefined;

Advanced Features

Types

import type {
  LegacyOptions,
  Options as SassOptions,
  FileImporter,
  LegacyImporter,
  CompileResult,
  LegacyResult
} from 'sass';

type RollupPluginSassModernOptions = Omit<
  SassOptions<'async'>,
  'sourceMap' // sourcemaps are handled by rollup  
> & {
  /** Data to prepend to Sass files */
  data?: string;
};

type RollupPluginSassLegacyOptions = Omit<
  LegacyOptions<'async'>,
  'data' // data is assembled and always passed via plugin transform
> & {
  /** Data to prepend to Sass files */
  data?: string;
};