Registry /
devops / group-css-media-queries-loader
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–223 runs
build_error
glibcnode 18–223 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
GroupCssMediaQueriesLoader
✓ module.exports = { module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader', 'group-css-media-queries-loader'] } ] } }
✗ const GroupCssMediaQueriesLoader = require('group-css-media-queries-loader'); module.exports.rules.push({ test: /\.css$/, loader: GroupCssMediaQueriesLoader })
Loader is used via string reference in webpack config, not imported. Using require() directly as a loader function may cause issues.
sourceMap option
✓ module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'group-css-media-queries-loader', options: { sourceMap: true } } ] } ] } }
✗ module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'group-css-media-queries-loader?sourceMap=true' ] } ] } }
Options should be passed as object configuration, not query string. Query string format may not work reliably with webpack 4+.
Using with other PostCSS plugins
✓ module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'group-css-media-queries-loader', 'postcss-loader' ] } ] } }
✗ module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', 'group-css-media-queries-loader' ] } ] } }
Loader order matters: group-css-media-queries-loader should come after postcss-loader if postcss modifies media queries, or before to avoid conflicts.
Webpack configuration using group-css-media-queries-loader to merge identical media queries from CSS files.
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'group-css-media-queries-loader'
]
}
]
}
};
// src/index.js
import './style.css';
// src/style.css
@media (max-width: 600px) { .a { color: red; } }
@media (max-width: 600px) { .b { color: blue; } }
// Output: single @media (max-width: 600px) { .a { color: red; } .b { color: blue; } }
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'group-css-media-queries-loader'
The loader is not installed or the package name is misspelled.
fixRun 'yarn add -D group-css-media-queries-loader' or 'npm install --save-dev group-css-media-queries-loader'.
ValidationError: Invalid options object. group-css-media-queries-loader has been initialized using an options object that does not match the schema.
Options were passed as query string or invalid object format.
fixUse the object format: { loader: 'group-css-media-queries-loader', options: { ... } }. Error: PostCSS plugin group-css-media-queries requires PostCSS 8.
Installed postcss version is below 8.1.0, but loader requires PostCSS 8+.
fixUpdate postcss to version >=8.1.0: 'npm install postcss@latest'.
Audit
Dependencies
loader-utilsoptionalUsed for handling loader options and context in webpack.
postcssrequiredRequired peer dependency for CSS transformations (>=8.1.0).
webpackrequiredRequired peer dependency for loader integration (>=2.0.0).