GrooCSS

The ability to provide custom Processors and validators, the inclusion of a DefaultValidator and optional validator (RequireMeasurements), and the ability to use 10.percent or 10%_ to create percent measurements were all added in this version.

This release includes the Processor interface which allows anyone to implement a custom Processor which can modify or validate any part of the CSS model. The docs provide an example of how you might do this. Custom Processors can be added through the Config object.

So it’s been over a year since my last post. Sorry. I could list excuses but mainly let’s just say I’m doing this in my “free” time.

Let’s check on how we did with the items from the last blog post:

Asset pipeline integration… Check!

Continuous builds... Check!

More animation support… Check!

These have been done since 0.12.  The Gradle plugin extends the Copy task so it reuses much of the functionality including continuous builds with the -t option! We’ve also got better support for animation and transitions. Also, there’s the asset-pipeline plugin.

For 1.0-M1, GrooCSS now uses groovy extension modules to enhance code completion. Up till now, some features were not available for code completion since they used the metaClass meta-programming technique, such as the 1.px (number.type) syntax for measurements.

In case you missed it, 0.9 and 0.10 have been released. 0.10.1 was necessary to fix a small part of the gradle plugin.

0.9 included tons of color functions and enhancements to the Color object:

Added mix, tint, shade, and greyscale methods.

Added saturate, desaturate, fadein, fadeout, fade, and hue, saturation and brightness methods.

Added many colors methods: rgba, hsl, hsla, lighten, darken, etc.

0.10 included vast improvements to the ability to use a more natural css-like syntax for selectors:

Added option (convertUnderline) to convert all underlines in style-classes to dashes.

Added ability to use three or more element selectors without xor.

Added ability to configure to use some element names as style-classes just in case you need “main” for example to be used as a style-class.

Added ability to use 0x numbers as colors (color 0xabcdef for example)

Other small fixes.

More to come soon..

Asset pipeline integration...

Continuous builds...

GrooCSS 0.7 has been available for a few days. A few bug fixes in both the core and the gradle-plugin have been included in 0.7.2. New in this release:

Better pseudo-class support with %

Measurements are now fully supported including math between different compatible types.

Added Gradle Plugin

Some measurement values are validated (for example, passing 10.deg to maxWidth will throw an AssertionError).

Pseudo-classes example:

input % hover { color blue } li % nthChild('3n') { color blue }

Produces:

input:hover { color: Blue; } li:nth-child(3n) { color: Blue; }

The main website has also been moved to github hosting! Check it out: http://www.groocss.org/

New in this version:

Closer to CSS syntax using getAt, putAt, operator-overloading, underscore, methodMissing, and propertyMissing

Translator to convert from existing CSS

Available pretty print (using Config)

To use in Gradle:

import org.groocss.GrooCSS 

buildscript { repositories { jcenter() }

dependencies { classpath 'org.groocss:groocss:0.6.2' }}

To use prettyPrint:

GrooCSS.withConfig { prettyPrint() }.convert(inf, outf)

New in 0.5

(use 0.5.1)

Support for transforms directly (transformX, etc),

Support for @media,

Math functions (sqrt, sin, cos, toRadians, etc.)

Element names (div, a, input, span, etc.)

Unit methods (unit, getUnit, convert, etc.)

Ability to extend style-groups and add internal

Pseudo-classes in DSL (nthChild, etc.)

New ways to configure: Config.builder() or using withConfig

See the github repo for more info.

Coming soon in 0.6

Mimic CSS syntax using underscore, methodMissing, and propertyMissing

Translator to convert from existing CSS

Tons of new features in 0.4. GrooCSS now includes:

Keyframes support!

Automatically adds -webkit, -ms, -moz, -o extensions! (configurable)

Color support with rgb, rgba, hex, and named colors

Font-face support

Minimization: using new Config(compress: true)

charset support

Coming in 0.5

Support for transforms directly (transformX, etc), 

Support for @media, 

math functions, 

element names (div, a, input, etc.), 

More methods (unit, getUnit, convert, etc.), 

Here’s how to use GrooCSS with a simple Gradle build file:

Now with Color and automatic extensions support!

Extensions

It now automatically adds clones for -webkit- etc. to @keyframes, transitions, transforms, animations, and flex.  This behavior can be overridden by passing in a Config object.

Adding keyframes now produces a @-webkit-keyframes as well.

For example, if you provide keyframes('bounce') you automatically get:

@keyframes bounce{ /*content*/ } @-webkit-keyframes bounce{ /*same content*/ }

Config

Just pass in a Config object to override the defaults:

GrooCSS.process(new Config(addWebkit: false, addMoz: false, addOpera: false))

Color

You can now create a Color object which has darker, brighter, and alpha(double) methods. For example:

Convert files

import org.groocss.GrooCSS GrooCSS.convert('infile.groocss', 'outfile.css')

Plain old Groovy

import org.groocss.GrooCSS def css = GrooCSS.process {    sg('.class') { borderColor '#123456' } } new File('out.css').text = "$css"

Styles DSL

def myColor = '#fe33ac' sg('.box') {  color myColor  borderColor '#fdcdea' } sg('.box div') {  boxShadow '0 0 5px rgba(0, 0, 0, 0.3)' } sg('table') {    color myColor }

Keyframes DSL

def css = GrooCSS.process {    keyframes('bounce') {        frame(40) {            transform 'translateY(-30px)'        }        frame(60) {            transform 'translateY(-15px)'        }        frame([0,20,50,80,100]) {            transform 'translateY(0)'        }    } }

Produces:

The missing piece for full-stack Groovy. Like Less but without inventing a new language.

Write compile-time checked CSS in Groovy

Use a natural Groovy DSL for CSS with code completion if your IDE supports it

keyframes support!