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

Kristinita · 2023-12-14T10:09:07Z

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

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>

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>

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

Operating system:
1. Local — Microsoft Windows [Version 10.0.22621.2134]
2. Travis CI — Ubuntu 22.04.3 LTS Jammy Jellyfish
Node.js 21.4.0
grunt-cli v1.4.3

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.

The text was updated successfully, but these errors were encountered:

Kristinita mentioned this issue Dec 14, 2023

[progressbar] Use HTML5 <progress> facelessuser/pymdown-extensions#926

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Kristinita commented Dec 14, 2023 •

edited

Loading

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

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

Comments

Kristinita commented Dec 14, 2023 • edited Loading

1. Summary

2. MCVE

2.1. Files

2.2. Steps to reproduce

3. Behavior

3.1. Expected

3.2. Bug

4. Inline CSS usage

5. Environment

Kristinita commented Dec 14, 2023 •

edited

Loading