Automattic / Automattic/juice

`juiceResources` extracts some rules from an external stylesheet and puts them in `style` tag in a generated document

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

Description

I use an external stylesheet:
```html

```
And then I have in my generated HTML-file some rules put at the top inside a `style` tag like this:
```html

.dgtl-texts-right .dgtl-link * {
text-align: right !important;
}
.dgtl-dict .dgtl-link * {
text-align: center !important;
}

```
These rules are applied and inlined correctly though.

I tried to recreate the issue with come abstract markup and styles, but even in rather complex documents this seems to work fine. Whether my code is intricate enough or styles I do not know.

Below is the actual code I have in production that produces this extra `style` tag in output https://runkit.com/embed/zf593tsbx6wj

Contributor guide

Open the contributing guide

Research direction

Start with the linked RunKit reproduction and the juiceResources entry point, then inspect how the external stylesheet is processed before the generated HTML is produced. Reproduce the unexpected style tag and compare it with the correctly inlined rules; done means the rules remain inlined without an extra style tag containing them.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.