├── CHANGELOG.md
├── README.md
├── index.js
└── package.json


/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Release notes for Laravel Mix Critical CSS
 2 | 
 3 | ## 2.0.0
 4 | 
 5 | ### Changed
 6 | 
 7 | - Switched out html-critical-webpack-plugin package with critical-css-webpack-plugin, which mean we are now using latest version of critical.
 8 | 
 9 | ## 1.0.1 
10 | 
11 | ### Added
12 | 
13 | - Added the posibility to allow flexible filename patterns ([#8](https://github.com/michtio/laravel-mix-criticalcss/issues/8)) ( Thanks to elgandoz )


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 | <a href="https://www.npmjs.com/package/laravel-mix-criticalcss"><img src="https://img.shields.io/npm/v/laravel-mix-criticalcss.svg" alt="NPM"></a>
 3 | <a href="https://npmcharts.com/compare/laravel-mix-criticalcss?minimal=true"><img src="https://img.shields.io/npm/dt/laravel-mix-criticalcss.svg" alt="NPM"></a>
 4 | <a href="https://www.npmjs.com/package/laravel-mix-criticalcss"><img src="https://img.shields.io/npm/l/laravel-mix-criticalcss.svg" alt="NPM"></a>
 5 | </p>
 6 | 
 7 | # Laravel Mix Critical
 8 | 
 9 | This extension provides instant Critical support to your Mix (v2.1 and up) builds.
10 | 
11 | ## Usage
12 | 
13 | First, install the extension.
14 | 
15 | ```
16 | npm install laravel-mix-criticalcss --save-dev
17 | ```
18 | 
19 | Then, require it within your `webpack.mix.js` file, like so:
20 | 
21 | ```js
22 | let mix = require('laravel-mix');
23 | 
24 | require('laravel-mix-criticalcss');
25 | 
26 | mix
27 |     .js('resources/assets/js/app.js', 'public/js')
28 |     .less('resources/assets/less/app.less', 'public/css')
29 |     .criticalCss({
30 |         enabled: mix.inProduction(),
31 |         paths: {
32 |             base: 'https://url-of-where-criticalcss-is-extracted.com/',
33 |             templates: './css/critical', //Where css files need to be written, all these paths are relative to /public
34 |                                          //So the example path here will be public/css/critical       
35 |             suffix: '_critical.min'
36 |         },
37 |         urls: [
38 |             { url: 'blog', template: 'blog' },
39 |         ],
40 |         //Now using https://github.com/addyosmani/critical v4.0.1
41 |         options: {
42 |             //It's important to note here you should NOT set inline:true, this will break the whole system.
43 |             width:411,
44 |             height:823,
45 |             penthouse:{
46 |                 timeout:1200000
47 |             }
48 |         },
49 |     });
50 | 
51 | // generates `./where-critical-css-file-needs-to-be-written/blog_critical.min.css`
52 | ```
53 | 
54 | And you're done! Compile everything down with `npm run prod`. `npm run dev` will not generate any critical css! Also make sure that your paths are correct and point to valid urls / segments of your website, whenever criticalcss has issues detecting the url, it might throw a console error!
55 | 
56 | ## Options
57 | Only `urls` is required - all other options are optional. If you don't want to use the paths object you can simply define your base and templates in the url and template options from `urls`
58 | 
59 | | Name             | Type               | Default              | Description   |
60 | | ---------------- | ------------------ | -------------------- |-------------  |
61 | | enabled          | `boolean`          | `mix.inProduction()` | If generating Critical CSS should be enabled |
62 | | paths            | `object`           | `{}`                 | Takes 3 arguments `base` ( src-url ), `templates` ( folder where critical css files should be written ) and `suffix` ( filename pattern )
63 | | urls             | `array`            | `[]`                 | An array of url objects, each with a url and template key: `{ url: 'http://example.com', template: 'index' }` |
64 | | options          | `object`           | `{}`                 | An object of [Critical](https://github.com/addyosmani/critical#options) options |
65 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const mix = require('laravel-mix');
 2 | const merge = require('lodash/merge');
 3 | 
 4 | class Critical {
 5 |     constructor() {
 6 |         this.criticals = [];
 7 |     }
 8 | 
 9 |     dependencies() {
10 |         this.requiresReload = `
11 |             Critical-Css-Webpack-Plugin has been installed. Please run "npm run dev" again.
12 |         `;
13 | 
14 |         return ['critical-css-webpack-plugin'];
15 |     }
16 | 
17 |     register(config) {
18 |         if (!config.urls || config.urls.length <= 0) {
19 |             throw new Error(
20 |                 'You need to provide at least 1 valid url object containing both url and template keys.'
21 |             );
22 |         }
23 | 
24 |         const critical = merge({
25 |             enabled: mix.inProduction(),
26 |             paths: {},
27 |             urls: [],
28 |             options: {
29 |                 inline:false
30 |             },
31 |         }, config);
32 | 
33 |         if (critical.paths.suffix == null) critical.paths.suffix = '_critical.min';
34 | 
35 |         this.criticals.push(critical)
36 |     }
37 | 
38 |     webpackPlugins() {
39 |         if (this.criticals.map((e) => e.enabled).some(Boolean)) {
40 | 
41 |             const CriticalCssPlugin = require("critical-css-webpack-plugin");
42 | 
43 |             const plugins = [];
44 | 
45 |             this.criticals.forEach((critical) => {
46 | 
47 |                 critical.enabled && critical.urls.forEach((template) => {
48 |                     const criticalSrc = critical.paths.base + template.url;
49 |                     const criticalDest = `${critical.paths.templates + template.template + critical.paths.suffix}.css`;
50 | 
51 |                     if (criticalSrc.indexOf('amp_') !== -1) {
52 | 
53 |                         critical.options.width = 600;
54 |                         critical.options.height = 19200;
55 | 
56 |                     }
57 | 
58 |                     plugins.push(new CriticalCssPlugin(Object.assign({
59 |                         src: criticalSrc,
60 |                         target: criticalDest,
61 |                     }, critical.options)));
62 |                 });
63 | 
64 |             })
65 | 
66 |             return plugins;
67 |         }
68 |     }
69 | 
70 | }
71 | 
72 | mix.extend('criticalCss', new Critical());


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "laravel-mix-criticalcss",
 3 |   "version": "1.1.0",
 4 |   "description": "A Laravel Mix extension for Critical CSS.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/dadamotion/laravel-mix-criticalcss.git"
12 |   },
13 |   "keywords": [
14 |     "laravel",
15 |     "laravel mix",
16 |     "mix",
17 |     "critical",
18 |     "webpack"
19 |   ],
20 |   "author": "Michael Thomas <michael@dadamotion.be> (https://dadamotion.be)",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/dadamotion/laravel-mix-criticalcss/issues"
24 |   },
25 |   "homepage": "https://github.com/dadamotion/laravel-mix-criticalcss#readme",
26 |   "dependencies": {
27 |     "critical-css-webpack-plugin": "^3.0.0",
28 |     "lodash": "^4.17.21"
29 |   },
30 |   "peerDependencies": {
31 |     "laravel-mix": "^4.0.0 || ^5.0.0 || ^6.0.0"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------