Option --css inline produces no css

[everdimension]

Hi!

I'm using an import from a css module in my .ts file.

By default, imported css gets bundled into a single lib/index.css file. All good here.

But I pass --css inline option to microbundle, no css seems to be bundled at all. I do not see any css in the output js files nor in separate files.

Also I have to mention that the wording in the docs that describe the behavior of this option is quite confusing: https://github.com/developit/microbundle/blob/ef8376ee9076b2f56aca42fd9e4c8fd4dcaf8fd0/README.md#L238-L247

From the description above, I can't really understand what "inlining" means. The word itself implies that the css would be part of the output js file.

But the example in the docs implies that there will be a separate .css file that shares a name with the js file.

What should be the expected behavior?

[rschristian]

Inlining is to inject your CSS file into your JS bundle as a string.

If you aren't seeing it, it's likely due to not following the example we list or not actually consuming the CSS string (Microbundle will strip out unused values).

// with `microbundle --css inline`:
import css from './foo.css';
console.log(css); // the generated minified stylesheet

But the example in the docs implies that there will be a separate .css file that shares a name with the js file.

I'm not quite sure where you're getting that from, are you mixing different parts of the docs perhaps?

[everdimension]

Hey, thanks for a quick reply!

I'm not quite sure where you're getting that from, are you mixing different parts of the docs perhaps?

Confusion comes from the example you have provided:

// with `microbundle --css inline`:
import css from './foo.css';
console.log(css); // the generated minified stylesheet

Here, I am not sure if import css from './foo.css'; is meant to demonstrate the consumer code or the source code of the package.

The source code does consume the css file. I assume otherwise I wouldn't see an output .css file at all. The source code imports the file (import s from './style.module.css') and accesses it's property (className={s.propName} in jsx)

[rschristian]

Here, I am not sure if import css from './foo.css'; is meant to demonstrate the consumer code or the source code of the package.

Source, I believe all of the examples on our docs are source FWIW.

CSS Modules and CSS inlining are mutually exclusive. Inlining will inject it as a string (can't continue to use it as an object) and you'll need to handle dealing with it (likely creating a style tag, inserting the CSS, and then appending the tag to the DOM).

[hbroer]

Inlining CSS ist AFAIK only usefull when writing WebComponents where You put all your styles in a