Adding css-modules with a custom Rollup config breaks the build.

[sergiop]

Current Behavior

Create a new project with react template: npx tsdx create mylib

1. Add postcss plugin and extend Rollup config with tsdx.config.js

yarn add -D rollup-plugin-postcss

const postcss = require('rollup-plugin-postcss');
module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        modules: true,
      })
    );
    return config;
  },
};

2. Add a test css-module file /src/style.module.css, import and use it in /src/index.tsx

.test {
  color: red;
}

import * as React from 'react';
import styles from './style.module.css';

// Delete me
export const Thing = () => {
  return <div className={styles.test}>the snozzberries taste like snozzberries</div>;
};

3. Build the library

yarn build

The build script exits with this error:

Suggested solution(s)

Apparently, the custom configuration added in tsdx.config.js is not interpreted and the parser doesn't seem to know how to manage the .test css class in style.module.css.

If you downgrade TSDX to 0.9.3 the build passes.

This issue happens with TSDX >= v0.10.0

Your environment

Software	Version(s)
TSDX	0.10.5
TypeScript	3.6.4
Yarn	1.19.0
Node	v10.15.3
Operating System	macOS 10.14.6

[sergiop]

I dug inside the code, and from what I've seen, the issue started when, two weeks ago, @medelman17 added @wessberg/rollup-plugin-ts in place of rollup-plugin-typescript2.

Here the change: bfc0590#diff-85d99c527c01407b9055b07762a4ad45L11

On my computer I just reverted the changes only on that file, and with the old configuration the build passes, but I really have no idea on how to fix using @wessberg/rollup-plugin-ts.

[sergiop]

I played a little more and I found that if I use typescript instead of babel as a transpiler in @wessberg/rollup-plugin-ts config, the build passes.

https://github.com/jaredpalmer/tsdx/blob/master/src/createRollupConfig.ts#L146

[sergiop]

Last but not least, I found that probably the issue is not strictly related to css-modules or a custom tsdx.config.js but more simply to the import of a CSS file.

Removing tsdx.config.js file and importing a simple css (not a css-module), returns the same build error:

/src/style.css

.test {
  color: red;
}

/src/index.tsx

import * as React from 'react';
import './style.css';

// Delete me
export const Thing = () => {
  return <div className="test">the snozzberries taste like snozzberries</div>;
};

[swyxio]

do you mind retrying with v0.11? we reverted the change to @wessberg/rollup-plugin-ts. reopen if still persists.

[sergiop]

I can confirm @sw-yx, upgrading to v0.11 solves the issue. Thanks.