https://github.com/pcvg/postcss-disable-critical-plugin
PostCSS plugin for disabling critical CSS extraction on dev environments
https://github.com/pcvg/postcss-disable-critical-plugin
Last synced: 4 months ago
JSON representation
PostCSS plugin for disabling critical CSS extraction on dev environments
- Host: GitHub
- URL: https://github.com/pcvg/postcss-disable-critical-plugin
- Owner: pcvg
- License: gpl-3.0
- Created: 2020-04-16T11:54:24.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-11-19T15:05:22.000Z (7 months ago)
- Last Synced: 2025-11-19T17:08:06.667Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.29 MB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Postcss disable-critical-plugin
[PostCSS] Plugin for disabling [postcss-critical-css](https://www.npmjs.com/package/postcss-critical-css) on dev environments.
[PostCSS]: https://github.com/postcss/postcss
## Install
`npm install postcss-disable-critical-plugin`
## Example
#### postcss config
```javascript
/* eslint-env node */
let plugins = {
'postcss-disable-critical-plugin': {}
};
if (process.env.NODE_ENV === 'production') {
let fs = require('fs');
let outputPath = "critical";
if (!fs.existsSync(outputPath)) {
fs.mkdirSync(outputPath, {recursive: true}, (err) => {
if (err) throw err;
});
}
plugins = {
'postcss-flexbugs-fixes': {},
'postcss-critical-css': {
outputPath: outputPath,
outputDest: "critical.css",
preserve: false
},
'postcss-csso': {},
'postcss-preset-env': {
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
}
};
}
module.exports = {
plugins: plugins
};
```
Initial code
```css
@critical common.css {
.page-title {
margin: 30px 0 28px;
font-weight: 700;
font-size: 36px;
}
/* Unnecessary comment */
@media (max-width: 767px) {
.page-title {
font-size: 26px;
line-height: 1.1;
}
}
}
```
Result:
```css
.page-title {
margin: 30px 0 28px;
font-weight: 700;
font-size: 36px;
}
@media (max-width: 767px) {
.page-title {
font-size: 26px;
line-height: 1.1;
}
}
```
## Usage
Check you project for existed PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you already use PostCSS, add the plugin to plugins list:
```diff
module.exports = {
plugins: [
+ require('postcss-disable-critical-plugin'),
require('autoprefixer')
]
}
```
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
[official docs]: https://github.com/postcss/postcss#usage
## License
This project is licensed under [GPL-3.0](https://raw.githubusercontent.com/pcvg/postcss-disable-critical-plugin/master/LICENSE).