Rollup Exceptions to preserveModules

Question

I use a rollup plugin called rollup-plugin-lit-css to transform .css files into javascript modules. That plugin isdead-simple, it essentially just appends export default to the file.

My rollup config uses preserveModules and output.dir to avoid bundling modules.

import resolve from 'rollup-plugin-node-resolve';
import litcss from 'rollup-plugin-lit-css';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';

export default {
  preserveModules: true,
  input: 'src/a.js',
  output: {
    dir: 'dist',
    format: 'es',
  },
  plugins: [
    litcss(),
    babel({ babelrc: true }),
    resolve({ browser: true }),
    commonjs(),
  ],
};

Current Behavior

Let's say that a imports a.css and also b. The current situation turns this:

src/
├── a.js
├── a.css
├── b.js

into this:

dist/
├── a.js
├── a.css
├── b.js

Desired Output

I would like, instead, to get this:

dist/
├── a.js
├── b.js

With the transformed contents of a.css bundled into a.js

Answer 1

preserveModules can't be used to selectively create separate chunks, please use manualChunks instead.

{
  output: {
    dir: 'dist',
    format: 'es',
    chunkFileNames: '[name].js'
  },
  manualChunks: id => path.parse(id).name
}

In this case, a.js and a.css have the same chunk name a, and a.js will be created for them. chunkFileNames specifies output file names and is required.

Complete config:

import path from 'path'
import resolve from 'rollup-plugin-node-resolve'
import litcss from 'rollup-plugin-lit-css'
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: 'a.js',
  output: {
    dir: 'dist',
    format: 'es',
    chunkFileNames: '[name].js'
  },
  plugins: [
    litcss(),
    babel({ babelrc: true }),
    resolve({ browser: true }),
    commonjs(),
  ],
  manualChunks: id => path.parse(id).name
}