curvedmark/roole

A language that compiles to CSS

Visit roole.org to see the documentation.

roole's Issues

Allow unit tests to be run from the website

So everyone can run them in their browsers.

Refactor build/commonjs-stripper

• removing 'use strict's and joining files should be handled by another script
• generate source map

Border radius vendor prefixes missing

When adding border radius, e.g "border-radius:10px", this produces three lines, the Moz vendor prefix, the Webkit one, and the non vendor prefixed one. This is missing the "-o-" and "-ms-" prefixes for Opera/Presto and Microsoft/Trident respectively. Ideally this should produce a list like so:

-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radus:10px;
-webkit-border-radius:10px;
border-radius:10px;

Also it's generally advised that the vendor prefix list is in alphabetical order and currently it outputs "webkit" before "moz".

`roole -h` command not working

When trying to run the roole -h command - to look at the options to for roole - it just throws the next message:

/usr/local/lib/node_modules/roole/bin/roole:28
throw error
^
Error: ENOENT, open '-h'`

Allow CSS-like syntax

It would be really nice if I could use braces to define styles. Many people would prefer this code style

$width = 400px
.block {
    width: $width
    height: 200px

    .inner {
        $width = 200px
        width: $width
    }
}

instead of this one

$width = 400px
.block
    width: $width
    height: 200px

    .inner
        $width = 200px
        width: $width

I like the Stylus way of solving this problem ­- it allows both indent-based and braces-based syntax. Why not implement it here?

Generate -webkit-gradient() prefix

when the conversion is not possible (e.g., length value is used in color-stop), just don't generate it.

Built-in function support

• color manipulation
• image size reading
• converting image to data uri

$darken() or darken()

Allow trailing ; in property

body
    margin: 0; padding: 0;

body
    margin: 0;;; padding: 0;;

CSS to Roole

Is there a command line utility to convert existing CSS code to Roole syntax?

Fully case-insensitive

abc is Abc

.button
    display: inline-block

#submit
    @extend .BUTTON

License Type?

Edit: Found it in source - MIT License. Sorry!

Convert variables to lowercase in Scope, not in Parser

The evaluator should not assume that variables are all in lowercase.

Implement combined assignment and operation

$var += 123 etc

Skip prefixed properties

body
    -webkit-border-radius: 10px
    border-radius: 20px

compiles to

body {
    -webkit-border-radius: 10px
    -moz-border-radius: 20px
    border-radius: 20px
}

But may not be a good idea to skip prefixed property values like linear-gradient().

Better commenting

Implement all CSS3 selectors

• :nth-child()
• :not()
• optionally selector namespace

Allow placeholder extends

placeholder or "@extend-only" selectors, which can chain and pass through to one another, are one of the most powerful new features in Sass 3.2. They are the most efficient way to use presentational frameworks and a must for CSS pre-processors going forward... would love to see them here.

More elegant way of bubbling @media

Currently it's handled by the ruleset node in Normalizer. The ruleset node probably shouldn't know about the media node.

Allow the live editor to scroll past end

Write an add-on for CodeMirror

Print mixin error stack

Allow rest parameter in mixin

$mixin = @mixin $param, ...$params
    body
        margin: 0

Functions

Functions

This should serve as simply a list of functions that could be added, I've italicized the ones that I see as having low use cases. I've made the ones I find important and missing from other preprocessor languages bold.

String Functions:
quote, unquote, concat, split, lower-case, upper-case

Number Functions:
abs, ceil, floor, min, max, percent, round, cos, log, sin, tan, sqrt, random, strip

List Functions:
length, nth, concat, shift, unshift, push, pop, first, last, lowest, highest, slice, contains, index-of, list-type, reverse, sort

Introspective Functions:
type-of, unit, unitless, comparable

Color Functions

Color functions are an extremely important part of the preprocessor. Although more complex, they allow the developer to store colors inside of variables without sacrificing the ability to manipulate them.

Get Color Functions:
red, green, blue, hue, saturation, lightness, alpha

Set Color Functions:
red, green, blue, hue, saturation, lightness, alpha, adjust-hue, lighten, darken, saturate, desaturate, fade-in, fade-out, mix, grayscale, complement, invert

Note: the ones with duplicate names could simply have one argument to get the value and a second argument to set the value

Build/Convert Color Functions:
hex, rgb, rgba, hsl, hsla

Misc Color Functions:
change-color, adjust-color, scale-color

Support $arguments inside mixins

Not working in Windows 8 x64

Can't compile any *.roo file in windows environment (Nodejs v0.8.20).
This is what in my console log:

C:>roole .\style.roo

C:\Users\Troy\AppData\Roaming\npm\node_modules\roole\lib\roole.js:35
input = options.imports[error.filePath]
^
TypeError: Cannot read property '.\style.roo' of undefined
at roole.compile.callback (C:\Users\Troy\AppData\Roaming\npm\node_modules\ro
ole\lib\roole.js:35:29)
at Object.roole.compile (C:\Users\Troy\AppData\Roaming\npm\node_modules\rool
e\lib\roole.js:50:10)
at compileFile (C:\Users\Troy\AppData\Roaming\npm\node_modules\roole\bin\roo
le:111:8)
at C:\Users\Troy\AppData\Roaming\npm\node_modules\roole\bin\roole:92:4
at Array.forEach (native)
at compileFiles (C:\Users\Troy\AppData\Roaming\npm\node_modules\roole\bin\ro
ole:85:8)
at Object. (C:\Users\Troy\AppData\Roaming\npm\node_modules\roole
bin\roole:68:2)
at Module._compile (module.js:449:26)
at Object.Module._extensions..js (module.js:467:10)
at Module.load (module.js:356:32)

C:>roole C:\style.roo

fs.js:524
return binding.stat(pathModule._makeLong(path));
^
Error: ENOENT, no such file or directory 'C:\C'
at Object.fs.statSync (fs.js:524:18)
at C:\Users\Troy\AppData\Roaming\npm\node_modules\roole\bin\roole:89:17
at Array.forEach (native)
at compileFiles (C:\Users\Troy\AppData\Roaming\npm\node_modules\roole\bin\ro
ole:85:8)
at Object. (C:\Users\Troy\AppData\Roaming\npm\node_modules\roole
bin\roole:68:2)
at Module._compile (module.js:449:26)
at Object.Module._extensions..js (module.js:467:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.runMain (module.js:492:10)

C:>roole %CD%\style.roo

fs.js:524
return binding.stat(pathModule._makeLong(path));
^
Error: ENOENT, no such file or directory 'C:\C'
at Object.fs.statSync (fs.js:524:18)
at C:\Users\Troy\AppData\Roaming\npm\node_modules\roole\bin\roole:89:17
at Array.forEach (native)
at compileFiles (C:\Users\Troy\AppData\Roaming\npm\node_modules\roole\bin\ro
ole:85:8)
at Object. (C:\Users\Troy\AppData\Roaming\npm\node_modules\roole
bin\roole:68:2)
at Module._compile (module.js:449:26)
at Object.Module._extensions..js (module.js:467:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.runMain (module.js:492:10)

C:>roole style.roo

C:\Users\Troy\AppData\Roaming\npm\node_modules\roole\lib\roole.js:35
input = options.imports[error.filePath]
^
TypeError: Cannot read property 'style.roo' of undefined
at roole.compile.callback (C:\Users\Troy\AppData\Roaming\npm\node_modules\ro
ole\lib\roole.js:35:29)
at Object.roole.compile (C:\Users\Troy\AppData\Roaming\npm\node_modules\rool
e\lib\roole.js:50:10)
at compileFile (C:\Users\Troy\AppData\Roaming\npm\node_modules\roole\bin\roo
le:111:8)
at C:\Users\Troy\AppData\Roaming\npm\node_modules\roole\bin\roole:92:4
at Array.forEach (native)
at compileFiles (C:\Users\Troy\AppData\Roaming\npm\node_modules\roole\bin\ro
ole:85:8)
at Object. (C:\Users\Troy\AppData\Roaming\npm\node_modules\roole
bin\roole:68:2)
at Module._compile (module.js:449:26)
at Object.Module._extensions..js (module.js:467:10)
at Module.load (module.js:356:32)

C:>

Allow expanding of the &-something in selector definition

source:

.foo
  &-bar
    prop: value

output:

.foo-bar
  prop: value

Maybe it's harmful for some reason, because it's doesn't work so in SASS, but works in LESS, Stylus. But I personally got used to it and hope it'll be implemented in roole.

Implement multiple assignments in single line

$var1 = $var2 = 123

Generate source map for js files

• dist/roole.min.js - map to each individual module or roole.js
• test/test.js - map to each test unit

Compress CSS

Split the compiler into MinCompiler and PPCompiler.

PPCompiler extends MinCompiler.

Add the all pseudoclass

For example:
a:all(:hover, :active, img &)
->
a:hover, a:active, img a

Parse ms-filter

filter: progid:DXImageTransform.Microsoft.filtername(sProperties)
filter: alpha(opacity=XX)

Prefix transition-property

This one is pretty high risk and architecture related. Best solve it before implementing more prefixings. Need to settle down on how it actually should be prefixed first.

Allow property value to be indented

#canvas
  background:
    url(castle.png)
    url(dragon.png)

body
    background:
        url(a.png)
        url(b.png), url(c.png)
        !important

Stop processing at the first importing error

Currently Importer continues to process nodes when an @import node has failed to import file.

Save code in the live editor

maybe use gist.
and use an url like roole.org/#editor:hash

Simplify Mixins

@mixin name($option)
    property: $option

.selector
    @name(value)

The @ symbol could be replaced with anything, although I like how it follows CSS's default usage of the @ symbol... and people could use sass syntax highlighters before their editor gains Roole support.

Also if Issue #15 for built in function support goes in I think it should follow this same way of writing:

@function name($option)
    @return $option

.selector
    property: name(value)

Allow specifying Roole options in the CLI

--prefix
--indent
--precision

Allow adding importing files in the live editor

like the snippets of @import in the doc.

Major doc refactor

• clean up styles
• clean up scripts
• better code highlighting (the current implement is pretty special cased)
• compress html
• inline logo as data uri
• responsive, mobile first

Add to Media Queries

I've had a problem that cannot currently be solved by any preprocessor. I want to have a single media query for a certain screen size and be able to add from it inline.

@media (min-width: 960px)
@media (min-width: 1200px)

.foo
    @media (min-width: 960px)
        width: 400px
        background: red
    @media (min-width: 1200px)
        border: 3px solid green
.bar
    @media (min-width: 1200px)
        color: yellow

@media (min-width: 960) {
    .foo { 
        width: 400px;
        background: red;
    }
}
@media (min-width: 1200px) {
    .foo {
        border: 3px solid green;
    }
    .bar {
        color: yellow;
    }
}

Being able to do this would help create more organized code without making the compiled version too hefty.

*.roo imports fail

vars.roo

$background = #000

style.roo

@import 'vars.roo'

body
  background: $background

when compiled results in

TypeError: Cannot read property 'vars.roo' of undefined
at roole.compile.callback (/usr/local/lib/node_modules/roole/lib/roole.js:35:29)
at roole.compile (/usr/local/lib/node_modules/roole/lib/roole.js:55:12)
at Importer.visitImport (/usr/local/lib/node_modules/roole/lib/importer/importer.js:99:11)
at fs.readFile (fs.js:176:14)
at Object.oncomplete (fs.js:297:15)

Note this occurs with or without '.roo' added to the imported file name.

More rigid comparison

• 1..2 isnt 1...2

Add travis-ci

Fix indent guide in the live editor

• If indented by spaces, only the first level is displayed.
• Indent guide is not displayed on blank lines.

Better error message in live editor

When there is an error, it should only print a number of lines like the CLI, instead of displaying all source code.

Fix CLI

• -h, --help
• roole compile stdin and output to stdout
• roole file... compile file and write to another file with .roo replaced with .css
• roole dir1 compile files in dir1, write to files with .roo replaced with .css
• roole dir1 dir2 compile files in dir1, write to files in dir2 with .roo replaced with .css

Autocompile code & files for browser

Implement lib/importer/xhr-loader.js and reuse it when loading <link ..>

Fix installation of npm package in Windows

I think, there is all needed information on screenshot.

Pass @mixin as argument

Maybe using an alternative calling syntax

$phone = @mixin $rules
    @media (max-width: 512px)
        $rules()

@call $phone @mixin
    body
        margin: 0 20px

Allow CLI to watch files

-w, --watch

Old browser support

• es5 shim
• quote object keys that are keywords