tsdx: [tsdx-config] Css module build fail

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!

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.

This works for me:

• tsdx 0.11.0
• src/typings.d.ts:

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

• tsdx.config.js:

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

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

• import styles from './style.module.css' -> {container: "style-module_container__30I_8", list: "style-module_list__3gJhy", listItem: "style-module_listItem__2pC6c"}

I forgot to publish 0.9 the other day, so docs did not reflect the current version. This is fixed now. I’m so sorry!

Sorry my bad. After trying different things I missed the from this is the right error message:

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

✖ Failed to compile
(typescript) Error: /Users/daniele/Desktop/testLibTsDx/src/index.tsx(2,24): semantic error TS2307: Cannot find module './style.module.css'.
Error: /Users/daniele/Desktop/testLibTsDx/src/index.tsx(2,24): semantic error TS2307: Cannot find module './style.module.css'.
    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.15s.

I also tried:

import style from './style.module.css';

index.tsx(2,19): syntax error TS1005: 'from' expected.

you forgot “from”. read your own error please.