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

user_1445111 0
Viewed 1396

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.

rollup-plugin-postcss rollup css javascript
3 Answers

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: []
    })
  ]
}
user_85836690

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' }
        ]
    }
];
user_14451110

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,
            }),
        ],
    }
];
user_97091310
Related