Research
Security News
Kill Switch Hidden in npm Packages Typosquatting Chalk and Chokidar
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
grunt-postcss
Advanced tools
Apply several post-processors to your CSS using PostCSS.
This plugin requires Grunt ~0.4.0
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-postcss --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-postcss');
$ npm install grunt-postcss pixrem autoprefixer cssnano
grunt.initConfig({
postcss: {
options: {
map: true, // inline sourcemaps
// or
map: {
inline: false, // save all sourcemaps as separate files...
annotation: 'dist/css/maps/' // ...to the specified directory
},
processors: [
require('pixrem')(), // add fallbacks for rem units
require('autoprefixer')({browsers: 'last 2 versions'}), // add vendor prefixes
require('cssnano')() // minify the result
]
},
dist: {
src: 'css/*.css'
}
}
});
require('postcss-plugin')({option: value})
Type: Array|Function
Default value: []
An array of PostCSS compatible post-processors. You can also use a function that returns an array of PostCSS post-processors.
Type: Boolean|Object
Default value: false
If the map
option isn't defined or is set to false
, PostCSS won't create or update sourcemaps.
If true
is specified, PostCSS will try to locate a sourcemap from a previous compilation step using an annotation comment (e.g. from Sass) and create a new sourcemap based on the found one (or just create a new inlined sourcemap). The created sourcemap can be either a separate file or an inlined map depending on what the previous sourcemap was.
You can gain more control over sourcemap generation by assigning an object to the map
option:
prev
(string or false
): a path to a directory where a previous sourcemap is (e.g. path/
). By default, PostCSS will try to find a previous sourcemap using a path from the annotation comment (or using the annotation comment itself if the map is inlined). You can also set this option to false
to delete the previous sourcemap.inline
(boolean): whether a sourcemap will be inlined or not. By default, it will be the same as a previous sourcemap or inlined.annotation
(boolean or string): by default, PostCSS will always add annotation comments with a path to a sourcemap file unless it is inlined or the input CSS does not have an annotation comment. PostCSS presumes that you want to save sourcemaps next to your output CSS files, but you can override this behavior and set a path to a directory as a string value for the option.sourcesContent
(boolean): whether original file contents (e.g. Sass sources) will be included to a sourcemap. By default, it's true
unless a sourcemap from a previous compilation step has the original contents missing.Type: Boolean|String
Default value: false
Set it to true
if you want to get a patch file:
options: {
diff: true // or 'custom/path/to/file.css.patch'
}
You can also specify a path where you want the file to be saved.
Type: Boolean
Default value: false
Set it to true
if you want grunt to exit with an error on detecting a warning or error.
Type: Boolean
Default value: true
Set it to false
if you do not want the destination files to be written. This does not affect the processing of the map
and diff
options.
Options to control PostCSS custom syntaxes.
options: {
parser: require('postcss-safe-parser') // instead of a removed `safe` option
}
options: {
syntax: require('postcss-scss') // work with SCSS directly
}
Unlike the traditional approach with separate plugins, grunt-postcss allows you to parse and save CSS only once applying all post-processors in memory and thus reducing your build time. PostCSS is also a simple tool for writing your own CSS post-processors.
Autoprefixer is a PostCSS plugin, so first replace grunt-autoprefixer
with grunt-postcss
and autoprefixer
plugin.
$ npm remove --save-dev grunt-autoprefixer
$ npm install --save-dev grunt-postcss autoprefixer
Assuming you have a config like this:
autoprefixer: {
options: {
map: true,
browsers: ['last 1 version']
},
dist: {
src: '...'
}
}
Replace it with:
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')({browsers: ['last 1 version']})
]
},
dist: {
src: '...'
}
}
browsers
, cascade
and remove
options are plugin-specific, so we pass them as an argument while require the plugin.
FAQs
Apply several post-processors to your CSS using PostCSS
The npm package grunt-postcss receives a total of 18,752 weekly downloads. As such, grunt-postcss popularity was classified as popular.
We found that grunt-postcss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.