Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nystudio107/rollup-plugin-critical
Vite.js & Rollup plugin for generating critical CSS
https://github.com/nystudio107/rollup-plugin-critical
critical critical-css rollup rollup-plugin vite vitejs
Last synced: 1 day ago
JSON representation
Vite.js & Rollup plugin for generating critical CSS
- Host: GitHub
- URL: https://github.com/nystudio107/rollup-plugin-critical
- Owner: nystudio107
- License: mit
- Created: 2021-05-30T01:42:33.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-09-05T13:41:46.000Z (5 months ago)
- Last Synced: 2025-01-22T13:01:37.910Z (8 days ago)
- Topics: critical, critical-css, rollup, rollup-plugin, vite, vitejs
- Language: TypeScript
- Homepage:
- Size: 488 KB
- Stars: 103
- Watchers: 6
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- fucking-awesome-vite - rollup-plugin-critical - Generate critical CSS. (Plugins / Framework-agnostic Plugins)
- awesome-vite - rollup-plugin-critical - Generate critical CSS. (Plugins / Framework-agnostic Plugins)
README
[](https://scrutinizer-ci.com/g/nystudio107/rollup-plugin-critical/?branch=master)
[](https://scrutinizer-ci.com/g/nystudio107/rollup-plugin-critical/?branch=master)
[](https://scrutinizer-ci.com/g/nystudio107/rollup-plugin-critical/build-status/master)
# rollup-plugin-critical
[Vite.js](https://vitejs.dev/) & [Rollup](https://rollupjs.org/) plugin for generating critical CSS that uses the [critical](https://github.com/addyosmani/critical) generator under the hood.
## Install
```bash
npm i -D rollup-plugin-critical
```
## Usage
```js
// rollup.config.js
import PluginCritical from 'rollup-plugin-critical';
export default {
input: 'index.js',
output: {
dir: 'dist',
format: 'es',
},
plugins: [
PluginCritical({
criticalUrl: 'https://nystudio107.com/',
criticalBase: './',
criticalPages: [
{ uri: '', template: 'index' },
{ uri: 'about', template: 'about/index' },
],
criticalConfig: {
},
}),
],
}
```
## Options
### `criticalUrl: string`
The base URL to use in combination with the `criticalPages` `uri`s to determine the URLs to scrape for Critical CSS.
This can also be a file system path. This is combined with `criticalPages.uri` (see below) to determine pages to scrap for critical CSS.
Determines the `criticalConfig.src` property (see below)
### `criticalBase: string`
The base file system path to where the generated Critical CSS file should be saved.
This is combined with `criticalPages.template` (see below) with `_critical.min.css` appended to it to determine the saved critical CSS file name.
Determines the `criticalConfig.target` property (see below)
### `criticalPages: array of objects`
An array objects that contain the page `uri`s that are combined with the `criticalUrl` to determine the URLs to scrape for Critical CSS.
The resulting files are named with the `template` path, and saved to the `criticalBase` directory
### `criticalConfig: object`
This is the full [config for critical](https://github.com/addyosmani/critical#options) that is passed through to the `critical` package.
You may optionally override any properties you like here. The default values passed in are:
```ts
const defaultCriticalConfig: Partial = {
inline: false,
extract: false,
width: 1200,
height: 1200,
penthouse: {
blockJSRequests: false
}
};
```
The following [critical config properties](https://github.com/addyosmani/critical#options) are set dynamically by `rollup-plugin-critical`, but can be overridden via `criticalConfig`:
- **`css`** - set to the css files that are generated in the Rollup build
- **`base`** - property is set to `criticalBase`
- **`src`** - derived from `criticalUrl` and `criticalPages.uri`
- **`target`** - derived from `criticalPages.template` with `_critical.min.css` appended to it. If the `inline` option is set to `true`, the suffix `.html` is appended instead.
## License
[MIT](LICENSE) © [nystudio107](https://nystudio107.com)