Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/igitscor/critical-webpack-plugin
Webpack wrapper for critical css extraction
https://github.com/igitscor/critical-webpack-plugin
critical-css firstpr-friendly webpack
Last synced: about 2 months ago
JSON representation
Webpack wrapper for critical css extraction
- Host: GitHub
- URL: https://github.com/igitscor/critical-webpack-plugin
- Owner: iGitScor
- License: mit
- Created: 2017-02-28T12:21:36.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-02T08:13:53.000Z (over 7 years ago)
- Last Synced: 2024-11-04T04:21:07.253Z (2 months ago)
- Topics: critical-css, firstpr-friendly, webpack
- Language: JavaScript
- Size: 71.3 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Critical css Webpack plugin
[![Build Status][build-badge]][build]
[![codecov][codecoverage-badge]][codecoverage]
![Node dependency][node-badge]
[![Dependencies][dependencyci-badge]][dependencyci]
[![dependencies Status][dependencies-badge]][dependencies]
[![devDependencies Status][devDependencies-badge]][devDependencies]
[![MIT License][license-badge]][LICENSE]
> Webpack wrapper for critical css generation
Extract critical css from html file, html input or remote URL to load CSS above the fold.
## Installing
```shell
npm i critical-webpack-plugin
```
### Getting started in webpack
**Require `critical-webpack-plugin`**
```javascript
var CriticalWebpackPlugin = require('critical-webpack-plugin')
```
Add the plugin to your plugin list
```javascript
var config = {
plugins: [
new CriticalWebpackPlugin({
base: 'test',
src: 'index.html',
dest: '../build/main.css',
css: ['node_modules/normalize.css/normalize.css'],
width: 480,
height: 800,
})
]
}
```
### Configuration
See [critical package](https://www.npmjs.com/package/critical) for options and [webpack configuration files](workflow_test) to see implementation.
#### Fetch content
This plugin allows to fetch remotely the content of a web page.
Example:
```javascript
const options = {
src: 'http://iscor.me',
dest: '../build/main.css',
css: ['node_modules/normalize.css/normalize.css'],
width: 480,
height: 800,
};
```
**As this plugin is a wrapper, the critical library seems to not accept well a remote url, but the process is done normally.**
## Developing
```shell
git clone https://github.com/{your fork}/critical-webpack-plugin.git
cd critical-webpack-plugin/
npm install
```
Replace `{your fork}` by your github username.
## Contributing
If you'd like to contribute, please fork the repository and use a feature
branch. All contributions are welcome. Please make a pull request and make sure things still pass after running `npm test`.
Ensure you've read the [contribution guidelines](CONTRIBUTING.md) for more information and respect the [code of conduct](CODE_OF_CONDUCT.md)
### Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
| [
Sebastien Correaud](http://twitter.com/iTweetScor)
🚇 [💻](https://github.com/iGitScor/critical-webpack-plugin/commits?author=iGitScor) [📖](https://github.com/iGitScor/critical-webpack-plugin/commits?author=iGitScor) [⚠️](https://github.com/iGitScor/critical-webpack-plugin/commits?author=iGitScor) |
| :---: |
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
## Licensing
The code in this project is licensed under MIT license.
[build-badge]: https://img.shields.io/travis/iGitScor/critical-webpack-plugin.svg?style=flat-square
[build]: https://travis-ci.org/iGitScor/critical-webpack-plugin
[codecoverage-badge]: https://codecov.io/gh/iGitScor/critical-webpack-plugin/branch/master/graph/badge.svg?style=flat-square
[codecoverage]: https://codecov.io/gh/iGitScor/critical-webpack-plugin
[dependencyci-badge]: https://dependencyci.com/github/iGitScor/critical-webpack-plugin/badge?style=flat-square
[dependencyci]: https://dependencyci.com/github/iGitScor/critical-webpack-plugin
[dependencies-badge]: https://david-dm.org/iGitScor/critical-webpack-plugin/status.svg?style=flat-square
[dependencies]: https://david-dm.org/iGitScor/critical-webpack-plugin
[devDependencies-badge]: https://david-dm.org/iGitScor/critical-webpack-plugin/dev-status.svg?style=flat-square
[devDependencies]: https://david-dm.org/iGitScor/critical-webpack-plugin?type=dev
[node-badge]: https://img.shields.io/node/v/critical-webpack-plugin.svg?style=flat-square
[license-badge]: https://img.shields.io/npm/l/critical-webpack-plugin.svg?style=flat-square
[license]: https://github.com/iGitScor/critical-webpack-plugin/blob/master/LICENSE