CSS.translate.js

JSON.stringify(SheetParser.CSS.translate("a a(b), 1px 3em, gradient(from(rgba(1, 1, 1, 3)), to(#ccc)"))
"[["a",{"a":"b"}],[{"unit":"px","number":"1"},{"unit":"em","number":"3"}],"gradient",{"from":{"rgba":["1","1","1","3"]}},{"to":"#ccc"}]"

Grammar.js

// Stuff below generates this regex:
// /(-?\d+(?:\.\d*)?)(em|px|%|fr)?|(top|left|bottom|right|center)|(#[0-9a-f]{3,6})|([-a-zA-Z0-9]+)\(((?:[^()]|\((?:[^()]|\((?:[^()]|\((?:[^()]|\([^()]*\))*\))*\))*\)))\)|(\s*,\s*)|(\s+)|((?:"(?:[^"]|\\")*"|'(?:[^']|\\')*'))|((?:[-a-zA-Z0-9]+))/gm



;(CSS.integer = x('-?\\d+'))
;(CSS.phloat = x('-?\\d+(?:\\.\\d*)?'))
;(CSS.number = x([CSS.phloat], "number"))

;(CSS.unit = x(['em|px|%|fr'], 'unit'))
;(CSS.length = x([CSS.number, CSS.unit, "?"]))

;(CSS.direction = x(['top|left|bottom|right|center'], 'direction'))
;(CSS.position = x([CSS.length, OR, CSS.direction]), 'position')

;(CSS.func = x("([-a-zA-Z0-9]+)\\((" + rRound + "*)\\)"))
.names = [      'func', '_arguments'];

;(CSS.hex = x(["#[0-9a-f]{3,6}"], 'hex'));

CSS.comma = x(["\\s*,\\s*"], 'comma');
CSS.whitespace = x(["\\s+"], 'whitespace');

CSS.text = x([CSS.string, OR, "(?:[-a-zA-Z0-9]+)"], "text")


CSS.value = x
(
	[	x(CSS.hex)
	, OR
	, x(CSS.func),
	, OR
	, x(CSS.position)
	,	OR
	, x(CSS.comma)
	, OR
	, x(CSS.whitespace)
	, OR
	, x(CSS.text)
	]
)

Normalizer.js

CSS.translate = function(value) {
  var found, whitespace, result = [], scope = result;
  var regex = x(CSS.value);
  var names = regex.names;
  
  while (found = regex.exec(value)) { 
    var length = result.length;
    if (found[names.comma] && !length) continue //throw "comma in the beginning?"  
    
    var number = found[names.number]
    if (number) {
      var unit = found[names.unit]
      scope.push(unit ? {unit: unit, number: number} : number)
      continue;
    } 
    
    if (found[names.whitespace] && !whitespace) {
      whitespace = true;
      scope = [result[length - 1]];
      result.splice(length - 1, 1, scope)
      continue;
    }
    
    if (found[names.comma]) {
      whitespace = false;
      scope = result;
      continue;
    }
    var func = found[names.func];
    if (func) {
      var obj = {};
      obj[func] = CSS.translate(found[names._arguments])
      scope.push(obj)
      continue
    }
    
    var hex = found[names.hex];
    if (hex) {
      scope.push(hex);
      continue
    }
    
    var text = found[names.text];
    if (text) {
      scope.push(text);
      continue
    }
  }
  
  return result.length == 1 ? result[0] : result;
}

Sexy!

Working in values branch.

I only found one incompatability with CSS. font property has comma-separated font list, so it's not parsed right. But i could just fix that font stuff, because it is the exception. Everything else is parsed right.

Tomorrow i'll be trying to implement property expander (when one margin declaration expands to margin-top, margin-left, etc).

And after that i'll have media too really working.

P.S. Work on Slick still remains to be done. But that is all performance boosts which are not that exciting as new features.

And yes, still dreaming of pseudo-elements. I'm thinking of another way to use them too (generate helper widgets on the fly, e.g. a small button with triangle icon looking down in select widget)

You might should make something in the main file like defineShortcut and then in a separate file actually define all the default shortcuts in various versions of CSS. E.g. background for background-color, background-image, etc...

This is because the parser itself has applications outside of styling and I wouldn't want to include extra unrelated stuff in the main file.

One tricky thing to support would be getting the values back out of order. E.g. border: 1px solid blue; vs border: blue 1ps solid

Current parser keeps the order of properties, so it is probably not that hard.

Actually, I see what you mean now.

For some properties the order of arguments defined, for some not. It is in official spec, but it's not that easy to find reasonable syntax to have those rules in javascript accessible and readable form. I'm thinking about it.

= linear-gradient(
[
[ [top | bottom] || [left | right] ]
||

,]?
[, ]+
);

That's what they have in spec.