GrooCSS

Code CSS in Groovy

1.0 Release Candidate 1 Released!

31 July 2019

Version 1.0-RC1 has been released! The next release will be 1.0!

Please get your feedback, comments, and suggestions in soon!

New Features

This release has two great new features: Variables, and Config through Properties.

From the manual:

“Enabled the use of Properties file. For example: new Config(props) or GrooCSS.withPropertiesFile(filename) or with the Gradle plugin you can use propertiesFile = file("groocss.properties") within the task definition. Allows the property "processorClasses" to be a list of class-names separated by commas for Processors to use.”

“Added the ability to add variables to Config and have them available in scripts.”

Tip
 See the new manual for more about these features.

Flavors

1.0-RC1 works with Groovy 2.5 but you can specify 1.0-RC1-groovy2.5 or 1.0-RC1-groovy2.4 if you want to use Groovy 2.4.

Future releases might only work with Groovy 2.5 and up.

1.0 Milestone 4 Released!

22 July 2019

Version 1.0 Milestone 4 (1.0-M4) has been release! The next release will be RC1 (Release Candidate) with GA coming not far behind so please get your feedback, comments, and suggestions in soon!

This release comes in two varieties based on which version of Groovy to use: 1.0-M4-groovy2.4 and 1.0-M4-groovy2.5.

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.

Version 1.0-M3 Released!

05 July 2019

This release includes a fix for a bug reported by John Ahlroos. Thanks John! This bug was related to using the Gradle plugin.

This release also includes a new feature which allows you to use the following syntax within your GrooCSS files, thus enabling IDE code completion in conjunction with using the Gradle Plugin or other method (eventually asset-pipeline).

org.groocss.GrooCSS.process {
    /**  your code here, such as... */
    table {
        border 2.em
        color black
    }
}

Once again, all with IDE code completion within your DSL without jumping through any fancy hoops (in IntelliJ IDEA but theoretically other IDEs as well). The only thing you would need to do is set up your project as a Groovy project with GrooCSS as a dependency.

I’ve also finished updating the website to use JBake with code syntax highlighting, menu, and more. This is something I’ve been meaning to do for a long time and I hope you like it!

As always any feedback is welcome. Please try out M3 as it should be the last Milestone release before 1.0-GA.

Older posts are available in the archive.