with-style 5.0.180 → 5.0.182

package/src/css/bnf.js

@@ -2,45 +2,51 @@
 
 const bnf = `
 
+    stylesheet                 ::= ( media | ruleSet | declaration | error )+ ;
 
 
-    stylesheet                 ::= ( media | ruleSet | declaration | error )+ ;
 
+    media                      ::= "@media" mediaQueries "{" ( ruleSet | declaration )* "}" ;
+                                                              
+    ruleSet                    ::=  selectors "{" declaration* "}" ;
+    
+    declaration                ::=  propertyName ":" propertyValues important? ";" ;
 
+    error!                     ::=  . ;
 
 
 
-    media                      ::= "@media" mediaQueries "{" ( ruleSet | declaration )* "}" ;
-                                                              
-                                                              
+    propertyValues             ::=  propertyValue ( "," propertyValue )* ;
+
+
     mediaQueries               ::=  mediaQuery ( "," mediaQuery )* ;
                                                               
                                                               
+    selectors                  ::=  selector ( "," selector )* ;
+
+
+
     mediaQuery                 ::=  "not"? ( "only"? mediaType "and" )? mediaExpression ( "and" mediaExpression )* ;
 
 
     mediaType                  ::=  "all" | "print" | "screen" | "speech" ;
                                                               
                                                               
-    mediaExpression            ::=  "(" [identifier] ( ":" expression )? ")" ;
+    mediaExpression            ::=  "(" [identifier] ( ":" propertyValue )? ")" ;
 
 
 
+    propertyValue              ::=  term ( ","? term )* ;
 
 
-    ruleSet                    ::=  selectors "{" declaration* "}" ;
-    
-    
-    selectors                  ::=  selector ( "," selector )* ;
-
-
-    selector                   ::=  ( class | pseudoClass | pseudoElement | attribute )+ ;
+    propertyName               ::=  [identifier] ;
 
 
+    important                  ::=  "!important" ;
 
 
+    selector                   ::=  ( class | pseudoClass | pseudoElement | attribute )+ ;
 
-    declaration                ::=  property ":" expression ( "," expression )* priority? ";" ;
 
 
     class                      ::=  "."<NO_WHITESPACE>[identifier] parenthesisedSelector? ;
@@ -55,6 +61,7 @@ const bnf = `
     parenthesisedSelector      ::=  <NO_WHITESPACE>"(" selector <NO_WHITESPACE>")" ;
 
 
+
     attribute                  ::=  "["
 
                                        [identifier]
@@ -72,17 +79,6 @@ const bnf = `
                                  ;
 
 
-    property                   ::=  [identifier] ;
-
-
-    expression                 ::=  term ( ","? term )* ;
-
-
-    priority                   ::=  "!important" ;
-
-
-
-
 
     term                       ::=  [arithmetic-operator]?
                                                        
@@ -118,15 +114,7 @@ const bnf = `
     uri                        ::=  "url"<NO_WHITESPACE>"(" [string-literal] ")" ;
 
 
-    function                   ::=  [identifier]<NO_WHITESPACE>"(" expression ")" ;
-
-
-
-
-
-    error!                     ::=  . ;
-
-
+    function                   ::=  [identifier]<NO_WHITESPACE>"(" propertyValue ")" ;
 
 `;
 

package/src/style/declaration.js

@@ -1,39 +1,51 @@
 "use strict";
 
-import { Query } from "occam-dom";
+import { Query } from "occam-query";
 
 import { EMPTY_STRING } from "../constants";
 import { contentFromQueryNodeAndTokens } from "../utilities/content";
 
-const priorityQuery = Query.fromExpression("/*/priority"),
-      propertyQuery = Query.fromExpression("/*/property"),
-      expressionQuery = Query.fromExpression("/*/expression");
+const importantQuery = Query.fromExpression("/*/important"),
+      propertyNameQuery = Query.fromExpression("/*/propertyName"),
+      propertyValuesQuery = Query.fromExpression("/*/propertyValues");
 
 export default class Declaration {
-  constructor(property, expression, priority) {
-    this.property = property;
-    this.expression = expression;
-    this.priority = priority;
+  constructor(propertyValues, propertyName, important) {
+    this.propertyValues = propertyValues;
+    this.propertyName = propertyName;
+    this.important = important;
   }
 
-  getProperty() {
-    return this.property;
+  getPropertyValues() {
+    return this.propertyValues;
   }
 
-  getExpression() {
-    return this.expression;
+  getNameProperty() {
+    return this.propertyName;
   }
 
-  getPriority() {
-    return this.priority;
+  getImportant() {
+    return this.important;
   }
 
-  checkMatches(declarations) {
+  matchPropertyName(propertyName) {
+    const matches = (this.propertyName === propertyName);
+
+    return matches;
+  }
+
+  matchDeclaration(declaration) {
+    const propertyName = declaration.getPropertyName(),
+          matches = this.matchPropertyName(propertyName); ///
+
+    return matches;
+  }
+
+  matchDeclarations(declarations) {
     const matches = declarations.some((declaration) => {
-      const property = declaration.getProperty(),
-            propertiesMatch = (property === this.property);
+      const matches = this.matchDeclaration(declaration);
 
-      if (propertiesMatch) {
+      if (matches) {
         return true;
       }
     });
@@ -43,22 +55,22 @@ export default class Declaration {
 
   asCSS(indent, last) {
     const css = last ?
-                `${indent}${this.property}: ${this.expression}${this.priority};` :
-                  `${indent}${this.property}: ${this.expression}${this.priority};\n`;
+                  `${indent}${this.propertyName}: ${this.propertyValues}${this.important};` :
+                    `${indent}${this.propertyName}: ${this.propertyValues}${this.important};\n`;
 
     return css;
   }
 
   static fromNodeAndTokens(node, tokens) {
-    const propertyContent = contentFromQueryNodeAndTokens(propertyQuery, node, tokens),
-          expressionContent = contentFromQueryNodeAndTokens(expressionQuery, node, tokens),
-          priorityContent = contentFromQueryNodeAndTokens(priorityQuery, node, tokens),
-          property = propertyContent, ///
-          expression = expressionContent, ///
-          priority = (priorityContent === null) ?
-                       EMPTY_STRING :
-                        ` ${priorityContent}`,
-          declaration = new Declaration(property, expression, priority);
+    const propertyValuesContent = contentFromQueryNodeAndTokens(propertyValuesQuery, node, tokens),
+          propertyNameContent = contentFromQueryNodeAndTokens(propertyNameQuery, node, tokens),
+          importantContent = contentFromQueryNodeAndTokens(importantQuery, node, tokens),
+          propertyValues = propertyValuesContent, ///
+          propertyName = propertyNameContent, ///
+          important = (importantContent === null) ?
+                        EMPTY_STRING :
+                         ` ${importantContent}`,
+          declaration = new Declaration(propertyValues, propertyName, important);
 
     return declaration;
   }

package/src/style/declarations.js

@@ -1,11 +1,14 @@
 "use strict";
 
-import { Query } from "occam-dom";
+import { Query } from "occam-query";
+import { arrayUtilities } from "necessary";
 
 import Declaration from "./declaration";
 
 import { EMPTY_STRING } from "../constants";
 
+const { forwardsForEach, backwardsForEach } = arrayUtilities;
+
 const declarationQuery = Query.fromExpression("/*/declaration");
 
 export default class Declarations {
@@ -13,33 +16,13 @@ export default class Declarations {
     this.array = array;
   }
 
-  forwardsForEach(callback) {
-    const length = this.array.length,
-          firstIndex = 0,
-          lastIndex = length - 1;
-
-    for (let index = firstIndex; index <= lastIndex; index++) {
-      const declaration = this.array[index];
-
-      callback(declaration, index);
-    }
-  }
+  forwardsForEach(callback) { forwardsForEach(this.array, callback); }
 
-  backwardsForEach(callback) {
-    const length = this.array.length,
-          firstIndex = 0,
-          lastIndex = length - 1;
-
-    for (let index = lastIndex; index >= firstIndex; index--) {
-      const declaration = this.array[index];
-
-      callback(declaration, index);
-    }
-  }
+  backwardsForEach(callback) { backwardsForEach(this.array, callback); }
 
   unshift(declarations) {
     declarations.backwardsForEach((declaration) => {
-      const matches = declaration.checkMatches(this.array); ///
+      const matches = declaration.matchDeclarations(this); ///
 
       if (!matches) {
         this.array.unshift(declaration);

package/src/style/media.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { Query } from "occam-dom";
+import { Query } from "occam-query";
 
 import RuleSets from "./ruleSets";
 import Declarations from "./declarations";

package/src/style/medias.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { Query } from "occam-dom";
+import { Query } from "occam-query";
 
 import Media from "./media";
 

package/src/style/ruleSet.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { Query } from "occam-dom";
+import { Query } from "occam-query";
 
 import Declarations from "./declarations";
 

package/src/style/ruleSets.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { Query } from "occam-dom";
+import { Query } from "occam-query";
 
 import RuleSet from "./ruleSet";
 

package/src/utilities/styles.js

@@ -27,6 +27,8 @@ ${style}`;
   });
 
   headDOMElement.appendChild(styleDOMElement);
+
+  return styleDOMElement;
 }
 
 function renderStyles() {
@@ -51,11 +53,11 @@ function generateStyle(args, className, superStyle = null) {
         node = cssParser.parse(tokens),
         style = Style.fromNodeAndTokens(node, tokens);
 
-        if (superStyle !== null) {
-          style.extends(superStyle);
-        }
+  if (superStyle !== null) {
+    style.extends(superStyle);
+  }
 
-        styleMap[className] = style;
+  styleMap[className] = style;
 }
 
 function retrieveStyle(className) {