output: rest not working with grunt-postcss

[andreasisaak]

I'm working with grunt-postcss and your postcss module and the config output: rest is not working. The output at the css stylesheets is equal to output: critical

[andreasisaak]

My Gruntconfig:

    postcss: {
      dist: {
        options: {
          processors: [
            require('autoprefixer')({browsers: 'last 4 versions'}),
            require('postcss-critical-split')({
              save: true
            }),
            require("css-mqpacker")({sort: true})
          ]
        },
        src: ['Resources/Public/Stylesheets/*.css']
      }
    },

[mrnocreativity]

Hey Andreas,

Thanks for posting some code along with your report. That really helps.

All cards on the table: that 'save'-feature was not exactly my brightest idea; it was back in the day when the plugin was heavily based on the postcss-split plugin I forked this from. In hindsight, that was not the postcss-way of doing things.

I'll look into why this isn't working and see if I can fix it but I'll probably be deprecating this feature soon. Postcss plugins shouldn't be saving files to the disk themselves ;)

To address your problem: Here are a few ideas.

1. I am wondering if adding the output: 'rest' to the split config doesn't change anything.
2. In order to get things to work without the save-feature, you should consider creating 2 tasks: 1 that splits the critical (output: critical), another that splits the rest (output: rest). That way the content is streamed through all other plugins as well and follows along with other plugins as well.
3. This may sound a bit wrong but have you considered checking the project directory for generated .css files. I see you're trying to save files to the resources-folder but I'm not sure the internal save-feature of the plugin will be putting it there. So the files might well be saved to disk with the content you'd like but just not where you expect them to be.

I'll check to setup up a little grunt-setup that simulates your situation and check out what is going on. If you'd have a demo-setup for me to check this out, it would considerably help me speed things up :)

[mrnocreativity]

Hey Andreas,

I quickly set up a test to simulate this and I think you should change your workflow to ignore the save-option. It breaks the grunt flow and totally defeats the point of the postcss plugin framework. My example: grunt-save-rest.zip (download, open in terminal, run npm installand then grunt)

What I did:

1. I added a sample SCSS file that generates a main.css file in the build folder.
2. I added 2 tasks to run the 2-way split: one critical, the other creates the rest.
3. I incorporated your PostCSS tasks to run against the generated files.

Once Grunt has completed running you have 3 files:

1. main.css: this is the generated output from the sass file which has also been processed by your autoprefixer and MqPacker.
2. main-critical.css: this is the critical css only.
3. main-rest.css: this is the non-critical css that you can load async later.

I hope this helps you.

About the 'save'-feature: I have tried moving things around in order to fix this but the truth is that the 'save' feature was never a good approach. It was a leftover approach that I found when I first forked postcss-split. In hindsight, it should never have continued to exist in my version of the plugin as it breaks the way PostCSS flow.

I'll mark this as 'won't fix' as I will deprecate the save feature soon. I still hope I was able to help you out with the above example.

Good luck!

[mrnocreativity]

Deprecation notice is in place. There's nothing else to be done here. Closing this :)