MadLittleMods / MadLittleMods/postcss-css-variables

Too many empty :root in output when passing variables

Open
#119 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug help wanted
Dominant language
JavaScript
Stars
551
Forks
63
PR merge metrics
No merged PRs in 30d

Description

Here is an issue:
There is a test fixture called `test/fixtures/js-defined-preserve-injected.css`
```css
.box1 {
width: var(--js-defined1);
height: var(--js-defined2);
background: var(--js-defined-no-prefix);
}
```
With an output in `test/fixtures/js-defined-preserve-injected.expected.css`
```css
:root {
}
:root {
}
:root {
}
:root {
}

.box1 {
width: 75px;
width: var(--js-defined1);
height: 80px;
height: var(--js-defined2);
background: #ff0000;
background: var(--js-defined-no-prefix);
}
```
I'd say that these duplicating `:root`s are not very useful for any purpose and must be removed from the output.

What do you think?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with test/fixtures/js-defined-preserve-injected.css and compare it with test/fixtures/js-defined-preserve-injected.expected.css. Trace the fixture through the project’s test setup and identify why empty :root blocks are emitted; done means the expected output no longer contains the duplicated empty blocks while preserving the variable replacements.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend, tooling
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.