GrooCSS - 1.0 Milestone 4 Released!

New Features and Fixes

This release includes the following new features and fixes:

Added missing Pseudo-Elements and some missing properties (caret-color, appearance, and user-select).
Pseudo-elements can be added using ** syntax.
Also updated Translator to handle pseudo-element conversion.
Added PlaceholderProcessor (copies any ::placeholder to ::-webkit-input-placeholder) and fixed a bug in processing. You must add PlaceholderProcessor to your Processors manually - it’s not there by default.
Also fixed a bug which made new extensions methods not working in custom Gradle builds.

Manual Improved

The manual for M4 has been improved with multiple sections added. Although these features have been included since version 0.12 or earlier, the documentation has been lacking up till now.

For your convenience, these sections are included below…

Transitions

Transitions are supported like any normal style property OR with a special DSL which takes a Closure (or multiple Closures).

For example:

a%hover {
    transition { all 1.s }
}

This would transition all properties that are changed for a:hover over 1 second.

If you want to supply the easing function, you can. Since command chains in Groovy require pairs to work (a method call and a value) you also need to provide the "delay" value (which can be zero). For example:

a%hover {
    transition { all 1.s ease 0 }
}

You can also supply multiple closure to support multiple transition values, eg:

a%hover {
    transition { color 1.s ease 0 } { background 2.s }
}

The correct CSS will be output.

Detached Styles

You can also create Detached styles, using the styles method, which can be added conditionally to a concrete style group.

For example, see the following simple Closure definition which defines "color #123" if alpha is zero, otherwise it yields color rgba(0,0,0,alpha) which is black with the given opacity:

def mycolor = { alpha ->
    styles {
        if (alpha == 0) color '#123'
        else color rgba(0,0,0,alpha)
    }
}

This would allow you to call this Closure later on within your GrooCSS multiple times with different results each time. For example:

table { add mycolor(0) }
div { add mycolor(0.5) }

Would yield the following CSS:

table {
    color: #123;
}
div {
    color: rgba(0, 0, 0, 0.50)
}

However, you’re not limited to one parameter or one style. For example, you could have a more complicated scenario like the following:

def boxedStyles = { foreColor, timing ->
    styles {
        transition "all $timing ease"
        color shade(foreColor, 0.1)
        background tint(foreColor, 0.9)
        boxShadow "10px 5px 5px ${shade(foreColor)}"
    }
}

This would create styles which transition to a color, background, and box-shadow based on a given color. It would allow the following GrooCSS:

div.salmon %hover {
  add boxedStyles(salmon, 1.s)
}

And it would yield the following CSS (with default Config):

div.salmon:hover {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    color: #e17366;
    background: #fef2f0;
    box-shadow: 10px 5px 5px #7d4039;
    -webkit-box-shadow: 10px 5px 5px #7d4039;
    -moz-box-shadow: 10px 5px 5px #7d4039;
}

Remember, "boxedStyles" could be called multiple times, each time with different parameters. This allows code reuse so can greatly enhance your productivity.

Code Completion

A new section was added to the manual about code completion.

Importing with Gradle

The import section has been improved.