rollup-copy-transform-css

![Latest version
!Dependency status
](https://www.npmjs.com/package/rollup-copy-transform-css)

Inlining, minifying and other methods for transforming stylesheets when copying them with [rollup-plugin-copy], [rollup-plugin-css-lit] or [rollup-plugin-scss-lit].

Synopsis

``js
import copy from 'rollup-plugin-copy';
import { createTransform } from 'rollup-copy-transform-css';

export default {
plugins: [
copy({
targets: [{
src: 'src/main.css',
dest: 'dist',
transform: createTransform({ inline: true, minify: true })
}]
})
]
// the rest of the configuration
}
`

Installation

Make sure that you use [Node.js] 14 or newer and [Rollup] 2 or newer. Use your favourite package manager - [NPM], [PNPM] or [Yarn]. Make sure that you include [rollup-plugin-copy] too:

`sh
npm i -D rollup-copy-transform-css rollup-plugin-copy
pnpm i -D rollup-copy-transform-css rollup-plugin-copy
yarn add -D rollup-copy-transform-css rollup-plugin-copy
`

Usage

Edit a rollup.config.js [configuration file], import the createTransform function, call it to create a transformation method and assign it to the transform property of the copy target options:

`js
import copy from 'rollup-plugin-copy';
import { createTransform } from 'rollup-copy-transform-css';

const transformCss = createTransform({
inline: true, minify: true, map: { inline: false }
})

export default {
input: 'src/index.js',
output: { file: 'dist/main.js', format: 'iife', sourcemap: true },
plugins: [
copy({
targets: [{
src: 'src/main.css', dest: 'dist', transform: transformCss
}]
})
]
}
`

Then call rollup either via the [command-line] or [programmatically].

Creation Options

The following options can be passed in an object to the createTransform function. Either minifying or inlining or both or custom plugins have to be provided:

$3

Type: Boolean | Object

Default: false

Enables minifying. If an object is specified, it will be passed to the [cssnano] plugin.

Experimental feature: if the object is set to { fast: true }, [esbuild] will be used instead of [postcss].

$3

Type: Boolean | Object

Default: false

Enables inlining of stylesheets and other assets. If an object is specified, it will have to include two properties pointing to objects: { stylesheets, assets }. The stylesheets objects will be passed to the [postcss-import] plugin. The assets objects will be passed to the [postcss-url] plugin.

Experimental feature: if the object is set to { fast: true }, [esbuild] will be used instead of [postcss].

$3

Type: Array