checkpoint

Author: shellscape

package.json

@@ -22,7 +22,7 @@
     "check-types": "tsc --noEmit",
     "lint-staged": "lint-staged",
     "security": "npm audit --audit-level=high --prod",
-    "test": "ava test/walker.ts"
+    "test": "ava test/word.ts"
   },
   "files": [
     "dist",

src/index.ts

@@ -15,16 +15,18 @@
 // - Node interfaces changed
 // - Walkers must be manually registered to avoid conflicts between different installed versions of
 //   postcss
-// - `2.` is non-spec and invalid (upstream; supported by css-tree)
+// - `2.` is non-spec and invalid (upstream; css-tree)
 // - `.2.3rem` Shouldn't Be Compliant(upstream; https://github.com/csstree/csstree/issues/194)
 // - modulus operators no longer spec-compliant https://www.w3.org/TR/css3-values/#calc-notation
 // - custom variable prefix no longer supported (upstream; css-tree)
 // - at-words (@word) aren't spec compliant within css values and have been removed
 // - `variables` option has been removed. only the `--` prefix is spec compliant for variables
-// - url-modifiers (e.g. functions within url()) aren't supported (upstream; https://github.com/csstree/csstree/issues/197)
+// - url-modifiers (e.g. functions within url(), url(var(...))) aren't spec compliant and aren't supported (upstream; https://github.com/csstree/csstree/issues/197)
 // - a comma (,) is considered an operator
 // - strings (Quoted) which are quoted, but unterminated with an ending matching quote mark no longer throw
 // - interpolation had to be removed as it is not spec compliant
+// - bare parens have their own node type (upstream; css-tree)
+// - comparison operators are not spec compliant and not supported. e.g. `(width < 1px)`, `(width < 1px) and (width < 2px)`
 
 import { parse } from './parser';
 import { stringify } from './stringify';

src/nodes/Container.ts

@@ -0,0 +1,41 @@
+/*
+  Copyright © 2018 Andrew Powell
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+  The above copyright notice and this permission notice shall be
+  included in all copies or substantial portions of this Source Code Form.
+*/
+import { Input, Container as PostCssContainer } from 'postcss';
+
+import { stringify } from '../stringify';
+
+import { Node, NodeOptions } from './Node';
+
+export class Container extends PostCssContainer {
+  public readonly value: string = '';
+
+  constructor(options?: NodeOptions) {
+    super({});
+
+    if (!this.nodes) this.nodes = [];
+
+    if (!options) return;
+
+    const { end, source, start } = options.node.loc as any;
+
+    this.source = { end, input: new Input(source), start };
+  }
+
+  // Note: The PostCSS types for .push seem a bit jacked up.
+  // it incorrectly expects properties for types on Declaration for anything being pushed
+  add(node: Container | Node) {
+    return this.push(node as any);
+  }
+
+  toString(stringifier = stringify) {
+    return super.toString(stringifier || {});
+  }
+}

src/nodes/Func.ts

@@ -0,0 +1,30 @@
+/*
+  Copyright © 2018 Andrew Powell
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+  The above copyright notice and this permission notice shall be
+  included in all copies or substantial portions of this Source Code Form.
+*/
+import { FunctionNode } from 'css-tree';
+
+import { Container } from './Container';
+import { NodeOptions } from './Node';
+
+const reColorFunctions = /^(hsla?|hwb|lab|lch|rgba?)$/i;
+const reVar = /^var$/i;
+
+export class Func extends Container {
+  readonly isColor: boolean = false;
+  readonly isVar: boolean = false;
+  readonly name: string = '<unknown>';
+  constructor(options: NodeOptions) {
+    super(options);
+    this.name = (options.node as FunctionNode).name;
+    this.isColor = reColorFunctions.test(this.name);
+    this.isVar = reVar.test(this.name);
+    this.type = 'func';
+  }
+}

src/nodes/Node.ts

@@ -21,7 +21,7 @@ export class Node extends PostCssNode {
   public readonly value: string = '';
 
   constructor(options?: NodeOptions) {
-    super(options);
+    super({});
 
     if (!options) return;
 

src/nodes/Parens.ts

@@ -0,0 +1,19 @@
+/*
+  Copyright © 2018 Andrew Powell
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+  The above copyright notice and this permission notice shall be
+  included in all copies or substantial portions of this Source Code Form.
+*/
+import { Container } from './Container';
+import { NodeOptions } from './Node';
+
+export class Parens extends Container {
+  constructor(options: NodeOptions) {
+    super(options);
+    this.type = 'parens';
+  }
+}

src/nodes/Root.ts

@@ -15,6 +15,7 @@ import { stringify } from '../stringify';
 import { Node } from './Node';
 
 export class Root extends PostCssRoot {
+  public readonly value = '';
   // Note: The PostCSS types for .push seem a bit jacked up.
   // it incorrectly expects properties for types on Declaration for anything being pushed
   add(node: Node) {

src/nodes/index.ts

@@ -1,6 +1,9 @@
+export { Container } from './Container';
+export { Func } from './Func';
 export { Node } from './Node';
 export { Numeric } from './Numeric';
 export { Operator } from './Operator';
+export { Parens } from './Parens';
 export { Root } from './Root';
 export { UnicodeRange } from './UnicodeRange';
 export { Word } from './Word';

src/parser.ts

@@ -8,7 +8,7 @@
   The above copyright notice and this permission notice shall be
   included in all copies or substantial portions of this Source Code Form.
 */
-import { parse as parseAst, Value } from 'css-tree';
+import { parse as parseAst, CssNode, CssNodePlain, List, Value } from 'css-tree';
 import { Input } from 'postcss';
 
 import { AstError, ParseError } from './errors';
@@ -28,6 +28,50 @@ export interface InterpolationOptions {
   prefix: string;
 }
 
+interface MaybeParent {
+  children: List<CssNode> | CssNodePlain[];
+}
+
+const assign = (parent: Nodes.Container, nodes: CssNode[]) => {
+  for (const node of nodes) {
+    let newNode: Nodes.Container | Nodes.Node;
+
+    switch (node.type) {
+      case 'Function':
+        newNode = new Nodes.Func({ node });
+        break;
+      case 'Dimension':
+      case 'Number':
+        newNode = new Nodes.Numeric({ node });
+        break;
+      case 'Operator':
+        newNode = new Nodes.Operator({ node });
+        break;
+      case 'Parentheses':
+        newNode = new Nodes.Parens({ node });
+        break;
+      case 'UnicodeRange':
+        newNode = new Nodes.UnicodeRange({ node });
+        break;
+      default:
+        newNode = new Nodes.Word({ node });
+        break;
+    }
+
+    const maybeParent = node as unknown as MaybeParent;
+
+    if (maybeParent.children) {
+      let children: CssNode[];
+      if (maybeParent.children instanceof List) children = maybeParent.children.toArray();
+      else ({ children } = maybeParent as any);
+
+      assign(newNode as Nodes.Container, children);
+    }
+
+    parent.add(newNode);
+  }
+};
+
 export const parse = (css: string, opts?: ParseOptions) => {
   // @ts-ignore
   // eslint-disable-next-line
@@ -55,23 +99,7 @@ export const parse = (css: string, opts?: ParseOptions) => {
 
   if (!nodes.length) throw new AstError();
 
-  for (const node of nodes) {
-    switch (node.type) {
-      case 'Dimension':
-      case 'Number':
-        root.add(new Nodes.Numeric({ node }));
-        break;
-      case 'Operator':
-        root.add(new Nodes.Operator({ node }));
-        break;
-      case 'UnicodeRange':
-        root.add(new Nodes.UnicodeRange({ node }));
-        break;
-      default:
-        root.add(new Nodes.Word({ node }));
-        break;
-    }
-  }
+  assign(root, nodes);
 
   return root;
 };

src/stringify.ts

@@ -57,6 +57,11 @@ export class ValuesStringifier extends Stringifier {
     this.basic(node);
   }
 
+  // FIXME: we need to render parens correctly
+  parens(node: any) {
+    this.basic(node);
+  }
+
   punctuation(node: any) {
     this.basic(node);
   }