(WIP) YAML as CSS Pre-processor + Rework as Post-processor

[tunnckoCore]

Why not? All mixins and etc will be plugins, lol. if-else'es with some basic template engine? Haha.

demo with js-yaml index.js

var readYaml = require('read-yaml');
var map = require('object.map');

readYaml('roots.settings.yaml', function(err, data) {
  if (err) throw err;
  var orig = data.vars;
  data.vars = map(data.vars, function(val, key, obj) {
    return obj.hasOwnProperty(val) ? obj[key] = obj[val] : obj[key];
  });

  console.log(data)
});

roots.settings.yml

# ---------------
# Global Settings
# ---------------
vars:
  # Font stacks (add your own!)
  helvetica-neue:   '"Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif'
  helvetica:        '"Helvetica Neue", Helvetica, Arial, sans-serif'
  georgia:          'Georgia, Cambria, "Times New Roman", Times, serif'
  lucidia-grande:   '"Lucida Grande", Tahoma, Verdana, Arial, sans-serif'
  verdana:          'Verdana, Geneva, sans-serif'

  # Default font settings
  font-stack:  verdana
  font-size:   16
  font-color:  green

  # Colors (via http://clrs.cc - slightly modded)
  navy:      '#001F3F'
  blue:      '#0074D9'
  aqua:      '#7FDBFF'
  teal:      '#39CCCC'
  olive:     '#3D9970'
  green:     '#2ECC40'
  lime:      '#01FF70'
  yellow:    '#FFDC00'
  orange:    '#FF851B'
  red:       '#D13F19'
  maroon:    '#85144B'
  fuchsia:   '#F012BE'
  purple:    '#B10DC9'
  white:     '#FFFFFF'
  silver:    '#DDDDDD'
  gray:      '#AAAAAA'
  black:     '#222222'

  # Default color
  default-color: blue

  # Text highlight color
  highlight-color: teal

  # Custom image base path for roots mixins
  img-path: ''

  # Support for old IE
  support-for-ie: false

  # Ligatures
  ligatures: false

  # Vertical rhythm
  base-line-height: font-size
  default-rhythm-border-style: solid
  relative-font-sizing: true
  round-to-nearest-half-line: false
  min-line-padding: 2px

[tunnckoCore]

After complex tests, consider that it cant be possible. YAML is too dynamic and couple more small reasons.

Working on new CSS parser/lexer, which will handle valid CSS and "whitespace significant" aka Stylus-like css. Basic idea is one day to be the core of ReworkCSS and to can be used as PRE-processor with basic features. Next step is to replace Stylus.

• rework only accepts CSS and is built on top of css lib, which have separate parser, lexer and compiler, which are too complex and too big
• rework not parse nested css
• css-whitespace dont parse full stylus syntax
• postcss parse only css, not stylus-like syntax
  • so you should use only css-whitespace syntax compile it and then pass it to postcss
  • with css-whitespace only, you dont have access to stylus-like features
• postcss does not have parser/lexer/compiler/tokenizer separately. this no more apply as fo 2016

low-level CSS parser/lexer ------ \/

higher level for ------------- stylus

css to js compiler ----------------- ^