PostCSS Custom Media runs in all Node environments, with special instructions for:
Important
PostCSS Custom Media assumes to process your complete CSS bundle.
If your build tool processes files individually or processes files in parallel the output will be incorrect.
Using @csstools/postcss-bundler
and @import
statements is one way to make sure your CSS is bundled before it is processed by this plugin.
Add PostCSS Custom Media to your project:
npm install postcss postcss-custom-media --save-dev
Use it as a PostCSS plugin:
// commonjs
const postcss = require('postcss');
const postcssCustomMedia = require('postcss-custom-media');
postcss([
postcssCustomMedia(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
// esm
import postcss from 'postcss';
import postcssCustomMedia from 'postcss-custom-media';
postcss([
postcssCustomMedia(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
Add PostCSS CLI to your project:
npm install postcss-cli postcss-custom-media --save-dev
Use PostCSS Custom Media in your postcss.config.js
configuration file:
const postcssCustomMedia = require('postcss-custom-media');
module.exports = {
plugins: [
postcssCustomMedia(/* pluginOptions */)
]
}
If your framework/CLI supports postcss-load-config
.
npm install postcss-custom-media --save-dev
package.json
:
{
"postcss": {
"plugins": {
"postcss-custom-media": {}
}
}
}
.postcssrc.json
:
{
"plugins": {
"postcss-custom-media": {}
}
}
See the README of postcss-load-config
for more usage options.
Webpack version 5
Add PostCSS Loader to your project:
npm install postcss-loader postcss-custom-media --save-dev
Use PostCSS Custom Media in your Webpack configuration:
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: { importLoaders: 1 },
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
["@csstools/postcss-bundler"],
[
"postcss-custom-media",
{
// Options
},
],
],
},
},
},
],
},
],
},
};
Read the instructions on how to customize the PostCSS configuration in Next.js
npm install postcss-custom-media --save-dev
Use PostCSS Custom Media in your postcss.config.json
file:
{
"plugins": [
"postcss-custom-media"
]
}
{
"plugins": [
[
"postcss-custom-media",
{
// Optionally add plugin options
}
]
]
}
Add Gulp PostCSS to your project:
npm install gulp-postcss postcss-custom-media --save-dev
Use PostCSS Custom Media in your Gulpfile:
const postcss = require('gulp-postcss');
const postcssCustomMedia = require('postcss-custom-media');
gulp.task('css', function () {
var plugins = [
postcssCustomMedia(/* pluginOptions */)
];
return gulp.src('./src/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('.'));
});
Add Grunt PostCSS to your project:
npm install grunt-postcss postcss-custom-media --save-dev
Use PostCSS Custom Media in your Gruntfile:
const postcssCustomMedia = require('postcss-custom-media');
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
postcssCustomMedia(/* pluginOptions */)
]
},
dist: {
src: '*.css'
}
}
});