Syntax like Sass

I hate ; in any computer language and hate CSS custom properties syntax.

But PostCSS 3 in Safe mode will support rules inside rules:

a {
  b {}
}

decls in root:

one: 1;
two: 2;

a {}

any decls without ;:

a {
  color: white
  width: 10px
}

With this features we can create Sass like syntax:

$blue: #00f
$width: 100px

a {
    color: $blue
    width: $width
    &:hover {
        width: calc($width - 10px)
    }
}

So we need two plugins:

1. postcss-nested to unpack nested rules and support & in selector.
2. postcss-simple-vars to find $\w+ decls, save they value, remove them and then find $\w+ in values and insert saved values there (postcss-calc we have already).

[MoOx]

; are required in scss, which is different from old sass syntax (indented syntax).

I think postcss should parse only valid css & should not add things like this in the parser.

For old sass like syntax, css-whitespace does the job correctly and can be used with postcss-import.

If custom prop syntax is like it is, its because some people have thinks about it for hours. Custom prop are way more powerful than simple vars. Postcss-custom-properties with full custom prop support (v1.0) is coming soon (hopefully this week) & you will see its completely different than “stupid” vars.

So -1 for this 2 things :/=

[ai]

Mixins plugin is ready too: https://github.com/postcss/postcss-mixins