egoist / rollup-plugin-postcss

Seamless integration between Rollup and PostCSS.
MIT License
673 stars 212 forks source link

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) src/main.css #309

Open cagline opened 3 years ago

cagline commented 3 years ago

Expected Behavior

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

Actual Behavior

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

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

Then, I update rollup version to 2.26.3 from 1.29.0 now it's generate only following two files along with below error. It's seams there is an issue with rollup or postCss plugin.

--my-faceapi-js-lib.umd.js
--my-faceapi-js-lib.css

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) src/main.css (1:0)

rollup.config.js

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

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/my-faceapi-js-lib.css'),
            }),
            resolve(), // so Rollup can find `ms`
            commonjs() // so Rollup can convert `ms` to an ES module
        ]
    },
    {
        input: 'src/main.js',
        external: ['ms'],
        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.

cagline commented 3 years ago

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) src/main.css (1:0)

Error has been resolved 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' }
        ]
    }