c9s / c6 Goto Github PK

• 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;
}

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

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

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"

• 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 * $_; }
}

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

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

• ParseMediaCondition method

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

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

Synopsis

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

WIP

• CompileCommand
• WatchCommand
• UpdateCommand

• hex color
• hsl color
• color keyword
• number

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.

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

• Basic @page support

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

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

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 ...

• 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;
  }
}

• ParseWhileStatement

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

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

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

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

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);

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

• 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;
  }
}

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.

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

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

• 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;
  }
}

width: auto;

where the auto should be unquoted string auto

And

font-family: "Arial";

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

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;

• Token Type
• Lexer
• Parser
• Ast Node

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

1. Proposal 1:

@constant width: 100 * 100

1. Proposal 2:

$width: 100 * 100 !constant;

Related to #10

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