rollup-plugin-styles
Version:
Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more
401 lines (392 loc) • 12.4 kB
TypeScript
/// <reference types="./typings/sass" />
/// <reference types="./typings/less" />
/// <reference types="./typings/postcss-modules" />
import { PluginContext, Plugin as Plugin$1 } from 'rollup';
import postcss from 'postcss';
import cssnano from 'cssnano';
import { CreateFilter } from '@rollup/pluginutils';
import { Importer } from 'sass';
import { Plugin } from 'less';
import { LocalByDefaultOptions } from 'postcss-modules-local-by-default';
import { ExtractImportsOptions } from 'postcss-modules-extract-imports';
import { ScopeOptions } from 'postcss-modules-scope';
/** Options for [CSS Modules](https://github.com/css-modules/css-modules) */
declare type ModulesOptions = {
/**
* Default mode for classes
* @default "local"
* */
mode?: LocalByDefaultOptions["mode"];
/** Fail on wrong order of composition */
failOnWrongOrder?: ExtractImportsOptions["failOnWrongOrder"];
/** Export global classes */
exportGlobals?: ScopeOptions["exportGlobals"];
/**
* Placeholder or function for scoped name generation.
* Allowed blocks for placeholder:
* - `[dir]`: The directory name of the asset.
* - `[name]`: The file name of the asset excluding any extension.
* - `[local]`: The original value of the selector.
* - `[hash(:<num>)]`: A hash based on the name and content of the asset (with optional length).
* @default "[name]_[local]__[hash:8]"
* */
generateScopedName?: string | ScopeOptions["generateScopedName"];
/** Function for resulting replacements extraction */
getReplacements?: (file: string, replacements: {
[k: string]: string;
}, out?: string) => void;
};
/** File resolved by URL resolver */
declare type ResolvedFile = {
from: string;
source: Uint8Array;
};
/** URL resolver */
declare type Resolve = (url: string, basedir: string) => Promise<ResolvedFile>;
/** URL handler options */
declare type UrlOptions = {
/**
* Inline files instead of copying
* @default false
*/
inline?: boolean;
/**
* Public Path for URLs in CSS files
* @default "./"
* */
publicPath?: string;
/**
* Directory path for outputted CSS assets,
* which is not included into resulting URL
* @default "."
* */
assetDir?: string;
/**
* Enable/disable name generation with hash for outputted CSS assets
* or provide your own placeholder with the following blocks:
* - `[extname]`: The file extension of the asset including a leading dot, e.g. `.png`.
* - `[ext]`: The file extension without a leading dot, e.g. `png`.
* - `[hash(:<num>)]`: A hash based on the name and content of the asset (with optional length).
* - `[name]`: The file name of the asset excluding any extension.
* Forward slashes / can be used to place files in sub-directories.
* @default "assets/[name]-[hash][extname]" ("assets/[name][extname]" if `false`)
* */
hash?: boolean | string;
/**
* Provide custom resolver for URLs
* in place of the default one
*/
resolve?: Resolve;
/**
* Aliases for URL paths.
* Overrides the global `alias` option.
* - ex.: `{"foo":"bar"}`
*/
alias?: {
[from: string]: string;
};
};
/** File resolved by `@import` resolver */
declare type ResolvedFile$1 = {
from: string;
source: Uint8Array;
};
/** `@import` resolver */
declare type Resolve$1 = (url: string, basedir: string, extensions: string[]) => Promise<ResolvedFile$1>;
/** `@import` handler options */
declare type ImportOptions = {
/**
* Provide custom resolver for imports
* in place of the default one
*/
resolve?: Resolve$1;
/**
* Aliases for import paths.
* Overrides the global `alias` option.
* - ex.: `{"foo":"bar"}`
*/
alias?: {
[from: string]: string;
};
};
/** Object, which properties are unknown */
declare type ObjectWithUnknownProps = {
[prop: string]: unknown;
};
/** `postcss-load-config`'s options */
declare type PostCSSLoadConfigOptions = {
/**
* Path to PostCSS config file directory
* @default undefined
*/
path?: string;
/**
* Context object passed to PostCSS config file
* @default {}
*/
ctx?: ObjectWithUnknownProps;
};
/** Options for Sass Loader */
declare type SASSLoaderOptions = {
/**
* Sass importer, or array of such
* @default undefined
*/
importer?: Importer | Importer[];
/**
* Data to prepend to every Sass file
* @default undefined
*/
data?: string;
/** Force Sass implementation */
impl?: "node-sass" | "sass";
/** Forcefully disable/enable `fibers` */
fibers?: boolean;
/** Any options for `sass` processor */
[option: string]: unknown;
};
/** Options for Stylus loader */
declare type StylusLoaderOptions = {
/** Any options for `stylus` processor */
[option: string]: unknown;
};
/** Options for Less Loader */
declare type LESSLoaderOptions = {
/**
* Array of Less plugins
* @default undefined
*/
plugins?: Plugin[];
/** Any options for `less` processor */
[option: string]: unknown;
};
/**
* Loader
* @param LoaderOptionsType type of loader's options
* */
declare type Loader<TLoaderOptions = ObjectWithUnknownProps> = {
/** Name */
name: string;
/**
* Test to decide if file should be processed.
* Also used for plugin's supported files test.
* */
test?: RegExp | ((filepath: string) => boolean);
/** Skip testing, always process the file */
alwaysProcess?: boolean;
/** Function for processing */
process: (this: LoaderContext<TLoaderOptions>, payload: Payload) => Promise<Payload> | Payload;
};
/**
* Loader's context
* @param LoaderOptionsType type of loader's options
* */
declare type LoaderContext<TLoaderOptions = ObjectWithUnknownProps> = {
/**
* Loader's options
* @default {}
* */
readonly options: TLoaderOptions;
/** @see {@link Options.sourceMap} */
readonly sourceMap?: boolean | "inline";
/** Resource path */
readonly id: string;
/** Files to watch */
readonly deps: Set<string>;
/** Assets to emit */
readonly assets: Map<string, Uint8Array>;
/** Function for emitting a waring */
readonly warn: PluginContext["warn"];
/** https://rollupjs.org/guide/en#plugin-context */
readonly plugin: PluginContext;
};
/** Loader's payload */
declare type Payload = {
/** File content */
code: string;
/** Sourcemap */
map?: string;
/** Extracted data */
extracted?: {
/** Source file path */
id: string;
/** CSS */
css: string;
/** Sourcemap */
map?: string;
};
};
/** CSS data, extracted from JS */
declare type ExtractedData = {
/** CSS */
css: string;
/** Sourcemap */
map?: string;
/** Output name for CSS */
name: string;
};
/** Options for CSS injection */
declare type InjectOptions = {
/**
* Insert `<style>` tag into container as a first child
* @default false
* */
prepend?: boolean;
/**
* Inject CSS into single `<style>` tag only
* @default false
* */
singleTag?: boolean;
/**
* Container for `<style>` tag(s) injection
* @default "head"
* */
container?: string;
};
/** `rollup-plugin-styles`'s full option list */
interface Options {
/**
* Files to include for processing.
* @default undefined
* */
include?: Parameters<CreateFilter>[0];
/**
* Files to exclude from processing.
* @default undefined
* */
exclude?: Parameters<CreateFilter>[1];
/**
* PostCSS will process files ending with these extensions.
* @default [".css", ".pcss", ".postcss", ".sss"]
* */
extensions?: string[];
/**
* A list of plugins for PostCSS,
* which are used before plugins loaded from PostCSS config file, if any
* @default undefined
* */
plugins?: (postcss.Transformer | string | [string] | [string, ObjectWithUnknownProps] | null | undefined)[];
/**
* Select mode for this plugin
* - `"inject"` *(default)* - Embeds CSS inside JS and injects it into `<head>` at runtime.
* You can also pass options for CSS injection.
* Alternatively, you can pass your own CSS injector.
* - `"extract"` - Extract CSS to the same location where JS file is generated but with .css extension.
* You can also set extraction path manually,
* relative to output dir/output file's basedir,
* but not outside of it.
* - `"emit"` - Emit pure processed CSS for other plugins in the build pipeline.
* Useful when you only need to preprocess CSS.
* @default "inject"
* */
mode?: "inject" | ["inject", InjectOptions | ((varname: string, id: string) => string)] | "extract" | ["extract", string] | "emit" | ["emit"];
/**
* `to` option for PostCSS, required for some plugins
* */
to?: string;
/**
* Enable/disable or pass options for CSS `@import` resolver
* @default true
* */
import?: ImportOptions | boolean;
/**
* Enable/disable or pass options for CSS URL resolver
* @default true
* */
url?: UrlOptions | boolean;
/**
* Aliases for URL and import paths.
* - ex.: `{"foo":"bar"}`
*/
alias?: {
[from: string]: string;
};
/**
* Enable and optionally pass additional configuration for
* [CSS Modules](https://github.com/css-modules/css-modules)
* @default false
* */
modules?: boolean | ModulesOptions;
/**
* Automatically enable
* [CSS Modules](https://github.com/css-modules/css-modules)
* for files named `[name].module.[ext]`
* (e.g. `foo.module.css`, `bar.module.stylus`),
* or pass your own function or regular expression
* @default false
* */
autoModules?: boolean | RegExp | ((id: string) => boolean);
/**
* Use named exports alongside default export.
* You can supply a function to control how exported name is generated.
* @default false
* */
namedExports?: boolean | ((name: string) => string);
/**
* Enable CSS minification and optionally pass additional configuration for
* [cssnano](https://github.com/cssnano/cssnano)
* @default false
* */
minimize?: boolean | cssnano.CssNanoOptions;
/**
* Enable sourcemaps.
* @default false
* */
sourceMap?: boolean | "inline";
/**
* Set PostCSS parser, e.g. `sugarss`.
* Overrides the one loaded from PostCSS config file, if any
* @default undefined
* */
parser?: string | postcss.Parser;
/**
* Set PostCSS stringifier.
* Overrides the one loaded from PostCSS config file, if any
* @default undefined
* */
stringifier?: string | postcss.Stringifier;
/**
* Set PostCSS syntax.
* Overrides the one loaded from PostCSS config file, if any
* @default undefined
* */
syntax?: string | postcss.Syntax;
/**
* Enable loading PostCSS config file.
* @default true
* */
config?: boolean | PostCSSLoadConfigOptions;
/**
* Array of loaders to use, executed from right to left.
* Currently built-in loaders are:
* - `sass` (Supports `.scss` and `.sass` files)
* - `stylus` (Supports `.styl` and `.stylus` files)
* - `less` (Supports `.less` files)
* @default ["sass", "stylus", "less"]
* */
use?: string[];
/** Options for Sass loader */
sass?: SASSLoaderOptions;
/** Options for Stylus loader */
stylus?: StylusLoaderOptions;
/** Options for Less loader */
less?: LESSLoaderOptions;
/**
* Array of custom loaders.
* @default undefined
* */
loaders?: Loader[];
/**
* Function which is invoked on CSS file import.
* @default undefined
* */
onImport?: (code: string, id: string) => void;
/**
* Function which is invoked on CSS file import.
* Return `boolean` to decide if you want to extract the file or not.
* @default undefined
* */
onExtract?: (fn: (name: string, ids: string[]) => ExtractedData) => boolean;
}
declare const _default: (options?: Options) => Plugin$1;
export default _default;