Installation

npm

npm i -D rollup-plugin-postcss-amstramgram

Manually

Download the plugin in a rollup-plugin-postcss-amstramgram folder located at the root of your project.

Dependencies

If you have chosen the manual way, also install postcss and fast-glob. 

npm i -D postcss fast-glob

Postcss plugins

Pick up postcss plugins you need from here or there and enjoy...

Usage

...
//import rollup-plugin-postcss-amstramgram from the folder where you downloaded it :
import cssPlugin from './rollup-plugin-postcss-amstramgram/esm/index.mjs'
//Or if you have installed it with npm :
//import cssPlugin from 'rollup-plugin-postcss-amstramgram'
//import postcss plugins you want to use :
//https://github.com/postcss/postcss-import
import postcssImport from 'postcss-import'
//https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
import postcssPresetEnv from 'postcss-preset-env'
//https://github.com/cssnano/cssnano
import cssnano from 'cssnano'
...

export default = {
  input: 'src/js/index.js',
  output: {
    file: 'dist/js/index.js',
    format: ...
  },
  plugins: [
    ...
    cssPlugin({
      jobs: {
        //Select all files in the src/css directory
        //including those located in subdirectories
        //except those contained in the src/css/import folder
        from: [`src/css/**/*`, `!src/css/import`],
        to: `dist`,
        //Processed files will be emitted recursively in the dist folder
        //eg : 
        // - src/ccs/main.css => dist/css/main.css
        // - src/ccs/components/component-01.css => dist/css/components/component-01.css
        root: `src`
      },
      //Watch src/css directory and subdirectories when in development
      watch: process.env.BUILD === 'development',
      //Emit source maps when in development
      sourcemap: process.env.BUILD === 'development',
      plugins: [
        postcssImport(),
        postcssPresetEnv({
          stage: 1
        }),
        //Minify when in production
        ...(process.env.BUILD === 'production' ? [cssnano()] : [])
      ]
    }),
    ...
  ]
}

Options

jobs

A Job or an array of Jobs.

A Job is an object whose properties are :

- from -

Either a String or an Array of Strings.
Each element should be a valid glob or a string pointing to an existing file or folder.
If the target is a folder, all relevant files at its root will be processed.
See here if you need details about glob.

- to -

A String (or an Array of Strings) pointing to folder(s) where to put the result.

- root -

A String that sets the reference for the result tree.
By default, all processed files are placed at the root of the destination folder(s) defined by the to option.
If a directory is set as root option, the files will be placed relatively to it (see below for an illustration).
(default : undefined)

- rename -

A String or a Function that defines how the resulting file(s) should be named.
The function takes the file name and its full path as arguments and should return a string.
Example :
    rename: (name, path) => name + '.min'
will result in :
    main.css => main.min.css
If you process only one file, you can simply set :
    rename: 'main.min'
(default : undefined)

plugins

An Array of postcss plugins.

ext

A String or an Array of Strings defining accepted extensions.
Only files with one of the listed extension will be processed.
Example : ext: 'css'
Note that, if omitted, the dot will be automatically added.
So in the example above, ext: 'css' actually becomes ext: '.css'.
(default : ['.css', '.scss', '.sass'])

sourcemap

A Boolean indicating whether to generate a sourcemap.
(default : false)

watch

A Boolean indicating whether folders containing files to process (including their dependencies) should be watched.
(default : false)

processHook

A String that defines the rollup hook used to process the files.
Note however that the watch option will be forced to false if you use a hook called after moduleParsed because rollup cannot call the addWatchFile function after the build has finished.
(default : "transform").

verbose

A Boolean that specifies whether messages and notifications should be sent to the terminal.
(default : false).

warnOnError

A Boolean that specifies whether warnings should be logged for process errors.
(default : true).

syntax

An optional Object with parse and stringify passed as option to the postcss process.
More info here.

parser

Function to generate AST by string passed as option to the postcss process.
More info here.

stringifier

Class to generate string by AST passed as option to the postcss process.
More info here.

Examples

Basic

As already mentioned, by default, all processed files are placed at the root of the destination folder(s) set by the to option of a job.
So, if you work with a tree-structure like this :

src
  • css
    • components
      • component-01.css
      • component-02.css
    • import
      • import-01.css
      • import-02.css
    • page-01.css
    • page-02.css

And if you set the plugin options like that : 

...
export default = {
  ...
  plugins: [
    ...
    cssPlugin({
      jobs: {
        from: [`src/css/**/*`, `!src/css/import`],
        to: `dist/css`
      }
    }),
    ...
  ]
}

You will get :

dist
  • css
    • component-01.css
    • component-02.css
    • page-01.css
    • page-02.css

Keep nested structure

If you need to keep the original nested structure of your files, you should consider taking advantage of the job's root property.
Something like below where we also use the rename feature to spice it up a bit : 

...
export default = {
  ...
  plugins: [
    ...
    cssPlugin({
      jobs: {
        from: [`src/css/**/*`, `!src/css/import`],
        to: `dist`,
        root: `src`,
        rename: (name, fullPath) => (fullPath.includes('components') ? 'my-' : 'the-') + name
      }
    }),
    ...
  ]
}
dist
  • css
    • components
      • my-component-01.css
      • my-component-02.css
    • the-page-01.css
    • the-page-02.css

SCSS

...
//https://github.com/csstools/postcss-sass
import sass from '@csstools/postcss-sass'
//https://github.com/postcss/postcss-scss
import scss from 'postcss-scss'
    
export default = {
  ...
  plugins: [
    ...
    cssPlugin({
      jobs: {
        from: `src/scss/main.scss`,
        to: `dist/css`,
        rename: 'main-from-scss'
      },
      parser: scss,
      plugins: [sass()]
    }),
    ...
  ]
}
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
:root {
  /*Traditional css comment*/
  //SCSS comment
  color: $primary-color;
  font: 100% $font-stack;
}

:root {
  /*Traditional css comment*/
  /*SCSS comment*/
  color: #333;
  font: 100% Helvetica, sans-serif;
}

Output plugin

The plugin can be set as an output plugin if you really need it.
However, even if the job is indeed done, you will be warned by rollup about using "transform" and "watchChange" hooks if you don't set an output generation hook for the processHook option. 

...
export default = {
  input: `src/js/main.js`,
  output: {
    file: `dist/js/main.js`,
    format: 'esm',
    plugins: [
      cssPlugin({
        jobs: { from: `src/css/main.css`, to: `dist/css`, rename: `main.min`},
        processHook: 'writeBundle',
        plugins: [cssnano()]
      })
    ]
  },
}