[tsdx-config] Css module build fail

Hi guys, I just installed tsdx to try out the new functionality of the config file. The step I followed are:

1. in the root of the project I created a file called tsdx.config.js:

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        plugins: [
          autoprefixer(),
          cssnano({
            preset: 'default',
          }),
        ],
        inject: false,
        // only write out CSS for the first bundle (avoids pointless extra files):
        extract: !!options.writeMeta,
        modules: true,
      })
    );
    return config;
  },
};

1. I installed the 3 dependencies that are required;
2. in the src folder I create a file called: style.module.css
3. in the index.tsx I imported it:

import * as React from 'react';
import * as style './style.module.css';
// Delete me
export const Thing = () => {
  return (
    <div className={style.test}>the snozzberries taste like snozzberries</div>
  );
};

1. running yarn start

✖ Failed to compile
(typescript) Error: /Users/daniele/Desktop/testLibTsDx/src/index.tsx(2,19): syntax error TS1005: 'from' expected.
Error: /Users/daniele/Desktop/testLibTsDx/src/index.tsx(2,19): syntax error TS1005: 'from' expected.
    at error (/Users/daniele/Desktop/testLibTsDx/node_modules/rollup/dist/rollup.js:9429:30)
    at throwPluginError (/Users/daniele/Desktop/testLibTsDx/node_modules/rollup/dist/rollup.js:15701:12)
    at Object.error (/Users/daniele/Desktop/testLibTsDx/node_modules/rollup/dist/rollup.js:15756:24)
    at Object.error (/Users/daniele/Desktop/testLibTsDx/node_modules/rollup/dist/rollup.js:16148:38)
    at RollupContext.error (/Users/daniele/Desktop/testLibTsDx/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:17187:30)
    at lodash_3 (/Users/daniele/Desktop/testLibTsDx/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24954:23)
    at arrayEach (/Users/daniele/Desktop/testLibTsDx/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:532:11)
    at forEach (/Users/daniele/Desktop/testLibTsDx/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:9360:14)
    at printDiagnostics (/Users/daniele/Desktop/testLibTsDx/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24927:5)
    at Object.transform (/Users/daniele/Desktop/testLibTsDx/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:26754:17)

✨  Done in 2.18s.

Did I miss something?

[daniele-zurico]

For all the people are struggling to add css modules to tsdx this is the solution:

1. Create tsdx.config.js

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

1. install rollup-plugin-postcss

 yarn add rollup-plugin-postcss -dev

1. in the src folder create a file called typings.d.ts:

declare module '*.css' {
  const content: { [className: string]: string };
  export default content;
}

1. in the src folder create a file called style.module.css

.test {
  color: red;
}

1. in the index.tsx import it:

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>
  );
};

@jaredpalmer feel free to close it or set as fixed or I can create a PR to your readme to add is an example. Up to you and thanks again for the great work!

[Ajamuar]

Hi, I am facing the same problem. I need a .css file in my project and I am trying to import it but I am continuously getting the same error. I tried the code given by @daniele-zurico and I am still facing the same problem.

Any help would be appreciated. Thanks.