[tsdx-config] Css module build fail #186
Comments
|
you forgot "from". read your own error please. |
|
Sorry my bad. After trying different things I missed the 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>
);
};I also tried: import style from './style.module.css'; |
|
can you please reopen? @sw-yx |
daniele-zurico
changed the title
|
I don't use CSS modules, but you may need a specific TS rollup setup to make them work. The one i used just does regular css and scss if node-sass is installed IIRC. |
|
The good news is that you have the flexibility now with tsdx.config.js to do this on your own. |
|
@jaredpalmer I took the documentation from your readme :) this is what I'm trying out! If you look up on my comment you'll find the |
|
I meant that this can be solved by you (in userland) and is now outside the scope of the project. My example doesn't support css modules. You will need to make some changes. |
|
@jaredpalmer ok I'm confused. From the readme of https://github.com/egoist/rollup-plugin-postcss modules: true,and is exactly what I added from your example. |
|
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! |
|
Ahah I was sure about that. No problem it happen. I’ll have another try tomorrow morning and if everything is ok I’ll take care to close my ticket. |
|
despite this time, I can see in the node_modules the |
|
For all the people are struggling to add css modules to tsdx this is the solution:
const postcss = require('rollup-plugin-postcss');
module.exports = {
rollup(config, options) {
config.plugins.push(
postcss({
modules: true,
})
);
return config;
},
};
declare module '*.css' {
const content: { [className: string]: string };
export default content;
}
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! |
|
@daniele-zurico @jaredpalmer You can use vscode typed-css-modules plugin with npm [email protected] instaled globally to create correct .d.ts files on save, or use npm dts-gen cli to do the same. |
|
@daniele-zurico After trying your code I get a
New to TypeScript. What is going wrong? |
|
@marijnbent try to comment the content of |
|
Hi,
Any help would be appreciated. |
|
Almost as if the tsdx.config.js file isn't overriding some values and postcss isn't triggered. If inject is set to false, and cssnano is added, I still see an injected css file.. |
|
@Ajamuar Hi! Did you solve the problem? |
|
I put the |
|
@daniele-zurico @teplenin I have the same problem of @Ajamuar using Daniele's solution and |
|
I think is the case to open a new ticket! I dint try on the new version so I’m not sure but It looks like a regression problem |
|
@daniele-zurico @jaredpalmer I opened a related BUG issue here: #284 I think it's not strictly related to CSS-MODULES as much as a more generic issue with Rollup custom config in |
|
@teplenin Hi, I couldn't find a solution, so I moved my styling inside the tsx file. It isn't the ideal solution but it works. In short, I removed the styling file altogether. |
|
This works for me:
declare module '*.css' {
const content: {[className: string]: string}
export default content
}
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
},
}
|
|
@Idered your config works thanks to |
agilgur5
added
the
scope: integration
agilgur5
added
the
kind: support
|
For anyone who comes here and is trying to figure out why your CSS isn't getting compiled with your TypeScript code, you have to have Here's my config: /* eslint-disable @typescript-eslint/no-var-requires */
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',
}),
],
sourceMap: true,
inject: true,
extract: false,
})
);
return config;
},
}; |
|
@dgreene1 not sure what you mean by "your CSS isn't getting compiled with your TypeScript code". The method in the docs with
But you can configure differently sure, up to you how or if you want to use |
|
Thank you for the clarity. My libraries consumers are a bit inexperienced and they couldn’t figure out how to import the CSS so I’m packaging it with the JS. But maybe there are disadvantages of that? The advantages though of
|
|
@dgreene1 there are a few disadvantages. Here's the table from Webpack's
I'd summarize the key disadvantages of injection as:
There are also disadvantages specifically from the library perspective:
It might also make some pieces of your JS library harder to tree-shake as the injection is a side-effect, but I'm not totally sure on that as I don't know all the nuances of side-effect detection. You know your library consumers best and what to do for their use case. I just chimed in because I saw "CSS isn't getting compiled" and I was like "hold up I wrote integration tests for this" 😆 I'll be locking this issue soon as this, broken v0.10 stuff, etc are all different from the original issue. These things are getting jumbled together and likely make it much harder to understand for readers. |
Hi guys,
I just installed tsdx to try out the new functionality of the config file.
The step I followed are:
tsdx.config.js:style.module.cssindex.tsxI imported it:yarn startDid I miss something?
The text was updated successfully, but these errors were encountered: