how best to export .css.ts files from a package with esm and cjs builds

[dagda1]

I've hit a problem with creating a package that exports theming helpers.

I have a build script that uses rollup to create esm and cjs builds

The build output would look something like this:

dist
  |_esm
    |_design-system.esm.js
    |_vars.css.js
    |_themes
       |_theme1..css.js
        |_theme2.css.js
  |_cjs
     |_index.js
     |_design-system.cjs.production.min.js
     |_design-system.cjs.production.development.js

There are all sorts of problems exporting .css.* files, especially for a cjs build were rollup transpiles into a single file.

Is there any way around this?

The only thing I can think of is to let the consuming package just import the typescript.

[mattcompiles]

This is a tricky one. We're working on some tooling to handle this ATM but nothing to share just yet. We're probably going to use a custom rollup config that chunks .css.js files separately.

[dagda1]

hmmmmm there is no rollup support yet and rollup and css does not always end well.

[mattcompiles]

Agreed, we won't be using rollup to generate CSS.

[aulneau]

@mattcompiles just curious, any progress on this? Even if it's WIP, I'd love a sneak peek (might be able to contribute some too!)

[w3b-wiz4rd]

@dagda1 Have you found a work around ? I have a component library that I'm using on multiple projects the issues is when I try to create a component inside a project with the same sprinkles exported from the component library I get the error document undefined I'm assuming is becuase I'm exporting everything from a .ts file and not a css.ts file.