c9s/c6

Compile SASS Faster ! C6 is a SASS-compatible compiler

C6

Hate waiting for SASS compiling your stylesheets with Compass over 10 seconds everytime? C6 helps you write style sheets with efficiency.

C6 is a SASS 3.2 compatible implementation written in Go. But wait! this is not only to implement SASS, but also to create a new language for better consistency, syntax and performance. And yes, this means we're free to accept new language feature requests.

Installation

go get github.com/c9s/c6/cmd/c6

Working in progress

• Lexing

  • @import
  • simple selector.
    • type selector.
    • child selector.
    • attribute selector.
    • adjacent selector.
    • descendant selector.
    • class selector.
    • ID selector.
  • Ruleset
  • Sub-ruleset
  • Interpolation
  • Property name
  • Property value list
  • Nested properties.
  • Comma-separated list
  • Space-separated list
  • @if , @else , @else if
  • @for, from, through statement
  • @while
  • @mixin
  • @mixin with arguments
  • @include
  • Flags: !default, !important, !optional, !global
  • Hex color
  • Functions
  • Vendor prefix properties
  • MS filter. progid:DXImageTransform.Microsoft....
  • Variable names
  • Variable assignment
  • Time unit support. s second, ms ... etc
  • Angle unit support.
  • Resolution unit support.
  • Unicode Range support: https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-range
  • Media Query

• Built-in Functions

  • .... to be listed

• Parser

  • Parse @import
  • Parse Expr
  • Parse Space-Sep List
  • Parse Comma-Sep List
  • Parse Map (tests required)
  • Parse Selector
  • Parse Selector with interpolation
  • Parse RuleSet
  • Parse DeclBlock
  • Parse Variable Assignment Stmt
  • Parse PropertyName
  • Parse PropertyName with interpolation
  • Parse PropertyValue
  • Parse PropertyValue with interpolation
  • Parse conditions
  • Parse @media statement
  • Parse Nested RuleSet
  • Parse Nested Properties
  • Parse options: !default, !global, !optional
  • Parse CSS Hack for different browser (support more syntax sugar for this)
  • Parse @font-face block
  • Parse @if statement
  • Parse @for statement
  • Parse @while statement
  • Parse @mixin statement
  • Parse @include statement
  • Parse @function statement
  • Parse @return statement
  • Parse @extend statement
  • Parse keyword arguments for @function
  • Parse @switch statement
  • Parse @case statement
  • Parse @use statement

• Building AST

  • RuleSet
  • DeclBlock
  • PropertyName
  • PropertyValue
  • Comma-Separated List
  • Space-Separated List
  • Basic Exprs
  • FunctionCall
  • Expr with interpolation
  • Variable statements
  • Built-in color keyword table
  • Hex Color computation
  • Number operation: add, sub, mul, div
  • Length operation: number operation for px, pt, em, rem, cm ...etc
  • Expr evaluation
  • Boolean expression evaluation
  • Media Query conditions
  • @if If Condition
  • @else if If Else If
  • @else else condition
  • @while statement node
  • @function statement node
  • @mixin statement node
  • @include statement node
  • @return statement node
  • @each statement node

• Runtime

  • HSL Color computation
  • Function Call Invoke mech
  • Mixin Include
  • Import

• SASS Built-in Functions

  • RGB functions
    • rgb($red, $green, $blue)
    • rgba($red, $green, $blue, $alpha)
    • red($color)
    • green($color)
    • blue($color)
    • mix($color1, $color2, [$weight])
  • HSL Functions
    • hsl($hue, $saturation, $lightness)
    • hsla($hue, $saturation, $lightness, $alpha)
    • hue($color)
    • saturation($color)
    • lightness($color)
    • adjust-hue($color, $degrees)
    • lighten($color, $amount)
    • darken($color, $amount)
    • saturate($color, $amount)
    • desaturate($color, $amount)
    • grayscale($color)
    • complement($color)
    • invert($color)
  • Opacity Functions
    • alpha($color) / opacity($color)
    • rgba($color, $alpha)
    • opacify($color, $amount) / fade-in($color, $amount)
    • transparentize($color, $amount) / fade-out($color, $amount)
  • Other Color Functions
    • adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
    • scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
    • change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
    • ie-hex-str($color)
  • String Functions
    • unquote($string)
    • quote($string)
    • str-length($string)
    • str-insert($string, $insert, $index)
    • str-index($string, $substring)
    • str-slice($string, $start-at, [$end-at])
    • to-upper-case($string)
    • to-lower-case($string)
  • Number Functions
    • percentage($number)
    • round($number)
    • ceil($number)
    • floor($number)
    • abs($number)
    • min($numbers…)
    • max($numbers…)
    • random([$limit])
  • List Functions
    • length($list)
    • nth($list, $n)
    • set-nth($list, $n, $value)
    • join($list1, $list2, [$separator])
    • append($list1, $val, [$separator])
    • zip($lists…)
    • index($list, $value)
    • list-separator(#list)
  • Map Functions
    • map-get($map, $key)
    • map-merge($map1, $map2)
    • map-remove($map, $keys…)
    • map-keys($map)
    • map-values($map)
    • map-has-key($map, $key)
    • keywords($args)
  • Selector Functions
    • .... to be expanded ...

• CodeGen

  • CompactCompiler
    • CompileCssImportStmt: @import url(...);
    • CompileRuleSet
    • CompileSelectors
      • CoimpileParentSelector
    • CompileSubRuleSet
    • CompileCommentBlock
    • CompileDeclBlock
    • CompileMediaQuery: @media
    • CompileSupportrQuery: @support
    • CompileFontFace: @support
    • CompileForStmt
    • CompileIfStmt
      • CompileElseIfStmt
    • CompileWhileStmt
    • CompileEachStmt
    • ... list more ast nodes here ...

• Syntax

  • built-in @import-once

Ambiguity

The original design of SASS contains a lot of grammar ambiguity.

for example, as SASS uses interpolation:

#{$name}:before {

}

Since nested properties are allowed, in the above code, we don't know if it's a selector or a property namespace if we don't know the $name variable.

Where before might be a property value or a part of the selector.

links:

• https://www.facebook.com/cindylinz/posts/10202186527405801?hc_location=ufi
• https://www.facebook.com/yoan.lin/posts/10152968537931715?_rdr

To handle this kind of interpolation, we define a type of token named template:

#{$name}:before a {

}

In the above code, #{$name}:before a is treated as T_SELECTOR_TEMPLATE token, which type will be resolved at the runtime.

Self Benchmarking

FAQ

Why do you want to implement another SASS compiler?

The original SASS is written in Ruby and it's really slow, we take 11 seconds to compile the stylesheets of our application, libsass is fast but it does not catch up the ruby sass implementation , and you can't compile them with Compass. Since Go is simple, easy & fast, thus we implement SASS in Go to move faster.

Further, we want to design a new language (ECSS temporarily named) that is compatible with SASS 3.4 or even SASS 4.0 with more powerful features.

Reference

SASS Reference http://sass-lang.com/documentation/file.SASS_REFERENCE.html

A feature check list from libsass:

• https://github.com/sass/libsass/releases/tag/3.2.0
• sass/sass#1094

Standards:

• CSS Syntax Module Level 3 http://www.w3.org/TR/css-syntax-3
• CSS 3 Selector http://www.w3.org/TR/css3-selectors/#grouping
• CSS Font http://www.w3.org/TR/css3-fonts/#basic-font-props
• Selectors API http://www.w3.org/TR/selectors-api/
• At-Page Rule http://dev.w3.org/csswg/css-page-3/#at-page-rule
• Railroad diagram https://github.com/tabatkins/railroad-diagrams
• CSS 2.1 Grammar http://www.w3.org/TR/CSS21/grammar.html

SASS/CSS Frameworks, libraries:

• Bourbon http://bourbon.io/
• Marx https://github.com/mblode/marx
• FormHack http://formhack.io/
• Susy http://susy.oddbird.net/
• Gumby http://www.gumbyframework.com/

Articles:

• Logic in media queries - https://css-tricks.com/logic-in-media-queries/

Contribution

Please open up an issue on GitHub before you put a lot efforts on pull request.

The code submitting to PR must be filtered with gofmt

Community

• Slack: we are on Slack channel #c6, go invite yourself here: https://docs.google.com/forms/d/11KpalZc6AUuQYf7vz531ys0pLEC9csjkC6QyC_hJQEg/viewform

• Our Official Twitter Channel: https://twitter.com/C6SASS

License

MPL License https://www.mozilla.org/MPL/2.0/

(MPL is like LGPL but with static/dynamic linking exception, which allows you to either dynamic/static link this library without permissions)

c6's Issues

Parses import dependencies from a directory of sass files

Compatibility testing framework

Syntax for constant statements

1. Proposal 1:

@constant width: 100 * 100

1. Proposal 2:

$width: 100 * 100 !constant;

Parser/Lexer performance improvement

• Translate peek() then if .... { parser.next() } to parser.accept(...)

Supporting strict property value expression for '/' token in css

CSS allows / to appear in property values as a way of separating numbers. Since SassScript is an extension of the CSS property syntax, it must support this, while also allowing / to be used for division.

When user enables 'strict' mode, @use strict; then the expression will only be evaluated when they're in parenthesis. when strict mode is not enabled, we just behave like SASS.

Related to #17

IfStatement optimization

Replace IfStatement with Block directly if the condition can be reduced to true or false (put in OptimizeIfStatement function)

Re-parse selector after evaluating the interpolation expression

• Expanding #{ "foo" "bar" }zoo to foozoo barzoo

What is the license which applies to this repository?

What license are you thinking to use for this work? Independently of which, can you added a brief comment in README or add LICENSE file?

Thanks.

Constant expression elimination

Related to #10

Extension API

Integrate cobra for command-line interface

Reference: https://github.com/spf13/cobra

Synopsis

c6 compile app.scss
c6 watch app.scss
c6 update app.scss

WIP

• CompileCommand
• WatchCommand
• UpdateCommand

built-in vendor prefix expansion

1. Proposal 1: Reuse the interpolation to expand the properties

#{$vendor}border-radius:  3px

1. Proposal 2: Use new symbol to expand the properties

**border-radius: 3px;
%border-radius: 3px;
&border-radius: 3px;
~border-radius: 3px;

@for statement

• ParseForStatement
• ParseRangeClause

Test Case 1:

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

Test Case 2 (Perl / Python style iteration):

@for $i in 1..3 {
  .item-#{$i} { width: 2em * $i; }
}

Even simpler:

@for 1..3 {
  .item-#{$_} { width: 2em * $_; }
}

Default Style CodeGen

• Selector
• Ruleset
• Property
• Nested Ruleset
• Function call
• Interpolation
• calc() function
• @media statement
• @for statement
• @while statement
• @mixin statement
• @content block

Improve SyntaxError struct

• File name
• Line number
• Message
• Expecting Token
• Actual Token
• Correct Syntax Suggestion
• Reference URL

Support HWB color model

http://www.wikiwand.com/en/HWB_color_model

Supporting dynamic call

spec/basic/60_call/input.scss:  display: call(foobar);
spec/basic/60_call/input.scss:  display: call(min, 1,3,5,7);
spec/basic/60_call/input.scss:  display: call(min, 5);
spec/basic/60_call/input.scss:  display: call(max, 10,3,5,7);

@content block

• Token Type
• Lexer
• Parser
• Ast Node

Survey and use go package dependency tool

http://go-talks.appspot.com/github.com/davecheney/presentations/reproducible-builds.slide#11

Review the parser for css3 selectors

Reference: http://www.w3.org/TR/css3-selectors/

• Universal selectors and namespaces http://www.w3.org/TR/css3-selectors/#univnmsp

• Attribute selectors and namespaces http://www.w3.org/TR/css3-selectors/#attrnmsp

• :nth-child() pseudo-class:
  The nth grammar:

      nth
          : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |
               ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*
              ;
  

  Examples:

      tr:nth-child(2n+1) /* represents every odd row of an HTML table */
      tr:nth-child(odd)  /* same */
      tr:nth-child(2n+0) /* represents every even row of an HTML table */
      tr:nth-child(even) /* same */
  
      /* Alternate paragraph colours in CSS */
      p:nth-child(4n+1) { color: navy; }
      p:nth-child(4n+2) { color: green; }
      p:nth-child(4n+3) { color: maroon; }
      p:nth-child(4n+4) { color: purple; }
  

• Move lang(), empty(), not() to function pseudo selector

BooleanValue interface to cast scalar to boolean for conditions

interpolation support

if there is a interpolation node in the expression tree, we shall treat them as string operation. e.g.,

width: (3+4)#{ "px" };

outputs:

width: 7px;

since (3+4) will be evaluated first and then string concat with "px"

@while statement

• ParseWhileStatement

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

Nested Properties

• Modify lexer to allow block in property value.
• Modify parser to parse block in property value. (encounter { before semicolon ;)
• Merge declaration block with the given property name.

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

Rewrite simple selector parsing/lexing for simplicity

Base on the ref: http://www.w3.org/TR/CSS21/grammar.html

Supporting unicode range U+00-FF, U+980-9FF in lexer

@function support

@mixin support

• ParseMixinStatement
• ParseMixinName
• ParseMixinArguments
• Variable Arguments
• Register mixin symbol table to global context for look up.
• Reduce expressions with constant value
• Build mixin argument prototype in two format: (key: value) and argument list.
• Mixin Invoker used in @include directive
• Keyword Arguments
• Shorthand Syntax +, = support.

Test Case:

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

Test Case 2:

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

Test Case 3:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Supporting color/number/vector computation

• hex color
• hsl color
• color keyword
• number

Convert color keyword to hex as an option

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Add interactive mode support

@each statement

• ParseEachStatement

Test Case:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

Test Case 2:

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

Test Case 3:

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

Improve <number> format lexing

Spec: https://developer.mozilla.org/en-US/docs/Web/CSS/number

symbol table component

The correct behavior of compiling `font-size: 14px/22px`

@if statement

• ParseCondition
• ParseLogicExpression for token 'or'
• ParseLogicANDExpression for token 'and'
• ParseComparisonExpression for comparison operator: ==, >= ....
• Constant Expression Elimination for Logic Expression

This is related to #31

Test Case 1:

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

Test Case 2:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Test coverage - coverall support

CSS3 @page syntax support

• Basic @page support

There is a W3C draft about this:
Ref: http://dev.w3.org/csswg/css-page-3/#at-page-rule

Use ASCII_HEX RangeMap to lex hex colors

A wish list that beyond SASS

Evaluate simple expression in variable assignment

Supporting IE expression() function

foo { display: expression("inline", (this.innerHTML += (this.innerHTML.indexOf(",") == -1 ? ", " : "")), this.runtimeStyle.display = "inline"); }

foo{display:expression("inline", (this.innerHTML += (this.innerHTML.indexOf(",") == -1 ? ", " : "")), this.runtimeStyle.display = "inline")}

left: expression(document.body.clientWidth/2-oDiv.offsetWidth/2);

Output string value with specified quote character

width: auto;

where the auto should be unquoted string auto

And

font-family: "Arial";

where the "Arial" should be double-qouted string "Arial";

Sass Language & Compliant Implementations

But wait! this is not only to implement SASS, but also to improve the language for better consistency,
syntax and performance. And yes, this means we're free to accept new language feature requests.

Sass is a language. That language is defined by the ruby reference implementation. We welcome other implementations of the language and allow them to call themselves a "Sass implementation" when they adhere to this requirement. The reason for this is very important, users of Sass expect their files to be able to be shared across projects, across implementations. The ecosystem of Sass users and the community that has supports it requires language adherence for cohesion. Without it, the community will fracture and the value of Sass is diminished.

Clearly, you love Sass enough to work so hard on it. I would encourage you to please work with @nex3 and myself for all changes to the language. I promise you, the language is not dead, we have big things planned for sass 4.0 and if you start implementing these new features without them being in ruby sass you'll be in a tough spot going forward. How can you support the new features especially if they conflict with your own custom additions? It will make you either give up your Sass compatibility or break backwards compat for your own users.

Thanks.

Travis-CI integration

@return statement

• Lex @return statement
• Parse @return statement
• Build AST Node for @return

@import statement

• ParseImportStatement
• RelativePath
• SCSS Import
• CSS Import
• URL Import
• Parse imported file
• Merge imported statement
• Avoid duplicate import

@media query

• ParseMediaCondition method

Reference:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

calc() expression reducer

While SASS is interpreing this as it is:

$some: 22;
width: calc(100% - 10px + 20px + $some);

We can reduce the expression if they are the same unit to:

width: calc(100% + 10px + 22);

Supporting SASS functions

http://sass-lang.com/documentation/Sass/Script/Functions.html

• SASS Built-in Functions
  • RGB functions
    • rgb($red, $green, $blue)
    • rgba($red, $green, $blue, $alpha)
    • red($color)
    • green($color)
    • blue($color)
    • mix($color1, $color2, [$weight])
  • HSL Functions
    • hsl($hue, $saturation, $lightness)
    • hsla($hue, $saturation, $lightness, $alpha)
    • hue($color)
    • saturation($color)
    • lightness($color)
    • adjust-hue($color, $degrees)
    • lighten($color, $amount)
    • darken($color, $amount)
    • saturate($color, $amount)
    • desaturate($color, $amount)
    • grayscale($color)
    • complement($color)
    • invert($color)
  • Opacity Functions
    • alpha($color) / opacity($color)
    • rgba($color, $alpha)
    • opacify($color, $amount) / fade-in($color, $amount)
    • transparentize($color, $amount) / fade-out($color, $amount)
  • Other Color Functions
    • adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
    • scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
    • change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
    • ie-hex-str($color)
  • String Functions
    • unquote($string)
    • quote($string)
    • str-length($string)
    • str-insert($string, $insert, $index)
    • str-index($string, $substring)
    • str-slice($string, $start-at, [$end-at])
    • to-upper-case($string)
    • to-lower-case($string)
  • Number Functions
    • percentage($number)
    • round($number)
    • ceil($number)
    • floor($number)
    • abs($number)
    • min($numbers…)
    • max($numbers…)
    • random([$limit])
  • List Functions
    • length($list)
    • nth($list, $n)
    • set-nth($list, $n, $value)
    • join($list1, $list2, [$separator])
    • append($list1, $val, [$separator])
    • zip($lists…)
    • index($list, $value)
    • list-separator(#list)
  • Map Functions
    • map-get($map, $key)
    • map-merge($map1, $map2)
    • map-remove($map, $keys…)
    • map-keys($map)
    • map-values($map)
    • map-has-key($map, $key)
    • keywords($args)
  • Selector Functions
    • .... to be expanded ...