sassninja / postcss-combine-media-query Goto Github PK

Below is the styles task from my gulpfile.js. My project has multiple css files which gets outputted in the assets folder. When the task is executed, I don't know why this plugin merges all the media queries from each file and outputs it to each file.

const postcss = require("gulp-postcss");
const postcssPresetEnv = require("postcss-preset-env");
const cssnano = require("cssnano");
const purgecss = require("gulp-purgecss");
const purgecssWordpress = require('purgecss-with-wordpress');
const postcssNormalize = require("postcss-normalize");
const atImport = require("postcss-easy-import");
const combineMediaQueries = require("postcss-combine-media-query");

function styles() {
  const sourcemaps = require("gulp-sourcemaps");

  const postcssProcessors = [
    atImport({
      root: "./src/css",
      path: "./src/css"
    }),
    postcssNormalize({ browsers: ["defaults", "IE >= 10"] }),
    require("postcss-nested")(),
    postcssPresetEnv({
      stage: 0,
      preserve: false,
      browsers: ["defaults", "IE >= 10"],
      autoprefixer: isProduction,
      features: { "nesting-rules": false },
      fontFace: true,
    }),
    combineMediaQueries()
  ];

  if (isProduction) {
    postcssProcessors.push(
      cssnano(),
    );
  }

  return src([
    "src/css/**/!(_)*.css", // select all css files
    "!src/css/**/_*/", // exclude all folder starting with _
    "!src/css/**/_*/**/*" //exclude files/subfolders in folders starting with '_'
  ])
    .pipe(gulpIf(!isProduction, sourcemaps.init()))
    .pipe(
      postcss(postcssProcessors, {
        parser: require("postcss-comment") // To handle inline comments
      })
    )
    .pipe(gulpIf(!isProduction, sourcemaps.write(".")))
    .pipe(dest("assets/css"))
    .pipe(gulpIf(!isProduction, browserSync.stream()));
}

I am using postcss 8.2.2. But not combining same media queries from different files. I am using with webpack and using mini-css-extract-plugin with import.

webpack.config.js

{
    test: /\.(sa|sc|c)ss$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                sourceMap: true,
            },
        },
        'resolve-url-loader',
        {
            loader: 'sass-loader',
            options: {
                implementation: sass,
            },
        },
        {
            loader: 'sass-resources-loader',
            options: {
                resources: ['./src/scss/_variables.scss'],
            },
        },
    ],
},

postcss.config.js

module.exports = {
    plugins: [require('postcss-combine-media-query'), require('autoprefixer')],
};

Autoprefixer working good.

The postcss package has a security vulnerability (CVE-2021-23368) on major version 7. It would be interesting if the package is updated to its latest version.

postcss  7.0.0 - 8.2.9
Severity: moderate
Regular Expression Denial of Service - https://npmjs.com/advisories/1693

I think the breaking changes for v8 will not cause any problems.

So I am a pretty big noob but cant seem to get this working

module.exports = { plugins: [ require('postcss-combine-media-query'), ] }

currently this is my only thing in postcss.config.js because I define the autoprefixer options in package.json. Could this be conflicting since I define plugins there too?

		"plugins": {
			"autoprefixer": {
				"grid": "autoplace",
				"overrideBrowserslist": [
					"> 1%",
					"last 2 versions",
					"ie >= 11"
				]
			}

Thx for the plugin!

I have a boilerplate project with Gulp 4 wich watches the input.css and runs all of postcss plugins one by one.

Example input:

.foo {
  color: red;

  @media (min-width: 375px) {
    color: blue;
  }
}

Output's correct:

.test {
  color: red;
}

@media (min-width: 375px) {
  color: blue;
}

But if I remove @media from my code

Input 2:

.foo {
  color: red;
}

Output's still the same:

.test {
  color: red;
}

@media (min-width: 375px) {
  color: blue;
}

If I stop my Gulp 4 task (watch) and re-run task again - all seems Ok, but until I write/delete some media queries.

1. Summary

postcss-combine-media-query makes the HTML files invalid if they contain inline CSS.

2. MCVE

You can see this configuration in the KiraPostCSSCombineInlineCSS branch of my demo repository. Travis CI build of the configuration.

2.1. Files

1. KiraExpected.html:

   <!DOCTYPE html>
   <html lang="en">
   <head>
   	<meta charset="UTF-8">
   	<meta name="viewport" content="width=device-width, initial-scale=1.0">
   	<title>Kira no inline CSS in HTML</title>
   	<style>
   		@media (min-width: 1024px) {
   	    	.KiraFirstClass { color: green; }
   		}
   		@media (min-width: 1024px) {
   	    	.KiraSecondClass { font-size: 2rem; }
   		}
   	</style>
   </head>
   <body>
   	<p>Kira Goddess!</p>
   </body>
   </html>

2. One change in the KiraBug.html file — inline CSS has been added:

   <!DOCTYPE html>
   <html lang="en">
   <head>
   	<meta charset="UTF-8">
   	<meta name="viewport" content="width=device-width, initial-scale=1.0">
   	<title>Kira inline CSS in HTML</title>
   	<style>
   		@media (min-width: 1024px) {
   		    .KiraFirstClass { color: green; }
   		}
   		@media (min-width: 1024px) {
   		    .KiraSecondClass { font-size: 2rem; }
   		}
   	</style>
   </head>
   <body>
   	<p style="width:20.00%">Kira Goddess!</p>
   </body>
   </html>

   - <p>Kira Goddess!</p>
   + <p style="width:20.00%">Kira Goddess!</p>
   

3. Gruntfile.coffee:

   module.exports = (grunt) ->
   
   	grunt.loadNpmTasks("@lodder/grunt-postcss")
   
   	grunt.initConfig
   
   		postcss:
   
   			fixinlinecssinhtml:
   				options:
   					failOnError: true
   					processors: [
   						require('postcss-combine-media-query')
   					]
   
   					syntax: require('postcss-html')
   
   				files: [
   					expand: true
   					cwd: "KiraInput"
   					src: ['*.html']
   					dest: "KiraOutput"
   					]
   

2.2. Steps to reproduce

See .travis.yml:

- grunt postcss --verbose --stack
- cat KiraOutput/KiraExpected.html
- cat KiraOutput/KiraBug.html

3. Behavior

3.1. Expected

KiraExpected.html built as expected:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Kira no inline CSS in HTML</title>
	<style>
@media (min-width: 1024px) {
		    .KiraFirstClass { color: green; }
		    .KiraSecondClass { font-size: 2rem; } }
	</style>
</head>
<body>
	<p>Kira Goddess!</p>
</body>
</html>

3.2. Bug

KiraBug.html transformed to the invalid HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Kira inline CSS in HTML</title>
	<style>

	</style>
</head>
<body>
	<p style="width:20.00%;
@media (min-width: 1024px) {
		    .KiraFirstClass { color: green; }
		    .KiraSecondClass { font-size: 2rem; } }">Kira Goddess!</p>
</body>
</html>

4. Inline CSS usage

I understand that using inline CSS isn’t the best practice, and I try not to use it. But users of the “Progressbar” Python Markdown extension are forced to use inline CSS — see my discussion with the extension developer.

5. Environment

1. Operating system:

   1. Local — Microsoft Windows [Version 10.0.22621.2134]
   2. Travis CI — Ubuntu 22.04.3 LTS Jammy Jellyfish

2. Node.js 21.4.0

3. grunt-cli v1.4.3

4. devDependencies from my package.json:

   {
   	"devDependencies": {
   		"@lodder/grunt-postcss": "^3.1.1",
   		"coffeescript": "^2.7.0",
   		"grunt": "^1.5.3",
   		"postcss": "^8.4.32",
   		"postcss-combine-media-query": "^1.0.1",
   		"postcss-html": "^1.5.0"
   	}
   }
   

Thanks.