postcss/sugarss

Nested properties

nicolasparada opened this issue · 12 comments

nicolasparada commented

In Sass you have nested properties so you can write:

body
  font:
    family: sans-serif
    size: 16px
    weight: 300

and get:

body {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 300;
}

I miss this on sugarss.

ai commented

Short answer: https://github.com/jedmao/postcss-nested-props

Full answer: SugarSS is just a alternate way to write a CSS. All features like nested rules or nested properties should be implemented in plugins. So we will have all benefits of modularity.

nicolasparada commented

Nice. Thank for you help @ai :)

nicolasparada commented

I'm having other problem. After I added postcss-nested-props, it only parses some nested properties. I mean:

body
  font:
    family: sans-serif
    size: 16px
    weight: 300

becomes:

body {
  font-family: sans-serif;
  font-size: 16px;
  weight: 300;
}
ai commented

Could you disable this plugin and show me input/ouput?

ai commented

But I will look tomorrow. Nite it is time to sleep 🙈

nicolasparada commented

Following the same example. it turns into:

body {
  font {
    family: sans-serif;
    size: 16px;
    weight: 300 {}
  }
}
nicolasparada commented

Another case:

.test
  font:
    family: sans-serif
    size: 16px
    weight: 300
  margin:
    top: 0
    right: 0
    bottom: 0
    left: 0

Fails on font-weight.

.test
  margin:
    top: 0
    right: 0
    bottom: 0
    left: 0
  font:
    family: sans-serif
    size: 16px
    weight: 300

Fails on margin-left.

ai commented

Sorry, I miss what example fails. Could you find minimum file example to reproduce issue and show me input and output.

ai commented

Fixed 4e4aca1

ai commented

Also ee97d55

ai commented

Released in 0.1.4

  • 🎉1
nicolasparada commented

Thanks @ai good work ;)
All working fine now.