Support for Nested Selectors, Nested Declarations and At-Rule Validations

docs/parse.js

@@ -181,14 +181,29 @@ window.onload = function() {
 };
 
 window.onhashchange = hashChanged;
-style.onkeyup = style.onpaste = function changed(){
+
+function debounce(func, timeout) {
+  if (timeout === undefined) timeout = 300;
+  var timer;
+  return function() {
+    var args = arguments;
+    clearTimeout(timer);
+    timer = setTimeout(function() { func.apply(this, args); }, timeout);
+  };
+}
+
+function changed(){
 	outputUpdated();
-};
-style.onchange = function updateLocation() {
+}
+
+function updateLocation() {
 	if (style.value.length < 1024) {
 		location.hash = "css=" + encodeURIComponent(style.value);
 	} else {
 		// Huge location.hash slows down the browser :(
 		location.hash = 'css_is_too_big';
 	}
-};
+}
+
+style.onkeyup = style.onpaste = debounce(function() { return changed(); });
+style.onchange = debounce(function() { return updateLocation()});;

lib/CSSNestedDeclarations.js

@@ -0,0 +1,31 @@
+//.CommonJS
+var CSSOM = {
+  CSSRule: require("./CSSRule").CSSRule,
+};
+///CommonJS
+
+/**
+ * @constructor
+ * @see https://drafts.csswg.org/css-nesting-1/
+ */
+CSSOM.CSSNestedDeclarations = function CSSNestedDeclarations() {
+  CSSOM.CSSRule.call(this);
+  this.style = new CSSOM.CSSStyleDeclaration();
+  this.style.parentRule = this;
+};
+
+CSSOM.CSSNestedDeclarations.prototype = new CSSOM.CSSRule();
+CSSOM.CSSNestedDeclarations.prototype.constructor = CSSOM.CSSNestedDeclarations;
+CSSOM.CSSNestedDeclarations.prototype.type = 0;
+
+Object.defineProperty(CSSOM.CSSNestedDeclarations.prototype, "cssText", {
+  get: function () {
+    return this.style.cssText;
+  },
+  configurable: true,
+  enumerable: true,
+});
+
+//.CommonJS
+exports.CSSNestedDeclarations = CSSOM.CSSNestedDeclarations;
+///CommonJS

lib/CSSStyleRule.js

@@ -1,6 +1,7 @@
 //.CommonJS
 var CSSOM = {
 	CSSStyleDeclaration: require("./CSSStyleDeclaration").CSSStyleDeclaration,
+	CSSGroupingRule: require("./CSSGroupingRule").CSSGroupingRule,
 	CSSRule: require("./CSSRule").CSSRule
 };
 ///CommonJS
@@ -12,21 +13,30 @@ var CSSOM = {
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule
  */
 CSSOM.CSSStyleRule = function CSSStyleRule() {
-	CSSOM.CSSRule.call(this);
+	CSSOM.CSSGroupingRule.call(this);
 	this.selectorText = "";
 	this.style = new CSSOM.CSSStyleDeclaration();
 	this.style.parentRule = this;
 };
 
-CSSOM.CSSStyleRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSStyleRule.prototype = new CSSOM.CSSGroupingRule();
 CSSOM.CSSStyleRule.prototype.constructor = CSSOM.CSSStyleRule;
 CSSOM.CSSStyleRule.prototype.type = 1;
 
 Object.defineProperty(CSSOM.CSSStyleRule.prototype, "cssText", {
 	get: function() {
 		var text;
 		if (this.selectorText) {
-			text = this.selectorText + " {" + this.style.cssText + "}";
+			var values = ""
+			if (this.cssRules.length) {
+				var valuesArr = [" {"];
+				this.style.cssText && valuesArr.push(this.style.cssText);
+				valuesArr.push(this.cssRules.map(function(rule){ return rule.cssText }).join("\n  "));
+				values = valuesArr.join("\n  ") + "\n}"
+			} else {
+				values = " {" + this.style.cssText + "}";
+			}
+			text = this.selectorText + values;
 		} else {
 			text = "";
 		}

lib/clone.js

@@ -2,6 +2,7 @@
 var CSSOM = {
 	CSSStyleSheet: require("./CSSStyleSheet").CSSStyleSheet,
 	CSSRule: require("./CSSRule").CSSRule,
+	CSSNestedDeclarations: require("./CSSNestedDeclarations").CSSNestedDeclarations,
 	CSSStyleRule: require("./CSSStyleRule").CSSStyleRule,
 	CSSGroupingRule: require("./CSSGroupingRule").CSSGroupingRule,
 	CSSConditionRule: require("./CSSConditionRule").CSSConditionRule,

lib/index.js

@@ -2,6 +2,7 @@
 
 exports.CSSStyleDeclaration = require('./CSSStyleDeclaration').CSSStyleDeclaration;
 exports.CSSRule = require('./CSSRule').CSSRule;
+exports.CSSNestedDeclarations = require('./CSSNestedDeclarations').CSSNestedDeclarations;
 exports.CSSGroupingRule = require('./CSSGroupingRule').CSSGroupingRule;
 exports.CSSConditionRule = require('./CSSConditionRule').CSSConditionRule;
 exports.CSSStyleRule = require('./CSSStyleRule').CSSStyleRule;