postcss / sugarss

Indent-based CSS syntax for PostCSS
MIT License
707 stars 39 forks source link

Custom selectors and vars syntax producing wrong output #5

Closed pvalentim closed 8 years ago

pvalentim commented 8 years ago

Seems that the : of the custom selectors and :rootdeclaration is breaking something. Notice the {} at the end of the color declarations

// Input:
@custom-selector :--heading h1, h2
@custom-selector :--any-link :link, :visited

a:--any-link
  color: blue

article :--heading
  color: #000

// Output:
@custom-selector :--heading h1, h2;
@custom-selector :--any-link :link, :visited;

a:--any-link {
  color: blue {}
}

article :--heading {
  color: #000
}

css4 custom properties:

// Input:
:root
  --red: #F00

body
  color: var(--red)

:root
  --red: #0F0

// Output:
:root {
  --red: #F00
}

body {
  color: var(--red) {}
}

:root {
  --red: #0F0
}

The problem here seems to be the double :root, although when using custom selectors and custom properties mixed, the same problem occurs even without the 2 :root declarations. I've turned all plugins off when testing this btw.

ai commented 8 years ago

Oops, I forgot about pseudoclasses :)

Fixed 8916552

ai commented 8 years ago

I also clear rule and declaration separation in docs: 47dad04

ai commented 8 years ago

Fix was released in 0.1