MadLittleMods / MadLittleMods/postcss-css-variables

Escaped Class Names Using Vars Incorrectly Set to `undefined`

Open
#137 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Consider the following CSS:

```css
.bg-\\[url\\(https\\:\\/\\/example\\.com\\/image\\.png\\)\\] {
--un-url: url(https://example.com/image.png); background-image:var(--un-url);
}
```

The output from running the plugin is:

```css
.bg-\\[url\\(https\\:\\/\\/example\\.com\\/image\\.png\\)\\] {
background-image:undefined;
}
.bg-\\[url\\(https\\:\\/\\/example\\.com\\/image\\.png\\)\\]:\\/\\/example\\.com\\/image\\.png\\)\\]{
background-image:url(https://example.com/image.png);
}
```

The plugin seems to have an issue with escaping, or a variable directly following escaping.

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 by reproducing the reported CSS input through the PostCSS plugin and trace how escaped class names and custom-property values are parsed. Confirm the fix by ensuring the generated output keeps the complete escaped selector and emits the URL value instead of `undefined`.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.