GrooCSS

This example uses Groovy’s @Grab annotation to import GrooCSS. Create a file named "makeCss.groovy" with the following code:

Although not recommended, this code would create CSS from the given DSL. Invoke "groovy makeCss.groovy" at the command line to run it. It would output in "main.css" the following:

I recommend you use GrooCSS with either the Gradle plugin or asset-pipeline, but it can be used by itself.

Or using "convert" methods:

There are several different ways to configure GrooCSS:

Of these options, the third is most recommended. With the DSL there are several chainable methods available to easily configure your CSS:

You can also use a Properties file to define Config. For example create a file named "groocss.properties" with the following content (true/TRUE/yes/t are all considered true):

Anything that starts with "variable." will use the rest of the key ("baseUrl" above) as the name of variable and set the given value to it. See more about variables here.

It allows the property "processorClasses" to be a list of class-names separated by commas for Processors to use and "styleClasses" can be a comma separated list of styleClasses.

Or with the Gradle plugin you can use propertiesFile = file("groocss.properties") within the task definition. Compressing (Minimization)

To "compress" the output (no new-lines), just pass in a Config object:

Use the "c", "clr", "rgb" or "rgba" methods to create a color. For example:

See the javadoc for all available methods.

You can also use named colors:

Produces:

Nesting allows you to define modifications to a style (such as pseudo-classes additions to a selector) within the same block. For example:

Produces:

Pseudo elements are things like ::before, ::after, ::first-line, etc.

They can be added using the ** syntax. Eg:

CSS Pseudo-classes such as :hover, :active, :nth-child, etc.

Produces:

There are also shorthands like 'odd' and 'even':

Produces:

GrooCSS includes support for @Keyframes, Transitions, and transforms (like translateX). Keyframes

You create keyframes in GrooCSS using the keyframes(selector, Closure) method (there’s also a "kf" alias).

Produces:

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

For example:

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:

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

The correct CSS will be output.

For example, to read a file named "other.css.groovy" on the classpath (under /groocss/) do the following:

importStream(getClass().getResourceAsStream("/groocss/other.css.groovy"), linkColor: '#456789', backColor: 'black')

However, you might not always know what directory to look in for files. If you want to import files using the classpath method, you should follow some additional steps (for a multi-module Gradle build):

Then create a Groovy script for converting those files to GrooCSS using org.groocss.Translator:

Keep track of the output from this process. You should follow up with every line that uses "raw" and see if you can manually convert them.

Next, decide which way you want to build your GrooCSS into CSS. Which way depends on if you’re using Gralde, Maven, or something else, and how much control you want over the process.

If not using the plugin, you can create a script named "build.groovy" or something similar. This script will convert you groocss files to CSS as part of your build process. Here’s an example:

This example expects all of your GroovyCSS files to be in the "src/groovycss" directory and end with ".css.groovy". Your CSS files will end up in "web/resources/css".

Next you should make sure that all of your converted CSS files are identical to old CSS. To do this simply on a Linux command line, use the following command (assuming old CSS files are in web/styles/):

This goes through every converted CSS file and compares it to the original while ignoring case, whitespace, and blank lines. Look at the resulting "css.diff" file to see what changed. There will probably be a lot of differences but just make sure they don’t change the meaning of the CSS.

This Processor would convert any given int values into pixel measurement. So for example, "padding 2" would become "padding: 2px" in the CSS output.

Note that we put it in the PRE_VALIDATION phase. This would allow us to validate Measurements are not numbers in the VALIDATION phase.

This PaddingValidator would validate that a padding value is always a String that ends with "px".

GrooCSS uses the Processor mechanism internally as well. It comes with DefaultValidator which is automatically added to the set of Processors before processing. It validates that if a value is a Measurement, it’s of an allowed type. For example, "padding 2.deg" would cause an exception.

GrooCSS also comes with a built-in Processor that is not enabled by default, RequireMeasurements. It validates that every value that should be a Measurement is one. This means that "padding '2px'" would not be allowed, only "padding 2.px" for example.

RequireMeasurement extends AbstractValidator, which is an abstract class that implements Processor and calls an abstract method "validate" only during the VALIDATE phase. You can also extend AbstractValidator if you want.

However, Processors need not be restricted to validating or simple conversions. Processors could also greatly expand from input.

For example, the following Processor, named "Expander", would expand "mp" to generate both "margin" and "padding".

-Note that the generic type (StyleGroup in this class) determines what type will be processed by your Processor.

This allows the input to use those shortcuts in GrooCSS such as the following:

Which will become the following CSS:

This example demonstrates how Processors can modify and add to generated CSS.

Using Processors is a simple matter of setting them in the Config object.

See the docs for more details.

First you need to setup your IDE.

Create a directory, "src/css/groocss" and tell your IDE this is a source folder.

Make sure that you have a groocss JAR as a dependency in your Module or project’s definition.

To begin a fully static GrooCSS file, you can start with 'foo'.groocss { and end with }, where "foo" should be the name of the current file.

For example, create a file under "src/css/groocss" named "root.css.groovy" and put in the following:

The above would yield the following CSS:

Note that you can mix and match many different operators and methods as long as you don’t call an undefined method. Building

Building is the same as already discussed. Importing

You can always use importFile(filename) or importFile(File) to import another file.

Since GrooCSS is just Groovy code, you should have IDE code completion (in IntelliJ IDEA for example click Ctrl+Space for code completion) when you stick to non-dynamic code.