Rollup Plugin SCSS

import scss from "rollup-plugin-scss";
import type { CSSPluginOptions } from "rollup-plugin-scss";
import type { CreateFilter } from "rollup-pluginutils";

const scss = require("rollup-plugin-scss");

// rollup.config.js
import scss from "rollup-plugin-scss";

export default {
  input: "input.js",
  output: {
    file: "output.js",
    format: "esm"
  },
  plugins: [
    scss() // Outputs compiled styles to output.css
  ]
};

// In your JavaScript entry file
import "./styles.scss";

/**
 * Creates a Rollup plugin for processing SCSS, Sass, and CSS files
 * @param options - Configuration options for the plugin (defaults to {})
 * @returns Rollup plugin instance
 */
export default function scss(options: CSSPluginOptions = {}): Plugin;

export interface CSSPluginOptions {
  /** Files to exclude from processing (rollup-pluginutils filter format) */
  exclude?: string | string[] | RegExp | RegExp[];
  
  /** Terminate node process on compilation errors (default: false) */
  failOnError?: boolean;
  
  /** Literal asset filename, bypasses any hash transformations */
  fileName?: string;
  
  /** Files to include in processing (default: ['/**/*.css', '/**/*.scss', '/**/*.sass']) */
  include?: string | string[] | RegExp | RegExp[];
  
  /** Additional paths for Sass @import resolution */
  includePaths?: string[];
  
  /** Insert styles into HTML head tag instead of emitting CSS file */
  insert?: boolean;
  
  /** Asset name for output (default: 'output.css'), Rollup may add hash to filename */
  name?: string;
  
  /** @deprecated Use fileName instead - Output configuration */
  output?: string | false | ((css: string, styles: Styles) => void);
  
  /** Global SCSS prefix prepended to all files (useful for variables/mixins) */
  prefix?: string;
  
  /** CSS post-processor function for custom transformations */
  processor?: (
    css: string,
    map: string,
    styles: Styles
  ) => CSS | Promise<CSS> | PostCSSProcessor;
  
  /** Custom Sass compiler instance (auto-detects sass/node-sass if not provided) */
  sass?: SassRenderer;
  
  /** Enable source map generation (default: false) */
  sourceMap?: boolean;
  
  /** Log filename and size of generated CSS files (default: true) */
  verbose?: boolean;
  
  /** Files/folders to monitor in watch mode for rebuilds */
  watch?: string | string[];
  
  /** Sass output style (e.g., 'compressed', 'expanded') */
  outputStyle?: string;
}

// Output to specific filename
scss({
  fileName: "bundle.css"
})

// Output with source maps
scss({
  fileName: "styles.css",
  sourceMap: true
})

// Inject styles into HTML head using built-in insertion function
scss({
  insert: true
})

// When insert: true is used, the plugin exports a function that
// automatically creates and appends style tags to document.head
// This is handled automatically by the plugin's insertStyleFn

import autoprefixer from "autoprefixer";
import postcss from "postcss";

scss({
  processor: () => postcss([autoprefixer()])
})

// Or with custom processing
scss({
  processor: (css, map) => ({
    css: css.replace("/*date*/", `/* ${new Date().toJSON()} */`),
    map
  })
})

// Disable CSS output, import as string
scss({
  output: false
})

// Custom output callback
scss({
  output: (css, styles) => {
    fs.writeFileSync("custom-bundle.css", css);
  }
})

scss({
  includePaths: ["node_modules/", "src/styles/"],
  prefix: `@import "./variables.scss";`,
  watch: ["src/styles/components", "src/styles/mixins"],
  verbose: true
})

scss({
  // Sass-specific options passed through to the compiler
  indentedSyntax: true,    // For .sass syntax instead of .scss
  precision: 10,           // Decimal precision for numbers
  includePaths: ["node_modules/"],
  outputStyle: "compressed"
})

/** CSS output as string or object with CSS and source map */
type CSS = string | { css: string; map: string };

/** CSS with source map information */
interface MappedCSS {
  css: string;
  map: string;
}

/** Map of stylesheet IDs to their content */
interface Styles {
  [id: string]: string;
}

/** PostCSS processor interface for CSS post-processing */
interface PostCSSProcessor {
  process: (css: string, options?: any) => MappedCSS;
}

/** Sass compiler interface */
interface SassRenderer {
  renderSync: (options: SassOptions) => SassResult;
}

/** Options for Sass compilation */
interface SassOptions {
  data: string;
}

/** Result from Sass compilation */
interface SassResult {
  css: Buffer;
  map?: Buffer;
}

/** Return type for custom importer functions */
type ImporterReturnType = { file: string } | { contents: string } | Error | null;

/** Callback function for custom importers */
type ImporterDoneCallback = (data: ImporterReturnType) => void;

/** Filter creation function from rollup-pluginutils */
type CreateFilter = (
  include?: string | string[] | RegExp | RegExp[],
  exclude?: string | string[] | RegExp | RegExp[]
) => (id: string) => boolean;

/** Load the appropriate Sass compiler (sass or node-sass) */
function loadSassLibrary(): SassRenderer;

/** Convert string or CSS object to MappedCSS format */
function stringToCSS(input: string | CSS): MappedCSS;

/** Format console output with red color for errors */
function red(text: string): string;

/** Format console output with green color for success/solutions */
function green(text: string): string;

/** Format byte size as human-readable string (B, kB, MB) */
function getSize(bytes: number): string;

/** 
 * Style insertion function used when insert: true option is enabled
 * Creates a style tag and appends it to document.head
 * @param css - CSS string to insert
 * @returns CSS string that was inserted
 */
function insertStyleFn(css: string): string;