Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
postcss-loader
Advanced tools
The postcss-loader npm package is a loader for webpack that allows you to use PostCSS to process CSS with JavaScript. It enables the use of PostCSS plugins to perform various operations on CSS files, such as autoprefixing, minification, and custom transformations.
Autoprefixing
Automatically adds vendor prefixes to CSS rules using values from Can I Use. It is useful for supporting multiple browser versions.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('autoprefixer')
]
}
}
}
]
}
]
}
};
CSS Minification
Optimizes and minifies CSS files to reduce file size and improve load times.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('cssnano')()
]
}
}
}
]
}
]
}
};
Custom Transformations
Applies custom transformations or future CSS features using PostCSS plugins.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('postcss-custom-properties')()
]
}
}
}
]
}
]
}
};
The sass-loader compiles Sass/SCSS files to CSS. It requires Node.js-style .sass/.scss files. Unlike postcss-loader, it's specifically designed for Sass pre-processing.
The less-loader processes .less files and compiles them to CSS. It's similar to postcss-loader in that it transforms styles, but it's tailored for the Less pre-processor.
This package is a webpack loader that compiles Stylus files to CSS. It's a pre-processor loader like sass-loader and less-loader, but for Stylus syntax.
PostCSS loader for webpack to postprocesses your CSS with PostCSS plugins.
Set postcss
section in webpack config:
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return [autoprefixer, cssnext];
}
}
Now your CSS files requirements will be processed by selected PostCSS plugins:
var css = require('./file.css');
// => CSS after Autoprefixer and CSSWring
Note that the context of this function
module.exports = {
...
postcss: function () {
return [autoprefixer, cssnext];
}
}
will be set to the webpack loader-context. If there is the need, this will let you access to webpack loaders API.
If you want to process different styles by different PostCSS plugins you can
define plugin packs in postcss
section and use them by ?pack=name
parameter.
module.exports = {
module: {
loaders: [
{
test: /\.docs\.css$/,
loader: "style-loader!css-loader!postcss-loader?pack=cleaner"
},
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return {
defaults: [autoprefixer, cssnext],
cleaner: [autoprefixer({ browsers: [] })]
};
}
}
When using postcss-import plugin, you may want to tell webpack about
dependencies coming from your @import
directives.
For example: in watch mode, to enable recompile on change.
Since the function in postcss section is executed with the webpack loader-context, we can use the postcss-import callback onImport to tell webpack what files need to be watched.
var cssimport = require('postcss-import');
var autoprefixer = require('autoprefixer-core');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
// The context of this function is the webpack loader-context
// see: http://webpack.github.io/docs/loaders.html#loader-context
return [
cssimport({
// see postcss-import docs to learn about onImport callback
// https://github.com/postcss/postcss-import
onImport: function (files) {
files.forEach(this.addDependency);
}.bind(this)
}),
autoprefixer
];
}
}
PostCSS can transforms styles in any syntax, not only in CSS. There are 3 parameters to control syntax:
syntax
accepts module name with parse
and stringify
function.parser
accepts module name with input parser function.stringifier
accepts module name with output stringifier function.For example, you can use Safe Parser to find and fix any CSS errors:
var css = require('postcss?parser=postcss-safe-parser!./broken')
FAQs
PostCSS loader for webpack
The npm package postcss-loader receives a total of 5,280,234 weekly downloads. As such, postcss-loader popularity was classified as popular.
We found that postcss-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers 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.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.