# laravel-mix-criticalcss

> A Laravel Mix extension for Critical CSS.

Latest version **1.0.2** (published 2021-07-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install laravel-mix-criticalcss
pnpm add laravel-mix-criticalcss
yarn add laravel-mix-criticalcss
bun add laravel-mix-criticalcss
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-07-26 |
| First published | 2018-03-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 34 |
| Author | Michael Thomas |
| Maintainers | dadamotion |
| Keywords | laravel, laravel mix, mix, critical, webpack |

## Links

- npm: https://www.npmjs.com/package/laravel-mix-criticalcss
- Repository: https://github.com/dadamotion/laravel-mix-criticalcss
- Homepage: https://github.com/dadamotion/laravel-mix-criticalcss#readme
- Issues: https://github.com/dadamotion/laravel-mix-criticalcss/issues
- npm.io page: https://npm.io/package/laravel-mix-criticalcss

## Dependencies (1)

- [html-critical-webpack-plugin](https://npm.io/package/html-critical-webpack-plugin.md) ^2.1.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2021-07-26
- 2.0.0-beta — 2021-07-26
- 1.0.1 — 2019-08-26
- 1.0.0 — 2019-01-15
- 0.1.2 — 2018-03-29
- 0.1.0 — 2018-03-21

## README

<p align="center">
<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>
<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>
<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>
</p>

# Laravel Mix Critical

This extension provides instant Critical support to your Mix (v2.1 and up) builds.

## Usage

First, install the extension.

```
npm install laravel-mix-criticalcss --save-dev
```

Then, require it within your `webpack.mix.js` file, like so:

```js
let mix = require('laravel-mix');

require('laravel-mix-criticalcss');

mix
    .js('resources/assets/js/app.js', 'public/js')
    .less('resources/assets/less/app.less', 'public/css')
    .criticalCss({
        enabled: mix.inProduction(),
        paths: {
            base: 'https://url-of-where-criticalcss-is-extracted.com/',
            templates: './where-critical-css-file-needs-to-be-written/',
            suffix: '_critical.min'
        },
        urls: [
            { url: 'blog', template: 'blog' },
        ],
        options: {
            minify: true,
        },
    });

// generates `./where-critical-css-file-needs-to-be-written/blog_critical.min.css`
```

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!

## Options
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`

| Name             | Type               | Default              | Description   |
| ---------------- | ------------------ | -------------------- |-------------  |
| enabled          | `boolean`          | `mix.inProduction()` | If generating Critical CSS should be enabled |
| paths            | `object`           | `{}`                 | Takes 3 arguments `base` ( src-url ), `templates` ( folder where critical css files should be written ) and `suffix` ( filename pattern )
| urls             | `array`            | `[]`                 | An array of url objects, each with a url and template key: `{ url: 'http://example.com', template: 'index' }` |
| options          | `object`           | `{}`                 | An object of [Critical](https://github.com/addyosmani/critical#options) options |

---
_Source: https://npm.io/package/laravel-mix-criticalcss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._