adamldavis / groocss Goto Github PK

When using the latest Gradle plugin with the example file yields the following error:

No such property: color for class: java.lang.String

build.gradle (from http://www.groocss.org/gradle.html)

plugins {
    id "org.groocss.groocss-gradle-plugin" version "1.0-M2"
}
def cssDir = "$parent.buildDir/../www/css"

task css(type: org.groocss.GroocssTask, dependsOn: convertCss) {
    conf = new org.groocss.Config(compress: true, addOpera: false)
    from 'index.groocss'
    into "$cssDir/index.css.min"
}

groocss file from (http://www.groocss.org/)

def myColor = 'fe33ac'.color   // creates a Color object
def mySize = 100.px

'.box'.sg {             //sg or $ can be used interchangeably whichever you prefer
  color myColor          // resolves to color: #fe33ac
  borderColor whiteSmoke // borderColor becomes border-color; built-in named colors
  padding 2.em           // resolves to 2em; validated
}
table {
    color myColor background black //fluent
}
'table.my-class'.$ {
    color darken(myColor)  // tint, shade, lighten, mix, fade, and many other methods
}
input %odd {          // becomes input:nth-child(odd)
    background yellow
}
'formId'.id {       // resolves to #formId
    minWidth mySize      // resolves to 100px
    maxWidth mySize*2    // resolves to 200px
    fontSize 1.cm + 2.mm // you can add different types
    extend(table)        // ability to extend previously defined styles
}
$('.box div') {      // can use jQuery-style as well
  boxShadow '0 0 5px rgba(0, 0, 0, 0.3)'
}

Dynamic Styles DSL/More Operators

def myColor = c('#fe33ac')

_.box {      

Redo Translator

Ability to add variables to Config and have them available in scripts

Hi:

I've started using Groocss + Asset-Pipeline to create the sites of some open source projects of mine but there are some features from GrooCSS, like deep nested styles for example, that are not working in any of the published releases so far.

Is there any plans to release a new version soon ?

Of course I'd be glad to help.

And congrats for the project BTW.
Mario

Implement all of the functions listed under "Color Operation Functions" in LESS, and most under the Color Definition and "Color Channel" sections.

Trying to use:
_.foo % before { content 'bar' }
expecting:
.foo::before { content: bar; }
getting:
.foo.mod ::before { content: bar; }

For example:

task css2 doLast {
    def config = new Config(prettyPrint: true)
    def out = file("$cssDir/out.css")
    GrooCSS.process(config) {
        table {
            border 2.em
        }
        'formId'.id {
            color white
        }
    }.writeTo(out)
}

OR

task css2 doLast {
  GrooCSS.convert(config, file("index.groocss"), file("$cssDir/index2.css"))
}

WORK-AROUND: Call new GrooCSS().initMetaClasses() before the "process" line.

Enable the use of Properties file. For example: Properties props = new Properties()
new Config(props) or Config.fromProperties(props) or GrooCSS.configFromFile(filename) or in Gradle plugin: propertiesFile = file("groocss.properties"). Should allow the property "processorClasses" to be a list of classnames separated by commas for Processors to use.

Asset-pipeline integration

Although GrooCSS.process does include keyframes, GrooCSS.convert only prints styles.

Two options:

1. Support built-in -t option by declaring source (maybe extend Copy task)
2. Write a custom continuous build option

Very cool project. I'm interested to see how it evolves.

I was thinking it would be nice to be able to covert a String value instead of having input and output files (something like this):

String grooCss = "p { border '1px solid black'}"
String result = GrooCSS.covert(grooCss)

Even a convert method that used an InputStream and an OutputStream would give some more flexibility and allow it to be used in a project like the Asset Pipeline.

Missing CSS3 elements like placeholder, before, after, etc.

Missing caret-color, appearance, and user-select:
https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

In comparable systems, you can define a method which is called elsewhere, pass parameters, and conditionally add styles. GrooCSS should easily support this with a few additions.

For example, something like:

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

and elsewhere within a style-group:
add mycolor(0.5)

Add closure DSL supported methods for animations and transitions. Examples:

animation ('name_of_animation') { /* keyframes */ }
transition { width '2s' linear '1s' } // using command chains