{"id":21402,"library":"group-css-media-queries-loader","title":"Group CSS Media Queries Loader","description":"Webpack loader wrapping group-css-media-queries (v4.3.0) to combine identical @media queries from CSS files into a single block. Supports PostCSS 8+ and Webpack 2+. Unlike other media query merging tools, this loader integrates directly into webpack's build pipeline via standard rule configuration. Ships TypeScript definitions. Maintained with quarterly releases, used for optimizing CSS output size and performance.","status":"active","version":"4.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/retyui/group-css-media-queries-loader","tags":["javascript","typescript"],"install":[{"cmd":"npm install group-css-media-queries-loader","lang":"bash","label":"npm"},{"cmd":"yarn add group-css-media-queries-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add group-css-media-queries-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for handling loader options and context in webpack.","package":"loader-utils","optional":true},{"reason":"Required peer dependency for CSS transformations (>=8.1.0).","package":"postcss","optional":false},{"reason":"Required peer dependency for loader integration (>=2.0.0).","package":"webpack","optional":false}],"imports":[{"note":"Loader is used via string reference in webpack config, not imported. Using require() directly as a loader function may cause issues.","wrong":"const GroupCssMediaQueriesLoader = require('group-css-media-queries-loader'); module.exports.rules.push({ test: /\\.css$/, loader: GroupCssMediaQueriesLoader })","symbol":"GroupCssMediaQueriesLoader","correct":"module.exports = { module: { rules: [ { test: /\\.css$/, use: ['style-loader', 'css-loader', 'group-css-media-queries-loader'] } ] } }"},{"note":"Options should be passed as object configuration, not query string. Query string format may not work reliably with webpack 4+.","wrong":"module.exports = { module: { rules: [ { test: /\\.css$/, use: [ 'style-loader', 'css-loader', 'group-css-media-queries-loader?sourceMap=true' ] } ] } }","symbol":"sourceMap option","correct":"module.exports = { module: { rules: [ { test: /\\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'group-css-media-queries-loader', options: { sourceMap: true } } ] } ] } }"},{"note":"Loader order matters: group-css-media-queries-loader should come after postcss-loader if postcss modifies media queries, or before to avoid conflicts.","wrong":"module.exports = { module: { rules: [ { test: /\\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', 'group-css-media-queries-loader' ] } ] } }","symbol":"Using with other PostCSS plugins","correct":"module.exports = { module: { rules: [ { test: /\\.css$/, use: [ 'style-loader', 'css-loader', 'group-css-media-queries-loader', 'postcss-loader' ] } ] } }"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'style-loader',\n          'css-loader',\n          'group-css-media-queries-loader'\n        ]\n      }\n    ]\n  }\n};\n\n// src/index.js\nimport './style.css';\n\n// src/style.css\n@media (max-width: 600px) { .a { color: red; } }\n@media (max-width: 600px) { .b { color: blue; } }\n// Output: single @media (max-width: 600px) { .a { color: red; } .b { color: blue; } }","lang":"javascript","description":"Webpack configuration using group-css-media-queries-loader to merge identical media queries from CSS files."},"warnings":[{"fix":"Upgrade postcss to version 8.1.0 or later.","message":"In v4.x, the loader now requires postcss >=8.1.0 as a peer dependency. Older versions of PostCSS are no longer compatible.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Use object configuration format: { loader: 'group-css-media-queries-loader', options: { sourceMap: true } }.","message":"The 'sourceMap' option defaults to the value of 'compiler.devtool'. Using query string syntax for options (e.g., '?sourceMap=true') is deprecated in webpack 4+.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Place group-css-media-queries-loader after style-loader and css-loader, but before postcss-loader if postcss does not merge media queries.","message":"Loader order matters: if used after postcss-loader, postcss-loader may have already combined media queries, causing the loader to have no effect.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Ensure css-loader is in the rule before group-css-media-queries-loader.","message":"The loader only works on CSS files processed by css-loader. It will not work on non-CSS files or when used without css-loader.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'yarn add -D group-css-media-queries-loader' or 'npm install --save-dev group-css-media-queries-loader'.","cause":"The loader is not installed or the package name is misspelled.","error":"Module not found: Error: Can't resolve 'group-css-media-queries-loader'"},{"fix":"Use the object format: { loader: 'group-css-media-queries-loader', options: { ... } }.","cause":"Options were passed as query string or invalid object format.","error":"ValidationError: Invalid options object. group-css-media-queries-loader has been initialized using an options object that does not match the schema."},{"fix":"Update postcss to version >=8.1.0: 'npm install postcss@latest'.","cause":"Installed postcss version is below 8.1.0, but loader requires PostCSS 8+.","error":"Error: PostCSS plugin group-css-media-queries requires PostCSS 8."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}