[Question] Split into Multiple Files?

[OwenMelbz]

Hi, we're looking to try use this package in our workflow and wondering if its currently possible to split the critical css out into different files?

I know the below syntax is already taken, but is it possible for something like:

Imagine this is your app.css

body {
  background: red;

  /* critical:start */
  height: 400px;
  /* critical:end */

  /* critical:start:home */
  color: red;
  /* critical:end */

  /* critical:start:work */
  width: 200px;
  /* critical:end */
}

The theory being you'd end up with 4 css files

• app.css
• critical.css
• critical-home.css
• critical-work.css

Is this possible? Thanks

[madebyaaron]

+1 this. I'd be eager to know if this is possible too

[OwenMelbz]

@madebyaaron this is a super crude hacked together working concept that is super simplified for our needs on just 1 project -> https://gist.github.com/OwenMelbz/19f0f50a4a95d6fd9c57f2a526864d37 but if anybody wants to mess around/release/improve then might be useful

[madebyaaron]

@OwenMelbz thanks! i'll check it out asap

[mrnocreativity]

And what would the content of those files be? I'm pretty sure the plugin should be able to do this ;)

[OwenMelbz]

@mrnocreativity the content would be what is between the comment markers.

We'd tried various ways over the space of few weeks to try get this plugin to do it, and it never actually worked for us, so unless theres something key we're missing, or maybe just some more indepth explanation on the docs on how to specifically do this?

[mrnocreativity]

I'm not sure what your setup was but it is worth reminding you that postcss will 'process 1 css file' and the result will also be '1 css file'. That means you can't run postcss a single time to generate several files. So in that aspect, you won't be able to get it to work; correct.

I currently use this setup for various enterprise sites that use several modules that are all can be mixed and matched on several page templates. So what I have is a project.json file where I write down templates like this

I have a Gulp build task that first generates the 'full css' file where everything has been completed (including other postcss tasks). Then I run a set of PostCSS tasks based on the config above. 1 PostCSS run for each template. The template-key is used as the file suffix (main-critical-homepage.css, main-critical-tagpage.css, etc). The list of modules is past via splitOptions to the PostCSS task. See below for (moderately complex) example.

I should really update the example project to include this. I hope this helps you tho. Let me know if I misunderstood the request or if you think I'm leaving out critical information. Feel free to send me an example of what you're doing. I'd be glad to help.

(I can see how to me all of this is simple and logical but if you're not familiar with this approach, it could become difficult and weird ;) )

[mrnocreativity]

@OwenMelbz , did the above help you?

[ag-coder]

hello is there a way to do this with webpack instead of gulp?

[mrnocreativity]

Sorry for the SUPER LATE reply: yes, this can be done in webpack. @mistakster actually made a plugin especially for this use-case which can be used for a ton of other stuff as well.

https://github.com/mistakster/postcss-pipeline-webpack-plugin#readme