No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Critical CSS example (using PostCSS Critical Split)

This is a basic example to show how I set up my critical CSS and how I use the postcss-critical-spit plugin (located at https://www.npmjs.com/package/postcss-critical-split).

Install

  • Clone the repository
  • Open a Terminal window in the main project folder
  • run npm install

Usage

Cleaning the build

  • run gulp clean to empty the build directory. This comes in handy when trying the seperate setups

PostCSS-only example

  • run gulp css:sass first (this is to generate the input CSS file)
  • run node postcss.js to run the Node task that runs the direct PostCSS task without Gulp.

Gulp example

  • Run npm run gulp to generate the files and run a local server with development setup
  • Run 'gulp --release' to generate the files and run a local server with release (aka critically-rendered) assets
  • Check out the Gulpfile and the main-critical.css file in the build/css folder to see what happens

Webpack example

  • Run npm run webpack to generate the files
  • There is no fully embedded CSS in the HTML file now but that shouldn't stop you :)
  • Check out the webpack.config.file to see how the multiple CSS files are generated in a single go! Thanks to Vladimir Kuznetsov for helping out!