.css file not added into distribution in js only library build with rollup

Question

I'm writing JS library using rollup-starter-lib as base of my JS library

"version": "1.29.0"

It has main.js file & main.css file, There is no html file. main.js file is all about DOM manipulation, main.css file is necessary in implementation steps, to easily integrate this JS library, rather giving an instruction to user.

I feel like it's .css file not creating due to tree shaking because of css not used in this JS library itself.

Current Distribution

-dist
--my-faceapi-js-lib.cjs.js
--my-faceapi-js-lib.esm.js
--my-faceapi-js-lib.umd.js

Expected Distribution

-dist
--my-faceapi-js-lib.cjs.js
--my-faceapi-js-lib.esm.js
--my-faceapi-js-lib.umd.js
--my-faceapi-js-lib.css

copy main.css file into dist folder not expecting since it's not minifying.

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
//import copy from 'rollup-plugin-copy'
//import postcss from 'rollup-plugin-postcss'

export default [
    {
        input: 'src/main.js',
        output: {
            name: 'howLongUntilLunch',
            file: pkg.browser,
            format: 'umd'
        },
        plugins: [
            resolve(), // so Rollup can find `ms`
            commonjs() // so Rollup can convert `ms` to an ES module
        ]
    },{
        input: 'src/main.js',
        output: [
            { file: pkg.main, format: 'cjs' },
            { file: pkg.module, format: 'es' }
        ]
    }
];

main.js

import * as faceapi from "face-api.js";
...
...
...
import 'main.css';
...
...

Basically there is not usage of main.css within JS library it self. but it's necessary when integrate this library.

score 0 · Answer 1 · answered Aug 16 '20 at 11:53

0

You need for that to use the rollup-plugin-postcss plugin (you already have it but it's commented):

// rollup.config.js
import postcss from 'rollup-plugin-postcss'
import path from 'path'

export default {
  plugins: [
    postcss({
      extract: path.resolve('dist/my-faceapi-js-lib.css'),
      plugins: []
    })
  ]
}

answered Aug 16 '20 at 11:53

johannchopin

13,720
10
55
101

I already tried that out, didn't work, .umd.js file has `define(['exports', 'main.css']` part but it didn't create any `.css` file in `dist` folder. my guess is since there is not html use this css it's drop during the tree shaking – Chanuka Asanka Aug 16 '20 at 12:18
I had the same issue and I fixed it by adding an extra export, specifically with `input: 'path_to_css/index.css'`. – svrbst Aug 03 '22 at 14:05

Chanuka Asanka · Answer 2 · 2020-08-18T10:11:30.290

Issue has been fixed after update rollup version from 1.29.0 to 2.26.3` (also update relevant packages to rollup lib - not sure about related to fix)

"@rollup/plugin-commonjs": "^15.0.0",
"@rollup/plugin-node-resolve": "^9.0.0",
"rollup": "^2.26.3",

and after adding ['./main.css'], as an external.


    {
        input: 'src/main.js',
        external: ['./main.css'],
        output: [
            { file: pkg.main, format: 'cjs' },
            { file: pkg.module, format: 'es' }
        ]
    }

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
import postcss from 'rollup-plugin-postcss'
import path from 'path'

export default [
    {
        input: 'src/main.js',
        output: {
            name: 'my-faceapi-js-lib',
            file: pkg.browser,
            format: 'umd'
        },
        plugins: [
            postcss({
                minimize: true,
                extensions: ['.css'],
                extract: path.resolve('dist/face-auth-rnd.css'),
            }),
            resolve(), // so Rollup can find `ms`
            commonjs() // so Rollup can convert `ms` to an ES module
        ]
    },
    {
        input: 'src/main.js',
        external: ['./main.css'],
        output: [
            { file: pkg.main, format: 'cjs' },
            { file: pkg.module, format: 'es' }
        ]
    }
];

score 0 · Answer 3 · answered Aug 03 '22 at 14:14

This can be fixed by adding an extra export which uses the CSS file as input.

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
import postcss from 'rollup-plugin-postcss'

export default [
    {
        input: 'src/main.js',
        output: {
            name: 'howLongUntilLunch',
            file: pkg.browser,
            format: 'umd'
        },
        plugins: [
            resolve(), 
            commonjs() 
        ]
    },{
        input: 'src/main.css',
        output: [
            { file: "dist/main.css" }
        ],
        plugins: [
            postcss({
                minimize: true,
            }),
        ],
    }
];

.css file not added into distribution in js only library build with rollup

3 Answers3