Extract css to multiple files. (per component for example)

[Pixelatex]

We're building a component library but currently we'd end up with one big css file... but if people are only using say 1 button... it's a bit mad to import everything just for that.

Is there some way to tell tinaria to extract multiple paths to different css files?

[brandonkal]

@Pixelatex Linaria will create an extracted CSS file that is added as an import for each JS file that imports and calls styled or css. The simple answer to your question is that each component should be in its own JS file. Beyond that, it is up to the bundler to decide if CSS from all imported components are extracted into a single css file or split between chunks.

[ShanonJackson]

@Pixelatex If you want some advice from someone who went down this road its that i wrote my own rollup plugins to leave the require(".css") statements linaria adds AND leave the stylesheets intact without merging them.

Then in projects consuming our library they basically just add our library as a rule in webpack for it to allow css imports and as you import components you will automatically get the required styles. (As folders in node_modules are not normally transpiled by default)

Might open source our stuff at some point in the future its mostly hacky under the hood but we've never had problems with it.

[satya164]

Doesn't the CLI handle this? https://github.com/callstack/linaria/blob/master/docs/CLI.md

[jayu]

The author is inactive so I'm closing the issue for now. Without more info about the used build system, we can't help much.