wearerequired/js

PostCSS Config: Add postcss-critical-split

Closed this issue · 1 comments

Related to https://github.com/wearerequired/wordpress-theme-boilerplate/issues/132

diff --git packages/postcss-config/index.js packages/postcss-config/index.js
index 73f1382..f1bfe89 100644
--- packages/postcss-config/index.js
+++ packages/postcss-config/index.js
@@ -15,6 +15,9 @@ module.exports = ( ctx ) => {
                                        grid: true,
                                },
                        } ),
+                       require( 'postcss-critical-split' )( {
+                               output: process.env.CRITICAL_CSS ? 'critical' : 'rest',
+                       } ),
                        require( 'postcss-sort-media-queries' )( {
                                sort: 'mobile-first',
                        } ),

To create the stylesheet with the critical CSS you'd have to run:

NODE_ENV=production CRITICAL_CSS=true postcss assets/css/src/style.css -d assets/css/dist --ext '.critical.css'

To make it compatible with PostCSS 8 (#54) I have submitted a PR upstream: mrnocreativity/postcss-critical-split#22

Closing since postcss-critical-split is no longer maintained.