Inlining CSS doesn't work with Typescript files

[sapientia-sp]

Hi,

I have a simple preact habitat widget app that imports styles using the line import "./style.css"; I am also importing the styles in component.tsx

full exmaple

import habitat from 'preact-habitat';
import Widget from './component';

import "./style.css";

const _habitat = habitat(Widget);

_habitat.render({
  selector: '[data-widget-host="habitat"]',
  clean: true
});

My build command: microbundle -i src/index.ts -o dist/bundle.js --css inline --no-pkg-main -f umd --external none

ISSUE:

Inlining css as shown in the build command doesn't add any css to generated bundle.js

[rschristian]

This is correct behavior, see the docs: https://github.com/developit/microbundle#css-and-css-modules

The --inline option is to inline the CSS content as a string from an import. This means a side-effectful import will just be stripped out.

To copy the example from the docs:

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

Inlining is really only supported as a means of allowing use in environments that have no way of directly loading CSS content. It's very inefficient if you have any choice to avoid it (comparatively, JS is magnitudes more expensive to load than CSS) and it means handling that CSS content is left to you. You'll need to create a style tag, append that to the document head, and inject your CSS string into it, which creates even more JS.

[rschristian]

Closing this out as the question has hopefully been answered. Feel free to reply and we can continue to talk or I can reopen if there is indeed an issue.