Unable to render the css module's in app

[madpopTechie]

@rschristian I am creating a react package using microbundle and my file structure is below

Components |------CompOne --> CompOne.js &CompOne.module.css |------CompTwo --> CompTwo.js &CompTwo.module.css |------CompThree --> CompThree.js &CompThree.module.css |------CompFour --> CompFour.js &CompFour.module.css

and here i am importing the all components in the default.js and in the index.js i am exporting *export from "./Components/default.js";**

and the in the dist. folder I'm also able to generated lib.css but when i check the file i am not able to see all styles from all components only few styles are added and below is my command

microbundle build --css-modules true --globals react=React,react-dom=ReactDOM --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react

and also i see when i use font-weight:bold and In lib.css i am finding it as "font-weight:700" here i am few queries

1. Will it support inline css and if yes how to proceed with that ?.
2. Why the css modules in all components are not exported in to lib.css ?

[rschristian]

1. No, CSS Modules and CSS inlining are mutually exclusive. Have to pick one or the other.

2. Without a reproduction I can only guess, but it's likely you aren't using all defined styles in your CSS.

As for your question on font-weight, that's actually an optimization. font-weight can be provided 100-900 or keywords that translate to a specific number. bold is the same as 700, but 700 is shorter, making it more optimal for bundling.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

[madpopTechie]

@rschristian i am using all the defined styles from my css for ex : in CompOne css module i have some 15 classes and I'm using all of those like wise all other components . and is file naming convention can cause issue ? and i have some code in dynamic styling part also based on the condition the style will get displayed and in all the files im using below thing

1. `import styles from CompOne,
2. import styles from CompTwo`
3. and classes for each component named as CompOne_input_height{} like wise for CompTwo_input_section{}
4. Im using es6/7 conventions so will it be exported in js file or do i need to do any changes and is my microbundle build --css-modules true --globals react=React,react-dom=ReactDOM --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react is correct ?

[rschristian]

and is file naming convention can cause issue ?

x.module.css is the pattern to follow for consuming CSS Modules. Or, using --css-modules true to set all CSS files to be treated as CSS Modules.

I can't really follow the rest of your comment. Please break it up into one question at a time, i.e.,

1. ....?
2. ....?

etc.

Please also provide a minimal reproduction. I can't catch any usage errors without seeing code.

[rschristian]

Closing due to no response.

Happy to reopen if a reproduction and a clear issue description are provided.