Automattic / Automattic/juice

xmlMode and tag literal in CSS comments

Open
#317 3 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
3.3k
Forks
233
Avg merge
1d 10h
Merged PRs (30d)
8

Description

node v10.11.0
juice v5.0.0

Attempted to reproduce on tonic / RunKit:
https://runkit.com/embed/1miy61szoz0h

CSS comments containing HTML tag literals result in mangled markup (see the `` following the style declaration) and no inlining.

````js
const juice = require('juice');

const options = {
xmlMode: true
};

const html = `



/* <div> Tag literal in comment */
div {
color: red;
}



Hello world!



`;

console.log(juice(html, options));
````

returns

````html




/* <div> Tag literal in comment */
div {
color: red;
}
</div>


Hello world!



````

Contributor guide

Open the contributing guide

Research direction

Start by running the provided juice(html, options) reproduction with xmlMode enabled and compare the malformed closing tag and missing inlining with the expected output. Trace the handling of CSS comments and style markup, then verify that tag literals in comments no longer alter the surrounding HTML and that the div rule is inlined.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.