Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Incorrect format in css when selector attribute value is a URL

See original GitHub issue

Prettier 2.0.1

Playground link

# Options (if any):
--single-quote

Input:

a[href="http://example.com"] { display: none }

Output (v2.0.1):

a[href="http://example.com"]
{
  display: none;
}

Output (v1.19.1):

a[href="http://example.com"] {
  display: none;
}

Expected behavior:

The double quotes should have been changed to single quotes and the opening brace should have been left in the same line as the selector.

In v1.19.1 the bug with the quotes was present but the bug with the opening brace is new in v2.0.1.

Expected output:

a[href='http://example.com'] {
  display: none;
}

Issue Analytics

State:
Created 3 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

2reactions

thorn0commented, Mar 23, 2020

A minimal repro:

Prettier 2.0.1 Playground link

--parser css

Input:

a[x="//"] {  }

Output:

a[x="//"]
{
}

0reactions

fiskercommented, Mar 24, 2020

Right, I think both need fix.

FYI: selector-unknown one was there before #6981 , maybe for a long time, I just change .mactch to .test https://github.com/prettier/prettier/commit/acff41e7c98c087870e945f31a7358f502fcd4b8#diff-29bcb0b461c4ae51930e975e53edfdd9L202

Top Results From Across the Web

Attribute selectors - CSS: Cascading Style Sheets | MDN

The CSS attribute selector matches elements based on the presence or value of a given attribute.

[attribute] | CSS-Tricks

Here we select the link with the exact href value "https://www.css-tricks.com", and change its color and font size. Notice that the link to...

How can CSS attribute selectors be used for web scraping?

A practical guide to using CSS selectors, including the attribute selector, for browser automation.

CSS Attribute Selector - W3Schools

CSS Attribute Selectors ... Style HTML Elements With Specific Attributes ... The [attribute="value"] selector is used to select elements with a specified ...

Escaping double quotes in CSS selector - Stack Overflow

The issue is not just in your selector string but also in your markup. The quotes in the url() value are interfering with...