checkpoint

Author: shellscape

package.json

@@ -22,24 +22,24 @@
     "check-types": "tsc --noEmit",
     "lint-staged": "lint-staged",
     "security": "npm audit --audit-level=high --prod",
-    "test": "ava test/variable.ts"
+    "test": "ava test/walker.ts"
   },
   "files": [
     "dist",
     "LICENSE",
     "README.md"
   ],
   "dependencies": {
-    "@types/color-name": "^1.1.1",
-    "@types/css-tree": "^1.0.7",
-    "@types/node": "^18.0.3",
     "color-name": "^1.1.4",
     "css-tree": "^2.1.0",
     "is-url-superb": "^4.0.0",
     "quote-unquote": "^1.0.0",
     "ts-node": "^10.8.2"
   },
   "devDependencies": {
+    "@types/color-name": "^1.1.1",
+    "@types/css-tree": "^1.0.7",
+    "@types/node": "^18.0.3",
     "ava": "^4.3.0",
     "chalk": "^4.1.0",
     "eslint-config-shellscape": "^5.0.2",

src/index.ts

@@ -10,6 +10,7 @@
 */
 
 // Breaking Changes:
+// - postcss-values-parser is now using css-tree which makes its behavior closers to how browsers parse values
 // - Comments and superfluous spaces filtered out (upstream; css-tree)
 // - Node interfaces changed
 // - Walkers must be manually registered to avoid conflicts between different installed versions of
@@ -18,6 +19,12 @@
 // - `.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)
+// - 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
 
 import { parse } from './parser';
 import { stringify } from './stringify';

src/nodes/Node.ts

@@ -20,9 +20,11 @@ export interface NodeOptions {
 export class Node extends PostCssNode {
   public readonly value: string = '';
 
-  constructor(options: NodeOptions) {
+  constructor(options?: NodeOptions) {
     super(options);
 
+    if (!options) return;
+
     const { end, source, start } = options.node.loc as any;
 
     this.source = { end, input: new Input(source), start };

src/nodes/Word.ts

@@ -17,21 +17,17 @@ const hexRegex = /^#(.+)/;
 const colorRegex = /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
 const colorNames = Object.keys(colors);
 
-export interface WordOptions extends NodeOptions {
-  variables: { prefixes: string[] };
-}
-
 export class Word extends Node {
-  readonly isColor: boolean;
-  readonly isHex: boolean;
-  readonly isUrl: boolean;
-  readonly isVariable: boolean;
-  private readonly options: WordOptions;
+  readonly isColor: boolean = false;
+  readonly isHex: boolean = false;
+  readonly isUrl: boolean = false;
+  readonly isVariable: boolean = false;
 
-  constructor(options: WordOptions) {
+  constructor(options?: NodeOptions) {
     super(options);
 
-    this.options = options;
+    // Note: in the event of something calling .clone
+    if (!options) return;
 
     const { node } = options;
 
@@ -58,9 +54,7 @@ export class Word extends Node {
   }
 
   testVariable() {
-    if (!this.options.variables) return false;
-
-    const { prefixes } = this.options.variables;
+    const prefixes = ['--'];
     const varRegex = new RegExp(`^(${prefixes.join('|')})`);
 
     return varRegex.test(this.value);

src/parser.ts

@@ -13,26 +13,24 @@ import { Input } from 'postcss';
 
 import { AstError, ParseError } from './errors';
 import * as Nodes from './nodes';
-import { WordOptions } from './nodes/Word';
 
-export interface ParseOptions extends Pick<WordOptions, 'variables'> {
+export interface ParseOptions {
   ignoreUnknownWords?: boolean;
   interpolation?: boolean | InterpolationOptions;
 }
 
 const defaults: ParseOptions = {
   ignoreUnknownWords: false,
-  interpolation: false,
-  variables: {
-    prefixes: ['--']
-  }
+  interpolation: false
 };
 
 export interface InterpolationOptions {
   prefix: string;
 }
 
 export const parse = (css: string, opts?: ParseOptions) => {
+  // @ts-ignore
+  // eslint-disable-next-line
   const options = Object.assign({}, defaults, opts);
   let ast: Value;
   const root = new Nodes.Root({
@@ -70,7 +68,7 @@ export const parse = (css: string, opts?: ParseOptions) => {
         root.add(new Nodes.UnicodeRange({ node }));
         break;
       default:
-        root.add(new Nodes.Word({ node, variables: options.variables }));
+        root.add(new Nodes.Word({ node }));
         break;
     }
   }

src/walker.ts

@@ -16,8 +16,10 @@ interface Container {
   prototype: any;
 }
 
+console.log(Object.values(Nodes));
+
 export const registerWalkers = (container: Container) => {
-  for (const Constructor of Nodes as any) {
+  for (const Constructor of Object.values(Nodes)) {
     let walkerName = `walk${Constructor.name}`;
 
     // plural sugar