postcss-combine-media-query icon indicating copy to clipboard operation
postcss-combine-media-query copied to clipboard

Published 20 hours ago • verified publisher icon SassNinja

bug(inline-css): incorrect behavior if inline CSS in HTML

Open Kristinita opened this issue 1 year ago • 0 comments

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.

Kristinita avatar Dec 14 '23 10:12 Kristinita