From 45d58e93dfe7137fa9beafbcaf4a6cc75b3f3a50 Mon Sep 17 00:00:00 2001
From: Ido Rosenthal <idoros@gmail.com>
Date: Sun, 29 Aug 2021 12:53:11 +0300
Subject: [PATCH 01/16] feat: initial design for css value parser

---
 packages/css-value-parser/package.json        |  33 ++
 packages/css-value-parser/src/ast-types.ts    |  69 ++++
 .../css-value-parser/src/define-property.ts   |  69 ++++
 packages/css-value-parser/src/index.ts        |   6 +
 .../src/properties/background.ts              |  46 +++
 .../css-value-parser/src/properties/margin.ts |  36 ++
 packages/css-value-parser/src/tokenizer.ts    |  48 +++
 packages/css-value-parser/src/tsconfig.json   |   7 +
 packages/css-value-parser/src/value-parser.ts |  19 +
 .../test/define-property.spec.ts              | 355 ++++++++++++++++++
 .../test/properties/background.spec.ts        |  29 ++
 .../test/properties/margin.spec.ts            | 126 +++++++
 packages/css-value-parser/test/tsconfig.json  |   8 +
 .../test/value-parser.spec.ts                 |  76 ++++
 tsconfig.json                                 |   2 +
 15 files changed, 929 insertions(+)
 create mode 100644 packages/css-value-parser/package.json
 create mode 100644 packages/css-value-parser/src/ast-types.ts
 create mode 100644 packages/css-value-parser/src/define-property.ts
 create mode 100644 packages/css-value-parser/src/index.ts
 create mode 100644 packages/css-value-parser/src/properties/background.ts
 create mode 100644 packages/css-value-parser/src/properties/margin.ts
 create mode 100644 packages/css-value-parser/src/tokenizer.ts
 create mode 100644 packages/css-value-parser/src/tsconfig.json
 create mode 100644 packages/css-value-parser/src/value-parser.ts
 create mode 100644 packages/css-value-parser/test/define-property.spec.ts
 create mode 100644 packages/css-value-parser/test/properties/background.spec.ts
 create mode 100644 packages/css-value-parser/test/properties/margin.spec.ts
 create mode 100644 packages/css-value-parser/test/tsconfig.json
 create mode 100644 packages/css-value-parser/test/value-parser.spec.ts

diff --git a/packages/css-value-parser/package.json b/packages/css-value-parser/package.json
new file mode 100644
index 00000000..adb5732e
--- /dev/null
+++ b/packages/css-value-parser/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@tokey/css-value-parser",
+  "private": true,
+  "description": "value parser for css",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "mocha \"./dist/test/**/*.spec.js\""
+  },
+  "dependencies": {
+    "@tokey/core": "^1.2.1"
+  },
+  "keywords": [
+    "parser",
+    "css",
+    "value"
+  ],
+  "files": [
+    "src",
+    "dist",
+    "!dist/test",
+    "!*/tsconfig.{json,tsbuildinfo}"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Wix.com",
+  "license": "MIT",
+  "repository": "https://github.com/wixplosives/tokey/packages/css-value-parser",
+  "prettier": {},
+  "sideEffects": false
+}
diff --git a/packages/css-value-parser/src/ast-types.ts b/packages/css-value-parser/src/ast-types.ts
new file mode 100644
index 00000000..030f3636
--- /dev/null
+++ b/packages/css-value-parser/src/ast-types.ts
@@ -0,0 +1,69 @@
+export interface CSSValueAST<TYPE extends string> {
+  type: TYPE;
+  start: number;
+  end: number;
+}
+
+export type BaseAstNode = CustomIdent | DashedIdent | String | Number | Integer;
+
+/* types */
+
+// custom
+export type BuildVarAst = CSSValueAST<`build-var`> & {
+  subType: string;
+  id: string;
+};
+
+// separators
+export type RawComma = CSSValueAST<`,`>;
+export type RawSpace = CSSValueAST<` `>;
+
+// textual
+export type CustomIdent = CSSValueAST<`<custom-ident>`>;
+export type DashedIdent = CSSValueAST<`<dashed-ident>`>;
+export type String = CSSValueAST<`<string>`>;
+export type Url = CSSValueAST<`<url>`>;
+// numeric
+export type Integer = CSSValueAST<`<integer>`>;
+export type Number = CSSValueAST<`<number>`>;
+export type Percentage = CSSValueAST<`<percentage>`>;
+export type Ratio = CSSValueAST<`<ratio>`>;
+// distance
+export type Length = CSSValueAST<`<length>`>;
+// other quantities
+export type Angle = CSSValueAST<`<angle>`>;
+export type Time = CSSValueAST<`<time>`>;
+export type Frequency = CSSValueAST<`<frequency>`>;
+export type Resolution = CSSValueAST<`<resolution>`>;
+// other
+export type Color = CSSValueAST<`<color>`>;
+export type Image = CSSValueAST<`<image>`>;
+export type Position = CSSValueAST<`<position>`>;
+// attribute
+export type Attribute = CSSValueAST<`<attr()>`>;
+// mathematical
+/* 
+<calc()>
+<min()>
+<max()>
+<clamp()>
+<round()>
+<mod()>
+<rem()>
+<sin()>
+<cos()>
+<tan()>
+<asin()>
+<acos()>
+<atan()>
+<atan2()>
+<pow()>
+<sqrt()>
+<hypot()>
+<log()>
+<exp()>
+<abs()>
+<sign()>
+
+<calc-sum>, <calc-product>, <calc-value>, <calc-constant>
+*/
diff --git a/packages/css-value-parser/src/define-property.ts b/packages/css-value-parser/src/define-property.ts
new file mode 100644
index 00000000..90731e7e
--- /dev/null
+++ b/packages/css-value-parser/src/define-property.ts
@@ -0,0 +1,69 @@
+import type { CSSValueAST, BuildVarAst } from "./ast-types";
+import type { ParseResults } from "./value-parser";
+
+export declare function defineProperty<
+  FORMATS extends string,
+  CLASSIFICATIONS extends string,
+  TOP_COMMA extends boolean = false
+>(config: {
+  name: string;
+  syntax: string;
+  subSyntax?: Record<string, string>;
+  subProperties?: Record<string, ReturnType<typeof defineProperty>>;
+  topLevelCommaSeparation?: TOP_COMMA;
+  formats?: Record<FORMATS, string>;
+  classifications?: Record<
+    CLASSIFICATIONS,
+    | MatchClassification
+    | (TOP_COMMA extends true
+        ? {
+            match?: MatchClassification;
+            syntax?: string;
+            inTopLevelIndex?: (index: number, total: number) => boolean;
+            cssProperty?: ReturnType<typeof defineProperty>;
+          }
+        : {
+            match?: MatchClassification;
+            syntax?: string;
+            cssProperty?: ReturnType<typeof defineProperty>;
+          })
+  >;
+}): {
+  validate: (
+    ast: CSSValueAST<any>[],
+    options?: ActionParams
+  ) => [...errors: string[]];
+  getFormat: (ast: CSSValueAST<any>[], options?: ActionParams) => FORMATS;
+  classify: (
+    ast: CSSValueAST<any>[],
+    options?: ActionParams & { deep?: boolean; ignoreComments?: boolean }
+  ) => TOP_COMMA extends true
+    ? Record<CLASSIFICATIONS, Classification>[]
+    : Record<CLASSIFICATIONS, Classification>;
+};
+
+defineProperty.errors = {
+  unexpectedType: (node: CSSValueAST<any>, expectedType: string) =>
+    `expected to get ${expectedType}, but got ${node.type}`,
+  unexpectedComma: () => `unexpected comma`,
+};
+
+export interface ActionParams {
+  cssVars?: Record<string, CSSValueAST<any>[]>;
+  resolveBuildVar?: (node: BuildVarAst) => CSSValueAST<any>[];
+}
+
+type MatchClassification = (
+  node: CSSValueAST<any>,
+  info: {
+    index: number;
+    indexOfType: number;
+    amountOfType: number;
+  }
+) => boolean;
+
+type Classification = {
+  value: CSSValueAST<any>[];
+  resolved: { origin: ParseResults; nodes: CSSValueAST<any>[] }[][]; // ToDo: should probably be more detailed... need to see cases
+  isProperty: boolean;
+};
diff --git a/packages/css-value-parser/src/index.ts b/packages/css-value-parser/src/index.ts
new file mode 100644
index 00000000..152ceaa2
--- /dev/null
+++ b/packages/css-value-parser/src/index.ts
@@ -0,0 +1,6 @@
+export * from "./ast-types";
+export { parseCssValue } from "./value-parser";
+export { defineProperty } from "./define-property";
+// properties
+export { background } from "./properties/background";
+export { margin } from "./properties/margin";
diff --git a/packages/css-value-parser/src/properties/background.ts b/packages/css-value-parser/src/properties/background.ts
new file mode 100644
index 00000000..25a18da2
--- /dev/null
+++ b/packages/css-value-parser/src/properties/background.ts
@@ -0,0 +1,46 @@
+import { defineProperty } from "../define-property";
+
+export const background = defineProperty({
+  name: `background`,
+  syntax: `[ <bg-layer> , ]* <final-bg-layer>`,
+  subSyntax: {
+    "<bg-layer>": `<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>`,
+    "<final-bg-layer>": `<'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>`,
+  },
+  subProperties: {
+    // ToDo: define and add
+  },
+  topLevelCommaSeparation: true,
+  classifications: {
+    "background-image": () => {
+      return false;
+    },
+    "background-position": () => {
+      return false;
+    },
+    "background-size": {
+      syntax: `<bg-size>`,
+      match: () => true,
+    },
+    "background-repeat": () => {
+      return false;
+    },
+    "background-origin": () => {
+      return false;
+    },
+    "background-clip": () => {
+      return false;
+    },
+    "background-attachment": () => {
+      return false;
+    },
+    "background-color": {
+      inTopLevelIndex: (index, total) => {
+        return index === total - 1;
+      },
+      match: () => {
+        return false;
+      },
+    },
+  },
+});
diff --git a/packages/css-value-parser/src/properties/margin.ts b/packages/css-value-parser/src/properties/margin.ts
new file mode 100644
index 00000000..a131be10
--- /dev/null
+++ b/packages/css-value-parser/src/properties/margin.ts
@@ -0,0 +1,36 @@
+import { defineProperty } from "../define-property";
+
+const subMarginPlacements: Record<
+  "top" | "right" | "bottom" | "left",
+  [single: number, two: number, three: number, four: number]
+> = {
+  top: [0, 1, 0, 0],
+  left: [0, 0, 1, 3],
+  bottom: [0, 1, 2, 2],
+  right: [0, 0, 1, 1],
+};
+
+export const margin = defineProperty({
+  name: `margin`,
+  syntax: `<length>{1,4}`,
+  formats: {
+    all: `<length>`,
+    "horizontal-vertical": `<length><length>`,
+    "top-horizontal-bottom": `<length><length><length>`,
+    "top-right-bottom-left": `<length><length><length><length>`,
+  },
+  classifications: {
+    "margin-top": (_node, { amountOfType, indexOfType }) => {
+      return subMarginPlacements.top[amountOfType - 1] === indexOfType;
+    },
+    "margin-right": (_node, { amountOfType, indexOfType }) => {
+      return subMarginPlacements.right[amountOfType - 1] === indexOfType;
+    },
+    "margin-bottom": (_node, { amountOfType, indexOfType }) => {
+      return subMarginPlacements.bottom[amountOfType - 1] === indexOfType;
+    },
+    "margin-left": (_node, { amountOfType, indexOfType }) => {
+      return subMarginPlacements.left[amountOfType - 1] === indexOfType;
+    },
+  },
+});
diff --git a/packages/css-value-parser/src/tokenizer.ts b/packages/css-value-parser/src/tokenizer.ts
new file mode 100644
index 00000000..66cf69cd
--- /dev/null
+++ b/packages/css-value-parser/src/tokenizer.ts
@@ -0,0 +1,48 @@
+import {
+  tokenize,
+  isStringDelimiter,
+  isWhitespace,
+  createToken,
+  getJSCommentStartType,
+  getMultilineCommentStartType,
+  isCommentEnd,
+  getUnclosedComment,
+} from "@tokey/core";
+import type { Token, Descriptors } from "@tokey/core";
+
+type Delimiters = "(" | ")" | "," | "/" | "+" | "-" | "*" | "#";
+
+export type CSSValueToken = Token<Descriptors | Delimiters>;
+
+export function tokenizeValue(
+  source: string,
+  options: { offset?: number } = {}
+) {
+  const parseLineComments = false; // why would that be a choice?
+  return tokenize<CSSValueToken>(source, {
+    isDelimiter,
+    isStringDelimiter(char: string, previousChar: string) {
+      return previousChar !== `\\` && isStringDelimiter(char);
+    },
+    isWhitespace,
+    shouldAddToken: () => true,
+    createToken,
+    getCommentStartType: parseLineComments
+      ? getJSCommentStartType
+      : getMultilineCommentStartType,
+    isCommentEnd,
+    getUnclosedComment,
+    offset: options.offset,
+  });
+}
+
+const isDelimiter = (char: string, previousChar: string) =>
+  previousChar !== "\\" &&
+  (char === "(" ||
+    char === ")" ||
+    char === "," ||
+    char === "/" ||
+    char === "+" ||
+    char === "-" ||
+    char === "*" ||
+    char === "#");
diff --git a/packages/css-value-parser/src/tsconfig.json b/packages/css-value-parser/src/tsconfig.json
new file mode 100644
index 00000000..523ba2e0
--- /dev/null
+++ b/packages/css-value-parser/src/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../dist"
+  },
+  "references": [{ "path": "../../core/src" }]
+}
diff --git a/packages/css-value-parser/src/value-parser.ts b/packages/css-value-parser/src/value-parser.ts
new file mode 100644
index 00000000..fd0b661d
--- /dev/null
+++ b/packages/css-value-parser/src/value-parser.ts
@@ -0,0 +1,19 @@
+import type { BaseAstNode, RawComma, RawSpace } from "./ast-types";
+import { tokenizeValue } from "./tokenizer";
+import { Seeker } from "@tokey/core";
+
+export type ParseResults = Array<BaseAstNode | RawComma | RawSpace>;
+interface ParsingContext {
+  ast: ParseResults;
+  buffer: ParseResults;
+}
+export function parseCssValue(source: string, _options?: {parseBuildVar?: () => {id: string, subType: string}}): ParseResults {
+  const tokens = tokenizeValue(source);
+  return new Seeker(tokens).run<ParsingContext>(
+    () => {
+      /**/
+    },
+    { ast: [], buffer: [] },
+    source
+  ).ast;
+}
diff --git a/packages/css-value-parser/test/define-property.spec.ts b/packages/css-value-parser/test/define-property.spec.ts
new file mode 100644
index 00000000..f8810560
--- /dev/null
+++ b/packages/css-value-parser/test/define-property.spec.ts
@@ -0,0 +1,355 @@
+import { defineProperty, parseCssValue } from "@tokey/css-value-parser";
+import { expect } from "chai";
+
+describe(`value-parser/define-property`, () => {
+  describe(`validation`, () => {
+    it(`should approve valid syntax`, () => {
+      const p = defineProperty({
+        name: `my-prop`,
+        syntax: `<number>`,
+      });
+
+      expect(p.validate(parseCssValue(`55`))).to.equal([]);
+    });
+    it(`should warn on unexpected type`, () => {
+      const p = defineProperty({
+        name: `my-prop`,
+        syntax: `<number>`,
+      });
+
+      const ast = parseCssValue(`abc`);
+      const errors = p.validate(ast);
+
+      expect(errors).to.equal([
+        {
+          msg: defineProperty.errors.unexpectedType(ast[0], `number`),
+          ref: ast[0],
+        },
+      ]);
+    });
+    it(`should warn on top level comma`, () => {
+      const p = defineProperty({
+        name: `my-prop`,
+        syntax: `<number>`,
+      });
+
+      const ast = parseCssValue(`44,55`);
+      const errors = p.validate(ast);
+
+      expect(errors).to.equal([
+        {
+          msg: defineProperty.errors.unexpectedComma(),
+          ref: ast,
+        },
+      ]);
+    });
+    it(`should NOT warn on expected top level comma`, () => {
+      const p = defineProperty({
+        name: `my-prop`,
+        syntax: `<number>#`,
+        topLevelCommaSeparation: true,
+      });
+
+      const ast = parseCssValue(`44,55`);
+      const errors = p.validate(ast);
+
+      expect(errors).to.equal([]);
+    });
+  });
+  describe(`format`, () => {
+    it(`should match a defined format`, () => {
+      const p = defineProperty({
+        name: `my-prop`,
+        syntax: `<number> | <string> | <boolean>`,
+        formats: {
+          number: `<number>`,
+          string: `<string>`,
+          boolean: `<boolean>`,
+        },
+      });
+
+      expect(p.getFormat(parseCssValue(`55`)), `number`).to.eql(`number`);
+      expect(p.getFormat(parseCssValue(`xy`)), `string`).to.eql(`string`);
+      expect(p.getFormat(parseCssValue(`true`)), `boolean`).to.eql(`boolean`);
+      expect(p.getFormat(parseCssValue(`5px`)), `unknown`).to.eql(undefined);
+    });
+  });
+  describe(`classification`, () => {
+    it(`should classify inner parts`, () => {
+      const p = defineProperty({
+        name: `my-prop`,
+        syntax: `<number> <string>`,
+        classifications: {
+          amount: (node) => node.type === `<number>`,
+          name: (node) => node.type === `<string>`,
+        },
+      });
+
+      const ast = parseCssValue(`50 abc`);
+      const classification = p.classify(ast);
+
+      expect(classification.amount.value).to.equal(ast[0]);
+      expect(classification.name.value).to.equal(ast[2]);
+    });
+  });
+  describe(`vars`, () => {
+    // ToDo: handle unknown var
+    describe(`css properties`, () => {
+      it(`should resolve origin`, () => {
+        const p = defineProperty({
+          name: `my-prop`,
+          syntax: `<number>`,
+          classifications: {
+            amount: (node) => node.type === `<number>`,
+          },
+        });
+
+        const ast = parseCssValue(`var(--x)`);
+        const cssVars = {
+          x: parseCssValue(`123`),
+        };
+
+        expect(p.classify(ast, { cssVars })).deep.include({
+          amount: {
+            value: [cssVars.x[0]],
+            resolved: [
+              [
+                { origin: ast, nodes: [ast[0]] },
+                { origin: cssVars.x, nodes: [cssVars.x[0]] },
+              ],
+            ],
+          },
+        });
+      });
+      it(`should resolve multiple parts from single origin`, () => {
+        const p = defineProperty({
+          name: `my-prop`,
+          syntax: `<number> <number>`,
+          classifications: {
+            amountA: (node, { indexOfType }) =>
+              node.type === `<number>` && indexOfType === 0,
+            amountB: (node, { indexOfType }) =>
+              node.type === `<number>` && indexOfType === 1,
+          },
+        });
+
+        const ast = parseCssValue(`var(--x)`);
+        const cssVars = {
+          x: parseCssValue(`123 789`),
+        };
+
+        expect(p.classify(ast, { cssVars })).deep.include({
+          amountA: {
+            value: [cssVars.x[0]],
+            resolved: [
+              [
+                { origin: ast, nodes: [ast[0]] },
+                { origin: cssVars.x, nodes: [cssVars.x[0]] },
+              ],
+            ],
+          },
+          amountB: {
+            value: [cssVars.x[2]],
+            resolved: [
+              [
+                { origin: ast, nodes: [ast[0]] },
+                { origin: cssVars.x, nodes: [cssVars.x[2]] },
+              ],
+            ],
+          },
+        });
+      });
+      it(`should resolve multiple parts from multiple origins`, () => {
+        const p = defineProperty({
+          name: `my-prop`,
+          syntax: `<number> <number>`,
+          classifications: {
+            amountA: (node, { indexOfType }) =>
+              node.type === `<number>` && indexOfType === 0,
+            amountB: (node, { indexOfType }) =>
+              node.type === `<number>` && indexOfType === 1,
+          },
+        });
+
+        const ast = parseCssValue(`var(--x) var(--y)`);
+        const cssVars = {
+          x: parseCssValue(`123`),
+          y: parseCssValue(`789`),
+        };
+
+        expect(p.classify(ast, { cssVars })).deep.include({
+          amountA: {
+            value: [cssVars.x[0]],
+            resolved: [
+              [
+                { origin: ast, nodes: [ast[0]] },
+                { origin: cssVars.x, nodes: [cssVars.x[0]] },
+              ],
+            ],
+          },
+          amountB: {
+            value: [cssVars.y[0]],
+            resolved: [
+              [
+                { origin: ast, nodes: [ast[2]] },
+                { origin: cssVars.y, nodes: [cssVars.y[0]] },
+              ],
+            ],
+          },
+        });
+      });
+      it(`should resolve complex part from single origin`, () => {
+        const p = defineProperty({
+          name: `my-prop`,
+          syntax: `<length> <length>`,
+          classifications: {
+            position: {
+              syntax: `<length> <length>`,
+            },
+          },
+        });
+
+        const ast = parseCssValue(`var(--x)`);
+        const cssVars = {
+          x: parseCssValue(`1px 2px`),
+        };
+
+        expect(p.classify(ast, { cssVars })).deep.include({
+          position: {
+            value: [cssVars.x[0], cssVars.x[1], cssVars.x[2]],
+            resolved: [
+              [
+                { origin: ast, nodes: [ast[0]] },
+                { origin: cssVars.x, nodes: [cssVars.x[0]] },
+              ],
+              [
+                { origin: ast, nodes: [ast[0]] },
+                { origin: cssVars.x, nodes: [cssVars.x[1]] },
+              ],
+              [
+                { origin: ast, nodes: [ast[0]] },
+                { origin: cssVars.x, nodes: [cssVars.x[2]] },
+              ],
+            ],
+          },
+        });
+      });
+      it(`should resolve complex part from multiple origins`, () => {
+        const p = defineProperty({
+          name: `my-prop`,
+          syntax: `<length> <length>`,
+          classifications: {
+            position: {
+              syntax: `<length> <length>`,
+            },
+          },
+        });
+
+        const ast = parseCssValue(`var(--x) var(--y)`);
+        const cssVars = {
+          x: parseCssValue(`1px`),
+          y: parseCssValue(`2px`),
+        };
+
+        expect(p.classify(ast, { cssVars })).deep.include({
+          position: {
+            value: [cssVars.x[0], ast[1], cssVars.y[0]],
+            resolved: [
+              [
+                { origin: ast, nodes: [ast[0]] },
+                { origin: cssVars.x, nodes: [cssVars.x[0]] },
+              ],
+              [{ origin: ast, nodes: [ast[1]] }],
+              [
+                { origin: ast, nodes: [ast[2]] },
+                { origin: cssVars.y, nodes: [cssVars.y[0]] },
+              ],
+            ],
+          },
+        });
+      });
+      it(`should NOT resolve concatenated values`, () => {
+        const p = defineProperty({
+          name: `my-prop`,
+          syntax: `<length>`,
+          classifications: {
+            size: (node) => node.type === `<length>`,
+          },
+        });
+
+        const ast = parseCssValue(`var(--x)px`);
+        const cssVars = {
+          x: parseCssValue(`5`),
+        };
+
+        // ToDo: maybe all methods should always output errors
+        expect(p.classify(ast, { cssVars })).deep.include({
+          amount: {
+            ref: undefined,
+            resolved: [],
+          },
+        });
+      });
+    });
+    describe(`build vars`, () => {
+      const $varParser = {} as any;
+      it(`should resolve origin`, () => {
+        const p = defineProperty({
+          name: `my-prop`,
+          syntax: `<number>`,
+          classifications: {
+            amount: (node) => node.type === `<number>`,
+          },
+        });
+
+        const ast = parseCssValue(`$x`, { parseBuildVar: $varParser });
+        const buildVars: Record<string, ReturnType<typeof parseCssValue>> = {
+          $x: parseCssValue(`123`),
+        };
+
+        expect(
+          p.classify(ast, { resolveBuildVar: ({ id }) => buildVars[id] })
+        ).deep.include({
+          amount: {
+            value: [buildVars.$x[0]],
+            resolved: [
+              [
+                { origin: ast[0], nodes: [ast[0]] },
+                { origin: buildVars.$x, nodes: [buildVars.$x[0]] },
+              ],
+            ],
+          },
+        });
+      });
+      it(`should resolve concatenated origin`, () => {
+        const p = defineProperty({
+          name: `my-prop`,
+          syntax: `<length>`,
+          classifications: {
+            amount: (node) => node.type === `<number>`,
+          },
+        });
+
+        const ast = parseCssValue(`#($x)px`, { parseBuildVar: $varParser });
+        const buildVars: Record<string, ReturnType<typeof parseCssValue>> = {
+          $x: parseCssValue(`123`),
+        };
+
+        expect(
+          p.classify(ast, { resolveBuildVar: ({ id }) => buildVars[id] })
+        ).deep.include({
+          amount: {
+            value: [buildVars.$x[0], ast[1]],
+            resolved: [
+              [
+                { origin: ast, nodes: [ast[0]] },
+                { origin: buildVars.$x, nodes: [buildVars.$x[0]] },
+              ],
+              [{ origin: ast, nodes: [ast[1]] }],
+            ],
+          },
+        });
+      });
+    });
+  });
+});
diff --git a/packages/css-value-parser/test/properties/background.spec.ts b/packages/css-value-parser/test/properties/background.spec.ts
new file mode 100644
index 00000000..b64b8a6d
--- /dev/null
+++ b/packages/css-value-parser/test/properties/background.spec.ts
@@ -0,0 +1,29 @@
+import { parseCssValue, background } from "@tokey/css-value-parser";
+import { expect } from "chai";
+
+describe(`value-parser/properties/background`, () => {
+  it(`should resolve classification`, () => {
+    const ast = parseCssValue(
+      //0  1                                       2   3  4  5      6         7      8          9
+      `red linear-gradient(green 0%, yellow 100%) 40% 30% / auto border-box fixed padding-box repeat-x`
+    );
+
+    const classification = background.classify(ast);
+
+    expect(classification).to.eql([
+      {
+        "background-color": { ref: [ast[0]], isProperty: true }, // red
+        "background-image": { ref: [ast[1]], isProperty: true }, // linear-gradient
+        "background-position": {
+          ref: [ast[2], ast[3]],
+          isProperty: true,
+        }, // 40% 30%
+        "background-size": { ref: [ast[5]], isProperty: true }, // auto
+        "background-origin": { ref: [ast[6]], isProperty: true }, // border-box
+        "background-attachment": { ref: [ast[7]], isProperty: true }, // fixed
+        "background-clip": { ref: [ast[8]], isProperty: true }, // padding-box
+        "background-repeat": { ref: [ast[9]], isProperty: true }, // repeat-x
+      },
+    ]);
+  });
+});
diff --git a/packages/css-value-parser/test/properties/margin.spec.ts b/packages/css-value-parser/test/properties/margin.spec.ts
new file mode 100644
index 00000000..514f547f
--- /dev/null
+++ b/packages/css-value-parser/test/properties/margin.spec.ts
@@ -0,0 +1,126 @@
+import { parseCssValue, margin } from "@tokey/css-value-parser";
+import { expect } from "chai";
+/*
+- parse unknown syntax (property)
+- toShorthand
+- toLonghand
+- optimize
+- vars - handle build concatenation (buildvars/placeholders)
+- vars - handle runtime vars
+*/
+describe(`value-parser/properties/margin`, () => {
+  it(`should parse unknown syntax`, () => {
+    const twoValues = parseCssValue(`1px`);
+    expect(twoValues).to.eql([
+      {
+        type: `<length>`,
+        value: `1px`,
+      },
+      {
+        type: `<SEP>`,
+        value: ` `,
+      },
+      {
+        type: `<length>`,
+        value: `2px`,
+      },
+    ]);
+  });
+  it(`should resolve format`, () => {
+    const oneValue = parseCssValue(`1px`);
+    expect(margin.getFormat(oneValue)).to.eql(`all`);
+
+    const twoValues = parseCssValue(`1px 2px`);
+    expect(margin.getFormat(twoValues)).to.eql(`horizontal-vertical`);
+
+    const threeValues = parseCssValue(`1px 2px 3px`);
+    expect(margin.getFormat(threeValues)).to.eql(`top-horizontal-bottom`);
+
+    const fourValues = parseCssValue(`1px 2px 3px 4px`);
+    expect(margin.getFormat(fourValues)).to.eql(`top-right-bottom-left`);
+
+    const invalid = parseCssValue(`1px 2px 3px 4px 5px`);
+    expect(margin.getFormat(invalid)).to.eql(`invalid`);
+  });
+  describe(`classification`, () => {
+    it(`should resolve all formats`, () => {
+      const singleValue = parseCssValue(`1px`);
+      expect(margin.classify(singleValue), `single value`).to.eql({
+        "margin-top": { value: [singleValue[0]] },
+        "margin-right": { value: [singleValue[0]] },
+        "margin-bottom": { value: [singleValue[0]] },
+        "margin-left": { value: [singleValue[0]] },
+      });
+
+      const twoValues = parseCssValue(`1px 2px`);
+      expect(margin.classify(twoValues), `two values`).to.eql({
+        "margin-top": { value: [twoValues[2]] },
+        "margin-right": { value: [twoValues[0]] },
+        "margin-bottom": { value: [twoValues[2]] },
+        "margin-left": { value: [twoValues[0]] },
+      });
+
+      const threeValues = parseCssValue(`1px 2px 3px`);
+      expect(margin.classify(threeValues), `three values`).to.eql({
+        "margin-top": { value: [threeValues[0]] },
+        "margin-right": { value: [threeValues[2]] },
+        "margin-bottom": { value: [threeValues[4]] },
+        "margin-left": { value: [threeValues[2]] },
+      });
+
+      const fourValues = parseCssValue(`1px 2px 3px 4px`);
+      expect(margin.classify(threeValues), `four values`).to.eql({
+        "margin-top": { value: [fourValues[0]] },
+        "margin-right": { value: [fourValues[2]] },
+        "margin-bottom": { value: [fourValues[4]] },
+        "margin-left": { value: [fourValues[2]] },
+      });
+    });
+    it(`should resolve params`, () => {
+      const ast = parseCssValue(`var(--size)`);
+      const sizeParam = parseCssValue(`5px`);
+      const cssVars = {
+        size: sizeParam,
+      };
+
+      expect(margin.classify(ast, { cssVars }), `single value`).to.eql({
+        "margin-top": {
+          value: [cssVars.size[0]],
+          resolved: [
+            [
+              { origin: ast, nodes: [ast[0]] },
+              { origin: cssVars.size, nodes: [cssVars.size[0]] },
+            ],
+          ],
+        },
+        "margin-right": {
+          value: [cssVars.size[0]],
+          resolved: [
+            [
+              { origin: ast, nodes: [ast[0]] },
+              { origin: cssVars.size, nodes: [cssVars.size[0]] },
+            ],
+          ],
+        },
+        "margin-bottom": {
+          value: [cssVars.size[0]],
+          resolved: [
+            [
+              { origin: ast, nodes: [ast[0]] },
+              { origin: cssVars.size, nodes: [cssVars.size[0]] },
+            ],
+          ],
+        },
+        "margin-left": {
+          value: [cssVars.size[0]],
+          resolved: [
+            [
+              { origin: ast, nodes: [ast[0]] },
+              { origin: cssVars.size, nodes: [cssVars.size[0]] },
+            ],
+          ],
+        },
+      });
+    });
+  });
+});
diff --git a/packages/css-value-parser/test/tsconfig.json b/packages/css-value-parser/test/tsconfig.json
new file mode 100644
index 00000000..bf308c46
--- /dev/null
+++ b/packages/css-value-parser/test/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../dist/test",
+    "types": ["mocha"]
+  },
+  "references": [{ "path": "../src" }, { "path": "../../test-kit/src" }]
+}
diff --git a/packages/css-value-parser/test/value-parser.spec.ts b/packages/css-value-parser/test/value-parser.spec.ts
new file mode 100644
index 00000000..831fd935
--- /dev/null
+++ b/packages/css-value-parser/test/value-parser.spec.ts
@@ -0,0 +1,76 @@
+import { parseCssValue } from "@tokey/css-value-parser";
+import { expect } from "chai";
+/*
+- parse unknown syntax (property)
+- toShorthand
+- toLonghand
+- optimize
+*/
+describe(`value-parser`, () => {
+  describe(`base types`, () => {
+    [
+      {type: `comma`, source: `,`, expected: [{type: `sep`, value: `,`}]},
+      {type: `space`, source: ` `, expected: [{type: `sep`, value: ` `}]},
+      {type: `<custom-ident>`, source: `abc`, expected: [{type: `<custom-ident>`, value: `abc`}]},
+      {type: `<dashed-ident>`, source: `ab-c`, expected: [{type: `<dashed-ident>`, value: `ab-c`}]},
+      {type: `<string>`, source: `"abc"`, expected: [{type: `<string>`, value: `"abc"`}]},
+      // ToDo: add escaping cases to string
+      {type: `<url>`, source: `url("http://www.site.com")`, expected: [{type: `<url>`, value: `"http://www.site.com"`}]},
+      // ToDo: add url/src cases: https://www.w3.org/TR/css-values-4/#urls
+      {type: `<number>`, source: `1.5`, expected: [{type: `<number>`, value: `1.5`}]},
+      {type: `<percentage>`, source: `5%`, expected: [{type: `<percentage>`, value: `5`}]},
+      // ToDo: add cases to number / percentage
+      {type: `<length>`, source: `5px`, expected: [{type: `<length>`, value: `5`, unit: `px`}]},
+      // ToDo: add cases for: em, ex, cap, ch, ic, rem, lh, rlh, vw, vh, vi, vb, vmin, vmax, cm, mm, Q, in, pt, pc
+      {type: `<angle>`, source: `36deg`, expected: [{type: `<angle>`, value: `36`, unit: `deg`}]},
+      // ToDo: add cases for:  grad, rad, turn
+      {type: `<time>`, source: `88s`, expected: [{type: `<time>`, value: `88`, unit: `s`}]},
+      {type: `<time>`, source: `10ms`, expected: [{type: `<time>`, value: `10`, unit: `ms`}]},
+      {type: `<frequency>`, source: `2Hz`, expected: [{type: `<frequency>`, value: `2`, unit: `Hz`}]},
+      {type: `<frequency>`, source: `5kHz`, expected: [{type: `<frequency>`, value: `5`, unit: `kHz`}]},
+      {type: `<resolution>`, source: `100dpi`, expected: [{type: `<resolution>`, value: `100`, unit: `dpi`}]},
+      {type: `<resolution>`, source: `100dpcm`, expected: [{type: `<resolution>`, value: `100`, unit: `dpcm`}]},
+      {type: `<resolution>`, source: `100dppx`, expected: [{type: `<resolution>`, value: `100`, unit: `dppx`}]},
+      {type: `<color>`, source: `#000000`, expected: [{type: `<color>`, value: `#000000`}]},
+      // ToDo: figure out how to keep different color functions
+    ].forEach(({type, source, expected}) => {
+      it(`should parse "${type}" type`, () => {
+        expect(parseCssValue(source)).to.eql(expected)
+      });
+    });
+  });
+  // ToDo: add case insensitive tests
+  /**
+   some components cannot be parsed directly without a syntax context
+   - <ratio>: https://www.w3.org/TR/css-values-4/#ratios
+   - <integer>: https://www.w3.org/TR/css-values-4/#integers
+   - <image>: https://www.w3.org/TR/css-values-4/#images
+   - <position>: https://www.w3.org/TR/css-values-4/#position
+   */
+  it(`should parse flat ast nodes`, () => {
+    const ast = parseCssValue(`1px 2px,3px`);
+
+    expect(ast).to.eql([
+      {
+        type: `<length>`,
+        value: `1px`,
+      },
+      {
+        type: `sep`,
+        value: ` `,
+      },
+      {
+        type: `<length>`,
+        value: `2px`,
+      },
+      {
+        type: `sep`,
+        value: `,`,
+      },
+      {
+        type: `<length>`,
+        value: `3px`,
+      },
+    ]);
+  });
+});
diff --git a/tsconfig.json b/tsconfig.json
index d841edf3..3471a16f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,8 @@
     { "path": "./packages/test-kit/test" },
     { "path": "./packages/css-selector-parser/src" },
     { "path": "./packages/css-selector-parser/test" },
+    { "path": "./packages/css-value-parser/src" },
+    { "path": "./packages/css-value-parser/test" },
     { "path": "./packages/imports-parser/src" },
     { "path": "./packages/imports-parser/test" },
     { "path": "./packages/url-tokenizer/src" },

From b767da8bacd62ec929759dbf81b6aa118b068f1a Mon Sep 17 00:00:00 2001
From: Ido Rosenthal <idoros@gmail.com>
Date: Tue, 31 Aug 2021 14:42:42 +0300
Subject: [PATCH 02/16] test: redefine classify resolve format

- change format to tree structure
- add deep variable test
---
 .../test/define-property.spec.ts              | 148 ++++++++++++------
 1 file changed, 98 insertions(+), 50 deletions(-)

diff --git a/packages/css-value-parser/test/define-property.spec.ts b/packages/css-value-parser/test/define-property.spec.ts
index f8810560..45578d1e 100644
--- a/packages/css-value-parser/test/define-property.spec.ts
+++ b/packages/css-value-parser/test/define-property.spec.ts
@@ -39,7 +39,7 @@ describe(`value-parser/define-property`, () => {
       expect(errors).to.equal([
         {
           msg: defineProperty.errors.unexpectedComma(),
-          ref: ast,
+          ref: ast[1],
         },
       ]);
     });
@@ -113,10 +113,45 @@ describe(`value-parser/define-property`, () => {
           amount: {
             value: [cssVars.x[0]],
             resolved: [
-              [
-                { origin: ast, nodes: [ast[0]] },
-                { origin: cssVars.x, nodes: [cssVars.x[0]] },
-              ],
+              {
+                origin: ast,
+                nodes: [0],
+                resolved: [{ origin: cssVars.x, nodes: [0] }],
+              },
+            ],
+          },
+        });
+      });
+      it(`should resolve origin deep`, () => {
+        const p = defineProperty({
+          name: `my-prop`,
+          syntax: `<number>`,
+          classifications: {
+            amount: (node) => node.type === `<number>`,
+          },
+        });
+
+        const ast = parseCssValue(`var(--x)`);
+        const cssVars = {
+          x: parseCssValue(`var(--y)`),
+          y: parseCssValue(`123`),
+        };
+
+        expect(p.classify(ast, { cssVars })).deep.include({
+          amount: {
+            value: [cssVars.y[0]],
+            resolved: [
+              {
+                origin: ast,
+                nodes: [0],
+                resolved: [
+                  {
+                    origin: cssVars.x,
+                    nodes: [0],
+                    resolved: [{ origin: cssVars.y, nodes: [0] }],
+                  },
+                ],
+              },
             ],
           },
         });
@@ -142,18 +177,22 @@ describe(`value-parser/define-property`, () => {
           amountA: {
             value: [cssVars.x[0]],
             resolved: [
-              [
-                { origin: ast, nodes: [ast[0]] },
-                { origin: cssVars.x, nodes: [cssVars.x[0]] },
-              ],
+              {
+                origin: ast,
+                nodes: [0],
+                resolved: [{ origin: cssVars.x, nodes: [0] }],
+              },
             ],
           },
           amountB: {
             value: [cssVars.x[2]],
             resolved: [
               [
-                { origin: ast, nodes: [ast[0]] },
-                { origin: cssVars.x, nodes: [cssVars.x[2]] },
+                {
+                  origin: ast,
+                  nodes: [0],
+                  resolved: [{ origin: cssVars.x, nodes: [2] }],
+                },
               ],
             ],
           },
@@ -181,19 +220,21 @@ describe(`value-parser/define-property`, () => {
           amountA: {
             value: [cssVars.x[0]],
             resolved: [
-              [
-                { origin: ast, nodes: [ast[0]] },
-                { origin: cssVars.x, nodes: [cssVars.x[0]] },
-              ],
+              {
+                origin: ast,
+                nodes: [0],
+                resolved: [{ origin: cssVars.x, nodes: [0] }],
+              },
             ],
           },
           amountB: {
             value: [cssVars.y[0]],
             resolved: [
-              [
-                { origin: ast, nodes: [ast[2]] },
-                { origin: cssVars.y, nodes: [cssVars.y[0]] },
-              ],
+              {
+                origin: ast,
+                nodes: [2],
+                resolved: [{ origin: cssVars.y, nodes: [0] }],
+              },
             ],
           },
         });
@@ -218,18 +259,21 @@ describe(`value-parser/define-property`, () => {
           position: {
             value: [cssVars.x[0], cssVars.x[1], cssVars.x[2]],
             resolved: [
-              [
-                { origin: ast, nodes: [ast[0]] },
-                { origin: cssVars.x, nodes: [cssVars.x[0]] },
-              ],
-              [
-                { origin: ast, nodes: [ast[0]] },
-                { origin: cssVars.x, nodes: [cssVars.x[1]] },
-              ],
-              [
-                { origin: ast, nodes: [ast[0]] },
-                { origin: cssVars.x, nodes: [cssVars.x[2]] },
-              ],
+              {
+                origin: ast,
+                nodes: [0],
+                resolved: [{ origin: cssVars.x, nodes: [0] }],
+              },
+              {
+                origin: ast,
+                nodes: [0],
+                resolved: [{ origin: cssVars.x, nodes: [1] }],
+              },
+              {
+                origin: ast,
+                nodes: [0],
+                resolved: [{ origin: cssVars.x, nodes: [2] }],
+              },
             ],
           },
         });
@@ -255,15 +299,17 @@ describe(`value-parser/define-property`, () => {
           position: {
             value: [cssVars.x[0], ast[1], cssVars.y[0]],
             resolved: [
-              [
-                { origin: ast, nodes: [ast[0]] },
-                { origin: cssVars.x, nodes: [cssVars.x[0]] },
-              ],
-              [{ origin: ast, nodes: [ast[1]] }],
-              [
-                { origin: ast, nodes: [ast[2]] },
-                { origin: cssVars.y, nodes: [cssVars.y[0]] },
-              ],
+              {
+                origin: ast,
+                nodes: [0],
+                resolved: [{ origin: cssVars.x, nodes: [0] }],
+              },
+              { origin: ast, nodes: [1] },
+              {
+                origin: ast,
+                nodes: [2],
+                resolved: [{ origin: cssVars.y, nodes: [0] }],
+              },
             ],
           },
         });
@@ -313,10 +359,11 @@ describe(`value-parser/define-property`, () => {
           amount: {
             value: [buildVars.$x[0]],
             resolved: [
-              [
-                { origin: ast[0], nodes: [ast[0]] },
-                { origin: buildVars.$x, nodes: [buildVars.$x[0]] },
-              ],
+              {
+                origin: ast[0],
+                nodes: [0],
+                resolved: [{ origin: buildVars.$x, nodes: [0] }],
+              },
             ],
           },
         });
@@ -326,7 +373,7 @@ describe(`value-parser/define-property`, () => {
           name: `my-prop`,
           syntax: `<length>`,
           classifications: {
-            amount: (node) => node.type === `<number>`,
+            amount: (node) => node.type === `<length>`,
           },
         });
 
@@ -341,11 +388,12 @@ describe(`value-parser/define-property`, () => {
           amount: {
             value: [buildVars.$x[0], ast[1]],
             resolved: [
-              [
-                { origin: ast, nodes: [ast[0]] },
-                { origin: buildVars.$x, nodes: [buildVars.$x[0]] },
-              ],
-              [{ origin: ast, nodes: [ast[1]] }],
+              {
+                origin: ast,
+                nodes: [0],
+                resolved: [{ origin: buildVars.$x, nodes: [0] }],
+              },
+              { origin: ast, nodes: [ast[1]] },
             ],
           },
         });

From 4ab38e420fd6971f03bdd5976c523602290050ee Mon Sep 17 00:00:00 2001
From: Ido Rosenthal <idoros@gmail.com>
Date: Sun, 19 Sep 2021 17:37:18 +0300
Subject: [PATCH 03/16] feat: initial css value parser implementation

- changed define property from declare to function to run build/tests
---
 packages/css-value-parser/src/ast-types.ts    | 247 ++++++-
 .../css-value-parser/src/define-property.ts   |  10 +-
 packages/css-value-parser/src/index.ts        |   3 +-
 packages/css-value-parser/src/units.ts        |  27 +
 packages/css-value-parser/src/value-parser.ts | 391 ++++++++++-
 .../css-value-parser/src/value-stringify.ts   |  62 ++
 .../test/define-property.spec.ts              |  68 +-
 .../test/properties/background.spec.ts        |   4 +-
 .../test/properties/margin.spec.ts            |  26 +-
 .../test/value-parser.spec.ts                 | 645 ++++++++++++++++--
 10 files changed, 1344 insertions(+), 139 deletions(-)
 create mode 100644 packages/css-value-parser/src/units.ts
 create mode 100644 packages/css-value-parser/src/value-stringify.ts

diff --git a/packages/css-value-parser/src/ast-types.ts b/packages/css-value-parser/src/ast-types.ts
index 030f3636..8d9185c0 100644
--- a/packages/css-value-parser/src/ast-types.ts
+++ b/packages/css-value-parser/src/ast-types.ts
@@ -1,10 +1,38 @@
+import type {
+  lengthValidUnits,
+  angleValidUnits,
+  frequencyValidUnits,
+  resolutionValidUnits,
+  timeValidUnits,
+} from "./units";
+
 export interface CSSValueAST<TYPE extends string> {
   type: TYPE;
   start: number;
   end: number;
+  value: string;
 }
 
-export type BaseAstNode = CustomIdent | DashedIdent | String | Number | Integer;
+export type BaseAstNode =
+  | Literal
+  | Space
+  | Comment
+  | Invalid
+  | CustomIdent
+  | DashedIdent
+  | Call
+  | String
+  | Number
+  | Integer
+  | Length
+  | Angle
+  | Time
+  | Percentage
+  | Frequency
+  | Resolution
+  | Flex
+  | UnknownUnit
+  | Color;
 
 /* types */
 
@@ -13,10 +41,29 @@ export type BuildVarAst = CSSValueAST<`build-var`> & {
   subType: string;
   id: string;
 };
-
-// separators
-export type RawComma = CSSValueAST<`,`>;
-export type RawSpace = CSSValueAST<` `>;
+export type Literal = CSSValueAST<`literal`> & {
+  before: string;
+  after: string;
+};
+export type Space = CSSValueAST<`space`> & {
+  before: string;
+  after: string;
+};
+export type Comment = CSSValueAST<`comment`> & {
+  before: string;
+  after: string;
+};
+export type Call<TYPE extends string = "call"> = CSSValueAST<TYPE> & {
+  args: CSSValueAST<any>[];
+  before: string;
+  after: string;
+};
+type Unit<TYPE extends string, UNIT extends string> = CSSValueAST<TYPE> & {
+  unit: UNIT;
+  integer: boolean;
+};
+export type Invalid = CSSValueAST<`invalid`>;
+export type UnknownUnit = Unit<`unknown-unit`, string>;
 
 // textual
 export type CustomIdent = CSSValueAST<`<custom-ident>`>;
@@ -26,15 +73,22 @@ export type Url = CSSValueAST<`<url>`>;
 // numeric
 export type Integer = CSSValueAST<`<integer>`>;
 export type Number = CSSValueAST<`<number>`>;
-export type Percentage = CSSValueAST<`<percentage>`>;
+export type Percentage = Unit<`<percentage>`, `%`>;
 export type Ratio = CSSValueAST<`<ratio>`>;
 // distance
-export type Length = CSSValueAST<`<length>`>;
+export type Length = Unit<`<length>`, AnyCase<typeof lengthValidUnits[number]>>;
 // other quantities
-export type Angle = CSSValueAST<`<angle>`>;
-export type Time = CSSValueAST<`<time>`>;
-export type Frequency = CSSValueAST<`<frequency>`>;
-export type Resolution = CSSValueAST<`<resolution>`>;
+export type Flex = Unit<`<flex>`, AnyCase<`fr`>>;
+export type Angle = Unit<`<angle>`, AnyCase<typeof angleValidUnits[number]>>;
+export type Time = Unit<`<time>`, AnyCase<typeof timeValidUnits[number]>>;
+export type Frequency = Unit<
+  `<frequency>`,
+  AnyCase<typeof frequencyValidUnits[number]>
+>;
+export type Resolution = Unit<
+  `<resolution>`,
+  AnyCase<typeof resolutionValidUnits[number]>
+>;
 // other
 export type Color = CSSValueAST<`<color>`>;
 export type Image = CSSValueAST<`<image>`>;
@@ -67,3 +121,174 @@ export type Attribute = CSSValueAST<`<attr()>`>;
 
 <calc-sum>, <calc-product>, <calc-value>, <calc-constant>
 */
+/////////////////////
+type AnyCase<T extends string> = string extends T
+  ? string
+  : T extends `${infer F1}${infer F2}${infer R}`
+  ? `${Uppercase<F1> | Lowercase<F1>}${
+      | Uppercase<F2>
+      | Lowercase<F2>}${AnyCase<R>}`
+  : T extends `${infer F}${infer R}`
+  ? `${Uppercase<F> | Lowercase<F>}${AnyCase<R>}`
+  : "";
+/////////////////////
+
+export const invalid = (value: Partial<Invalid>): Invalid => ({
+  start: 0,
+  end: 0,
+  value: ``,
+  ...value,
+  type: `invalid`,
+});
+export const literal = (value: Partial<Literal>): Literal => ({
+  start: 0,
+  end: 0,
+  before: ``,
+  after: ``,
+  value: ``,
+  ...value,
+  type: `literal`,
+});
+export const space = (value: Partial<Space>): Space => ({
+  start: 0,
+  end: 0,
+  before: ``,
+  after: ``,
+  value: ` `,
+  ...value,
+  type: `space`,
+});
+export const comment = (value: Partial<Comment>): Comment => ({
+  start: 0,
+  end: 0,
+  before: ``,
+  after: ``,
+  value: ``,
+  ...value,
+  type: `comment`,
+});
+export const customIdent = (value: Partial<CustomIdent>): CustomIdent => ({
+  start: 0,
+  end: 0,
+  value: ``,
+  ...value,
+  type: `<custom-ident>`,
+});
+export const dashedIdent = (value: Partial<DashedIdent>): DashedIdent => ({
+  start: 0,
+  end: 0,
+  value: `-`,
+  ...value,
+  type: `<dashed-ident>`,
+});
+export const string = (value: Partial<String>): String => ({
+  start: 0,
+  end: 0,
+  value: `""`,
+  ...value,
+  type: `<string>`,
+});
+export const integer = (value: Partial<Integer>): Integer => ({
+  start: 0,
+  end: 0,
+  value: `0`,
+  ...value,
+  type: `<integer>`,
+});
+export const number = (value: Partial<Number>): Number => ({
+  start: 0,
+  end: 0,
+  value: `0`,
+  ...value,
+  type: `<number>`,
+});
+export const unknownUnit = (value: Partial<UnknownUnit>): UnknownUnit => ({
+  start: 0,
+  end: 0,
+  value: `0`,
+  unit: ``,
+  integer: false,
+  ...value,
+  type: `unknown-unit`,
+});
+export const length = (
+  value: Partial<Length> & Pick<Length, "unit">
+): Length => ({
+  start: 0,
+  end: 0,
+  value: `0`,
+  integer: false,
+  ...value,
+  type: `<length>`,
+});
+export const angle = (value: Partial<Angle> & Pick<Angle, "unit">): Angle => ({
+  start: 0,
+  end: 0,
+  value: `0`,
+  integer: false,
+  ...value,
+  type: `<angle>`,
+});
+export const percentage = (value: Partial<Percentage>): Percentage => ({
+  start: 0,
+  end: 0,
+  value: `0`,
+  unit: `%`,
+  integer: false,
+  ...value,
+  type: `<percentage>`,
+});
+export const flex = (value: Partial<Flex>): Flex => ({
+  start: 0,
+  end: 0,
+  value: `0`,
+  unit: `fr`,
+  integer: false,
+  ...value,
+  type: `<flex>`,
+});
+export const time = (value: Partial<Time> & Pick<Time, "unit">): Time => ({
+  start: 0,
+  end: 0,
+  value: `0`,
+  integer: false,
+  ...value,
+  type: `<time>`,
+});
+export const frequency = (
+  value: Partial<Frequency> & Pick<Frequency, "unit">
+): Frequency => ({
+  start: 0,
+  end: 0,
+  value: `0`,
+  integer: false,
+  ...value,
+  type: `<frequency>`,
+});
+export const resolution = (
+  value: Partial<Resolution> & Pick<Resolution, "unit">
+): Resolution => ({
+  start: 0,
+  end: 0,
+  value: `0`,
+  integer: false,
+  ...value,
+  type: `<resolution>`,
+});
+export const call = (value: Partial<Call>): Call => ({
+  start: 0,
+  end: 0,
+  value: ``,
+  args: value.args || [],
+  before: ``,
+  after: ``,
+  ...value,
+  type: `call`,
+});
+export const color = (value: Partial<Color>): Color => ({
+  start: 0,
+  end: 0,
+  value: `#000000`,
+  ...value,
+  type: `<color>`,
+});
diff --git a/packages/css-value-parser/src/define-property.ts b/packages/css-value-parser/src/define-property.ts
index 90731e7e..822c4b38 100644
--- a/packages/css-value-parser/src/define-property.ts
+++ b/packages/css-value-parser/src/define-property.ts
@@ -1,11 +1,11 @@
 import type { CSSValueAST, BuildVarAst } from "./ast-types";
 import type { ParseResults } from "./value-parser";
 
-export declare function defineProperty<
+export function defineProperty<
   FORMATS extends string,
   CLASSIFICATIONS extends string,
   TOP_COMMA extends boolean = false
->(config: {
+>(_config: {
   name: string;
   syntax: string;
   subSyntax?: Record<string, string>;
@@ -14,7 +14,7 @@ export declare function defineProperty<
   formats?: Record<FORMATS, string>;
   classifications?: Record<
     CLASSIFICATIONS,
-    | MatchClassification
+    | MatchClassification // ToDo: optional default value / required
     | (TOP_COMMA extends true
         ? {
             match?: MatchClassification;
@@ -40,7 +40,9 @@ export declare function defineProperty<
   ) => TOP_COMMA extends true
     ? Record<CLASSIFICATIONS, Classification>[]
     : Record<CLASSIFICATIONS, Classification>;
-};
+} {
+  return {} as any;
+}
 
 defineProperty.errors = {
   unexpectedType: (node: CSSValueAST<any>, expectedType: string) =>
diff --git a/packages/css-value-parser/src/index.ts b/packages/css-value-parser/src/index.ts
index 152ceaa2..69302ed0 100644
--- a/packages/css-value-parser/src/index.ts
+++ b/packages/css-value-parser/src/index.ts
@@ -1,5 +1,6 @@
 export * from "./ast-types";
-export { parseCssValue } from "./value-parser";
+export { parseCSSValue } from "./value-parser";
+export { stringifyCSSValue } from "./value-stringify";
 export { defineProperty } from "./define-property";
 // properties
 export { background } from "./properties/background";
diff --git a/packages/css-value-parser/src/units.ts b/packages/css-value-parser/src/units.ts
new file mode 100644
index 00000000..244dc367
--- /dev/null
+++ b/packages/css-value-parser/src/units.ts
@@ -0,0 +1,27 @@
+export const lengthValidUnits = [
+  `px`,
+  `em`,
+  `ex`,
+  `cap`,
+  `ch`,
+  `ic`,
+  `rem`,
+  `lh`,
+  `rlh`,
+  `vw`,
+  `vh`,
+  `vi`,
+  `vb`,
+  `vmin`,
+  `vmax`,
+  `cm`,
+  `mm`,
+  `q`,
+  `in`,
+  `pt`,
+  `pc`,
+] as const;
+export const angleValidUnits = [`deg`, `grad`, `rad`, `turn`] as const;
+export const timeValidUnits = [`s`, `ms`] as const;
+export const frequencyValidUnits = [`hz`, `khz`] as const;
+export const resolutionValidUnits = [`dpi`, `dpcm`, `dppx`] as const;
diff --git a/packages/css-value-parser/src/value-parser.ts b/packages/css-value-parser/src/value-parser.ts
index fd0b661d..e25bffaa 100644
--- a/packages/css-value-parser/src/value-parser.ts
+++ b/packages/css-value-parser/src/value-parser.ts
@@ -1,19 +1,378 @@
-import type { BaseAstNode, RawComma, RawSpace } from "./ast-types";
-import { tokenizeValue } from "./tokenizer";
-import { Seeker } from "@tokey/core";
+import {
+  BaseAstNode,
+  customIdent,
+  dashedIdent,
+  literal,
+  space,
+  string,
+  number,
+  unknownUnit,
+  length,
+  percentage,
+  angle,
+  time,
+  flex,
+  call,
+  frequency,
+  resolution,
+  integer,
+  color,
+  invalid,
+} from "./ast-types";
+import {
+  lengthValidUnits,
+  angleValidUnits,
+  timeValidUnits,
+  frequencyValidUnits,
+  resolutionValidUnits,
+} from "./units";
+import { tokenizeValue, CSSValueToken } from "./tokenizer";
+import { stringifyCSSValue } from "./value-stringify";
+import { Seeker, isComment } from "@tokey/core";
+import { comment } from ".";
 
-export type ParseResults = Array<BaseAstNode | RawComma | RawSpace>;
-interface ParsingContext {
-  ast: ParseResults;
-  buffer: ParseResults;
-}
-export function parseCssValue(source: string, _options?: {parseBuildVar?: () => {id: string, subType: string}}): ParseResults {
+export type ParseResults = Array<BaseAstNode>;
+
+export function parseCSSValue(
+  source: string,
+  _options?: { parseBuildVar?: () => { id: string; subType: string } }
+): ParseResults {
   const tokens = tokenizeValue(source);
-  return new Seeker(tokens).run<ParsingContext>(
-    () => {
-      /**/
-    },
-    { ast: [], buffer: [] },
-    source
-  ).ast;
+  return new Seeker(tokens).run<ParseResults>(handleToken, [], source);
+}
+
+function handleToken(
+  token: CSSValueToken,
+  ast: ParseResults,
+  source: string,
+  s: Seeker<CSSValueToken>
+): void {
+  const { type, value, start, end } = token;
+  if (type === `,` || type === `/`) {
+    ast.push(
+      literal({
+        start,
+        end,
+        value,
+      })
+    );
+  } else if (type === `space`) {
+    const firstSpace = value.indexOf(` `);
+    const before = firstSpace !== -1 ? value.substring(0, firstSpace) : ``;
+    const after =
+      firstSpace !== -1 ? value.substring(firstSpace + 1) : value.substring(1);
+    ast.push(
+      space({
+        value: firstSpace !== -1 ? ` ` : value[0],
+        start,
+        end,
+        before,
+        after,
+      })
+    );
+  } else if (type === `text` || type === `-`) {
+    // numbers and lengths
+    if (parseNumber(token, ast, source, s)) {
+      return;
+    }
+    const ident = collectIdent(token, ast, source, s);
+    if (s.peek().type === `(`) {
+      // function
+      s.next();
+      const args: ParseResults = [];
+      s.run(
+        (token, args) => {
+          if (token.type === ")") {
+            return false;
+          }
+          return handleToken(token, args, source, s);
+        },
+        args,
+        source
+      );
+      const before =
+        args.length && args[0].type === `space`
+          ? stringifyCSSValue(args.shift()!)
+          : ``;
+      const after =
+        args.length && args[args.length - 1].type === `space`
+          ? stringifyCSSValue(args.pop()!)
+          : ``;
+      ast.push(
+        call({
+          value: ident,
+          start,
+          end: s.peek(0).end,
+          args,
+          before,
+          after,
+        })
+      );
+    } else if (ident.match(/^--/)) {
+      // dashed ident
+      ast.push(
+        dashedIdent({
+          value: ident,
+          start: token.start,
+          end: s.peek(0).end,
+        })
+      );
+    } else if (ident.match(/^[-][a-z]|[a-z]/i)) {
+      // custom ident
+      ast.push(
+        customIdent({
+          value: ident,
+          start: token.start,
+          end: s.peek(0).end,
+        })
+      );
+    } else {
+      ast.push(
+        literal({
+          value: ident,
+          start,
+          end: s.peek(0).end,
+        })
+      );
+    }
+  } else if (type === `string`) {
+    ast.push(
+      string({
+        value,
+        start,
+        end,
+      })
+    );
+  } else if (type === `+`) {
+    if (parseNumber(token, ast, source, s)) {
+      return;
+    }
+    ast.push(
+      literal({
+        value,
+        start,
+        end,
+      })
+    );
+  } else if (type === `#`) {
+    const nextToken = s.next(); // #000000
+    const isValidColor =
+      nextToken.type === `text` &&
+      nextToken.value.match(/^[0-9a-f]{3,8}$/i) &&
+      nextToken.value.length !== 5 &&
+      nextToken.value.length !== 7;
+    if (isValidColor) {
+      ast.push(
+        color({
+          value: value + nextToken.value,
+          start,
+          end: nextToken.end,
+        })
+      );
+    } else {
+      s.back();
+      ast.push(
+        invalid({
+          value: `#`,
+          start,
+          end,
+        })
+      );
+    }
+  } else if (isComment(type)) {
+    ast.push(
+      comment({
+        value,
+        start,
+        end,
+      })
+    );
+  } else {
+    ast.push(
+      invalid({
+        value,
+        start,
+        end,
+      })
+    );
+  }
+}
+
+/** parse ident **/
+function collectIdent(
+  token: CSSValueToken,
+  _ast: ParseResults,
+  _source: string,
+  s: Seeker<CSSValueToken>
+) {
+  let collectedValue = ``;
+  let pickAmount = 0;
+  let current = token;
+  while (current.type === `text` || current.type === `-`) {
+    collectedValue += current.value;
+    pickAmount++;
+    current = s.peek(pickAmount);
+  }
+  s.index += pickAmount - 1;
+  return collectedValue;
+}
+
+/** parse number **/
+function parseNumber(
+  token: CSSValueToken,
+  ast: ParseResults,
+  _source: string,
+  s: Seeker<CSSValueToken>
+) {
+  const { value, start } = token;
+  let startMatch = isStartOfNumber(value);
+  if (!startMatch) {
+    return false;
+  }
+  let [numberValue, numberUnit] = startMatch;
+  // check number is a valid full number (e.g. 5em -> [5e, m])
+  if (numberUnit && !isNumber(numberValue)) {
+    const fullNumberMatch = startWithValidNumber(value);
+    if (!fullNumberMatch) {
+      // token is not a valid number: bail out
+      return;
+    }
+    // token is number with a unit
+    [numberValue, numberUnit] = fullNumberMatch;
+  }
+  let peekCount = 1;
+  if (!numberUnit) {
+    // collect potential extra number parts
+    let nextToken = s.peek(peekCount);
+    while (
+      nextToken.type === `-` ||
+      nextToken.type === `+` ||
+      nextToken.type === `text`
+    ) {
+      const nextValue = numberValue + nextToken.value;
+      // const validNumber = isNumber(nextValue);
+      startMatch = isStartOfNumber(nextValue);
+      if (!startMatch) {
+        if (!isNumber(numberValue)) {
+          // doesn't amount to a number: bail out
+          return;
+        }
+        // collected a number: stop collection
+        peekCount--;
+        break;
+      }
+      //
+      peekCount++;
+      const [matchedNumber, leftover] = startMatch;
+      numberValue = matchedNumber;
+      if (leftover) {
+        // leftover must be unit: no more number to collect
+        numberUnit = leftover;
+        break;
+      }
+      nextToken = s.peek(peekCount);
+    }
+    // check final collected number
+    if (!isNumber(numberValue)) {
+      // check for partial initial number (e.g 5e with m as unit)
+      const fullNumberMatch = startWithValidNumber(numberValue + numberUnit);
+      if (!fullNumberMatch) {
+        return;
+      }
+      [numberValue, numberUnit] = fullNumberMatch;
+    }
+    // forward index by the tokens used for number value
+    s.index += peekCount - 1;
+    // take potential unit
+    if (!numberUnit && s.peek().type === `text`) {
+      numberUnit = s.next().value;
+    }
+  }
+  const isInteger = numberValue.match(integerRegExp);
+  // add to ast
+  if (numberUnit) {
+    const nodeType =
+      knownUnits[numberUnit.toLowerCase() as keyof typeof knownUnits] ||
+      unknownUnit;
+    ast.push(
+      nodeType({
+        value: numberValue,
+        unit: numberUnit,
+        integer: !!isInteger,
+        start,
+        end: s.peek(0).end,
+      } as any)
+    );
+  } else {
+    const nodeType = isInteger ? integer : number;
+    ast.push(
+      nodeType({
+        value: numberValue,
+        start,
+        end: s.peek(0).end,
+      })
+    );
+  }
+  return true;
+}
+const knownUnits = {
+  "%": percentage,
+  fr: flex,
+  ...lengthValidUnits.reduce((units, unit) => {
+    units[unit] = length;
+    return units;
+  }, {} as Record<typeof lengthValidUnits[number], typeof length>),
+  ...angleValidUnits.reduce((units, unit) => {
+    units[unit] = angle;
+    return units;
+  }, {} as Record<typeof angleValidUnits[number], typeof angle>),
+  ...timeValidUnits.reduce((units, unit) => {
+    units[unit] = time;
+    return units;
+  }, {} as Record<typeof timeValidUnits[number], typeof time>),
+  ...frequencyValidUnits.reduce((units, unit) => {
+    units[unit] = frequency;
+    return units;
+  }, {} as Record<typeof frequencyValidUnits[number], typeof frequency>),
+  ...resolutionValidUnits.reduce((units, unit) => {
+    units[unit] = resolution;
+    return units;
+  }, {} as Record<typeof resolutionValidUnits[number], typeof resolution>),
+} as const;
+
+const NumberRegExp = /[-+]?(\d+\.?\d*|\d*\.?\d+)(e[-+]?\d+)?/i;
+const integerRegExp = /^[-+]?\d+$/i; // one or more decimal digits 0 through 9 (preceded by -/+ ) - https://www.w3.org/TR/css-values-4/#integer-value
+const validNumberRegex = [
+  /[-+]?(\d+\.?\d*|\d*\.?\d+)(e[-+]?\d*)?/, // float+exponential
+  /[-+]?\d+(e[-+]?\d*)?/, // int+exponential
+  /[-+]/, // sign
+]
+  .map((r) => r.source)
+  .join(`|`); // join with one-of ("or")
+
+/**
+ * Return true if the input is a valid number
+ * for Example:
+ * "5", "+5", "-5", "55", "5.", "5.5", "5e5", "5E5", "5.5e55", "5e-5", "5e+5"
+ * @param value string to test
+ * @returns true if value is valid as a number
+ */
+function isNumber(value: string) {
+  const match = value.match(NumberRegExp);
+  const numVal = match?.[0];
+  return !!numVal && numVal === value;
+}
+function isStartOfNumber(
+  value: string
+): false | [number: string, leftover: string] {
+  const match = value.match(new RegExp(validNumberRegex, `i`));
+  const numVal = match?.[0];
+  return numVal ? [numVal, value.substring(numVal.length)] : false;
+}
+function startWithValidNumber(
+  value: string
+): false | [number: string, leftover: string] {
+  const match = value.match(NumberRegExp);
+  const numVal = match?.[0];
+  return numVal ? [numVal, value.substring(numVal.length)] : false;
 }
diff --git a/packages/css-value-parser/src/value-stringify.ts b/packages/css-value-parser/src/value-stringify.ts
new file mode 100644
index 00000000..68b90e65
--- /dev/null
+++ b/packages/css-value-parser/src/value-stringify.ts
@@ -0,0 +1,62 @@
+import type {
+  BaseAstNode,
+  Literal,
+  Space,
+  Comment,
+  String,
+  Number,
+  Call,
+  CustomIdent,
+  DashedIdent,
+  Integer,
+  Angle,
+  Color,
+  Flex,
+  Frequency,
+  Invalid,
+  Length,
+  Percentage,
+  Resolution,
+  Time,
+  UnknownUnit,
+} from "./ast-types";
+
+export function stringifyCSSValue(ast: BaseAstNode | BaseAstNode[]) {
+  if (!Array.isArray(ast)) {
+    return stringifyNode(ast);
+  }
+  let result = ``;
+  for (const node of ast) {
+    result += stringifyNode(node);
+  }
+  return result;
+}
+function stringifyNode(node: BaseAstNode) {
+  return stringifyByType[node.type]?.(node as any) || ``;
+}
+
+type Printers = {
+  [K in BaseAstNode as K["type"]]: (node: K) => string;
+};
+const stringifyByType: Printers = {
+  space: ({ before, value, after }: Space) => before + value + after,
+  literal: ({ before, value, after }: Literal) => before + value + after,
+  invalid: ({ value }: Invalid) => value,
+  comment: ({ value }: Comment) => value,
+  call: ({ value, before, after, args }: Call) =>
+    `${value}(${before}${stringifyCSSValue(args)}${after})`,
+  "<custom-ident>": ({ value }: CustomIdent) => value,
+  "<dashed-ident>": ({ value }: DashedIdent) => value,
+  "<string>": ({ value }: String) => value,
+  "<number>": ({ value }: Number) => value,
+  "<integer>": ({ value }: Integer) => value,
+  "<length>": ({ value, unit }: Length) => value + unit,
+  "<percentage>": ({ value, unit }: Percentage) => value + unit,
+  "<angle>": ({ value, unit }: Angle) => value + unit,
+  "<time>": ({ value, unit }: Time) => value + unit,
+  "<frequency>": ({ value, unit }: Frequency) => value + unit,
+  "<resolution>": ({ value, unit }: Resolution) => value + unit,
+  "<flex>": ({ value, unit }: Flex) => value + unit,
+  "unknown-unit": ({ value, unit }: UnknownUnit) => value + unit,
+  "<color>": ({ value }: Color) => value,
+};
diff --git a/packages/css-value-parser/test/define-property.spec.ts b/packages/css-value-parser/test/define-property.spec.ts
index 45578d1e..ddb9527c 100644
--- a/packages/css-value-parser/test/define-property.spec.ts
+++ b/packages/css-value-parser/test/define-property.spec.ts
@@ -1,4 +1,4 @@
-import { defineProperty, parseCssValue } from "@tokey/css-value-parser";
+import { defineProperty, parseCSSValue } from "@tokey/css-value-parser";
 import { expect } from "chai";
 
 describe(`value-parser/define-property`, () => {
@@ -9,7 +9,7 @@ describe(`value-parser/define-property`, () => {
         syntax: `<number>`,
       });
 
-      expect(p.validate(parseCssValue(`55`))).to.equal([]);
+      expect(p.validate(parseCSSValue(`55`))).to.equal([]);
     });
     it(`should warn on unexpected type`, () => {
       const p = defineProperty({
@@ -17,12 +17,12 @@ describe(`value-parser/define-property`, () => {
         syntax: `<number>`,
       });
 
-      const ast = parseCssValue(`abc`);
+      const ast = parseCSSValue(`abc`);
       const errors = p.validate(ast);
 
       expect(errors).to.equal([
         {
-          msg: defineProperty.errors.unexpectedType(ast[0], `number`),
+          msg: defineProperty.errors.unexpectedType(ast[0], `<number>`),
           ref: ast[0],
         },
       ]);
@@ -33,7 +33,7 @@ describe(`value-parser/define-property`, () => {
         syntax: `<number>`,
       });
 
-      const ast = parseCssValue(`44,55`);
+      const ast = parseCSSValue(`44,55`);
       const errors = p.validate(ast);
 
       expect(errors).to.equal([
@@ -50,7 +50,7 @@ describe(`value-parser/define-property`, () => {
         topLevelCommaSeparation: true,
       });
 
-      const ast = parseCssValue(`44,55`);
+      const ast = parseCSSValue(`44,55`);
       const errors = p.validate(ast);
 
       expect(errors).to.equal([]);
@@ -68,10 +68,10 @@ describe(`value-parser/define-property`, () => {
         },
       });
 
-      expect(p.getFormat(parseCssValue(`55`)), `number`).to.eql(`number`);
-      expect(p.getFormat(parseCssValue(`xy`)), `string`).to.eql(`string`);
-      expect(p.getFormat(parseCssValue(`true`)), `boolean`).to.eql(`boolean`);
-      expect(p.getFormat(parseCssValue(`5px`)), `unknown`).to.eql(undefined);
+      expect(p.getFormat(parseCSSValue(`55`)), `number`).to.eql(`number`);
+      expect(p.getFormat(parseCSSValue(`xy`)), `string`).to.eql(`string`);
+      expect(p.getFormat(parseCSSValue(`true`)), `boolean`).to.eql(`boolean`);
+      expect(p.getFormat(parseCSSValue(`5px`)), `unknown`).to.eql(undefined);
     });
   });
   describe(`classification`, () => {
@@ -85,7 +85,7 @@ describe(`value-parser/define-property`, () => {
         },
       });
 
-      const ast = parseCssValue(`50 abc`);
+      const ast = parseCSSValue(`50 abc`);
       const classification = p.classify(ast);
 
       expect(classification.amount.value).to.equal(ast[0]);
@@ -104,9 +104,9 @@ describe(`value-parser/define-property`, () => {
           },
         });
 
-        const ast = parseCssValue(`var(--x)`);
+        const ast = parseCSSValue(`var(--x)`);
         const cssVars = {
-          x: parseCssValue(`123`),
+          x: parseCSSValue(`123`),
         };
 
         expect(p.classify(ast, { cssVars })).deep.include({
@@ -131,10 +131,10 @@ describe(`value-parser/define-property`, () => {
           },
         });
 
-        const ast = parseCssValue(`var(--x)`);
+        const ast = parseCSSValue(`var(--x)`);
         const cssVars = {
-          x: parseCssValue(`var(--y)`),
-          y: parseCssValue(`123`),
+          x: parseCSSValue(`var(--y)`),
+          y: parseCSSValue(`123`),
         };
 
         expect(p.classify(ast, { cssVars })).deep.include({
@@ -168,9 +168,9 @@ describe(`value-parser/define-property`, () => {
           },
         });
 
-        const ast = parseCssValue(`var(--x)`);
+        const ast = parseCSSValue(`var(--x)`);
         const cssVars = {
-          x: parseCssValue(`123 789`),
+          x: parseCSSValue(`123 789`),
         };
 
         expect(p.classify(ast, { cssVars })).deep.include({
@@ -210,10 +210,10 @@ describe(`value-parser/define-property`, () => {
           },
         });
 
-        const ast = parseCssValue(`var(--x) var(--y)`);
+        const ast = parseCSSValue(`var(--x) var(--y)`);
         const cssVars = {
-          x: parseCssValue(`123`),
-          y: parseCssValue(`789`),
+          x: parseCSSValue(`123`),
+          y: parseCSSValue(`789`),
         };
 
         expect(p.classify(ast, { cssVars })).deep.include({
@@ -250,9 +250,9 @@ describe(`value-parser/define-property`, () => {
           },
         });
 
-        const ast = parseCssValue(`var(--x)`);
+        const ast = parseCSSValue(`var(--x)`);
         const cssVars = {
-          x: parseCssValue(`1px 2px`),
+          x: parseCSSValue(`1px 2px`),
         };
 
         expect(p.classify(ast, { cssVars })).deep.include({
@@ -289,10 +289,10 @@ describe(`value-parser/define-property`, () => {
           },
         });
 
-        const ast = parseCssValue(`var(--x) var(--y)`);
+        const ast = parseCSSValue(`var(--x) var(--y)`);
         const cssVars = {
-          x: parseCssValue(`1px`),
-          y: parseCssValue(`2px`),
+          x: parseCSSValue(`1px`),
+          y: parseCSSValue(`2px`),
         };
 
         expect(p.classify(ast, { cssVars })).deep.include({
@@ -323,9 +323,9 @@ describe(`value-parser/define-property`, () => {
           },
         });
 
-        const ast = parseCssValue(`var(--x)px`);
+        const ast = parseCSSValue(`var(--x)px`);
         const cssVars = {
-          x: parseCssValue(`5`),
+          x: parseCSSValue(`5`),
         };
 
         // ToDo: maybe all methods should always output errors
@@ -348,9 +348,9 @@ describe(`value-parser/define-property`, () => {
           },
         });
 
-        const ast = parseCssValue(`$x`, { parseBuildVar: $varParser });
-        const buildVars: Record<string, ReturnType<typeof parseCssValue>> = {
-          $x: parseCssValue(`123`),
+        const ast = parseCSSValue(`$x`, { parseBuildVar: $varParser });
+        const buildVars: Record<string, ReturnType<typeof parseCSSValue>> = {
+          $x: parseCSSValue(`123`),
         };
 
         expect(
@@ -377,9 +377,9 @@ describe(`value-parser/define-property`, () => {
           },
         });
 
-        const ast = parseCssValue(`#($x)px`, { parseBuildVar: $varParser });
-        const buildVars: Record<string, ReturnType<typeof parseCssValue>> = {
-          $x: parseCssValue(`123`),
+        const ast = parseCSSValue(`#($x)px`, { parseBuildVar: $varParser });
+        const buildVars: Record<string, ReturnType<typeof parseCSSValue>> = {
+          $x: parseCSSValue(`123`),
         };
 
         expect(
diff --git a/packages/css-value-parser/test/properties/background.spec.ts b/packages/css-value-parser/test/properties/background.spec.ts
index b64b8a6d..9dffd101 100644
--- a/packages/css-value-parser/test/properties/background.spec.ts
+++ b/packages/css-value-parser/test/properties/background.spec.ts
@@ -1,9 +1,9 @@
-import { parseCssValue, background } from "@tokey/css-value-parser";
+import { parseCSSValue, background } from "@tokey/css-value-parser";
 import { expect } from "chai";
 
 describe(`value-parser/properties/background`, () => {
   it(`should resolve classification`, () => {
-    const ast = parseCssValue(
+    const ast = parseCSSValue(
       //0  1                                       2   3  4  5      6         7      8          9
       `red linear-gradient(green 0%, yellow 100%) 40% 30% / auto border-box fixed padding-box repeat-x`
     );
diff --git a/packages/css-value-parser/test/properties/margin.spec.ts b/packages/css-value-parser/test/properties/margin.spec.ts
index 514f547f..dbde9408 100644
--- a/packages/css-value-parser/test/properties/margin.spec.ts
+++ b/packages/css-value-parser/test/properties/margin.spec.ts
@@ -1,4 +1,4 @@
-import { parseCssValue, margin } from "@tokey/css-value-parser";
+import { parseCSSValue, margin } from "@tokey/css-value-parser";
 import { expect } from "chai";
 /*
 - parse unknown syntax (property)
@@ -10,7 +10,7 @@ import { expect } from "chai";
 */
 describe(`value-parser/properties/margin`, () => {
   it(`should parse unknown syntax`, () => {
-    const twoValues = parseCssValue(`1px`);
+    const twoValues = parseCSSValue(`1px`);
     expect(twoValues).to.eql([
       {
         type: `<length>`,
@@ -27,24 +27,24 @@ describe(`value-parser/properties/margin`, () => {
     ]);
   });
   it(`should resolve format`, () => {
-    const oneValue = parseCssValue(`1px`);
+    const oneValue = parseCSSValue(`1px`);
     expect(margin.getFormat(oneValue)).to.eql(`all`);
 
-    const twoValues = parseCssValue(`1px 2px`);
+    const twoValues = parseCSSValue(`1px 2px`);
     expect(margin.getFormat(twoValues)).to.eql(`horizontal-vertical`);
 
-    const threeValues = parseCssValue(`1px 2px 3px`);
+    const threeValues = parseCSSValue(`1px 2px 3px`);
     expect(margin.getFormat(threeValues)).to.eql(`top-horizontal-bottom`);
 
-    const fourValues = parseCssValue(`1px 2px 3px 4px`);
+    const fourValues = parseCSSValue(`1px 2px 3px 4px`);
     expect(margin.getFormat(fourValues)).to.eql(`top-right-bottom-left`);
 
-    const invalid = parseCssValue(`1px 2px 3px 4px 5px`);
+    const invalid = parseCSSValue(`1px 2px 3px 4px 5px`);
     expect(margin.getFormat(invalid)).to.eql(`invalid`);
   });
   describe(`classification`, () => {
     it(`should resolve all formats`, () => {
-      const singleValue = parseCssValue(`1px`);
+      const singleValue = parseCSSValue(`1px`);
       expect(margin.classify(singleValue), `single value`).to.eql({
         "margin-top": { value: [singleValue[0]] },
         "margin-right": { value: [singleValue[0]] },
@@ -52,7 +52,7 @@ describe(`value-parser/properties/margin`, () => {
         "margin-left": { value: [singleValue[0]] },
       });
 
-      const twoValues = parseCssValue(`1px 2px`);
+      const twoValues = parseCSSValue(`1px 2px`);
       expect(margin.classify(twoValues), `two values`).to.eql({
         "margin-top": { value: [twoValues[2]] },
         "margin-right": { value: [twoValues[0]] },
@@ -60,7 +60,7 @@ describe(`value-parser/properties/margin`, () => {
         "margin-left": { value: [twoValues[0]] },
       });
 
-      const threeValues = parseCssValue(`1px 2px 3px`);
+      const threeValues = parseCSSValue(`1px 2px 3px`);
       expect(margin.classify(threeValues), `three values`).to.eql({
         "margin-top": { value: [threeValues[0]] },
         "margin-right": { value: [threeValues[2]] },
@@ -68,7 +68,7 @@ describe(`value-parser/properties/margin`, () => {
         "margin-left": { value: [threeValues[2]] },
       });
 
-      const fourValues = parseCssValue(`1px 2px 3px 4px`);
+      const fourValues = parseCSSValue(`1px 2px 3px 4px`);
       expect(margin.classify(threeValues), `four values`).to.eql({
         "margin-top": { value: [fourValues[0]] },
         "margin-right": { value: [fourValues[2]] },
@@ -77,8 +77,8 @@ describe(`value-parser/properties/margin`, () => {
       });
     });
     it(`should resolve params`, () => {
-      const ast = parseCssValue(`var(--size)`);
-      const sizeParam = parseCssValue(`5px`);
+      const ast = parseCSSValue(`var(--size)`);
+      const sizeParam = parseCSSValue(`5px`);
       const cssVars = {
         size: sizeParam,
       };
diff --git a/packages/css-value-parser/test/value-parser.spec.ts b/packages/css-value-parser/test/value-parser.spec.ts
index 831fd935..66dc0bdc 100644
--- a/packages/css-value-parser/test/value-parser.spec.ts
+++ b/packages/css-value-parser/test/value-parser.spec.ts
@@ -1,76 +1,605 @@
-import { parseCssValue } from "@tokey/css-value-parser";
+import {
+  parseCSSValue,
+  stringifyCSSValue,
+  customIdent,
+  dashedIdent,
+  literal,
+  space,
+  invalid,
+  comment,
+  string,
+  integer,
+  number,
+  length,
+  percentage,
+  angle,
+  time,
+  flex,
+  call,
+  unknownUnit,
+  frequency,
+  resolution,
+  color,
+} from "@tokey/css-value-parser";
 import { expect } from "chai";
-/*
-- parse unknown syntax (property)
-- toShorthand
-- toLonghand
-- optimize
-*/
+
 describe(`value-parser`, () => {
-  describe(`base types`, () => {
+  interface TestDef {
+    type: string;
+    desc?: string;
+    source: string;
+    expected: ReturnType<typeof parseCSSValue>;
+  }
+  const test = ({ source, expected }: Pick<TestDef, `source` | `expected`>) => {
+    const ast = parseCSSValue(source);
+    expect(ast, `parse`).to.eql(expected);
+    expect(stringifyCSSValue(ast), `stringify`).to.equal(source);
+  };
+  const createTest = ({ type, source, expected, desc }: TestDef) => {
+    desc = desc ? ` (${desc})` : ``;
+    it(`should parse "${type}" type${desc}`, () => {
+      test({ source, expected });
+    });
+  };
+  describe(`space`, () => {
+    [
+      {
+        type: `space`,
+        source: ` `,
+        expected: [space({ value: ` `, start: 0, end: 1 })],
+      },
+      {
+        type: `space`,
+        desc: `with before&after`,
+        source: `\t   \n`,
+        expected: [
+          space({
+            value: ` `,
+            before: `\t`,
+            after: `  \n`,
+            start: 0,
+            end: 5,
+          }),
+        ],
+      },
+    ].forEach(createTest);
+  });
+  describe(`literals`, () => {
     [
-      {type: `comma`, source: `,`, expected: [{type: `sep`, value: `,`}]},
-      {type: `space`, source: ` `, expected: [{type: `sep`, value: ` `}]},
-      {type: `<custom-ident>`, source: `abc`, expected: [{type: `<custom-ident>`, value: `abc`}]},
-      {type: `<dashed-ident>`, source: `ab-c`, expected: [{type: `<dashed-ident>`, value: `ab-c`}]},
-      {type: `<string>`, source: `"abc"`, expected: [{type: `<string>`, value: `"abc"`}]},
-      // ToDo: add escaping cases to string
-      {type: `<url>`, source: `url("http://www.site.com")`, expected: [{type: `<url>`, value: `"http://www.site.com"`}]},
-      // ToDo: add url/src cases: https://www.w3.org/TR/css-values-4/#urls
-      {type: `<number>`, source: `1.5`, expected: [{type: `<number>`, value: `1.5`}]},
-      {type: `<percentage>`, source: `5%`, expected: [{type: `<percentage>`, value: `5`}]},
-      // ToDo: add cases to number / percentage
-      {type: `<length>`, source: `5px`, expected: [{type: `<length>`, value: `5`, unit: `px`}]},
-      // ToDo: add cases for: em, ex, cap, ch, ic, rem, lh, rlh, vw, vh, vi, vb, vmin, vmax, cm, mm, Q, in, pt, pc
-      {type: `<angle>`, source: `36deg`, expected: [{type: `<angle>`, value: `36`, unit: `deg`}]},
-      // ToDo: add cases for:  grad, rad, turn
-      {type: `<time>`, source: `88s`, expected: [{type: `<time>`, value: `88`, unit: `s`}]},
-      {type: `<time>`, source: `10ms`, expected: [{type: `<time>`, value: `10`, unit: `ms`}]},
-      {type: `<frequency>`, source: `2Hz`, expected: [{type: `<frequency>`, value: `2`, unit: `Hz`}]},
-      {type: `<frequency>`, source: `5kHz`, expected: [{type: `<frequency>`, value: `5`, unit: `kHz`}]},
-      {type: `<resolution>`, source: `100dpi`, expected: [{type: `<resolution>`, value: `100`, unit: `dpi`}]},
-      {type: `<resolution>`, source: `100dpcm`, expected: [{type: `<resolution>`, value: `100`, unit: `dpcm`}]},
-      {type: `<resolution>`, source: `100dppx`, expected: [{type: `<resolution>`, value: `100`, unit: `dppx`}]},
-      {type: `<color>`, source: `#000000`, expected: [{type: `<color>`, value: `#000000`}]},
-      // ToDo: figure out how to keep different color functions
-    ].forEach(({type, source, expected}) => {
-      it(`should parse "${type}" type`, () => {
-        expect(parseCssValue(source)).to.eql(expected)
+      {
+        type: `comma`,
+        source: `,`,
+        expected: [literal({ value: `,`, start: 0, end: 1 })],
+      },
+      {
+        type: `slash`,
+        source: `/`,
+        expected: [literal({ value: `/`, start: 0, end: 1 })],
+      },
+      {
+        type: `+`,
+        source: `+`,
+        expected: [literal({ value: `+`, start: 0, end: 1 })],
+      },
+      {
+        type: `-`,
+        source: `-`,
+        expected: [literal({ value: `-`, start: 0, end: 1 })],
+      },
+    ].forEach(createTest);
+  });
+  describe(`ident`, () => {
+    describe(`custom-ident`, () => {
+      [
+        {
+          type: `<custom-ident>`,
+          source: `abc`,
+          expected: [
+            customIdent({
+              value: `abc`,
+              start: 0,
+              end: 3,
+            }),
+          ],
+        },
+        {
+          type: `<custom-ident>`,
+          desc: `with dashes`,
+          source: `-a-b-c-`,
+          expected: [
+            customIdent({
+              value: `-a-b-c-`,
+              start: 0,
+              end: 7,
+            }),
+          ],
+        },
+      ].forEach(createTest);
+    });
+    describe(`dashed-ident`, () => {
+      [
+        {
+          type: `<dashed-ident>`,
+          source: `--abc`,
+          expected: [
+            dashedIdent({
+              value: `--abc`,
+              start: 0,
+              end: 5,
+            }),
+          ],
+        },
+      ].forEach(createTest);
+    });
+  });
+  describe(`textual`, () => {
+    [
+      {
+        type: `<string>`,
+        desc: `double quotes`,
+        source: `"abc"`,
+        expected: [string({ value: `"abc"`, start: 0, end: 5 })],
+      },
+      {
+        type: `<string>`,
+        desc: `single quotes`,
+        source: `'abc'`,
+        expected: [string({ value: `'abc'`, start: 0, end: 5 })],
+      },
+      {
+        type: `<string>`,
+        desc: `escaped in double quotes`,
+        source: `"ab\\"c'd'"`,
+        expected: [string({ value: `"ab\\"c'd'"`, start: 0, end: 10 })],
+      },
+      {
+        type: `<string>`,
+        desc: `escaped in single quotes`,
+        source: `'ab\\'c"d"'`,
+        expected: [string({ value: `'ab\\'c"d"'`, start: 0, end: 10 })],
+      },
+      {
+        type: `<string>`,
+        desc: `escaped newline`,
+        source: `"abc\\\n"`,
+        expected: [string({ value: `"abc\\\n"`, start: 0, end: 7 })],
+      },
+    ].forEach(createTest);
+  });
+  describe(`functions`, () => {
+    [
+      {
+        type: `call`,
+        source: `custom-call()`,
+        expected: [
+          call({
+            value: `custom-call`,
+            args: [],
+            start: 0,
+            end: 13,
+          }),
+        ],
+      },
+      {
+        type: `call`,
+        desc: `with argument`,
+        source: `custom-call(abc)`,
+        expected: [
+          call({
+            value: `custom-call`,
+            args: [customIdent({ value: `abc`, start: 12, end: 15 })],
+            start: 0,
+            end: 16,
+          }),
+        ],
+      },
+      {
+        type: `call`,
+        desc: `space before & after args`,
+        source: `custom-call(   abc  )`,
+        expected: [
+          call({
+            value: `custom-call`,
+            args: [customIdent({ value: `abc`, start: 15, end: 18 })],
+            before: `   `,
+            after: `  `,
+            start: 0,
+            end: 21,
+          }),
+        ],
+      },
+      {
+        type: `call`,
+        desc: `url`,
+        source: `url()`,
+        expected: [
+          call({
+            value: `url`,
+            args: [],
+            start: 0,
+            end: 5,
+          }),
+        ],
+      },
+      // ToDo: figure out how to provide build-in/custom function parser or maybe just validators
+      // {type: `<url>`, source: `url("http://www.site.com")`, expected: [{type: `<url>`, value: `"http://www.site.com"`}]},
+      // // ToDo: add url/src cases: https://www.w3.org/TR/css-values-4/#urls
+    ].forEach(createTest);
+  });
+  describe(`numeric`, () => {
+    describe(`integer`, () => {
+      [
+        {
+          type: `<integer>`,
+          source: `123`,
+          expected: [integer({ value: `123`, start: 0, end: 3 })],
+        },
+        {
+          /*note: type <zero> is parsed as an integer: https://www.w3.org/TR/css-values-4/#zero-value */
+          type: `<integer>`,
+          desc: `zero`,
+          source: `0`,
+          expected: [integer({ value: `0`, start: 0, end: 1 })],
+        },
+        {
+          type: `<integer>`,
+          desc: `sign +`,
+          source: `+5`,
+          expected: [integer({ value: `+5`, start: 0, end: 2 })],
+        },
+        {
+          type: `<integer>`,
+          desc: `sign -`,
+          source: `-5`,
+          expected: [integer({ value: `-5`, start: 0, end: 2 })],
+        },
+      ].forEach(createTest);
+    });
+    describe(`number`, () => {
+      [
+        {
+          type: `<number>`,
+          desc: `fractions`,
+          source: `1.5`,
+          expected: [number({ value: `1.5`, start: 0, end: 3 })],
+        },
+        {
+          type: `<number>`,
+          desc: `sign +`,
+          source: `+5.5`,
+          expected: [number({ value: `+5.5`, start: 0, end: 4 })],
+        },
+        {
+          type: `<number>`,
+          desc: `sign -`,
+          source: `-5.5`,
+          expected: [number({ value: `-5.5`, start: 0, end: 4 })],
+        },
+        {
+          type: `<number>`,
+          desc: `exponential`,
+          source: `1.5e55`,
+          expected: [number({ value: `1.5e55`, start: 0, end: 6 })],
+        },
+        {
+          // ToDo: make sure +- exponential works in CSS
+          type: `<number>`,
+          desc: `sign,`,
+          source: `-55.55E-55`,
+          expected: [number({ value: `-55.55E-55`, start: 0, end: 10 })],
+        },
+      ].forEach(createTest);
+    });
+  });
+  describe(`units`, () => {
+    describe(`length`, () => {
+      [
+        ...[
+          `em`,
+          `ex`,
+          `cap`,
+          `ch`,
+          `ic`,
+          `rem`,
+          `lh`,
+          `rlh`,
+          `vw`,
+          `vh`,
+          `vi`,
+          `vb`,
+          `vmin`,
+          `vmax`,
+          `cm`,
+          `mm`,
+          `Q`,
+          `in`,
+          `pt`,
+          `pc`,
+        ].map((unit: any) => ({
+          type: `<length>`,
+          desc: unit + ` integer`,
+          source: `5` + unit,
+          expected: [
+            length({
+              value: `5`,
+              unit,
+              integer: true,
+              start: 0,
+              end: 1 + unit.length,
+            }),
+          ],
+        })),
+      ].forEach(createTest);
+    });
+    describe(`percentage`, () => {
+      [
+        {
+          type: `<percentage>`,
+          source: `5%`,
+          expected: [
+            percentage({
+              value: `5`,
+              unit: `%`,
+              integer: true,
+              start: 0,
+              end: 2,
+            }),
+          ],
+        },
+      ].forEach(createTest);
+    });
+    describe(`angle`, () => {
+      [
+        ...[`deg`, `grad`, `rad`, `turn`].map((unit: any) => ({
+          type: `<angle>`,
+          desc: unit,
+          source: `5` + unit,
+          expected: [
+            angle({
+              value: `5`,
+              unit,
+              integer: true,
+              start: 0,
+              end: 1 + unit.length,
+            }),
+          ],
+        })),
+      ].forEach(createTest);
+    });
+    describe(`time`, () => {
+      [
+        ...[`s`, `ms`].map((unit: any) => ({
+          type: `<time>`,
+          desc: unit,
+          source: `5` + unit,
+          expected: [
+            time({
+              value: `5`,
+              unit,
+              integer: true,
+              start: 0,
+              end: 1 + unit.length,
+            }),
+          ],
+        })),
+      ].forEach(createTest);
+    });
+    describe(`frequency`, () => {
+      [
+        ...[`Hz`, `KHz`].map((unit: any) => ({
+          type: `<frequency>`,
+          desc: unit,
+          source: `5` + unit,
+          expected: [
+            frequency({
+              value: `5`,
+              unit,
+              integer: true,
+              start: 0,
+              end: 1 + unit.length,
+            }),
+          ],
+        })),
+      ].forEach(createTest);
+    });
+    describe(`resolution`, () => {
+      [
+        ...[`dpi`, `dpcm`, `dppx`].map((unit: any) => ({
+          type: `<resolution>`,
+          desc: unit,
+          source: `5` + unit,
+          expected: [
+            resolution({
+              value: `5`,
+              unit,
+              integer: true,
+              start: 0,
+              end: 1 + unit.length,
+            }),
+          ],
+        })),
+      ].forEach(createTest);
+    });
+    describe(`flex`, () => {
+      [
+        {
+          type: `<flex>`,
+          source: `5fr`,
+          expected: [
+            flex({
+              value: `5`,
+              unit: `fr`,
+              integer: true,
+              start: 0,
+              end: 3,
+            }),
+          ],
+        },
+      ].forEach(createTest);
+    });
+    describe(`unknown`, () => {
+      [
+        {
+          type: `unknown-unit`,
+          source: `5unknown`,
+          expected: [
+            unknownUnit({
+              value: `5`,
+              unit: `unknown`,
+              integer: true,
+              start: 0,
+              end: 8,
+            }),
+          ],
+        },
+      ].forEach(createTest);
+    });
+    it(`should flag non integer amount`, () => {
+      test({
+        source: `5.5em`,
+        expected: [
+          length({
+            value: `5.5`,
+            unit: `em`,
+            integer: false,
+            start: 0,
+            end: 5,
+          }),
+        ],
       });
     });
   });
-  // ToDo: add case insensitive tests
-  /**
-   some components cannot be parsed directly without a syntax context
-   - <ratio>: https://www.w3.org/TR/css-values-4/#ratios
-   - <integer>: https://www.w3.org/TR/css-values-4/#integers
-   - <image>: https://www.w3.org/TR/css-values-4/#images
-   - <position>: https://www.w3.org/TR/css-values-4/#position
-   */
-  it(`should parse flat ast nodes`, () => {
-    const ast = parseCssValue(`1px 2px,3px`);
-
-    expect(ast).to.eql([
+  describe(`color`, () => {
+    describe(`RGB hexadecimal`, () => {
+      [
+        {
+          type: `<color>`,
+          desc: `6 digits hex`,
+          source: `#0F1e3D`,
+          expected: [color({ value: `#0F1e3D`, start: 0, end: 7 })],
+        },
+        {
+          type: `<color>`,
+          desc: `3 digits hex`,
+          source: `#012`,
+          expected: [color({ value: `#012`, start: 0, end: 4 })],
+        },
+        {
+          type: `<color>`,
+          desc: `4 digits hex`,
+          source: `#0123`,
+          expected: [color({ value: `#0123`, start: 0, end: 5 })],
+        },
+        {
+          type: `<color>`,
+          desc: `8 digits hex`,
+          source: `#01234567`,
+          expected: [color({ value: `#01234567`, start: 0, end: 9 })],
+        },
+      ].forEach(createTest);
+    });
+  });
+  describe(`comment`, () => {
+    [
       {
-        type: `<length>`,
-        value: `1px`,
+        type: `comment`,
+        source: `/*123*/`,
+        expected: [comment({ value: `/*123*/`, start: 0, end: 7 })],
       },
       {
-        type: `sep`,
-        value: ` `,
+        type: `comment`,
+        desc: `special chars`,
+        source: `/*'"/ +-#,\n\t\r\f()[]{}\\*\\/*/`,
+        expected: [
+          comment({
+            value: `/*'"/ +-#,\n\t\r\f()[]{}\\*\\/*/`,
+            start: 0,
+            end: 26,
+          }),
+        ],
       },
+    ].forEach(createTest);
+  });
+  describe(`invalid`, () => {
+    [
       {
-        type: `<length>`,
-        value: `2px`,
+        type: `invalid`,
+        desc: `un-opened parentheses`,
+        source: `)`,
+        expected: [invalid({ value: `)`, start: 0, end: 1 })],
       },
       {
-        type: `sep`,
-        value: `,`,
+        type: `invalid`,
+        desc: `standalone hash`,
+        source: `#`,
+        expected: [invalid({ value: `#`, start: 0, end: 1 })],
       },
       {
-        type: `<length>`,
-        value: `3px`,
+        type: `invalid`,
+        desc: `unknown hex length`,
+        source: `#1 #12 #12345 #1234567 #123456789`,
+        expected: [
+          invalid({ value: `#`, start: 0, end: 1 }),
+          integer({ value: `1`, start: 1, end: 2 }),
+          space({ value: ` `, start: 2, end: 3 }),
+          invalid({ value: `#`, start: 3, end: 4 }),
+          integer({ value: `12`, start: 4, end: 6 }),
+          space({ value: ` `, start: 6, end: 7 }),
+          invalid({ value: `#`, start: 7, end: 8 }),
+          integer({ value: `12345`, start: 8, end: 13 }),
+          space({ value: ` `, start: 13, end: 14 }),
+          invalid({ value: `#`, start: 14, end: 15 }),
+          integer({ value: `1234567`, start: 15, end: 22 }),
+          space({ value: ` `, start: 22, end: 23 }),
+          invalid({ value: `#`, start: 23, end: 24 }),
+          integer({ value: `123456789`, start: 24, end: 33 }),
+        ],
       },
-    ]);
+    ].forEach(createTest);
+  });
+  // ToDo: add case insensitive tests
+  /**
+   some components cannot be parsed directly without a syntax context
+   - <ratio>: https://www.w3.org/TR/css-values-4/#ratios
+   - <image>: https://www.w3.org/TR/css-values-4/#images
+   - <position>: https://www.w3.org/TR/css-values-4/#position
+   */
+  it(`should parse flat ast nodes`, () => {
+    test({
+      source: `1px 2px,3px`,
+      expected: [
+        length({
+          value: `1`,
+          unit: `px`,
+          integer: true,
+          start: 0,
+          end: 3,
+        }),
+        space({
+          value: ` `,
+          start: 3,
+          end: 4,
+        }),
+        length({
+          value: `2`,
+          unit: `px`,
+          integer: true,
+          start: 4,
+          end: 7,
+        }),
+        literal({
+          value: `,`,
+          start: 7,
+          end: 8,
+        }),
+        length({
+          value: `3`,
+          unit: `px`,
+          integer: true,
+          start: 8,
+          end: 11,
+        }),
+      ],
+    });
   });
 });

From 06d924c3f9874f9de4613d5ff16d4e38176d72ee Mon Sep 17 00:00:00 2001
From: Barak Igal <baraki@wix.com>
Date: Wed, 22 Sep 2021 13:17:34 +0300
Subject: [PATCH 04/16] feat: value syntax parser (wip)

---
 demos/css-value-syntax-parser.html            |   25 +
 demos/css-value-syntax-parser.ts              |   30 +
 demos/css/style.css                           |    6 +
 package.json                                  |    2 +-
 packages/core/src/seeker.ts                   |    6 +
 packages/css-value-parser/src/index.ts        |    2 +
 .../css-value-parser/src/value-definitions.ts | 2014 +++++++++++++++++
 .../src/value-syntax-parser.ts                |  488 ++++
 .../test/css-value-syntax.spec.ts             |  255 +++
 packages/test-kit/src/parse-tester.ts         |   21 +-
 scripts/dev-server.js                         |    6 +-
 yarn.lock                                     |    8 +-
 12 files changed, 2842 insertions(+), 21 deletions(-)
 create mode 100644 demos/css-value-syntax-parser.html
 create mode 100644 demos/css-value-syntax-parser.ts
 create mode 100644 packages/css-value-parser/src/value-definitions.ts
 create mode 100644 packages/css-value-parser/src/value-syntax-parser.ts
 create mode 100644 packages/css-value-parser/test/css-value-syntax.spec.ts

diff --git a/demos/css-value-syntax-parser.html b/demos/css-value-syntax-parser.html
new file mode 100644
index 00000000..94a3e382
--- /dev/null
+++ b/demos/css-value-syntax-parser.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Tokens</title>
+    <link rel="stylesheet" href="./css/style.css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "@tokey/core": "/packages/core/src/index.ts"
+        }
+      }
+    </script>
+  </head>
+  <body class="flex-col">
+    <section id="top-bar"></section>
+    <main>
+      <textarea id="input"><number></textarea>
+      <pre id="output"></pre>
+    </main>
+    <script type="module" src="./css-value-syntax-parser.ts"></script>
+  </body>
+</html>
diff --git a/demos/css-value-syntax-parser.ts b/demos/css-value-syntax-parser.ts
new file mode 100644
index 00000000..670cbff6
--- /dev/null
+++ b/demos/css-value-syntax-parser.ts
@@ -0,0 +1,30 @@
+import { initPreview } from './client/view';
+import { parseValueSyntax } from '../packages/css-value-parser/src/value-syntax-parser';
+import { valueDefinitions } from '../packages/css-value-parser/src/value-definitions';
+
+const topBar = document.getElementById('top-bar');
+const input = document.getElementById('input') as HTMLTextAreaElement;
+const output = document.getElementById('output');
+const select = document.createElement('select');
+
+Object.keys(valueDefinitions.props).forEach((key) => {
+    const option = document.createElement('option');
+    option.value = valueDefinitions.props[key].syntax;
+    option.textContent = key;
+    select.appendChild(option);
+});
+
+select.selectedIndex = 0;
+topBar.appendChild(select);
+
+initPreview(input, output, (...args) => [parseValueSyntax(...args)]);
+
+select.onchange = () => {
+    setValue(select.value);
+};
+
+function setValue(value) {
+    input.value = value;
+    document.dispatchEvent(new CustomEvent('playground:updateOutput'));
+}
+setValue(select.value);
diff --git a/demos/css/style.css b/demos/css/style.css
index 994d8a81..4f809e88 100644
--- a/demos/css/style.css
+++ b/demos/css/style.css
@@ -10,6 +10,7 @@ html {
 main {
   height: 100%;
   display: flex;
+  overflow: hidden;
 }
 main > * {
   flex: 1 0 50%;
@@ -33,3 +34,8 @@ main > * {
 [data-in-rage='true'] {
   font-weight: bolder;
 }
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/package.json b/package.json
index 6dc7c08c..18ded6e9 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "pleb": "^3.4.5",
     "prettier": "^2.3.2",
     "rimraf": "^3.0.2",
-    "typescript": "~4.3.5"
+    "typescript": "~4.4.2"
   },
   "engines": {
     "node": ">=12"
diff --git a/packages/core/src/seeker.ts b/packages/core/src/seeker.ts
index 2018018f..360adf04 100644
--- a/packages/core/src/seeker.ts
+++ b/packages/core/src/seeker.ts
@@ -25,6 +25,12 @@ export class Seeker<T extends Token<unknown>> {
     }
     return undefined;
   }
+  eat(type: T["type"]) {
+    while (this.peek().type === type) {
+      this.index++;
+    }
+    return this;
+  }
   takeMany(type: T["type"]) {
     const tokens = [];
     while (this.peek().type === type) {
diff --git a/packages/css-value-parser/src/index.ts b/packages/css-value-parser/src/index.ts
index 69302ed0..a71000fa 100644
--- a/packages/css-value-parser/src/index.ts
+++ b/packages/css-value-parser/src/index.ts
@@ -5,3 +5,5 @@ export { defineProperty } from "./define-property";
 // properties
 export { background } from "./properties/background";
 export { margin } from "./properties/margin";
+// syntax
+export { parseValueSyntax } from "./value-syntax-parser";
diff --git a/packages/css-value-parser/src/value-definitions.ts b/packages/css-value-parser/src/value-definitions.ts
new file mode 100644
index 00000000..72491b7c
--- /dev/null
+++ b/packages/css-value-parser/src/value-definitions.ts
@@ -0,0 +1,2014 @@
+export const valueDefinitions = {
+  props: {
+    "<'--*'>": {
+      syntax: "<declaration-value>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/--*",
+    },
+    "<'accent-color'>": {
+      syntax: "auto | <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color",
+    },
+    "<'align-content'>": {
+      syntax:
+        "normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/align-content",
+    },
+    "<'align-items'>": {
+      syntax:
+        "normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/align-items",
+    },
+    "<'align-self'>": {
+      syntax:
+        "auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/align-self",
+    },
+    "<'align-tracks'>": {
+      syntax:
+        "[ normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> ]#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/align-tracks",
+    },
+    "<'all'>": {
+      syntax: "initial | inherit | unset | revert",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/all",
+    },
+    "<'animation'>": {
+      syntax: "<single-animation>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation",
+      subProps: [
+        "<'animation-delay'>",
+        "<'animation-direction'>",
+        "<'animation-duration'>",
+        "<'animation-fill-mode'>",
+        "<'animation-iteration-count'>",
+        "<'animation-name'>",
+        "<'animation-play-state'>",
+        "<'animation-timing-function'>",
+      ],
+    },
+    "<'animation-delay'>": {
+      syntax: "<time>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay",
+    },
+    "<'animation-direction'>": {
+      syntax: "<single-animation-direction>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction",
+    },
+    "<'animation-duration'>": {
+      syntax: "<time>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration",
+    },
+    "<'animation-fill-mode'>": {
+      syntax: "<single-animation-fill-mode>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode",
+    },
+    "<'animation-iteration-count'>": {
+      syntax: "<single-animation-iteration-count>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count",
+    },
+    "<'animation-name'>": {
+      syntax: "[ none | <keyframes-name> ]#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name",
+    },
+    "<'animation-play-state'>": {
+      syntax: "<single-animation-play-state>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state",
+    },
+    "<'animation-timing-function'>": {
+      syntax: "<easing-function>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function",
+    },
+    "<'appearance'>": {
+      syntax: "none | auto | textfield | menulist-button | <compat-auto>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/appearance",
+    },
+    "<'aspect-ratio'>": {
+      syntax: "auto | <ratio>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio",
+    },
+    "<'backdrop-filter'>": {
+      syntax: "none | <filter-function-list>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter",
+    },
+    "<'backface-visibility'>": {
+      syntax: "visible | hidden",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility",
+    },
+    "<'background'>": {
+      syntax: "[ <bg-layer> , ]* <final-bg-layer>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background",
+      subProps: [
+        "<'background-attachment'>",
+        "<'background-clip'>",
+        "<'background-color'>",
+        "<'background-image'>",
+        "<'background-origin'>",
+        "<'background-position'>",
+        "<'background-repeat'>",
+        "<'background-size'>",
+      ],
+    },
+    "<'background-attachment'>": {
+      syntax: "<attachment>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment",
+    },
+    "<'background-blend-mode'>": {
+      syntax: "<blend-mode>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode",
+    },
+    "<'background-clip'>": {
+      syntax: "<box>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip",
+    },
+    "<'background-color'>": {
+      syntax: "<color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-color",
+    },
+    "<'background-image'>": {
+      syntax: "<bg-image>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-image",
+    },
+    "<'background-origin'>": {
+      syntax: "<box>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin",
+    },
+    "<'background-position'>": {
+      syntax: "<bg-position>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-position",
+    },
+    "<'background-position-x'>": {
+      syntax:
+        "[ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x",
+    },
+    "<'background-position-y'>": {
+      syntax:
+        "[ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y",
+    },
+    "<'background-repeat'>": {
+      syntax: "<repeat-style>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat",
+    },
+    "<'background-size'>": {
+      syntax: "<bg-size>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-size",
+    },
+    "<'block-size'>": {
+      syntax: "<'width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/block-size",
+    },
+    "<'border'>": {
+      syntax: "<line-width> || <line-style> || <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border",
+      subProps: ["<'border-color'>", "<'border-style'>", "<'border-width'>"],
+    },
+    "<'border-block'>": {
+      syntax: "<'border-top-width'> || <'border-top-style'> || <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block",
+      subProps: [
+        "<'border-block-color'>",
+        "<'border-block-style'>",
+        "<'border-block-width'>",
+      ],
+    },
+    "<'border-block-color'>": {
+      syntax: "<'border-top-color'>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-color",
+    },
+    "<'border-block-end'>": {
+      syntax: "<'border-top-width'> || <'border-top-style'> || <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end",
+      subProps: [
+        "<'border-block-end-color'>",
+        "<'border-block-end-style'>",
+        "<'border-block-end-width'>",
+      ],
+    },
+    "<'border-block-end-color'>": {
+      syntax: "<'border-top-color'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-color",
+    },
+    "<'border-block-end-style'>": {
+      syntax: "<'border-top-style'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-style",
+    },
+    "<'border-block-end-width'>": {
+      syntax: "<'border-top-width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-width",
+    },
+    "<'border-block-start'>": {
+      syntax: "<'border-top-width'> || <'border-top-style'> || <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start",
+      subProps: [
+        "<'border-block-start-color'>",
+        "<'border-block-start-style'>",
+        "<'border-block-start-width'>",
+      ],
+    },
+    "<'border-block-start-color'>": {
+      syntax: "<'border-top-color'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-color",
+    },
+    "<'border-block-start-style'>": {
+      syntax: "<'border-top-style'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-style",
+    },
+    "<'border-block-start-width'>": {
+      syntax: "<'border-top-width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-width",
+    },
+    "<'border-block-style'>": {
+      syntax: "<'border-top-style'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-style",
+    },
+    "<'border-block-width'>": {
+      syntax: "<'border-top-width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-width",
+    },
+    "<'border-bottom'>": {
+      syntax: "<line-width> || <line-style> || <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom",
+      subProps: [
+        "<'border-bottom-color'>",
+        "<'border-bottom-style'>",
+        "<'border-bottom-width'>",
+      ],
+    },
+    "<'border-bottom-color'>": {
+      syntax: "<'border-top-color'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color",
+    },
+    "<'border-bottom-left-radius'>": {
+      syntax: "<length-percentage>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius",
+    },
+    "<'border-bottom-right-radius'>": {
+      syntax: "<length-percentage>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius",
+    },
+    "<'border-bottom-style'>": {
+      syntax: "<line-style>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style",
+    },
+    "<'border-bottom-width'>": {
+      syntax: "<line-width>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width",
+    },
+    "<'border-collapse'>": {
+      syntax: "collapse | separate",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse",
+    },
+    "<'border-color'>": {
+      syntax: "<color>{1,4}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-color",
+      subProps: [
+        "<'border-bottom-color'>",
+        "<'border-left-color'>",
+        "<'border-right-color'>",
+        "<'border-top-color'>",
+      ],
+    },
+    "<'border-end-end-radius'>": {
+      syntax: "<length-percentage>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius",
+    },
+    "<'border-end-start-radius'>": {
+      syntax: "<length-percentage>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius",
+    },
+    "<'border-image'>": {
+      syntax:
+        "<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image",
+      subProps: [
+        "<'border-image-outset'>",
+        "<'border-image-repeat'>",
+        "<'border-image-slice'>",
+        "<'border-image-source'>",
+        "<'border-image-width'>",
+      ],
+    },
+    "<'border-image-outset'>": {
+      syntax: "[ <length> | <number> ]{1,4}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset",
+    },
+    "<'border-image-repeat'>": {
+      syntax: "[ stretch | repeat | round | space ]{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat",
+    },
+    "<'border-image-slice'>": {
+      syntax: "<number-percentage>{1,4} && fill?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice",
+    },
+    "<'border-image-source'>": {
+      syntax: "none | <image>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source",
+    },
+    "<'border-image-width'>": {
+      syntax: "[ <length-percentage> | <number> | auto ]{1,4}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width",
+    },
+    "<'border-inline'>": {
+      syntax: "<'border-top-width'> || <'border-top-style'> || <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline",
+      subProps: [
+        "<'border-inline-color'>",
+        "<'border-inline-style'>",
+        "<'border-inline-width'>",
+      ],
+    },
+    "<'border-inline-color'>": {
+      syntax: "<'border-top-color'>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-color",
+    },
+    "<'border-inline-end'>": {
+      syntax: "<'border-top-width'> || <'border-top-style'> || <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end",
+      subProps: [
+        "<'border-inline-end-color'>",
+        "<'border-inline-end-style'>",
+        "<'border-inline-end-width'>",
+      ],
+    },
+    "<'border-inline-end-color'>": {
+      syntax: "<'border-top-color'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color",
+    },
+    "<'border-inline-end-style'>": {
+      syntax: "<'border-top-style'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style",
+    },
+    "<'border-inline-end-width'>": {
+      syntax: "<'border-top-width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width",
+    },
+    "<'border-inline-start'>": {
+      syntax: "<'border-top-width'> || <'border-top-style'> || <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start",
+      subProps: [
+        "<'border-inline-start-color'>",
+        "<'border-inline-start-style'>",
+        "<'border-inline-start-width'>",
+      ],
+    },
+    "<'border-inline-start-color'>": {
+      syntax: "<'border-top-color'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color",
+    },
+    "<'border-inline-start-style'>": {
+      syntax: "<'border-top-style'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style",
+    },
+    "<'border-inline-start-width'>": {
+      syntax: "<'border-top-width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width",
+    },
+    "<'border-inline-style'>": {
+      syntax: "<'border-top-style'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-style",
+    },
+    "<'border-inline-width'>": {
+      syntax: "<'border-top-width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-width",
+    },
+    "<'border-left'>": {
+      syntax: "<line-width> || <line-style> || <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left",
+      subProps: [
+        "<'border-left-color'>",
+        "<'border-left-style'>",
+        "<'border-left-width'>",
+      ],
+    },
+    "<'border-left-color'>": {
+      syntax: "<color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color",
+    },
+    "<'border-left-style'>": {
+      syntax: "<line-style>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style",
+    },
+    "<'border-left-width'>": {
+      syntax: "<line-width>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width",
+    },
+    "<'border-radius'>": {
+      syntax: "<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius",
+      subProps: [
+        "<'border-top-left-radius'>",
+        "<'border-top-right-radius'>",
+        "<'border-bottom-right-radius'>",
+        "<'border-bottom-left-radius'>",
+      ],
+    },
+    "<'border-right'>": {
+      syntax: "<line-width> || <line-style> || <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right",
+      subProps: [
+        "<'border-right-color'>",
+        "<'border-right-style'>",
+        "<'border-right-width'>",
+      ],
+    },
+    "<'border-right-color'>": {
+      syntax: "<color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color",
+    },
+    "<'border-right-style'>": {
+      syntax: "<line-style>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style",
+    },
+    "<'border-right-width'>": {
+      syntax: "<line-width>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width",
+    },
+    "<'border-spacing'>": {
+      syntax: "<length> <length>?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing",
+    },
+    "<'border-start-end-radius'>": {
+      syntax: "<length-percentage>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius",
+    },
+    "<'border-start-start-radius'>": {
+      syntax: "<length-percentage>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius",
+    },
+    "<'border-style'>": {
+      syntax: "<line-style>{1,4}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-style",
+      subProps: [
+        "<'border-bottom-style'>",
+        "<'border-left-style'>",
+        "<'border-right-style'>",
+        "<'border-top-style'>",
+      ],
+    },
+    "<'border-top'>": {
+      syntax: "<line-width> || <line-style> || <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top",
+      subProps: [
+        "<'border-top-color'>",
+        "<'border-top-style'>",
+        "<'border-top-width'>",
+      ],
+    },
+    "<'border-top-color'>": {
+      syntax: "<color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color",
+    },
+    "<'border-top-left-radius'>": {
+      syntax: "<length-percentage>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius",
+    },
+    "<'border-top-right-radius'>": {
+      syntax: "<length-percentage>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius",
+    },
+    "<'border-top-style'>": {
+      syntax: "<line-style>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style",
+    },
+    "<'border-top-width'>": {
+      syntax: "<line-width>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width",
+    },
+    "<'border-width'>": {
+      syntax: "<line-width>{1,4}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-width",
+      subProps: [
+        "<'border-bottom-width'>",
+        "<'border-left-width'>",
+        "<'border-right-width'>",
+        "<'border-top-width'>",
+      ],
+    },
+    "<'bottom'>": {
+      syntax: "<length> | <percentage> | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/bottom",
+    },
+    "<'@page#page-margin-box-type'>": {
+      syntax: "@page <page-selector-list> {",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@page#page-margin-box-type",
+    },
+    "<'box-decoration-break'>": {
+      syntax: "slice | clone",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break",
+    },
+    "<'box-shadow'>": {
+      syntax: "none | <shadow>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow",
+    },
+    "<'box-sizing'>": {
+      syntax: "content-box | border-box",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing",
+    },
+    "<'break-after'>": {
+      syntax:
+        "auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/break-after",
+    },
+    "<'break-before'>": {
+      syntax:
+        "auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/break-before",
+    },
+    "<'break-inside'>": {
+      syntax: "auto | avoid | avoid-page | avoid-column | avoid-region",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside",
+    },
+    "<'calc()'>": {
+      syntax: "calc( <calc-sum> )",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/calc()",
+    },
+    "<'caption-side'>": {
+      syntax:
+        "top | bottom | block-start | block-end | inline-start | inline-end",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side",
+    },
+    "<'caret-color'>": {
+      syntax: "auto | <color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color",
+    },
+    "<'@font-feature-values#@character-variant'>": {
+      syntax: "@font-feature-values <family-name># {",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values#@character-variant",
+    },
+    "<'font-variant-alternates#character-variant()'>": {
+      syntax:
+        "normal | [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#character-variant()",
+    },
+    "<'@charset'>": {
+      syntax: '@charset "<charset>";',
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@charset",
+    },
+    "<'clamp()'>": {
+      syntax: "clamp( <calc-sum>#{3} )",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()",
+    },
+    "<'clear'>": {
+      syntax: "none | left | right | both | inline-start | inline-end",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/clear",
+    },
+    "<'clip'>": {
+      syntax: "<shape> | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/clip",
+    },
+    "<'clip-path'>": {
+      syntax: "<clip-source> | [ <basic-shape> || <geometry-box> ] | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path",
+    },
+    "<'color'>": {
+      syntax: "<color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/color",
+    },
+    "<'color-adjust'>": {
+      syntax: "economy | exact",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust",
+    },
+    "<'color-scheme'>": {
+      syntax: "normal | [ light | dark | <custom-ident> ]+",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme",
+    },
+    "<'column-count'>": {
+      syntax: "<integer> | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-count",
+    },
+    "<'column-fill'>": {
+      syntax: "auto | balance | balance-all",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill",
+    },
+    "<'column-gap'>": {
+      syntax: "normal | <length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap",
+    },
+    "<'column-rule'>": {
+      syntax:
+        "<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule",
+    },
+    "<'column-rule-color'>": {
+      syntax: "<color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color",
+    },
+    "<'column-rule-style'>": {
+      syntax: "<'border-style'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style",
+    },
+    "<'column-rule-width'>": {
+      syntax: "<'border-width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width",
+    },
+    "<'column-span'>": {
+      syntax: "none | all",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-span",
+    },
+    "<'column-width'>": {
+      syntax: "<length> | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-width",
+    },
+    "<'columns'>": {
+      syntax: "<'column-width'> || <'column-count'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/columns",
+      subProps: ["<'column-count'>", "<'column-width'>"],
+    },
+    "<'contain'>": {
+      syntax: "none | strict | content | [ size || layout || style || paint ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/contain",
+    },
+    "<'content'>": {
+      syntax:
+        "normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/content",
+    },
+    "<'counter()'>": {
+      syntax: "counter( <custom-ident>, <counter-style>? )",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/counter()",
+    },
+    "<'counter-increment'>": {
+      syntax: "[ <custom-ident> <integer>? ]+ | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment",
+    },
+    "<'counter-reset'>": {
+      syntax: "[ <custom-ident> <integer>? ]+ | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset",
+    },
+    "<'counter-set'>": {
+      syntax: "[ <custom-ident> <integer>? ]+ | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set",
+    },
+    "<'@counter-style'>": {
+      syntax: "@counter-style <counter-style-name> {",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style",
+    },
+    "<'counters()'>": {
+      syntax: "counters( <custom-ident>, <string>, <counter-style>? )",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/counters()",
+    },
+    "<'cross-fade()'>": {
+      syntax: "cross-fade( <cf-mixing-image> , <cf-final-image>? )",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/cross-fade()",
+    },
+    "<'cursor'>": {
+      syntax:
+        "[ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/cursor",
+    },
+    "<':dir'>": {
+      syntax: ":dir( [ ltr | rtl ] )",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/:dir",
+    },
+    "<'direction'>": {
+      syntax: "ltr | rtl",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/direction",
+    },
+    "<'display'>": {
+      syntax:
+        "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/display",
+    },
+    "<'empty-cells'>": {
+      syntax: "show | hide",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells",
+    },
+    "<'env()'>": {
+      syntax: "env( <custom-ident> , <declaration-value>? )",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/env()",
+    },
+    "<'filter'>": {
+      syntax: "none | <filter-function-list>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/filter",
+    },
+    "<'flex'>": {
+      syntax: "none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex",
+      subProps: ["<'flex-grow'>", "<'flex-shrink'>", "<'flex-basis'>"],
+    },
+    "<'flex-basis'>": {
+      syntax: "content | <'width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis",
+    },
+    "<'flex-direction'>": {
+      syntax: "row | row-reverse | column | column-reverse",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction",
+    },
+    "<'flex-flow'>": {
+      syntax: "<'flex-direction'> || <'flex-wrap'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow",
+      subProps: ["<'flex-direction'>", "<'flex-wrap'>"],
+    },
+    "<'flex-grow'>": {
+      syntax: "<number>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow",
+    },
+    "<'flex-shrink'>": {
+      syntax: "<number>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink",
+    },
+    "<'flex-wrap'>": {
+      syntax: "nowrap | wrap | wrap-reverse",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap",
+    },
+    "<'float'>": {
+      syntax: "left | right | none | inline-start | inline-end",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/float",
+    },
+    "<'font'>": {
+      syntax:
+        "[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font",
+      subProps: [
+        "<'font-family'>",
+        "<'font-size'>",
+        "<'font-stretch'>",
+        "<'font-style'>",
+        "<'font-variant'>",
+        "<'font-weight'>",
+        "<'line-height'>",
+      ],
+    },
+    "<'font-family'>": {
+      syntax: "[ <family-name> | <generic-family> ]#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-family",
+    },
+    "<'font-feature-settings'>": {
+      syntax: "normal | <feature-tag-value>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings",
+    },
+    "<'@font-feature-values'>": {
+      syntax: "@font-feature-values <family-name># {",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values",
+    },
+    "<'font-kerning'>": {
+      syntax: "auto | normal | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning",
+    },
+    "<'font-language-override'>": {
+      syntax: "normal | <string>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-language-override",
+    },
+    "<'font-optical-sizing'>": {
+      syntax: "auto | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing",
+    },
+    "<'font-size'>": {
+      syntax: "<absolute-size> | <relative-size> | <length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-size",
+    },
+    "<'font-size-adjust'>": {
+      syntax:
+        "none | [ ex-height | cap-height | ch-width | ic-width | ic-height ]? [ from-font | <number> ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust",
+    },
+    "<'font-stretch'>": {
+      syntax: "<font-stretch-absolute>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch",
+    },
+    "<'font-style'>": {
+      syntax: "normal | italic | oblique <angle>?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-style",
+    },
+    "<'font-synthesis'>": {
+      syntax: "none | [ weight || style ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis",
+    },
+    "<'font-variant'>": {
+      syntax:
+        "normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant",
+      subProps: [
+        "<'font-variant-alternates'>",
+        "<'font-variant-caps'>",
+        "<'font-variant-east-asian'>",
+        "<'font-variant-ligatures'>",
+        "<'font-variant-numeric'>",
+      ],
+    },
+    "<'font-variant-alternates'>": {
+      syntax:
+        "normal | [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates",
+    },
+    "<'font-variant-caps'>": {
+      syntax:
+        "normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps",
+    },
+    "<'font-variant-east-asian'>": {
+      syntax:
+        "normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian",
+    },
+    "<'font-variant-ligatures'>": {
+      syntax:
+        "normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures",
+    },
+    "<'font-variant-numeric'>": {
+      syntax:
+        "normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric",
+    },
+    "<'font-variant-position'>": {
+      syntax: "normal | sub | super",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position",
+    },
+    "<'font-variation-settings'>": {
+      syntax: "normal | [ <string> <number> ]#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings",
+    },
+    "<'font-weight'>": {
+      syntax: "<font-weight-absolute> | bolder | lighter",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight",
+    },
+    "<'forced-color-adjust'>": {
+      syntax: "auto | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust",
+    },
+    "<'gap'>": {
+      syntax: "<'row-gap'> <'column-gap'>?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/gap",
+    },
+    "<'grid'>": {
+      syntax:
+        "<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid",
+      subProps: [
+        "<'grid-auto-columns'>",
+        "<'grid-auto-flow'>",
+        "<'grid-auto-rows'>",
+        "<'grid-template-areas'>",
+        "<'grid-template-columns'>",
+        "<'grid-template-rows'>",
+      ],
+    },
+    "<'grid-area'>": {
+      syntax: "<grid-line> [ / <grid-line> ]{0,3}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area",
+      subProps: [
+        "<'grid-row-start'>",
+        "<'grid-column-start'>",
+        "<'grid-row-end'>",
+        "<'grid-column-end'>",
+      ],
+    },
+    "<'grid-auto-columns'>": {
+      syntax: "<track-size>+",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns",
+    },
+    "<'grid-auto-flow'>": {
+      syntax: "[ row | column ] || dense",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow",
+    },
+    "<'grid-auto-rows'>": {
+      syntax: "<track-size>+",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows",
+    },
+    "<'grid-column'>": {
+      syntax: "<grid-line> [ / <grid-line> ]?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column",
+      subProps: ["<'grid-column-end'>", "<'grid-column-start'>"],
+    },
+    "<'grid-column-end'>": {
+      syntax: "<grid-line>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end",
+    },
+    "<'grid-column-start'>": {
+      syntax: "<grid-line>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start",
+    },
+    "<'grid-row'>": {
+      syntax: "<grid-line> [ / <grid-line> ]?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row",
+      subProps: ["<'grid-row-end'>", "<'grid-row-start'>"],
+    },
+    "<'grid-row-end'>": {
+      syntax: "<grid-line>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end",
+    },
+    "<'grid-row-start'>": {
+      syntax: "<grid-line>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start",
+    },
+    "<'grid-template'>": {
+      syntax:
+        "none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template",
+      subProps: [
+        "<'grid-template-areas'>",
+        "<'grid-template-columns'>",
+        "<'grid-template-rows'>",
+      ],
+    },
+    "<'grid-template-areas'>": {
+      syntax: "none | <string>+",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas",
+    },
+    "<'grid-template-columns'>": {
+      syntax:
+        "none | <track-list> | <auto-track-list> | subgrid <line-name-list>?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns",
+    },
+    "<'grid-template-rows'>": {
+      syntax:
+        "none | <track-list> | <auto-track-list> | subgrid <line-name-list>?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows",
+    },
+    "<'hanging-punctuation'>": {
+      syntax: "none | [ first || [ force-end | allow-end ] || last ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation",
+    },
+    "<'height'>": {
+      syntax:
+        "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/height",
+    },
+    "<'hyphens'>": {
+      syntax: "none | manual | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens",
+    },
+    "<'image-orientation'>": {
+      syntax: "from-image | <angle> | [ <angle>? flip ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation",
+    },
+    "<'image-rendering'>": {
+      syntax: "auto | crisp-edges | pixelated",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
+    },
+    "<'image-resolution'>": {
+      syntax: "[ from-image || <resolution> ] && snap?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/image-resolution",
+    },
+    "<'initial-letter'>": {
+      syntax: "normal | [ <number> <integer>? ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter",
+    },
+    "<'initial-letter-align'>": {
+      syntax: "[ auto | alphabetic | hanging | ideographic ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter-align",
+    },
+    "<'inline-size'>": {
+      syntax: "<'width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size",
+    },
+    "<'inset'>": {
+      syntax: "<'top'>{1,4}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset",
+    },
+    "<'inset-block'>": {
+      syntax: "<'top'>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block",
+      subProps: ["<'inset-block-end'>", "<'inset-block-start'>"],
+    },
+    "<'inset-block-end'>": {
+      syntax: "<'top'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end",
+    },
+    "<'inset-block-start'>": {
+      syntax: "<'top'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start",
+    },
+    "<'inset-inline'>": {
+      syntax: "<'top'>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline",
+      subProps: ["<'inset-inline-end'>", "<'inset-inline-start'>"],
+    },
+    "<'inset-inline-end'>": {
+      syntax: "<'top'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end",
+    },
+    "<'inset-inline-start'>": {
+      syntax: "<'top'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start",
+    },
+    "<'isolation'>": {
+      syntax: "auto | isolate",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/isolation",
+    },
+    "<'justify-content'>": {
+      syntax:
+        "normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content",
+    },
+    "<'justify-items'>": {
+      syntax:
+        "normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items",
+    },
+    "<'justify-self'>": {
+      syntax:
+        "auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self",
+    },
+    "<'justify-tracks'>": {
+      syntax:
+        "[ normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ] ]#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-tracks",
+    },
+    "<'left'>": {
+      syntax: "<length> | <percentage> | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/left",
+    },
+    "<'letter-spacing'>": {
+      syntax: "normal | <length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing",
+    },
+    "<'line-break'>": {
+      syntax: "auto | loose | normal | strict | anywhere",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/line-break",
+    },
+    "<'line-height'>": {
+      syntax: "normal | <number> | <length> | <percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/line-height",
+    },
+    "<'line-height-step'>": {
+      syntax: "<length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/line-height-step",
+    },
+    "<'list-style'>": {
+      syntax:
+        "<'list-style-type'> || <'list-style-position'> || <'list-style-image'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style",
+      subProps: [
+        "<'list-style-image'>",
+        "<'list-style-position'>",
+        "<'list-style-type'>",
+      ],
+    },
+    "<'list-style-image'>": {
+      syntax: "<image> | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image",
+    },
+    "<'list-style-position'>": {
+      syntax: "inside | outside",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position",
+    },
+    "<'list-style-type'>": {
+      syntax: "<counter-style> | <string> | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type",
+    },
+    "<'margin'>": {
+      syntax: "[ <length> | <percentage> | auto ]{1,4}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin",
+      subProps: [
+        "<'margin-bottom'>",
+        "<'margin-left'>",
+        "<'margin-right'>",
+        "<'margin-top'>",
+      ],
+    },
+    "<'margin-block'>": {
+      syntax: "<'margin-left'>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block",
+      subProps: ["<'margin-block-end'>", "<'margin-block-start'>"],
+    },
+    "<'margin-block-end'>": {
+      syntax: "<'margin-left'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end",
+    },
+    "<'margin-block-start'>": {
+      syntax: "<'margin-left'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start",
+    },
+    "<'margin-bottom'>": {
+      syntax: "<length> | <percentage> | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom",
+    },
+    "<'margin-inline'>": {
+      syntax: "<'margin-left'>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline",
+      subProps: ["<'margin-inline-start'>", "<'margin-inline-end'>"],
+    },
+    "<'margin-inline-end'>": {
+      syntax: "<'margin-left'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end",
+    },
+    "<'margin-inline-start'>": {
+      syntax: "<'margin-left'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start",
+    },
+    "<'margin-left'>": {
+      syntax: "<length> | <percentage> | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left",
+    },
+    "<'margin-right'>": {
+      syntax: "<length> | <percentage> | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right",
+    },
+    "<'margin-top'>": {
+      syntax: "<length> | <percentage> | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top",
+    },
+    "<'margin-trim'>": {
+      syntax: "none | in-flow | all",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim",
+    },
+    "<'mask'>": {
+      syntax: "<mask-layer>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask",
+      subProps: [
+        "<'mask-clip'>",
+        "<'mask-composite'>",
+        "<'mask-image'>",
+        "<'mask-mode'>",
+        "<'mask-origin'>",
+        "<'mask-position'>",
+        "<'mask-repeat'>",
+        "<'mask-size'>",
+      ],
+    },
+    "<'mask-border'>": {
+      syntax:
+        "<'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border",
+      subProps: [
+        "<'mask-border-mode'>",
+        "<'mask-border-outset'>",
+        "<'mask-border-repeat'>",
+        "<'mask-border-slice'>",
+        "<'mask-border-source'>",
+        "<'mask-border-width'>",
+      ],
+    },
+    "<'mask-border-mode'>": {
+      syntax: "luminance | alpha",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-mode",
+    },
+    "<'mask-border-outset'>": {
+      syntax: "[ <length> | <number> ]{1,4}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-outset",
+    },
+    "<'mask-border-repeat'>": {
+      syntax: "[ stretch | repeat | round | space ]{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-repeat",
+    },
+    "<'mask-border-slice'>": {
+      syntax: "<number-percentage>{1,4} fill?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-slice",
+    },
+    "<'mask-border-source'>": {
+      syntax: "none | <image>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-source",
+    },
+    "<'mask-border-width'>": {
+      syntax: "[ <length-percentage> | <number> | auto ]{1,4}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-width",
+    },
+    "<'mask-clip'>": {
+      syntax: "[ <geometry-box> | no-clip ]#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip",
+    },
+    "<'mask-composite'>": {
+      syntax: "<compositing-operator>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite",
+    },
+    "<'mask-image'>": {
+      syntax: "<mask-reference>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image",
+    },
+    "<'mask-mode'>": {
+      syntax: "<masking-mode>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-mode",
+    },
+    "<'mask-origin'>": {
+      syntax: "<geometry-box>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-origin",
+    },
+    "<'mask-position'>": {
+      syntax: "<position>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position",
+    },
+    "<'mask-repeat'>": {
+      syntax: "<repeat-style>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-repeat",
+    },
+    "<'mask-size'>": {
+      syntax: "<bg-size>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-size",
+    },
+    "<'mask-type'>": {
+      syntax: "luminance | alpha",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type",
+    },
+    "<'masonry-auto-flow'>": {
+      syntax: "[ pack | next ] || [ definite-first | ordered ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/masonry-auto-flow",
+    },
+    "<'math-style'>": {
+      syntax: "normal | compact",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/math-style",
+    },
+    "<'max-block-size'>": {
+      syntax: "<'max-width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size",
+    },
+    "<'max-height'>": {
+      syntax:
+        "none | <length-percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/max-height",
+    },
+    "<'max-inline-size'>": {
+      syntax: "<'max-width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size",
+    },
+    "<'max-width'>": {
+      syntax:
+        "none | <length-percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/max-width",
+    },
+    "<'min-block-size'>": {
+      syntax: "<'min-width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size",
+    },
+    "<'min-height'>": {
+      syntax:
+        "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/min-height",
+    },
+    "<'min-inline-size'>": {
+      syntax: "<'min-width'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size",
+    },
+    "<'min-width'>": {
+      syntax:
+        "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/min-width",
+    },
+    "<'mix-blend-mode'>": {
+      syntax: "<blend-mode>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode",
+    },
+    "<'object-fit'>": {
+      syntax: "fill | contain | cover | none | scale-down",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit",
+    },
+    "<'object-position'>": {
+      syntax: "<position>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/object-position",
+    },
+    "<'offset'>": {
+      syntax:
+        "[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/offset",
+      subProps: [
+        "<'offset-anchor'>",
+        "<'offset-distance'>",
+        "<'offset-path'>",
+        "<'offset-position'>",
+        "<'offset-rotate'>",
+      ],
+    },
+    "<'offset-anchor'>": {
+      syntax: "auto | <position>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-anchor",
+    },
+    "<'offset-distance'>": {
+      syntax: "<length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance",
+    },
+    "<'offset-path'>": {
+      syntax:
+        "none | ray( [ <angle> && <size> && contain? ] ) | <path()> | <url> | [ <basic-shape> || <geometry-box> ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path",
+    },
+    "<'offset-position'>": {
+      syntax: "auto | <position>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-position",
+    },
+    "<'offset-rotate'>": {
+      syntax: "[ auto | reverse ] || <angle>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-rotate",
+    },
+    "<'opacity'>": {
+      syntax: "<alpha-value>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/opacity",
+    },
+    "<'order'>": {
+      syntax: "<integer>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/order",
+    },
+    "<'orphans'>": {
+      syntax: "<integer>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/orphans",
+    },
+    "<'outline'>": {
+      syntax: "[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline",
+      subProps: ["<'outline-color'>", "<'outline-style'>", "<'outline-width'>"],
+    },
+    "<'outline-color'>": {
+      syntax: "<color> | invert",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color",
+    },
+    "<'outline-offset'>": {
+      syntax: "<length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset",
+    },
+    "<'outline-style'>": {
+      syntax: "auto | <'border-style'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style",
+    },
+    "<'outline-width'>": {
+      syntax: "<line-width>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width",
+    },
+    "<'overflow'>": {
+      syntax: "[ visible | hidden | clip | scroll | auto ]{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow",
+      subProps: ["<'overflow-x'>", "<'overflow-y'>"],
+    },
+    "<'overflow-anchor'>": {
+      syntax: "auto | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor",
+    },
+    "<'overflow-block'>": {
+      syntax: "visible | hidden | clip | scroll | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block",
+    },
+    "<'overflow-clip-margin'>": {
+      syntax: "<visual-box> || [0,∞]>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-margin",
+    },
+    "<'overflow-inline'>": {
+      syntax: "visible | hidden | clip | scroll | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-inline",
+    },
+    "<'overflow-wrap'>": {
+      syntax: "normal | break-word | anywhere",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap",
+    },
+    "<'overflow-x'>": {
+      syntax: "visible | hidden | clip | scroll | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x",
+    },
+    "<'overflow-y'>": {
+      syntax: "visible | hidden | clip | scroll | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y",
+    },
+    "<'overscroll-behavior'>": {
+      syntax: "[ contain | none | auto ]{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior",
+    },
+    "<'overscroll-behavior-block'>": {
+      syntax: "contain | none | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-block",
+    },
+    "<'overscroll-behavior-inline'>": {
+      syntax: "contain | none | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-inline",
+    },
+    "<'overscroll-behavior-x'>": {
+      syntax: "contain | none | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x",
+    },
+    "<'overscroll-behavior-y'>": {
+      syntax: "contain | none | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y",
+    },
+    "<'padding'>": {
+      syntax: "[ <length> | <percentage> ]{1,4}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding",
+      subProps: [
+        "<'padding-bottom'>",
+        "<'padding-left'>",
+        "<'padding-right'>",
+        "<'padding-top'>",
+      ],
+    },
+    "<'padding-block'>": {
+      syntax: "<'padding-left'>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block",
+      subProps: ["<'padding-block-end'>", "<'padding-block-start'>"],
+    },
+    "<'padding-block-end'>": {
+      syntax: "<'padding-left'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end",
+    },
+    "<'padding-block-start'>": {
+      syntax: "<'padding-left'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start",
+    },
+    "<'padding-bottom'>": {
+      syntax: "<length> | <percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom",
+    },
+    "<'padding-inline'>": {
+      syntax: "<'padding-left'>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline",
+      subProps: ["<'padding-inline-end'>", "<'padding-inline-start'>"],
+    },
+    "<'padding-inline-end'>": {
+      syntax: "<'padding-left'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end",
+    },
+    "<'padding-inline-start'>": {
+      syntax: "<'padding-left'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start",
+    },
+    "<'padding-left'>": {
+      syntax: "<length> | <percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left",
+    },
+    "<'padding-right'>": {
+      syntax: "<length> | <percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right",
+    },
+    "<'padding-top'>": {
+      syntax: "<length> | <percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top",
+    },
+    "<'page-break-after'>": {
+      syntax: "auto | always | avoid | left | right | recto | verso",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after",
+    },
+    "<'page-break-before'>": {
+      syntax: "auto | always | avoid | left | right | recto | verso",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before",
+    },
+    "<'page-break-inside'>": {
+      syntax: "auto | avoid",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside",
+    },
+    "<'paint-order'>": {
+      syntax: "normal | [ fill || stroke || markers ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order",
+    },
+    "<'perspective'>": {
+      syntax: "none | <length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/perspective",
+    },
+    "<'perspective-origin'>": {
+      syntax: "<position>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin",
+    },
+    "<'place-content'>": {
+      syntax: "<'align-content'> <'justify-content'>?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/place-content",
+      subProps: ["<'align-content'>", "<'justify-content'>"],
+    },
+    "<'place-items'>": {
+      syntax: "<'align-items'> <'justify-items'>?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/place-items",
+      subProps: ["<'align-items'>", "<'justify-items'>"],
+    },
+    "<'place-self'>": {
+      syntax: "<'align-self'> <'justify-self'>?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/place-self",
+      subProps: ["<'align-self'>", "<'justify-self'>"],
+    },
+    "<'pointer-events'>": {
+      syntax:
+        "auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events",
+    },
+    "<'position'>": {
+      syntax: "static | relative | absolute | sticky | fixed",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/position",
+    },
+    "<'quotes'>": {
+      syntax: "none | auto | [ <string> <string> ]+",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/quotes",
+    },
+    "<'resize'>": {
+      syntax: "none | both | horizontal | vertical | block | inline",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/resize",
+    },
+    "<'right'>": {
+      syntax: "<length> | <percentage> | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/right",
+    },
+    "<'rotate'>": {
+      syntax: "none | <angle> | [ x | y | z | <number>{3} ] && <angle>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/rotate",
+    },
+    "<'row-gap'>": {
+      syntax: "normal | <length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap",
+    },
+    "<'ruby-align'>": {
+      syntax: "start | center | space-between | space-around",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-align",
+    },
+    "<'ruby-position'>": {
+      syntax: "[ alternate || [ over | under ] ] | inter-character",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-position",
+    },
+    "<'scale'>": {
+      syntax: "none | <number>{1,3}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scale",
+    },
+    "<'scroll-behavior'>": {
+      syntax: "auto | smooth",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior",
+    },
+    "<'scroll-margin'>": {
+      syntax: "<length>{1,4}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin",
+      subProps: [
+        "<'scroll-margin-bottom'>",
+        "<'scroll-margin-left'>",
+        "<'scroll-margin-right'>",
+        "<'scroll-margin-top'>",
+      ],
+    },
+    "<'scroll-margin-block'>": {
+      syntax: "<length>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block",
+      subProps: [
+        "<'scroll-margin-block-end'>",
+        "<'scroll-margin-block-start'>",
+      ],
+    },
+    "<'scroll-margin-block-end'>": {
+      syntax: "<length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-end",
+    },
+    "<'scroll-margin-block-start'>": {
+      syntax: "<length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-start",
+    },
+    "<'scroll-margin-bottom'>": {
+      syntax: "<length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-bottom",
+    },
+    "<'scroll-margin-inline'>": {
+      syntax: "<length>{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline",
+      subProps: [
+        "<'scroll-margin-inline-end'>",
+        "<'scroll-margin-inline-start'>",
+      ],
+    },
+    "<'scroll-margin-inline-end'>": {
+      syntax: "<length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-end",
+    },
+    "<'scroll-margin-inline-start'>": {
+      syntax: "<length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-start",
+    },
+    "<'scroll-margin-left'>": {
+      syntax: "<length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-left",
+    },
+    "<'scroll-margin-right'>": {
+      syntax: "<length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-right",
+    },
+    "<'scroll-margin-top'>": {
+      syntax: "<length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top",
+    },
+    "<'scroll-padding'>": {
+      syntax: "[ auto | <length-percentage> ]{1,4}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding",
+      subProps: [
+        "<'scroll-padding-bottom'>",
+        "<'scroll-padding-left'>",
+        "<'scroll-padding-right'>",
+        "<'scroll-padding-top'>",
+      ],
+    },
+    "<'scroll-padding-block'>": {
+      syntax: "[ auto | <length-percentage> ]{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block",
+      subProps: [
+        "<'scroll-padding-block-end'>",
+        "<'scroll-padding-block-start'>",
+      ],
+    },
+    "<'scroll-padding-block-end'>": {
+      syntax: "auto | <length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block-end",
+    },
+    "<'scroll-padding-block-start'>": {
+      syntax: "auto | <length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block-start",
+    },
+    "<'scroll-padding-bottom'>": {
+      syntax: "auto | <length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-bottom",
+    },
+    "<'scroll-padding-inline'>": {
+      syntax: "[ auto | <length-percentage> ]{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline",
+      subProps: [
+        "<'scroll-padding-inline-end'>",
+        "<'scroll-padding-inline-start'>",
+      ],
+    },
+    "<'scroll-padding-inline-end'>": {
+      syntax: "auto | <length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-end",
+    },
+    "<'scroll-padding-inline-start'>": {
+      syntax: "auto | <length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-start",
+    },
+    "<'scroll-padding-left'>": {
+      syntax: "auto | <length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-left",
+    },
+    "<'scroll-padding-right'>": {
+      syntax: "auto | <length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-right",
+    },
+    "<'scroll-padding-top'>": {
+      syntax: "auto | <length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top",
+    },
+    "<'scroll-snap-align'>": {
+      syntax: "[ none | start | end | center ]{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align",
+    },
+    "<'scroll-snap-stop'>": {
+      syntax: "normal | always",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop",
+    },
+    "<'scroll-snap-type'>": {
+      syntax:
+        "none | [ x | y | block | inline | both ] [ mandatory | proximity ]?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type",
+    },
+    "<'scrollbar-color'>": {
+      syntax: "auto | <color>{2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color",
+    },
+    "<'scrollbar-gutter'>": {
+      syntax: "auto | stable && both-edges?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter",
+    },
+    "<'scrollbar-width'>": {
+      syntax: "auto | thin | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width",
+    },
+    "<'shape-image-threshold'>": {
+      syntax: "<alpha-value>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/shape-image-threshold",
+    },
+    "<'shape-margin'>": {
+      syntax: "<length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/shape-margin",
+    },
+    "<'shape-outside'>": {
+      syntax: "none | [ <shape-box> || <basic-shape> ] | <image>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside",
+    },
+    "<'tab-size'>": {
+      syntax: "<integer> | <length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/tab-size",
+    },
+    "<'table-layout'>": {
+      syntax: "auto | fixed",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout",
+    },
+    "<'text-align'>": {
+      syntax: "start | end | left | right | center | justify | match-parent",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-align",
+    },
+    "<'text-align-last'>": {
+      syntax: "auto | start | end | left | right | center | justify",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last",
+    },
+    "<'text-combine-upright'>": {
+      syntax: "none | all | [ digits <integer>? ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright",
+    },
+    "<'text-decoration'>": {
+      syntax:
+        "<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration",
+      subProps: [
+        "<'text-decoration-color'>",
+        "<'text-decoration-line'>",
+        "<'text-decoration-style'>",
+        "<'text-decoration-thickness'>",
+      ],
+    },
+    "<'text-decoration-color'>": {
+      syntax: "<color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color",
+    },
+    "<'text-decoration-line'>": {
+      syntax:
+        "none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line",
+    },
+    "<'text-decoration-skip'>": {
+      syntax:
+        "none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip",
+    },
+    "<'text-decoration-skip-ink'>": {
+      syntax: "auto | all | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink",
+    },
+    "<'text-decoration-style'>": {
+      syntax: "solid | double | dotted | dashed | wavy",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style",
+    },
+    "<'text-decoration-thickness'>": {
+      syntax: "auto | from-font | <length> | <percentage> ",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness",
+    },
+    "<'text-emphasis'>": {
+      syntax: "<'text-emphasis-style'> || <'text-emphasis-color'>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis",
+      subProps: ["<'text-emphasis-color'>", "<'text-emphasis-style'>"],
+    },
+    "<'text-emphasis-color'>": {
+      syntax: "<color>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color",
+    },
+    "<'text-emphasis-position'>": {
+      syntax: "[ over | under ] && [ right | left ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position",
+    },
+    "<'text-emphasis-style'>": {
+      syntax:
+        "none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style",
+    },
+    "<'text-indent'>": {
+      syntax: "<length-percentage> && hanging? && each-line?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent",
+    },
+    "<'text-justify'>": {
+      syntax: "auto | inter-character | inter-word | none",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-justify",
+    },
+    "<'text-orientation'>": {
+      syntax: "mixed | upright | sideways",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation",
+    },
+    "<'text-overflow'>": {
+      syntax: "[ clip | ellipsis | <string> ]{1,2}",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow",
+    },
+    "<'text-rendering'>": {
+      syntax: "auto | optimizeSpeed | optimizeLegibility | geometricPrecision",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering",
+    },
+    "<'text-shadow'>": {
+      syntax: "none | <shadow-t>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow",
+    },
+    "<'text-size-adjust'>": {
+      syntax: "none | auto | <percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust",
+    },
+    "<'text-transform'>": {
+      syntax:
+        "none | capitalize | uppercase | lowercase | full-width | full-size-kana",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform",
+    },
+    "<'text-underline-offset'>": {
+      syntax: "auto | <length> | <percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset",
+    },
+    "<'text-underline-position'>": {
+      syntax: "auto | from-font | [ under || [ left | right ] ]",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position",
+    },
+    "<'top'>": {
+      syntax: "<length> | <percentage> | auto",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/top",
+    },
+    "<'touch-action'>": {
+      syntax:
+        "auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action",
+    },
+    "<'transform'>": {
+      syntax: "none | <transform-list>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform",
+    },
+    "<'transform-box'>": {
+      syntax: "content-box | border-box | fill-box | stroke-box | view-box",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box",
+    },
+    "<'transform-origin'>": {
+      syntax:
+        "[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin",
+    },
+    "<'transform-style'>": {
+      syntax: "flat | preserve-3d",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style",
+    },
+    "<'transition'>": {
+      syntax: "<single-transition>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition",
+      subProps: [
+        "<'transition-delay'>",
+        "<'transition-duration'>",
+        "<'transition-property'>",
+        "<'transition-timing-function'>",
+      ],
+    },
+    "<'transition-delay'>": {
+      syntax: "<time>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay",
+    },
+    "<'transition-duration'>": {
+      syntax: "<time>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration",
+    },
+    "<'transition-property'>": {
+      syntax: "none | <single-transition-property>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property",
+    },
+    "<'transition-timing-function'>": {
+      syntax: "<easing-function>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function",
+    },
+    "<'translate'>": {
+      syntax: "none | <length-percentage> [ <length-percentage> <length>? ]?",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/translate",
+    },
+    "<'unicode-bidi'>": {
+      syntax:
+        "normal | embed | isolate | bidi-override | isolate-override | plaintext",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi",
+    },
+    "<'user-select'>": {
+      syntax: "auto | text | none | contain | all",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/user-select",
+    },
+    "<'vertical-align'>": {
+      syntax:
+        "baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align",
+    },
+    "<'visibility'>": {
+      syntax: "visible | hidden | collapse",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/visibility",
+    },
+    "<'white-space'>": {
+      syntax: "normal | pre | nowrap | pre-wrap | pre-line | break-spaces",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/white-space",
+    },
+    "<'widows'>": {
+      syntax: "<integer>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/widows",
+    },
+    "<'width'>": {
+      syntax:
+        "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/width",
+    },
+    "<'will-change'>": {
+      syntax: "auto | <animateable-feature>#",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/will-change",
+    },
+    "<'word-break'>": {
+      syntax: "normal | break-all | keep-all | break-word",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/word-break",
+    },
+    "<'word-spacing'>": {
+      syntax: "normal | <length-percentage>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing",
+    },
+    "<'writing-mode'>": {
+      syntax:
+        "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode",
+    },
+    "<'z-index'>": {
+      syntax: "auto | <integer>",
+      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/z-index",
+    },
+  },
+  atRules: {
+    "@counter-style": {
+      "<'additive-symbols'>": {
+        syntax: "[ <integer> && <symbol> ]#",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/additive-symbols",
+      },
+      "<'fallback'>": {
+        syntax: "<counter-style-name>",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/fallback",
+      },
+      "<'negative'>": {
+        syntax: "<symbol> <symbol>?",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/negative",
+      },
+      "<'pad'>": {
+        syntax: "<integer> && <symbol>",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/pad",
+      },
+      "<'prefix'>": {
+        syntax: "<symbol>",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/prefix",
+      },
+      "<'range'>": {
+        syntax: "[ [ <integer> | infinite ]{2} ]# | auto",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/range",
+      },
+      "<'speak-as'>": {
+        syntax:
+          "auto | bullets | numbers | words | spell-out | <counter-style-name>",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/speak-as",
+      },
+      "<'suffix'>": {
+        syntax: "<symbol>",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/suffix",
+      },
+      "<'symbols'>": {
+        syntax: "<symbol>+",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/symbols",
+      },
+      "<'system'>": {
+        syntax:
+          "cyclic | numeric | alphabetic | symbolic | additive | [ fixed <integer>? ] | [ extends <counter-style-name> ]",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/system",
+      },
+    },
+    "@font-face": {
+      "<'ascent-override'>": {
+        syntax: "normal | <percentage>",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override",
+      },
+      "<'descent-override'>": {
+        syntax: "normal | <percentage>",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override",
+      },
+      "<'font-display'>": {
+        syntax: "[ auto | block | swap | fallback | optional ]",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display",
+      },
+      "<'font-family'>": {
+        syntax: "<family-name>",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family",
+      },
+      "<'font-stretch'>": {
+        syntax: "<font-stretch-absolute>{1,2}",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch",
+      },
+      "<'font-style'>": {
+        syntax: "normal | italic | oblique <angle>{0,2}",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style",
+      },
+      "<'font-variant'>": {
+        syntax:
+          "normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name>#) || character-variant(<feature-value-name>#) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-variant",
+        subProps: [
+          "<'font-variant-alternates'>",
+          "<'font-variant-caps'>",
+          "<'font-variant-east-asian'>",
+          "<'font-variant-ligatures'>",
+          "<'font-variant-numeric'>",
+        ],
+      },
+      "<'font-variation-settings'>": {
+        syntax: "normal | [ <string> <number> ]#",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-variation-settings",
+      },
+      "<'font-weight'>": {
+        syntax: "<font-weight-absolute>{1,2}",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight",
+      },
+      "<'line-gap-override'>": {
+        syntax: "normal | <percentage>",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override",
+      },
+      "<'size-adjust'>": {
+        syntax: "<percentage>",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust",
+      },
+      "<'src'>": {
+        syntax: "[ <url> [ format( <string># ) ]? | local( <family-name> ) ]#",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src",
+      },
+      "<'unicode-range'>": {
+        syntax: "<unicode-range>#",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range",
+      },
+    },
+    "@property": {
+      "<'inherits'>": {
+        syntax: "true | false",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@property/inherits",
+      },
+      "<'initial-value'>": {
+        syntax: "<string>",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@property/initial-value",
+      },
+      "<'syntax'>": {
+        syntax: "<string>",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax",
+      },
+    },
+    "@page": {
+      "<'size'>": {
+        syntax:
+          "<length>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ]",
+        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size",
+      },
+    },
+  },
+};
diff --git a/packages/css-value-parser/src/value-syntax-parser.ts b/packages/css-value-parser/src/value-syntax-parser.ts
new file mode 100644
index 00000000..ab935bb8
--- /dev/null
+++ b/packages/css-value-parser/src/value-syntax-parser.ts
@@ -0,0 +1,488 @@
+import {
+  tokenize,
+  createToken,
+  Token,
+  Seeker,
+  getText,
+  last,
+} from "@tokey/core";
+
+type RangeMultipliers = "!" | "?" | "+" | "*";
+
+type Delimiters =
+  | "<"
+  | ">"
+  | "["
+  | "]"
+  | ","
+  | "/"
+  | "|"
+  | "&"
+  | "#"
+  | "("
+  | ")"
+  | "{"
+  | "}"
+  | RangeMultipliers;
+
+/**
+ * Add comments
+ * allOf, oneOf, anyOf
+ */
+
+const isDelimiter = (char: string) =>
+  char === "<" ||
+  char === ">" ||
+  char === "[" ||
+  char === "]" ||
+  char === "," ||
+  char === "/" ||
+  char === "|" ||
+  char === "&" ||
+  char === "#" ||
+  char === "(" ||
+  char === ")" ||
+  char === "{" ||
+  char === "}" ||
+  char === "?" ||
+  char === "!" ||
+  char === "*" ||
+  char === "+";
+
+type ValueSyntaxToken = Token<"space" | "text" | Delimiters>;
+
+export const isWhitespace = (char: string) =>
+  char === " " ||
+  char === `\t` ||
+  char === `\r` ||
+  char === "\n" ||
+  char === "\f";
+
+export function parseValueSyntax(source: string) {
+  return parseTokens(
+    tokenize<ValueSyntaxToken>(source, {
+      isDelimiter,
+      isWhitespace,
+      createToken,
+      isStringDelimiter: () => false,
+      shouldAddToken: () => true,
+      getCommentStartType: () => "",
+      isCommentEnd: () => false,
+      getUnclosedComment: () => "",
+    }),
+    source
+  );
+}
+
+type Range = [min: number, max: number];
+
+interface Multipliers {
+  range?: Range;
+  list?: boolean;
+}
+
+interface DataTypeNode {
+  type: "data-type";
+  name: string;
+  range?: Range;
+  multipliers?: Multipliers;
+}
+
+interface PropertyNode {
+  type: "property";
+  name: string;
+  range?: Range;
+  multipliers?: Multipliers;
+}
+
+interface LiteralNode {
+  type: "literal";
+  name: string;
+  enclosed: boolean;
+  multipliers?: Multipliers;
+}
+
+interface KeywordNode {
+  type: "keyword";
+  name: string;
+  multipliers?: Multipliers;
+}
+
+interface CombinatorGroup {
+  nodes: ValueSyntaxAstNode[];
+}
+
+interface JuxtaposingNode extends CombinatorGroup {
+  type: "juxtaposing";
+}
+
+interface DoubleAmpersandNode extends CombinatorGroup {
+  type: "&&";
+}
+
+interface DoubleBarNode extends CombinatorGroup {
+  type: "||";
+}
+
+interface BarNode extends CombinatorGroup {
+  type: "|";
+}
+
+interface GroupNode extends CombinatorGroup {
+  type: "group";
+  multipliers?: Multipliers;
+}
+
+type Combinators =
+  | GroupNode
+  | JuxtaposingNode
+  | DoubleAmpersandNode
+  | DoubleBarNode
+  | BarNode;
+
+type Components = DataTypeNode | PropertyNode;
+type ValueSyntaxAstNode = Components | KeywordNode | LiteralNode | Combinators;
+
+export function literal(
+  name: string,
+  enclosed = false,
+  multipliers?: Multipliers
+): LiteralNode {
+  return { type: "literal", name, enclosed, multipliers };
+}
+
+export function keyword(name: string, multipliers?: Multipliers): KeywordNode {
+  return { type: "keyword", name, multipliers };
+}
+
+export function property(
+  name: string,
+  range?: Range,
+  multipliers?: Multipliers
+): PropertyNode {
+  return { type: "property", name, range, multipliers };
+}
+
+export function dataType(
+  name: string,
+  range?: Range,
+  multipliers?: Multipliers
+): DataTypeNode {
+  return { type: "data-type", name, range, multipliers };
+}
+
+export function group(
+  nodes: ValueSyntaxAstNode[],
+  multipliers?: Multipliers
+): GroupNode {
+  return { type: "group", nodes, multipliers };
+}
+
+export function juxtaposing(nodes: ValueSyntaxAstNode[]): JuxtaposingNode {
+  return { type: "juxtaposing", nodes };
+}
+
+export function bar(nodes: ValueSyntaxAstNode[]): BarNode {
+  return { type: "|", nodes };
+}
+
+export function doubleAmpersand(
+  nodes: ValueSyntaxAstNode[]
+): DoubleAmpersandNode {
+  return { type: "&&", nodes };
+}
+
+export function doubleBar(nodes: ValueSyntaxAstNode[]): DoubleBarNode {
+  return { type: "||", nodes };
+}
+
+interface ParsingContext {
+  ast: ValueSyntaxAstNode[];
+  state: [allOf: number[], anyOf: number[], oneOf: number[]];
+}
+
+function parseTokens(tokens: ValueSyntaxToken[], source: string) {
+  const handleToken = (
+    token: ValueSyntaxToken,
+    { ast, state }: ParsingContext,
+    _source: string,
+    s: Seeker<ValueSyntaxToken>
+  ) => {
+    if (token.type === "<") {
+      let closed = false;
+      const name = s.eat("space").next();
+      const type = getComponentType(name);
+      let range: Range | undefined;
+      if (type === "invalid") {
+        throw new Error("missing data type name");
+      } else {
+        const t = s.eat("space").next();
+        if (t.type === ">") {
+          closed = true;
+        } else if (t.type === "[") {
+          const min = s.eat("space").take("text");
+          const sep = s.eat("space").take(",");
+          const max = s.eat("space").take("text");
+          const end = s.eat("space").take("]");
+          if (min && sep && max && end) {
+            range = [parseNumber(min.value), parseNumber(max.value)];
+          } else {
+            throw new Error("Invalid range");
+          }
+          const t = s.eat("space").take(">");
+          if (t) {
+            closed = true;
+          }
+        }
+      }
+      if (!closed) {
+        throw new Error('missing ">"');
+      }
+      if (type === "property") {
+        ast.push(property(name.value.slice(1, -1), range));
+      } else {
+        ast.push(dataType(name.value, range));
+      }
+    } else if (token.type === "[") {
+      const res = s.run(handleToken, { ast: [], state: [[], [], []] }, source);
+      // eslint-disable-next-line no-debugger
+
+      ast.push(group(res.ast));
+    } else if (token.type === "]") {
+      return false;
+    } else if (token.type === "text") {
+      const t = getComponentType(token);
+      if (t === "invalid") {
+        if (token.value.startsWith("'")) {
+          const tokens = s.run(
+            (token, ast) => {
+              ast.push(token);
+              return token.value.endsWith("'") ? false : undefined;
+            },
+            [token] as ValueSyntaxToken[],
+            source
+          );
+          if (tokens.length <= 2) {
+            throw new Error("unclosed or empty literal");
+          } else {
+            ast.push(
+              literal(
+                getText(tokens, undefined, undefined, source).slice(1, -1),
+                true
+              )
+            );
+          }
+        } else {
+          throw new Error("invalid literal");
+        }
+      } else if (t === "property") {
+        ast.push(literal(token.value.slice(1, -1), true));
+      } else {
+        ast.push(keyword(token.value));
+      }
+    } else if (
+      token.type === "," ||
+      token.type === "/" ||
+      token.type === "(" ||
+      token.type === ")"
+    ) {
+      ast.push(literal(token.value));
+    } else if (token.type === "space") {
+      s.eat("space");
+    } else if (isRangeMultiplier(token)) {
+      const node = last(ast);
+      if (!node) {
+        throw new Error("unexpected modifier");
+      }
+      if (isLowLevelGroup(node) || node.type === "juxtaposing") {
+        throw new Error("unexpected modifier");
+      }
+
+      node.multipliers ??= {};
+      if (node.multipliers.range) {
+        throw new Error("multiple multipliers on same node");
+      }
+      node.multipliers.range = typeToRange(token.type);
+    } else if (token.type === "{") {
+      const node = last(ast);
+      if (!node) {
+        throw new Error("unexpected modifier");
+      }
+      if (isLowLevelGroup(node) || node.type === "juxtaposing") {
+        throw new Error("unexpected modifier");
+      }
+
+      const start = s.eat("space").take("text");
+      if (!start) {
+        throw new Error("missing range start");
+      }
+      const sep = s.eat("space").take(",");
+      if (sep) {
+        const end = s.eat("space").take("text");
+        const close = s.eat("space").take("}");
+        if (!end) {
+          throw new Error("missing end value");
+        }
+        if (!close) {
+          throw new Error("missing }");
+        }
+
+        node.multipliers ??= {};
+        if (node.multipliers.range) {
+          throw new Error("multiple multipliers on same node");
+        }
+        node.multipliers.range = [
+          parseNumber(start.value),
+          parseNumber(end.value),
+        ];
+      } else {
+        const close = s.eat("space").take("}");
+        if (!close) {
+          throw new Error("missing }");
+        }
+        node.multipliers ??= {};
+        if (node.multipliers.range) {
+          throw new Error("multiple multipliers on same node");
+        }
+        node.multipliers.range = [
+          parseNumber(start.value),
+          parseNumber(start.value),
+        ];
+      }
+    } else if (token.type === "&") {
+      const nextAnd = s.take("&");
+      if (!nextAnd) {
+        throw new Error("missing &");
+      }
+      state[0].push(ast.push(doubleAmpersand([])) - 1);
+    } else if (token.type === "|") {
+      const nextBar = s.take("|");
+      if (nextBar) {
+        state[1].push(ast.push(doubleBar([])) - 1);
+      } else {
+        state[2].push(ast.push(bar([])) - 1);
+      }
+    } else {
+      s.eat("space");
+      throw new Error(`un handled ${JSON.stringify(token)}`);
+    }
+
+    applyJuxtaposing(ast);
+
+    return;
+  };
+
+  const results = new Seeker(tokens).run<ParsingContext>(
+    handleToken,
+    { ast: [], state: [[], [], []] },
+    source
+  );
+
+  applyPrecedence(results);
+
+  return results.ast[0];
+}
+
+function applyPrecedence({ ast, state }: ParsingContext) {
+  
+  for (let i = 0; i < state.length; i++) {
+    const precedenceGroup = state[i];
+    let length = precedenceGroup.length;
+    while (length--) {
+      const index = precedenceGroup[length];
+      const before = ast[index - 1];
+      const target = ast[index] as DoubleAmpersandNode;
+      const after = ast[index + 1];
+      if (after.type === target.type) {
+        target.nodes.push(before, ...after.nodes);
+        ast.splice(index - 1, 3, target);
+      } else {
+        target.nodes.push(before, after);
+        ast.splice(index - 1, 3, target);
+      }
+    }
+  }
+
+  if (ast.length > 1) {
+    throw new Error("could not applyPrecedence");
+  }
+}
+
+function parseNumber(value: string): number {
+  if (value === "∞") {
+    return Infinity;
+  }
+  if (value === `-∞`) {
+    return -Infinity;
+  }
+  // TODO: check for valid number, NaN, more...
+  return parseFloat(value);
+}
+
+function isRangeMultiplier(
+  token: ValueSyntaxToken
+): token is Token<RangeMultipliers> {
+  const { type } = token;
+  return type === "!" || type === "?" || type === "+" || type === "*";
+}
+
+function typeToRange(type: RangeMultipliers): [number, number] {
+  switch (type) {
+    case "!":
+      return [1, 1];
+    case "*":
+      return [0, Infinity];
+    case "+":
+      return [1, Infinity];
+    case "?":
+      return [0, 1];
+  }
+}
+
+function applyJuxtaposing(ast: ValueSyntaxAstNode[]) {
+  if (ast.length > 1) {
+    const last = ast[ast.length - 1];
+    const prev = ast[ast.length - 2];
+    if (prev.type === "juxtaposing") {
+      ast.length = ast.length - 1;
+      prev.nodes.push(last);
+    } else if (!isLowLevelGroup(prev) && !isLowLevelGroup(last)) {
+      ast.splice(ast.length - 2, 2, juxtaposing([prev, last]));
+    }
+  }
+}
+
+function isLowLevelGroup(
+  node: ValueSyntaxAstNode
+): node is DoubleBarNode | DoubleAmpersandNode | BarNode {
+  const { type } = node;
+  return type === "&&" || type === "|" || type === "||";
+}
+
+export function stringify(node: ValueSyntaxAstNode) {
+  const { type } = node;
+  if (type === "property") {
+    return `<'${node.name}'${node.range ? ` [${node.range}]` : ""}>`;
+  } else if (type === "data-type") {
+    return `<${node.name}${node.range ? ` [${node.range}]` : ""}>`;
+  } else if (type === "literal") {
+    return node.enclosed ? `'${node.name}'` : `${node.name}`;
+  } else {
+    throw new Error(`missing stringify for node ${JSON.stringify(node)}`);
+  }
+}
+
+function getComponentType(token: ValueSyntaxToken) {
+  if (token.type === "text") {
+    if (token.value.startsWith("'")) {
+      if (token.value.endsWith("'") && token.value.length > 1) {
+        return "property";
+      } else {
+        return "invalid";
+      }
+    } else {
+      return "data-type";
+    }
+  }
+  return "invalid";
+}
diff --git a/packages/css-value-parser/test/css-value-syntax.spec.ts b/packages/css-value-parser/test/css-value-syntax.spec.ts
new file mode 100644
index 00000000..b086a04a
--- /dev/null
+++ b/packages/css-value-parser/test/css-value-syntax.spec.ts
@@ -0,0 +1,255 @@
+import { parseValueSyntax } from "@tokey/css-value-parser";
+import { expect } from "chai";
+//TODO: fixme
+import {
+  bar,
+  dataType,
+  doubleAmpersand,
+  doubleBar,
+  group,
+  juxtaposing,
+  keyword,
+  literal,
+  property,
+} from "../src/value-syntax-parser";
+
+describe.only("value-syntax-parser", () => {
+  describe("components", () => {
+    it("should parse simple data-type component", () => {
+      expect(parseValueSyntax(`<name>`)).to.eql(dataType("name"));
+    });
+
+    it("should parse simple data-type component with range definition", () => {
+      expect(parseValueSyntax(`<name [1,1000]>`)).to.eql(
+        dataType("name", [1, 1000])
+      );
+      expect(parseValueSyntax(`<name [ 1 , 1000 ] >`)).to.eql(
+        dataType("name", [1, 1000])
+      );
+    });
+
+    it("should parse simple property component", () => {
+      expect(parseValueSyntax(`<'name'>`)).to.eql(property("name"));
+    });
+
+    it("should parse simple property component with range definition", () => {
+      expect(parseValueSyntax(`<'name' [1,1000]>`)).to.eql(
+        property("name", [1, 1000])
+      );
+      expect(parseValueSyntax(`<'name' [ 1 , 1000 ] >`)).to.eql(
+        property("name", [1, 1000])
+      );
+      expect(parseValueSyntax(`<'name' [ -∞ , ∞ ] >`)).to.eql(
+        property("name", [-Infinity, Infinity])
+      );
+    });
+  });
+
+  describe("literals/keyword", () => {
+    it("should parse simple keyword value", () => {
+      expect(parseValueSyntax(`name`)).to.eql(keyword("name"));
+    });
+    it("should parse open enclosed literal value (with delimiter)", () => {
+      expect(parseValueSyntax(`'<'`)).to.eql(literal("<", true));
+    });
+    it("should parse open enclosed literal value", () => {
+      expect(parseValueSyntax(`'name'`)).to.eql(literal("name", true));
+    });
+    it("should parse open enclosed literal value (with delimiter in the middle)", () => {
+      expect(parseValueSyntax(`'na>me'`)).to.eql(literal("na>me", true));
+    });
+    it("should parse open parentheses literal value", () => {
+      expect(parseValueSyntax(`(`)).to.eql(literal("("));
+    });
+    it("should parse close parentheses literal value", () => {
+      expect(parseValueSyntax(`)`)).to.eql(literal(")"));
+    });
+    it("should parse comma literal value", () => {
+      expect(parseValueSyntax(`,`)).to.eql(literal(","));
+    });
+    it("should parse slash literal value", () => {
+      expect(parseValueSyntax(`/`)).to.eql(literal("/"));
+    });
+  });
+
+  describe("multipliers", () => {
+    it("data-type with multipliers", () => {
+      expect(parseValueSyntax(`<name>!`)).to.eql(
+        dataType("name", undefined, { range: [1, 1] })
+      );
+      expect(parseValueSyntax(`<name>?`)).to.eql(
+        dataType("name", undefined, { range: [0, 1] })
+      );
+      expect(parseValueSyntax(`<name>+`)).to.eql(
+        dataType("name", undefined, { range: [1, Infinity] })
+      );
+      expect(parseValueSyntax(`<name>*`)).to.eql(
+        dataType("name", undefined, { range: [0, Infinity] })
+      );
+      expect(parseValueSyntax(`<name>{2}`)).to.eql(
+        dataType("name", undefined, { range: [2, 2] })
+      );
+      expect(parseValueSyntax(`<name>{2, 4}`)).to.eql(
+        dataType("name", undefined, { range: [2, 4] })
+      );
+    });
+    it("property with multipliers", () => {
+      expect(parseValueSyntax(`<'name'>!`)).to.eql(
+        property("name", undefined, { range: [1, 1] })
+      );
+      expect(parseValueSyntax(`<'name'>?`)).to.eql(
+        property("name", undefined, { range: [0, 1] })
+      );
+      expect(parseValueSyntax(`<'name'>+`)).to.eql(
+        property("name", undefined, { range: [1, Infinity] })
+      );
+      expect(parseValueSyntax(`<'name'>*`)).to.eql(
+        property("name", undefined, { range: [0, Infinity] })
+      );
+      expect(parseValueSyntax(`<name>{2}`)).to.eql(
+        property("name", undefined, { range: [2, 2] })
+      );
+      expect(parseValueSyntax(`<name>{2, 4}`)).to.eql(
+        property("name", undefined, { range: [2, 4] })
+      );
+    });
+    it("literal with multipliers", () => {
+      expect(parseValueSyntax(`'name'!`)).to.eql(
+        literal("name", true, { range: [1, 1] })
+      );
+      expect(parseValueSyntax(`'name'?`)).to.eql(
+        literal("name", true, { range: [0, 1] })
+      );
+      expect(parseValueSyntax(`'name'+`)).to.eql(
+        literal("name", true, { range: [1, Infinity] })
+      );
+      expect(parseValueSyntax(`'name'*`)).to.eql(
+        literal("name", true, { range: [0, Infinity] })
+      );
+      expect(parseValueSyntax(`<'name'>{2}`)).to.eql(
+        literal("name", true, { range: [2, 2] })
+      );
+      expect(parseValueSyntax(`<'name'>{2, 4}`)).to.eql(
+        literal("name", true, { range: [2, 4] })
+      );
+    });
+    it("keyword with multipliers", () => {
+      expect(parseValueSyntax(`name!`)).to.eql(
+        keyword("name", { range: [1, 1] })
+      );
+      expect(parseValueSyntax(`name?`)).to.eql(
+        keyword("name", { range: [0, 1] })
+      );
+      expect(parseValueSyntax(`name+`)).to.eql(
+        keyword("name", { range: [1, Infinity] })
+      );
+      expect(parseValueSyntax(`name*`)).to.eql(
+        keyword("name", { range: [0, Infinity] })
+      );
+      expect(parseValueSyntax(`name{2}`)).to.eql(
+        keyword("name", { range: [2, 2] })
+      );
+      expect(parseValueSyntax(`name{2, 4}`)).to.eql(
+        keyword("name", { range: [2, 4] })
+      );
+    });
+    it("group with multipliers", () => {
+      expect(parseValueSyntax(`[a]!`)).to.eql(
+        group([keyword("a")], { range: [1, 1] })
+      );
+      expect(parseValueSyntax(`[a]?`)).to.eql(
+        group([keyword("a")], { range: [0, 1] })
+      );
+      expect(parseValueSyntax(`[a]+`)).to.eql(
+        group([keyword("a")], { range: [1, Infinity] })
+      );
+      expect(parseValueSyntax(`[a]*`)).to.eql(
+        group([keyword("a")], { range: [0, Infinity] })
+      );
+      expect(parseValueSyntax(`[a]{2}`)).to.eql(
+        group([keyword("a")], { range: [2, 2] })
+      );
+      expect(parseValueSyntax(`[a]{2, 4}`)).to.eql(
+        group([keyword("a")], { range: [2, 4] })
+      );
+    });
+  });
+
+  describe("combinators", () => {
+    describe("group", () => {
+      it("should parse group combinator", () => {
+        expect(parseValueSyntax(`[a]`)).to.eql(group([keyword("a")]));
+      });
+      it("should parse nested group combinator", () => {
+        expect(parseValueSyntax(`[[a]]`)).to.eql(
+          group([group([keyword("a")])])
+        );
+      });
+    });
+    describe("juxtaposition", () => {
+      it("should parse juxtaposition combinator (with two nodes)", () => {
+        expect(parseValueSyntax(`a b`)).to.eql(
+          juxtaposing([keyword("a"), keyword("b")])
+        );
+      });
+      it("should parse juxtaposition combinator (with three nodes)", () => {
+        expect(parseValueSyntax(`a b c`)).to.eql(
+          juxtaposing([keyword("a"), keyword("b"), keyword("c")])
+        );
+      });
+    });
+    describe("double-ampersand", () => {
+      it("should parse double-ampersand combinator", () => {
+        expect(parseValueSyntax(`a && b`)).to.eql(
+          doubleAmpersand([keyword("a"), keyword("b")])
+        );
+      });
+      it("should parse double-ampersand combinator with more then two items", () => {
+        expect(parseValueSyntax(`a && b && c`)).to.eql(
+          doubleAmpersand([keyword("a"), keyword("b"), keyword("c")])
+        );
+      });
+    });
+    describe("double-bar", () => {
+      it("should parse double-bar combinator", () => {
+        expect(parseValueSyntax(`a || b`)).to.eql(
+          doubleBar([keyword("a"), keyword("b")])
+        );
+      });
+      it("should parse double-bar combinator with more then two items", () => {
+        expect(parseValueSyntax(`a || b || c`)).to.eql(
+          doubleBar([keyword("a"), keyword("b"), keyword("c")])
+        );
+      });
+    });
+    describe.only("bar", () => {
+      it("should parse bar combinator", () => {
+        expect(parseValueSyntax(`a | b`)).to.eql(
+          bar([keyword("a"), keyword("b")])
+        );
+      });
+      it("should parse bar combinator", () => {
+        expect(parseValueSyntax(`a | b | c`)).to.eql(
+          bar([keyword("a"), keyword("b"), keyword("c")])
+        );
+      });
+    });
+  });
+
+  describe("grouping order", () => {
+    it("no grouping ordering", () => {
+      expect(parseValueSyntax(`a b | c || d && e f`)).to.eql(
+        bar([
+          juxtaposing([keyword("a"), keyword("b")]),
+          doubleBar([
+            keyword("c"),
+            doubleAmpersand([
+              keyword("d"),
+              juxtaposing([keyword("e"), keyword("f")]),
+            ]),
+          ]),
+        ])
+      );
+    });
+  });
+});
diff --git a/packages/test-kit/src/parse-tester.ts b/packages/test-kit/src/parse-tester.ts
index c20b3118..3393e7c8 100644
--- a/packages/test-kit/src/parse-tester.ts
+++ b/packages/test-kit/src/parse-tester.ts
@@ -1,10 +1,6 @@
 import { isMatch } from "./is-match";
 
-export interface TesterConfig<
-  AST,
-  INPUT extends string,
-  CONFIG
-> {
+export interface TesterConfig<AST, INPUT extends string, CONFIG> {
   parse: (input: INPUT, options?: CONFIG) => AST;
   stringify?: (ast: AST) => string;
   log?: (...msgs: string[]) => void;
@@ -17,19 +13,18 @@ export interface TestOptions<AST, CONFIG> {
   config?: CONFIG;
 }
 
-export function createParseTester<
-  AST,
-  INPUT extends string,
-  CONFIG
->({
+export function createParseTester<AST, INPUT extends string, CONFIG>({
   parse,
   stringify,
 }: TesterConfig<AST, INPUT, CONFIG>) {
-  const safeParse = (source: INPUT, config?: CONFIG) => {
+  const safeParse = (
+    source: INPUT,
+    config?: CONFIG
+  ): [AST, null] | [null, Error] => {
     try {
       return [parse(source, config), null];
     } catch (error) {
-      return [null, error];
+      return [null, error as Error];
     }
   };
   return (
@@ -46,7 +41,7 @@ export function createParseTester<
       throw new Error(createParseTester.errors.mismatchAst(a, e, label));
     }
     if (stringify) {
-      const actualString = stringify(actualAst);
+      const actualString = stringify(actualAst!);
       expectedString = expectedString ?? source;
       if (actualString !== expectedString) {
         throw new Error(
diff --git a/scripts/dev-server.js b/scripts/dev-server.js
index 06b8ae7d..d52b0a73 100644
--- a/scripts/dev-server.js
+++ b/scripts/dev-server.js
@@ -78,10 +78,10 @@ async function createIndex() {
         withFileTypes: true,
     });
     const paths = files
-        .filter((file) => !file.isDirectory())
+        .filter((file) => !file.isDirectory() && file.name.endsWith('html'))
         .map(({ name: fileName }) => {
-            const name = path.parse(fileName).name;
-            const href = `/demos/${name}`;
+            const { name, ext } = path.parse(fileName);
+            const href = `/demos/${name}${ext}`;
             return `<a href="${href}">${name}</a>`;
         });
     return `
diff --git a/yarn.lock b/yarn.lock
index ee14d64a..f30ad572 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4973,10 +4973,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@~4.3.5:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
-  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+typescript@~4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86"
+  integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==
 
 uglify-js@^3.1.4:
   version "3.14.1"

From 87b24956e06dee0903b5c029a6d230d81a74b63a Mon Sep 17 00:00:00 2001
From: Barak Igal <baraki@wix.com>
Date: Thu, 23 Sep 2021 10:04:22 +0300
Subject: [PATCH 05/16] tests passing

---
 .../src/value-syntax-parser.ts                | 62 +++++++++++--------
 .../test/css-value-syntax.spec.ts             | 10 +--
 2 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/packages/css-value-parser/src/value-syntax-parser.ts b/packages/css-value-parser/src/value-syntax-parser.ts
index ab935bb8..409b6d54 100644
--- a/packages/css-value-parser/src/value-syntax-parser.ts
+++ b/packages/css-value-parser/src/value-syntax-parser.ts
@@ -198,13 +198,12 @@ export function doubleBar(nodes: ValueSyntaxAstNode[]): DoubleBarNode {
 
 interface ParsingContext {
   ast: ValueSyntaxAstNode[];
-  state: [allOf: number[], anyOf: number[], oneOf: number[]];
 }
 
 function parseTokens(tokens: ValueSyntaxToken[], source: string) {
   const handleToken = (
     token: ValueSyntaxToken,
-    { ast, state }: ParsingContext,
+    { ast }: ParsingContext,
     _source: string,
     s: Seeker<ValueSyntaxToken>
   ) => {
@@ -244,9 +243,9 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
         ast.push(dataType(name.value, range));
       }
     } else if (token.type === "[") {
-      const res = s.run(handleToken, { ast: [], state: [[], [], []] }, source);
+      const res = s.run(handleToken, { ast: [] }, source);
       // eslint-disable-next-line no-debugger
-
+      applyPrecedence(res.ast);
       ast.push(group(res.ast));
     } else if (token.type === "]") {
       return false;
@@ -354,13 +353,13 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
       if (!nextAnd) {
         throw new Error("missing &");
       }
-      state[0].push(ast.push(doubleAmpersand([])) - 1);
+      ast.push(doubleAmpersand([]));
     } else if (token.type === "|") {
       const nextBar = s.take("|");
       if (nextBar) {
-        state[1].push(ast.push(doubleBar([])) - 1);
+        ast.push(doubleBar([]));
       } else {
-        state[2].push(ast.push(bar([])) - 1);
+        ast.push(bar([]));
       }
     } else {
       s.eat("space");
@@ -374,31 +373,42 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
 
   const results = new Seeker(tokens).run<ParsingContext>(
     handleToken,
-    { ast: [], state: [[], [], []] },
+    { ast: [] },
     source
   );
 
-  applyPrecedence(results);
+  applyPrecedence(results.ast);
 
   return results.ast[0];
 }
 
-function applyPrecedence({ ast, state }: ParsingContext) {
-  
-  for (let i = 0; i < state.length; i++) {
-    const precedenceGroup = state[i];
-    let length = precedenceGroup.length;
-    while (length--) {
-      const index = precedenceGroup[length];
-      const before = ast[index - 1];
-      const target = ast[index] as DoubleAmpersandNode;
-      const after = ast[index + 1];
-      if (after.type === target.type) {
-        target.nodes.push(before, ...after.nodes);
-        ast.splice(index - 1, 3, target);
-      } else {
-        target.nodes.push(before, after);
-        ast.splice(index - 1, 3, target);
+function applyPrecedence(ast: ValueSyntaxAstNode[]) {
+  const order = ["&&", "||", "|"] as const;
+
+  for (let i = 0; i < order.length; i++) {
+    const type = order[i];
+    for (let j = 0; j < ast.length; j++) {
+      const node = ast[j];
+      if (node.type === type) {
+        const before = ast[j - 1];
+        const after = ast[j + 1];
+        if (!before) {
+          throw new Error(`missing node before ${type}`);
+        }
+        if (!after) {
+          throw new Error(`missing node after ${type}`);
+        }
+        if (after.type === type) {
+          throw new Error("invalid grouping");
+        }
+        if (before.type === type) {
+          before.nodes.push(after);
+          ast.splice(j - 1, 3, before);
+        } else {
+          node.nodes.push(before, after);
+          ast.splice(j - 1, 3, node);
+        }
+        j--;
       }
     }
   }
@@ -443,7 +453,7 @@ function applyJuxtaposing(ast: ValueSyntaxAstNode[]) {
   if (ast.length > 1) {
     const last = ast[ast.length - 1];
     const prev = ast[ast.length - 2];
-    if (prev.type === "juxtaposing") {
+    if (prev.type === "juxtaposing" && !isLowLevelGroup(last)) {
       ast.length = ast.length - 1;
       prev.nodes.push(last);
     } else if (!isLowLevelGroup(prev) && !isLowLevelGroup(last)) {
diff --git a/packages/css-value-parser/test/css-value-syntax.spec.ts b/packages/css-value-parser/test/css-value-syntax.spec.ts
index b086a04a..c381c7a1 100644
--- a/packages/css-value-parser/test/css-value-syntax.spec.ts
+++ b/packages/css-value-parser/test/css-value-syntax.spec.ts
@@ -106,10 +106,10 @@ describe.only("value-syntax-parser", () => {
       expect(parseValueSyntax(`<'name'>*`)).to.eql(
         property("name", undefined, { range: [0, Infinity] })
       );
-      expect(parseValueSyntax(`<name>{2}`)).to.eql(
+      expect(parseValueSyntax(`<'name'>{2}`)).to.eql(
         property("name", undefined, { range: [2, 2] })
       );
-      expect(parseValueSyntax(`<name>{2, 4}`)).to.eql(
+      expect(parseValueSyntax(`<'name'>{2, 4}`)).to.eql(
         property("name", undefined, { range: [2, 4] })
       );
     });
@@ -126,10 +126,10 @@ describe.only("value-syntax-parser", () => {
       expect(parseValueSyntax(`'name'*`)).to.eql(
         literal("name", true, { range: [0, Infinity] })
       );
-      expect(parseValueSyntax(`<'name'>{2}`)).to.eql(
+      expect(parseValueSyntax(`'name'{2}`)).to.eql(
         literal("name", true, { range: [2, 2] })
       );
-      expect(parseValueSyntax(`<'name'>{2, 4}`)).to.eql(
+      expect(parseValueSyntax(`'name'{2, 4}`)).to.eql(
         literal("name", true, { range: [2, 4] })
       );
     });
@@ -222,7 +222,7 @@ describe.only("value-syntax-parser", () => {
         );
       });
     });
-    describe.only("bar", () => {
+    describe("bar", () => {
       it("should parse bar combinator", () => {
         expect(parseValueSyntax(`a | b`)).to.eql(
           bar([keyword("a"), keyword("b")])

From 129ee2ed9afbcde28b10486d1c6c244e3e55935f Mon Sep 17 00:00:00 2001
From: Barak Igal <baraki@wix.com>
Date: Thu, 23 Sep 2021 10:27:31 +0300
Subject: [PATCH 06/16] start sanity

---
 .../src/value-syntax-parser.ts                | 37 +++++++++++++------
 .../test/css-value-syntax.spec.ts             | 16 +++++++-
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/packages/css-value-parser/src/value-syntax-parser.ts b/packages/css-value-parser/src/value-syntax-parser.ts
index 409b6d54..6dcc3cf3 100644
--- a/packages/css-value-parser/src/value-syntax-parser.ts
+++ b/packages/css-value-parser/src/value-syntax-parser.ts
@@ -289,31 +289,34 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
     } else if (token.type === "space") {
       s.eat("space");
     } else if (isRangeMultiplier(token)) {
-      const node = last(ast);
-      if (!node) {
-        throw new Error("unexpected modifier");
+      let node = last(ast);
+
+      if (node.type === "juxtaposing") {
+        // TODO: handle multi juxtaposing nesting?
+        node = last(node.nodes);
       }
-      if (isLowLevelGroup(node) || node.type === "juxtaposing") {
+      if (!node || node.type === "juxtaposing" || isLowLevelGroup(node)) {
         throw new Error("unexpected modifier");
       }
-
       node.multipliers ??= {};
       if (node.multipliers.range) {
         throw new Error("multiple multipliers on same node");
       }
       node.multipliers.range = typeToRange(token.type);
     } else if (token.type === "{") {
-      const node = last(ast);
-      if (!node) {
-        throw new Error("unexpected modifier");
+      let node = last(ast);
+
+      if (node.type === "juxtaposing") {
+        // TODO: handle multi juxtaposing nesting?
+        node = last(node.nodes);
       }
-      if (isLowLevelGroup(node) || node.type === "juxtaposing") {
-        throw new Error("unexpected modifier");
+      if (!node || isLowLevelGroup(node) || node.type === "juxtaposing") {
+        throw new Error("unexpected range modifier");
       }
 
       const start = s.eat("space").take("text");
       if (!start) {
-        throw new Error("missing range start");
+        throw new Error("missing range start value");
       }
       const sep = s.eat("space").take(",");
       if (sep) {
@@ -348,6 +351,18 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
           parseNumber(start.value),
         ];
       }
+    } else if (token.type === "#") {
+      let node = last(ast);
+
+      if (node.type === "juxtaposing") {
+        // TODO: handle multi juxtaposing nesting?
+        node = last(node.nodes);
+      }
+      if (!node || node.type === "juxtaposing" || isLowLevelGroup(node)) {
+        throw new Error("unexpected list modifier");
+      }
+      node.multipliers ??= {};
+      node.multipliers.list = true;
     } else if (token.type === "&") {
       const nextAnd = s.take("&");
       if (!nextAnd) {
diff --git a/packages/css-value-parser/test/css-value-syntax.spec.ts b/packages/css-value-parser/test/css-value-syntax.spec.ts
index c381c7a1..4cc55866 100644
--- a/packages/css-value-parser/test/css-value-syntax.spec.ts
+++ b/packages/css-value-parser/test/css-value-syntax.spec.ts
@@ -13,7 +13,21 @@ import {
   property,
 } from "../src/value-syntax-parser";
 
-describe.only("value-syntax-parser", () => {
+import { valueDefinitions } from "../src/value-definitions";
+
+describe("sanity", () => {
+  for (const [key, { syntax }] of Object.entries(valueDefinitions.props)) {
+    if (key === "<'overflow-clip-margin'>") {
+      it(key + ": " + syntax, () => {
+        parseValueSyntax(syntax);
+      });
+    }
+  }
+});
+
+// add test for # 
+
+describe("value-syntax-parser", () => {
   describe("components", () => {
     it("should parse simple data-type component", () => {
       expect(parseValueSyntax(`<name>`)).to.eql(dataType("name"));

From b1c5a885688ff98640220ce8f70185849f6cda4a Mon Sep 17 00:00:00 2001
From: Ido Rosenthal <idoros@gmail.com>
Date: Thu, 23 Sep 2021 12:37:31 +0300
Subject: [PATCH 07/16] test: change value syntax sanity to use webref/css

---
 packages/css-value-parser/package.json        |    3 +
 .../css-value-parser/src/value-definitions.ts | 2014 -----------------
 .../src/value-syntax-parser.ts                |    6 +-
 .../test/css-value-syntax.spec.ts             |   38 +-
 packages/css-value-parser/test/types.d.ts     |   19 +
 yarn.lock                                     |    5 +
 6 files changed, 61 insertions(+), 2024 deletions(-)
 delete mode 100644 packages/css-value-parser/src/value-definitions.ts
 create mode 100644 packages/css-value-parser/test/types.d.ts

diff --git a/packages/css-value-parser/package.json b/packages/css-value-parser/package.json
index adb5732e..73b4219b 100644
--- a/packages/css-value-parser/package.json
+++ b/packages/css-value-parser/package.json
@@ -11,6 +11,9 @@
   "dependencies": {
     "@tokey/core": "^1.2.1"
   },
+  "devDependencies": {
+    "@webref/css": "^2.0.12"
+  },
   "keywords": [
     "parser",
     "css",
diff --git a/packages/css-value-parser/src/value-definitions.ts b/packages/css-value-parser/src/value-definitions.ts
deleted file mode 100644
index 72491b7c..00000000
--- a/packages/css-value-parser/src/value-definitions.ts
+++ /dev/null
@@ -1,2014 +0,0 @@
-export const valueDefinitions = {
-  props: {
-    "<'--*'>": {
-      syntax: "<declaration-value>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/--*",
-    },
-    "<'accent-color'>": {
-      syntax: "auto | <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color",
-    },
-    "<'align-content'>": {
-      syntax:
-        "normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/align-content",
-    },
-    "<'align-items'>": {
-      syntax:
-        "normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/align-items",
-    },
-    "<'align-self'>": {
-      syntax:
-        "auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/align-self",
-    },
-    "<'align-tracks'>": {
-      syntax:
-        "[ normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> ]#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/align-tracks",
-    },
-    "<'all'>": {
-      syntax: "initial | inherit | unset | revert",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/all",
-    },
-    "<'animation'>": {
-      syntax: "<single-animation>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation",
-      subProps: [
-        "<'animation-delay'>",
-        "<'animation-direction'>",
-        "<'animation-duration'>",
-        "<'animation-fill-mode'>",
-        "<'animation-iteration-count'>",
-        "<'animation-name'>",
-        "<'animation-play-state'>",
-        "<'animation-timing-function'>",
-      ],
-    },
-    "<'animation-delay'>": {
-      syntax: "<time>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay",
-    },
-    "<'animation-direction'>": {
-      syntax: "<single-animation-direction>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction",
-    },
-    "<'animation-duration'>": {
-      syntax: "<time>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration",
-    },
-    "<'animation-fill-mode'>": {
-      syntax: "<single-animation-fill-mode>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode",
-    },
-    "<'animation-iteration-count'>": {
-      syntax: "<single-animation-iteration-count>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count",
-    },
-    "<'animation-name'>": {
-      syntax: "[ none | <keyframes-name> ]#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name",
-    },
-    "<'animation-play-state'>": {
-      syntax: "<single-animation-play-state>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state",
-    },
-    "<'animation-timing-function'>": {
-      syntax: "<easing-function>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function",
-    },
-    "<'appearance'>": {
-      syntax: "none | auto | textfield | menulist-button | <compat-auto>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/appearance",
-    },
-    "<'aspect-ratio'>": {
-      syntax: "auto | <ratio>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio",
-    },
-    "<'backdrop-filter'>": {
-      syntax: "none | <filter-function-list>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter",
-    },
-    "<'backface-visibility'>": {
-      syntax: "visible | hidden",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility",
-    },
-    "<'background'>": {
-      syntax: "[ <bg-layer> , ]* <final-bg-layer>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background",
-      subProps: [
-        "<'background-attachment'>",
-        "<'background-clip'>",
-        "<'background-color'>",
-        "<'background-image'>",
-        "<'background-origin'>",
-        "<'background-position'>",
-        "<'background-repeat'>",
-        "<'background-size'>",
-      ],
-    },
-    "<'background-attachment'>": {
-      syntax: "<attachment>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment",
-    },
-    "<'background-blend-mode'>": {
-      syntax: "<blend-mode>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode",
-    },
-    "<'background-clip'>": {
-      syntax: "<box>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip",
-    },
-    "<'background-color'>": {
-      syntax: "<color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-color",
-    },
-    "<'background-image'>": {
-      syntax: "<bg-image>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-image",
-    },
-    "<'background-origin'>": {
-      syntax: "<box>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin",
-    },
-    "<'background-position'>": {
-      syntax: "<bg-position>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-position",
-    },
-    "<'background-position-x'>": {
-      syntax:
-        "[ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x",
-    },
-    "<'background-position-y'>": {
-      syntax:
-        "[ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y",
-    },
-    "<'background-repeat'>": {
-      syntax: "<repeat-style>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat",
-    },
-    "<'background-size'>": {
-      syntax: "<bg-size>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-size",
-    },
-    "<'block-size'>": {
-      syntax: "<'width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/block-size",
-    },
-    "<'border'>": {
-      syntax: "<line-width> || <line-style> || <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border",
-      subProps: ["<'border-color'>", "<'border-style'>", "<'border-width'>"],
-    },
-    "<'border-block'>": {
-      syntax: "<'border-top-width'> || <'border-top-style'> || <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block",
-      subProps: [
-        "<'border-block-color'>",
-        "<'border-block-style'>",
-        "<'border-block-width'>",
-      ],
-    },
-    "<'border-block-color'>": {
-      syntax: "<'border-top-color'>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-color",
-    },
-    "<'border-block-end'>": {
-      syntax: "<'border-top-width'> || <'border-top-style'> || <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end",
-      subProps: [
-        "<'border-block-end-color'>",
-        "<'border-block-end-style'>",
-        "<'border-block-end-width'>",
-      ],
-    },
-    "<'border-block-end-color'>": {
-      syntax: "<'border-top-color'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-color",
-    },
-    "<'border-block-end-style'>": {
-      syntax: "<'border-top-style'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-style",
-    },
-    "<'border-block-end-width'>": {
-      syntax: "<'border-top-width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-width",
-    },
-    "<'border-block-start'>": {
-      syntax: "<'border-top-width'> || <'border-top-style'> || <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start",
-      subProps: [
-        "<'border-block-start-color'>",
-        "<'border-block-start-style'>",
-        "<'border-block-start-width'>",
-      ],
-    },
-    "<'border-block-start-color'>": {
-      syntax: "<'border-top-color'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-color",
-    },
-    "<'border-block-start-style'>": {
-      syntax: "<'border-top-style'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-style",
-    },
-    "<'border-block-start-width'>": {
-      syntax: "<'border-top-width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-width",
-    },
-    "<'border-block-style'>": {
-      syntax: "<'border-top-style'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-style",
-    },
-    "<'border-block-width'>": {
-      syntax: "<'border-top-width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-width",
-    },
-    "<'border-bottom'>": {
-      syntax: "<line-width> || <line-style> || <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom",
-      subProps: [
-        "<'border-bottom-color'>",
-        "<'border-bottom-style'>",
-        "<'border-bottom-width'>",
-      ],
-    },
-    "<'border-bottom-color'>": {
-      syntax: "<'border-top-color'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color",
-    },
-    "<'border-bottom-left-radius'>": {
-      syntax: "<length-percentage>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius",
-    },
-    "<'border-bottom-right-radius'>": {
-      syntax: "<length-percentage>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius",
-    },
-    "<'border-bottom-style'>": {
-      syntax: "<line-style>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style",
-    },
-    "<'border-bottom-width'>": {
-      syntax: "<line-width>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width",
-    },
-    "<'border-collapse'>": {
-      syntax: "collapse | separate",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse",
-    },
-    "<'border-color'>": {
-      syntax: "<color>{1,4}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-color",
-      subProps: [
-        "<'border-bottom-color'>",
-        "<'border-left-color'>",
-        "<'border-right-color'>",
-        "<'border-top-color'>",
-      ],
-    },
-    "<'border-end-end-radius'>": {
-      syntax: "<length-percentage>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius",
-    },
-    "<'border-end-start-radius'>": {
-      syntax: "<length-percentage>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius",
-    },
-    "<'border-image'>": {
-      syntax:
-        "<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image",
-      subProps: [
-        "<'border-image-outset'>",
-        "<'border-image-repeat'>",
-        "<'border-image-slice'>",
-        "<'border-image-source'>",
-        "<'border-image-width'>",
-      ],
-    },
-    "<'border-image-outset'>": {
-      syntax: "[ <length> | <number> ]{1,4}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset",
-    },
-    "<'border-image-repeat'>": {
-      syntax: "[ stretch | repeat | round | space ]{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat",
-    },
-    "<'border-image-slice'>": {
-      syntax: "<number-percentage>{1,4} && fill?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice",
-    },
-    "<'border-image-source'>": {
-      syntax: "none | <image>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source",
-    },
-    "<'border-image-width'>": {
-      syntax: "[ <length-percentage> | <number> | auto ]{1,4}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width",
-    },
-    "<'border-inline'>": {
-      syntax: "<'border-top-width'> || <'border-top-style'> || <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline",
-      subProps: [
-        "<'border-inline-color'>",
-        "<'border-inline-style'>",
-        "<'border-inline-width'>",
-      ],
-    },
-    "<'border-inline-color'>": {
-      syntax: "<'border-top-color'>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-color",
-    },
-    "<'border-inline-end'>": {
-      syntax: "<'border-top-width'> || <'border-top-style'> || <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end",
-      subProps: [
-        "<'border-inline-end-color'>",
-        "<'border-inline-end-style'>",
-        "<'border-inline-end-width'>",
-      ],
-    },
-    "<'border-inline-end-color'>": {
-      syntax: "<'border-top-color'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color",
-    },
-    "<'border-inline-end-style'>": {
-      syntax: "<'border-top-style'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style",
-    },
-    "<'border-inline-end-width'>": {
-      syntax: "<'border-top-width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width",
-    },
-    "<'border-inline-start'>": {
-      syntax: "<'border-top-width'> || <'border-top-style'> || <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start",
-      subProps: [
-        "<'border-inline-start-color'>",
-        "<'border-inline-start-style'>",
-        "<'border-inline-start-width'>",
-      ],
-    },
-    "<'border-inline-start-color'>": {
-      syntax: "<'border-top-color'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color",
-    },
-    "<'border-inline-start-style'>": {
-      syntax: "<'border-top-style'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style",
-    },
-    "<'border-inline-start-width'>": {
-      syntax: "<'border-top-width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width",
-    },
-    "<'border-inline-style'>": {
-      syntax: "<'border-top-style'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-style",
-    },
-    "<'border-inline-width'>": {
-      syntax: "<'border-top-width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-width",
-    },
-    "<'border-left'>": {
-      syntax: "<line-width> || <line-style> || <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left",
-      subProps: [
-        "<'border-left-color'>",
-        "<'border-left-style'>",
-        "<'border-left-width'>",
-      ],
-    },
-    "<'border-left-color'>": {
-      syntax: "<color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color",
-    },
-    "<'border-left-style'>": {
-      syntax: "<line-style>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style",
-    },
-    "<'border-left-width'>": {
-      syntax: "<line-width>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width",
-    },
-    "<'border-radius'>": {
-      syntax: "<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius",
-      subProps: [
-        "<'border-top-left-radius'>",
-        "<'border-top-right-radius'>",
-        "<'border-bottom-right-radius'>",
-        "<'border-bottom-left-radius'>",
-      ],
-    },
-    "<'border-right'>": {
-      syntax: "<line-width> || <line-style> || <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right",
-      subProps: [
-        "<'border-right-color'>",
-        "<'border-right-style'>",
-        "<'border-right-width'>",
-      ],
-    },
-    "<'border-right-color'>": {
-      syntax: "<color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color",
-    },
-    "<'border-right-style'>": {
-      syntax: "<line-style>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style",
-    },
-    "<'border-right-width'>": {
-      syntax: "<line-width>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width",
-    },
-    "<'border-spacing'>": {
-      syntax: "<length> <length>?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing",
-    },
-    "<'border-start-end-radius'>": {
-      syntax: "<length-percentage>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius",
-    },
-    "<'border-start-start-radius'>": {
-      syntax: "<length-percentage>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius",
-    },
-    "<'border-style'>": {
-      syntax: "<line-style>{1,4}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-style",
-      subProps: [
-        "<'border-bottom-style'>",
-        "<'border-left-style'>",
-        "<'border-right-style'>",
-        "<'border-top-style'>",
-      ],
-    },
-    "<'border-top'>": {
-      syntax: "<line-width> || <line-style> || <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top",
-      subProps: [
-        "<'border-top-color'>",
-        "<'border-top-style'>",
-        "<'border-top-width'>",
-      ],
-    },
-    "<'border-top-color'>": {
-      syntax: "<color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color",
-    },
-    "<'border-top-left-radius'>": {
-      syntax: "<length-percentage>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius",
-    },
-    "<'border-top-right-radius'>": {
-      syntax: "<length-percentage>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius",
-    },
-    "<'border-top-style'>": {
-      syntax: "<line-style>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style",
-    },
-    "<'border-top-width'>": {
-      syntax: "<line-width>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width",
-    },
-    "<'border-width'>": {
-      syntax: "<line-width>{1,4}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-width",
-      subProps: [
-        "<'border-bottom-width'>",
-        "<'border-left-width'>",
-        "<'border-right-width'>",
-        "<'border-top-width'>",
-      ],
-    },
-    "<'bottom'>": {
-      syntax: "<length> | <percentage> | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/bottom",
-    },
-    "<'@page#page-margin-box-type'>": {
-      syntax: "@page <page-selector-list> {",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@page#page-margin-box-type",
-    },
-    "<'box-decoration-break'>": {
-      syntax: "slice | clone",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break",
-    },
-    "<'box-shadow'>": {
-      syntax: "none | <shadow>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow",
-    },
-    "<'box-sizing'>": {
-      syntax: "content-box | border-box",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing",
-    },
-    "<'break-after'>": {
-      syntax:
-        "auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/break-after",
-    },
-    "<'break-before'>": {
-      syntax:
-        "auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/break-before",
-    },
-    "<'break-inside'>": {
-      syntax: "auto | avoid | avoid-page | avoid-column | avoid-region",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside",
-    },
-    "<'calc()'>": {
-      syntax: "calc( <calc-sum> )",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/calc()",
-    },
-    "<'caption-side'>": {
-      syntax:
-        "top | bottom | block-start | block-end | inline-start | inline-end",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side",
-    },
-    "<'caret-color'>": {
-      syntax: "auto | <color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color",
-    },
-    "<'@font-feature-values#@character-variant'>": {
-      syntax: "@font-feature-values <family-name># {",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values#@character-variant",
-    },
-    "<'font-variant-alternates#character-variant()'>": {
-      syntax:
-        "normal | [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#character-variant()",
-    },
-    "<'@charset'>": {
-      syntax: '@charset "<charset>";',
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@charset",
-    },
-    "<'clamp()'>": {
-      syntax: "clamp( <calc-sum>#{3} )",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()",
-    },
-    "<'clear'>": {
-      syntax: "none | left | right | both | inline-start | inline-end",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/clear",
-    },
-    "<'clip'>": {
-      syntax: "<shape> | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/clip",
-    },
-    "<'clip-path'>": {
-      syntax: "<clip-source> | [ <basic-shape> || <geometry-box> ] | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path",
-    },
-    "<'color'>": {
-      syntax: "<color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/color",
-    },
-    "<'color-adjust'>": {
-      syntax: "economy | exact",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust",
-    },
-    "<'color-scheme'>": {
-      syntax: "normal | [ light | dark | <custom-ident> ]+",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme",
-    },
-    "<'column-count'>": {
-      syntax: "<integer> | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-count",
-    },
-    "<'column-fill'>": {
-      syntax: "auto | balance | balance-all",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill",
-    },
-    "<'column-gap'>": {
-      syntax: "normal | <length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap",
-    },
-    "<'column-rule'>": {
-      syntax:
-        "<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule",
-    },
-    "<'column-rule-color'>": {
-      syntax: "<color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color",
-    },
-    "<'column-rule-style'>": {
-      syntax: "<'border-style'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style",
-    },
-    "<'column-rule-width'>": {
-      syntax: "<'border-width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width",
-    },
-    "<'column-span'>": {
-      syntax: "none | all",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-span",
-    },
-    "<'column-width'>": {
-      syntax: "<length> | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/column-width",
-    },
-    "<'columns'>": {
-      syntax: "<'column-width'> || <'column-count'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/columns",
-      subProps: ["<'column-count'>", "<'column-width'>"],
-    },
-    "<'contain'>": {
-      syntax: "none | strict | content | [ size || layout || style || paint ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/contain",
-    },
-    "<'content'>": {
-      syntax:
-        "normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/content",
-    },
-    "<'counter()'>": {
-      syntax: "counter( <custom-ident>, <counter-style>? )",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/counter()",
-    },
-    "<'counter-increment'>": {
-      syntax: "[ <custom-ident> <integer>? ]+ | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment",
-    },
-    "<'counter-reset'>": {
-      syntax: "[ <custom-ident> <integer>? ]+ | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset",
-    },
-    "<'counter-set'>": {
-      syntax: "[ <custom-ident> <integer>? ]+ | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set",
-    },
-    "<'@counter-style'>": {
-      syntax: "@counter-style <counter-style-name> {",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style",
-    },
-    "<'counters()'>": {
-      syntax: "counters( <custom-ident>, <string>, <counter-style>? )",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/counters()",
-    },
-    "<'cross-fade()'>": {
-      syntax: "cross-fade( <cf-mixing-image> , <cf-final-image>? )",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/cross-fade()",
-    },
-    "<'cursor'>": {
-      syntax:
-        "[ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/cursor",
-    },
-    "<':dir'>": {
-      syntax: ":dir( [ ltr | rtl ] )",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/:dir",
-    },
-    "<'direction'>": {
-      syntax: "ltr | rtl",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/direction",
-    },
-    "<'display'>": {
-      syntax:
-        "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/display",
-    },
-    "<'empty-cells'>": {
-      syntax: "show | hide",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells",
-    },
-    "<'env()'>": {
-      syntax: "env( <custom-ident> , <declaration-value>? )",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/env()",
-    },
-    "<'filter'>": {
-      syntax: "none | <filter-function-list>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/filter",
-    },
-    "<'flex'>": {
-      syntax: "none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex",
-      subProps: ["<'flex-grow'>", "<'flex-shrink'>", "<'flex-basis'>"],
-    },
-    "<'flex-basis'>": {
-      syntax: "content | <'width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis",
-    },
-    "<'flex-direction'>": {
-      syntax: "row | row-reverse | column | column-reverse",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction",
-    },
-    "<'flex-flow'>": {
-      syntax: "<'flex-direction'> || <'flex-wrap'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow",
-      subProps: ["<'flex-direction'>", "<'flex-wrap'>"],
-    },
-    "<'flex-grow'>": {
-      syntax: "<number>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow",
-    },
-    "<'flex-shrink'>": {
-      syntax: "<number>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink",
-    },
-    "<'flex-wrap'>": {
-      syntax: "nowrap | wrap | wrap-reverse",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap",
-    },
-    "<'float'>": {
-      syntax: "left | right | none | inline-start | inline-end",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/float",
-    },
-    "<'font'>": {
-      syntax:
-        "[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font",
-      subProps: [
-        "<'font-family'>",
-        "<'font-size'>",
-        "<'font-stretch'>",
-        "<'font-style'>",
-        "<'font-variant'>",
-        "<'font-weight'>",
-        "<'line-height'>",
-      ],
-    },
-    "<'font-family'>": {
-      syntax: "[ <family-name> | <generic-family> ]#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-family",
-    },
-    "<'font-feature-settings'>": {
-      syntax: "normal | <feature-tag-value>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings",
-    },
-    "<'@font-feature-values'>": {
-      syntax: "@font-feature-values <family-name># {",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values",
-    },
-    "<'font-kerning'>": {
-      syntax: "auto | normal | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning",
-    },
-    "<'font-language-override'>": {
-      syntax: "normal | <string>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-language-override",
-    },
-    "<'font-optical-sizing'>": {
-      syntax: "auto | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing",
-    },
-    "<'font-size'>": {
-      syntax: "<absolute-size> | <relative-size> | <length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-size",
-    },
-    "<'font-size-adjust'>": {
-      syntax:
-        "none | [ ex-height | cap-height | ch-width | ic-width | ic-height ]? [ from-font | <number> ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust",
-    },
-    "<'font-stretch'>": {
-      syntax: "<font-stretch-absolute>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch",
-    },
-    "<'font-style'>": {
-      syntax: "normal | italic | oblique <angle>?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-style",
-    },
-    "<'font-synthesis'>": {
-      syntax: "none | [ weight || style ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis",
-    },
-    "<'font-variant'>": {
-      syntax:
-        "normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant",
-      subProps: [
-        "<'font-variant-alternates'>",
-        "<'font-variant-caps'>",
-        "<'font-variant-east-asian'>",
-        "<'font-variant-ligatures'>",
-        "<'font-variant-numeric'>",
-      ],
-    },
-    "<'font-variant-alternates'>": {
-      syntax:
-        "normal | [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates",
-    },
-    "<'font-variant-caps'>": {
-      syntax:
-        "normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps",
-    },
-    "<'font-variant-east-asian'>": {
-      syntax:
-        "normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian",
-    },
-    "<'font-variant-ligatures'>": {
-      syntax:
-        "normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures",
-    },
-    "<'font-variant-numeric'>": {
-      syntax:
-        "normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric",
-    },
-    "<'font-variant-position'>": {
-      syntax: "normal | sub | super",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position",
-    },
-    "<'font-variation-settings'>": {
-      syntax: "normal | [ <string> <number> ]#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings",
-    },
-    "<'font-weight'>": {
-      syntax: "<font-weight-absolute> | bolder | lighter",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight",
-    },
-    "<'forced-color-adjust'>": {
-      syntax: "auto | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust",
-    },
-    "<'gap'>": {
-      syntax: "<'row-gap'> <'column-gap'>?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/gap",
-    },
-    "<'grid'>": {
-      syntax:
-        "<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid",
-      subProps: [
-        "<'grid-auto-columns'>",
-        "<'grid-auto-flow'>",
-        "<'grid-auto-rows'>",
-        "<'grid-template-areas'>",
-        "<'grid-template-columns'>",
-        "<'grid-template-rows'>",
-      ],
-    },
-    "<'grid-area'>": {
-      syntax: "<grid-line> [ / <grid-line> ]{0,3}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area",
-      subProps: [
-        "<'grid-row-start'>",
-        "<'grid-column-start'>",
-        "<'grid-row-end'>",
-        "<'grid-column-end'>",
-      ],
-    },
-    "<'grid-auto-columns'>": {
-      syntax: "<track-size>+",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns",
-    },
-    "<'grid-auto-flow'>": {
-      syntax: "[ row | column ] || dense",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow",
-    },
-    "<'grid-auto-rows'>": {
-      syntax: "<track-size>+",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows",
-    },
-    "<'grid-column'>": {
-      syntax: "<grid-line> [ / <grid-line> ]?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column",
-      subProps: ["<'grid-column-end'>", "<'grid-column-start'>"],
-    },
-    "<'grid-column-end'>": {
-      syntax: "<grid-line>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end",
-    },
-    "<'grid-column-start'>": {
-      syntax: "<grid-line>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start",
-    },
-    "<'grid-row'>": {
-      syntax: "<grid-line> [ / <grid-line> ]?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row",
-      subProps: ["<'grid-row-end'>", "<'grid-row-start'>"],
-    },
-    "<'grid-row-end'>": {
-      syntax: "<grid-line>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end",
-    },
-    "<'grid-row-start'>": {
-      syntax: "<grid-line>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start",
-    },
-    "<'grid-template'>": {
-      syntax:
-        "none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template",
-      subProps: [
-        "<'grid-template-areas'>",
-        "<'grid-template-columns'>",
-        "<'grid-template-rows'>",
-      ],
-    },
-    "<'grid-template-areas'>": {
-      syntax: "none | <string>+",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas",
-    },
-    "<'grid-template-columns'>": {
-      syntax:
-        "none | <track-list> | <auto-track-list> | subgrid <line-name-list>?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns",
-    },
-    "<'grid-template-rows'>": {
-      syntax:
-        "none | <track-list> | <auto-track-list> | subgrid <line-name-list>?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows",
-    },
-    "<'hanging-punctuation'>": {
-      syntax: "none | [ first || [ force-end | allow-end ] || last ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation",
-    },
-    "<'height'>": {
-      syntax:
-        "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/height",
-    },
-    "<'hyphens'>": {
-      syntax: "none | manual | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens",
-    },
-    "<'image-orientation'>": {
-      syntax: "from-image | <angle> | [ <angle>? flip ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation",
-    },
-    "<'image-rendering'>": {
-      syntax: "auto | crisp-edges | pixelated",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
-    },
-    "<'image-resolution'>": {
-      syntax: "[ from-image || <resolution> ] && snap?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/image-resolution",
-    },
-    "<'initial-letter'>": {
-      syntax: "normal | [ <number> <integer>? ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter",
-    },
-    "<'initial-letter-align'>": {
-      syntax: "[ auto | alphabetic | hanging | ideographic ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter-align",
-    },
-    "<'inline-size'>": {
-      syntax: "<'width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size",
-    },
-    "<'inset'>": {
-      syntax: "<'top'>{1,4}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset",
-    },
-    "<'inset-block'>": {
-      syntax: "<'top'>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block",
-      subProps: ["<'inset-block-end'>", "<'inset-block-start'>"],
-    },
-    "<'inset-block-end'>": {
-      syntax: "<'top'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end",
-    },
-    "<'inset-block-start'>": {
-      syntax: "<'top'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start",
-    },
-    "<'inset-inline'>": {
-      syntax: "<'top'>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline",
-      subProps: ["<'inset-inline-end'>", "<'inset-inline-start'>"],
-    },
-    "<'inset-inline-end'>": {
-      syntax: "<'top'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end",
-    },
-    "<'inset-inline-start'>": {
-      syntax: "<'top'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start",
-    },
-    "<'isolation'>": {
-      syntax: "auto | isolate",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/isolation",
-    },
-    "<'justify-content'>": {
-      syntax:
-        "normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content",
-    },
-    "<'justify-items'>": {
-      syntax:
-        "normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items",
-    },
-    "<'justify-self'>": {
-      syntax:
-        "auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self",
-    },
-    "<'justify-tracks'>": {
-      syntax:
-        "[ normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ] ]#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-tracks",
-    },
-    "<'left'>": {
-      syntax: "<length> | <percentage> | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/left",
-    },
-    "<'letter-spacing'>": {
-      syntax: "normal | <length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing",
-    },
-    "<'line-break'>": {
-      syntax: "auto | loose | normal | strict | anywhere",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/line-break",
-    },
-    "<'line-height'>": {
-      syntax: "normal | <number> | <length> | <percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/line-height",
-    },
-    "<'line-height-step'>": {
-      syntax: "<length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/line-height-step",
-    },
-    "<'list-style'>": {
-      syntax:
-        "<'list-style-type'> || <'list-style-position'> || <'list-style-image'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style",
-      subProps: [
-        "<'list-style-image'>",
-        "<'list-style-position'>",
-        "<'list-style-type'>",
-      ],
-    },
-    "<'list-style-image'>": {
-      syntax: "<image> | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image",
-    },
-    "<'list-style-position'>": {
-      syntax: "inside | outside",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position",
-    },
-    "<'list-style-type'>": {
-      syntax: "<counter-style> | <string> | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type",
-    },
-    "<'margin'>": {
-      syntax: "[ <length> | <percentage> | auto ]{1,4}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin",
-      subProps: [
-        "<'margin-bottom'>",
-        "<'margin-left'>",
-        "<'margin-right'>",
-        "<'margin-top'>",
-      ],
-    },
-    "<'margin-block'>": {
-      syntax: "<'margin-left'>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block",
-      subProps: ["<'margin-block-end'>", "<'margin-block-start'>"],
-    },
-    "<'margin-block-end'>": {
-      syntax: "<'margin-left'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end",
-    },
-    "<'margin-block-start'>": {
-      syntax: "<'margin-left'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start",
-    },
-    "<'margin-bottom'>": {
-      syntax: "<length> | <percentage> | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom",
-    },
-    "<'margin-inline'>": {
-      syntax: "<'margin-left'>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline",
-      subProps: ["<'margin-inline-start'>", "<'margin-inline-end'>"],
-    },
-    "<'margin-inline-end'>": {
-      syntax: "<'margin-left'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end",
-    },
-    "<'margin-inline-start'>": {
-      syntax: "<'margin-left'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start",
-    },
-    "<'margin-left'>": {
-      syntax: "<length> | <percentage> | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left",
-    },
-    "<'margin-right'>": {
-      syntax: "<length> | <percentage> | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right",
-    },
-    "<'margin-top'>": {
-      syntax: "<length> | <percentage> | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top",
-    },
-    "<'margin-trim'>": {
-      syntax: "none | in-flow | all",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim",
-    },
-    "<'mask'>": {
-      syntax: "<mask-layer>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask",
-      subProps: [
-        "<'mask-clip'>",
-        "<'mask-composite'>",
-        "<'mask-image'>",
-        "<'mask-mode'>",
-        "<'mask-origin'>",
-        "<'mask-position'>",
-        "<'mask-repeat'>",
-        "<'mask-size'>",
-      ],
-    },
-    "<'mask-border'>": {
-      syntax:
-        "<'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border",
-      subProps: [
-        "<'mask-border-mode'>",
-        "<'mask-border-outset'>",
-        "<'mask-border-repeat'>",
-        "<'mask-border-slice'>",
-        "<'mask-border-source'>",
-        "<'mask-border-width'>",
-      ],
-    },
-    "<'mask-border-mode'>": {
-      syntax: "luminance | alpha",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-mode",
-    },
-    "<'mask-border-outset'>": {
-      syntax: "[ <length> | <number> ]{1,4}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-outset",
-    },
-    "<'mask-border-repeat'>": {
-      syntax: "[ stretch | repeat | round | space ]{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-repeat",
-    },
-    "<'mask-border-slice'>": {
-      syntax: "<number-percentage>{1,4} fill?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-slice",
-    },
-    "<'mask-border-source'>": {
-      syntax: "none | <image>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-source",
-    },
-    "<'mask-border-width'>": {
-      syntax: "[ <length-percentage> | <number> | auto ]{1,4}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-width",
-    },
-    "<'mask-clip'>": {
-      syntax: "[ <geometry-box> | no-clip ]#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip",
-    },
-    "<'mask-composite'>": {
-      syntax: "<compositing-operator>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite",
-    },
-    "<'mask-image'>": {
-      syntax: "<mask-reference>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image",
-    },
-    "<'mask-mode'>": {
-      syntax: "<masking-mode>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-mode",
-    },
-    "<'mask-origin'>": {
-      syntax: "<geometry-box>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-origin",
-    },
-    "<'mask-position'>": {
-      syntax: "<position>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position",
-    },
-    "<'mask-repeat'>": {
-      syntax: "<repeat-style>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-repeat",
-    },
-    "<'mask-size'>": {
-      syntax: "<bg-size>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-size",
-    },
-    "<'mask-type'>": {
-      syntax: "luminance | alpha",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type",
-    },
-    "<'masonry-auto-flow'>": {
-      syntax: "[ pack | next ] || [ definite-first | ordered ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/masonry-auto-flow",
-    },
-    "<'math-style'>": {
-      syntax: "normal | compact",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/math-style",
-    },
-    "<'max-block-size'>": {
-      syntax: "<'max-width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size",
-    },
-    "<'max-height'>": {
-      syntax:
-        "none | <length-percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/max-height",
-    },
-    "<'max-inline-size'>": {
-      syntax: "<'max-width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size",
-    },
-    "<'max-width'>": {
-      syntax:
-        "none | <length-percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/max-width",
-    },
-    "<'min-block-size'>": {
-      syntax: "<'min-width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size",
-    },
-    "<'min-height'>": {
-      syntax:
-        "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/min-height",
-    },
-    "<'min-inline-size'>": {
-      syntax: "<'min-width'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size",
-    },
-    "<'min-width'>": {
-      syntax:
-        "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/min-width",
-    },
-    "<'mix-blend-mode'>": {
-      syntax: "<blend-mode>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode",
-    },
-    "<'object-fit'>": {
-      syntax: "fill | contain | cover | none | scale-down",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit",
-    },
-    "<'object-position'>": {
-      syntax: "<position>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/object-position",
-    },
-    "<'offset'>": {
-      syntax:
-        "[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/offset",
-      subProps: [
-        "<'offset-anchor'>",
-        "<'offset-distance'>",
-        "<'offset-path'>",
-        "<'offset-position'>",
-        "<'offset-rotate'>",
-      ],
-    },
-    "<'offset-anchor'>": {
-      syntax: "auto | <position>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-anchor",
-    },
-    "<'offset-distance'>": {
-      syntax: "<length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance",
-    },
-    "<'offset-path'>": {
-      syntax:
-        "none | ray( [ <angle> && <size> && contain? ] ) | <path()> | <url> | [ <basic-shape> || <geometry-box> ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path",
-    },
-    "<'offset-position'>": {
-      syntax: "auto | <position>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-position",
-    },
-    "<'offset-rotate'>": {
-      syntax: "[ auto | reverse ] || <angle>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-rotate",
-    },
-    "<'opacity'>": {
-      syntax: "<alpha-value>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/opacity",
-    },
-    "<'order'>": {
-      syntax: "<integer>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/order",
-    },
-    "<'orphans'>": {
-      syntax: "<integer>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/orphans",
-    },
-    "<'outline'>": {
-      syntax: "[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline",
-      subProps: ["<'outline-color'>", "<'outline-style'>", "<'outline-width'>"],
-    },
-    "<'outline-color'>": {
-      syntax: "<color> | invert",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color",
-    },
-    "<'outline-offset'>": {
-      syntax: "<length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset",
-    },
-    "<'outline-style'>": {
-      syntax: "auto | <'border-style'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style",
-    },
-    "<'outline-width'>": {
-      syntax: "<line-width>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width",
-    },
-    "<'overflow'>": {
-      syntax: "[ visible | hidden | clip | scroll | auto ]{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow",
-      subProps: ["<'overflow-x'>", "<'overflow-y'>"],
-    },
-    "<'overflow-anchor'>": {
-      syntax: "auto | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor",
-    },
-    "<'overflow-block'>": {
-      syntax: "visible | hidden | clip | scroll | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block",
-    },
-    "<'overflow-clip-margin'>": {
-      syntax: "<visual-box> || [0,∞]>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-margin",
-    },
-    "<'overflow-inline'>": {
-      syntax: "visible | hidden | clip | scroll | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-inline",
-    },
-    "<'overflow-wrap'>": {
-      syntax: "normal | break-word | anywhere",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap",
-    },
-    "<'overflow-x'>": {
-      syntax: "visible | hidden | clip | scroll | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x",
-    },
-    "<'overflow-y'>": {
-      syntax: "visible | hidden | clip | scroll | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y",
-    },
-    "<'overscroll-behavior'>": {
-      syntax: "[ contain | none | auto ]{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior",
-    },
-    "<'overscroll-behavior-block'>": {
-      syntax: "contain | none | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-block",
-    },
-    "<'overscroll-behavior-inline'>": {
-      syntax: "contain | none | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-inline",
-    },
-    "<'overscroll-behavior-x'>": {
-      syntax: "contain | none | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x",
-    },
-    "<'overscroll-behavior-y'>": {
-      syntax: "contain | none | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y",
-    },
-    "<'padding'>": {
-      syntax: "[ <length> | <percentage> ]{1,4}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding",
-      subProps: [
-        "<'padding-bottom'>",
-        "<'padding-left'>",
-        "<'padding-right'>",
-        "<'padding-top'>",
-      ],
-    },
-    "<'padding-block'>": {
-      syntax: "<'padding-left'>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block",
-      subProps: ["<'padding-block-end'>", "<'padding-block-start'>"],
-    },
-    "<'padding-block-end'>": {
-      syntax: "<'padding-left'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end",
-    },
-    "<'padding-block-start'>": {
-      syntax: "<'padding-left'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start",
-    },
-    "<'padding-bottom'>": {
-      syntax: "<length> | <percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom",
-    },
-    "<'padding-inline'>": {
-      syntax: "<'padding-left'>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline",
-      subProps: ["<'padding-inline-end'>", "<'padding-inline-start'>"],
-    },
-    "<'padding-inline-end'>": {
-      syntax: "<'padding-left'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end",
-    },
-    "<'padding-inline-start'>": {
-      syntax: "<'padding-left'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start",
-    },
-    "<'padding-left'>": {
-      syntax: "<length> | <percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left",
-    },
-    "<'padding-right'>": {
-      syntax: "<length> | <percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right",
-    },
-    "<'padding-top'>": {
-      syntax: "<length> | <percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top",
-    },
-    "<'page-break-after'>": {
-      syntax: "auto | always | avoid | left | right | recto | verso",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after",
-    },
-    "<'page-break-before'>": {
-      syntax: "auto | always | avoid | left | right | recto | verso",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before",
-    },
-    "<'page-break-inside'>": {
-      syntax: "auto | avoid",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside",
-    },
-    "<'paint-order'>": {
-      syntax: "normal | [ fill || stroke || markers ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order",
-    },
-    "<'perspective'>": {
-      syntax: "none | <length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/perspective",
-    },
-    "<'perspective-origin'>": {
-      syntax: "<position>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin",
-    },
-    "<'place-content'>": {
-      syntax: "<'align-content'> <'justify-content'>?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/place-content",
-      subProps: ["<'align-content'>", "<'justify-content'>"],
-    },
-    "<'place-items'>": {
-      syntax: "<'align-items'> <'justify-items'>?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/place-items",
-      subProps: ["<'align-items'>", "<'justify-items'>"],
-    },
-    "<'place-self'>": {
-      syntax: "<'align-self'> <'justify-self'>?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/place-self",
-      subProps: ["<'align-self'>", "<'justify-self'>"],
-    },
-    "<'pointer-events'>": {
-      syntax:
-        "auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events",
-    },
-    "<'position'>": {
-      syntax: "static | relative | absolute | sticky | fixed",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/position",
-    },
-    "<'quotes'>": {
-      syntax: "none | auto | [ <string> <string> ]+",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/quotes",
-    },
-    "<'resize'>": {
-      syntax: "none | both | horizontal | vertical | block | inline",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/resize",
-    },
-    "<'right'>": {
-      syntax: "<length> | <percentage> | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/right",
-    },
-    "<'rotate'>": {
-      syntax: "none | <angle> | [ x | y | z | <number>{3} ] && <angle>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/rotate",
-    },
-    "<'row-gap'>": {
-      syntax: "normal | <length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap",
-    },
-    "<'ruby-align'>": {
-      syntax: "start | center | space-between | space-around",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-align",
-    },
-    "<'ruby-position'>": {
-      syntax: "[ alternate || [ over | under ] ] | inter-character",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-position",
-    },
-    "<'scale'>": {
-      syntax: "none | <number>{1,3}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scale",
-    },
-    "<'scroll-behavior'>": {
-      syntax: "auto | smooth",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior",
-    },
-    "<'scroll-margin'>": {
-      syntax: "<length>{1,4}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin",
-      subProps: [
-        "<'scroll-margin-bottom'>",
-        "<'scroll-margin-left'>",
-        "<'scroll-margin-right'>",
-        "<'scroll-margin-top'>",
-      ],
-    },
-    "<'scroll-margin-block'>": {
-      syntax: "<length>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block",
-      subProps: [
-        "<'scroll-margin-block-end'>",
-        "<'scroll-margin-block-start'>",
-      ],
-    },
-    "<'scroll-margin-block-end'>": {
-      syntax: "<length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-end",
-    },
-    "<'scroll-margin-block-start'>": {
-      syntax: "<length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-start",
-    },
-    "<'scroll-margin-bottom'>": {
-      syntax: "<length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-bottom",
-    },
-    "<'scroll-margin-inline'>": {
-      syntax: "<length>{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline",
-      subProps: [
-        "<'scroll-margin-inline-end'>",
-        "<'scroll-margin-inline-start'>",
-      ],
-    },
-    "<'scroll-margin-inline-end'>": {
-      syntax: "<length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-end",
-    },
-    "<'scroll-margin-inline-start'>": {
-      syntax: "<length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-start",
-    },
-    "<'scroll-margin-left'>": {
-      syntax: "<length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-left",
-    },
-    "<'scroll-margin-right'>": {
-      syntax: "<length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-right",
-    },
-    "<'scroll-margin-top'>": {
-      syntax: "<length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top",
-    },
-    "<'scroll-padding'>": {
-      syntax: "[ auto | <length-percentage> ]{1,4}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding",
-      subProps: [
-        "<'scroll-padding-bottom'>",
-        "<'scroll-padding-left'>",
-        "<'scroll-padding-right'>",
-        "<'scroll-padding-top'>",
-      ],
-    },
-    "<'scroll-padding-block'>": {
-      syntax: "[ auto | <length-percentage> ]{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block",
-      subProps: [
-        "<'scroll-padding-block-end'>",
-        "<'scroll-padding-block-start'>",
-      ],
-    },
-    "<'scroll-padding-block-end'>": {
-      syntax: "auto | <length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block-end",
-    },
-    "<'scroll-padding-block-start'>": {
-      syntax: "auto | <length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block-start",
-    },
-    "<'scroll-padding-bottom'>": {
-      syntax: "auto | <length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-bottom",
-    },
-    "<'scroll-padding-inline'>": {
-      syntax: "[ auto | <length-percentage> ]{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline",
-      subProps: [
-        "<'scroll-padding-inline-end'>",
-        "<'scroll-padding-inline-start'>",
-      ],
-    },
-    "<'scroll-padding-inline-end'>": {
-      syntax: "auto | <length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-end",
-    },
-    "<'scroll-padding-inline-start'>": {
-      syntax: "auto | <length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-start",
-    },
-    "<'scroll-padding-left'>": {
-      syntax: "auto | <length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-left",
-    },
-    "<'scroll-padding-right'>": {
-      syntax: "auto | <length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-right",
-    },
-    "<'scroll-padding-top'>": {
-      syntax: "auto | <length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top",
-    },
-    "<'scroll-snap-align'>": {
-      syntax: "[ none | start | end | center ]{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align",
-    },
-    "<'scroll-snap-stop'>": {
-      syntax: "normal | always",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop",
-    },
-    "<'scroll-snap-type'>": {
-      syntax:
-        "none | [ x | y | block | inline | both ] [ mandatory | proximity ]?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type",
-    },
-    "<'scrollbar-color'>": {
-      syntax: "auto | <color>{2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color",
-    },
-    "<'scrollbar-gutter'>": {
-      syntax: "auto | stable && both-edges?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter",
-    },
-    "<'scrollbar-width'>": {
-      syntax: "auto | thin | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width",
-    },
-    "<'shape-image-threshold'>": {
-      syntax: "<alpha-value>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/shape-image-threshold",
-    },
-    "<'shape-margin'>": {
-      syntax: "<length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/shape-margin",
-    },
-    "<'shape-outside'>": {
-      syntax: "none | [ <shape-box> || <basic-shape> ] | <image>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside",
-    },
-    "<'tab-size'>": {
-      syntax: "<integer> | <length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/tab-size",
-    },
-    "<'table-layout'>": {
-      syntax: "auto | fixed",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout",
-    },
-    "<'text-align'>": {
-      syntax: "start | end | left | right | center | justify | match-parent",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-align",
-    },
-    "<'text-align-last'>": {
-      syntax: "auto | start | end | left | right | center | justify",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last",
-    },
-    "<'text-combine-upright'>": {
-      syntax: "none | all | [ digits <integer>? ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright",
-    },
-    "<'text-decoration'>": {
-      syntax:
-        "<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration",
-      subProps: [
-        "<'text-decoration-color'>",
-        "<'text-decoration-line'>",
-        "<'text-decoration-style'>",
-        "<'text-decoration-thickness'>",
-      ],
-    },
-    "<'text-decoration-color'>": {
-      syntax: "<color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color",
-    },
-    "<'text-decoration-line'>": {
-      syntax:
-        "none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line",
-    },
-    "<'text-decoration-skip'>": {
-      syntax:
-        "none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip",
-    },
-    "<'text-decoration-skip-ink'>": {
-      syntax: "auto | all | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink",
-    },
-    "<'text-decoration-style'>": {
-      syntax: "solid | double | dotted | dashed | wavy",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style",
-    },
-    "<'text-decoration-thickness'>": {
-      syntax: "auto | from-font | <length> | <percentage> ",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness",
-    },
-    "<'text-emphasis'>": {
-      syntax: "<'text-emphasis-style'> || <'text-emphasis-color'>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis",
-      subProps: ["<'text-emphasis-color'>", "<'text-emphasis-style'>"],
-    },
-    "<'text-emphasis-color'>": {
-      syntax: "<color>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color",
-    },
-    "<'text-emphasis-position'>": {
-      syntax: "[ over | under ] && [ right | left ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position",
-    },
-    "<'text-emphasis-style'>": {
-      syntax:
-        "none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style",
-    },
-    "<'text-indent'>": {
-      syntax: "<length-percentage> && hanging? && each-line?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent",
-    },
-    "<'text-justify'>": {
-      syntax: "auto | inter-character | inter-word | none",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-justify",
-    },
-    "<'text-orientation'>": {
-      syntax: "mixed | upright | sideways",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation",
-    },
-    "<'text-overflow'>": {
-      syntax: "[ clip | ellipsis | <string> ]{1,2}",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow",
-    },
-    "<'text-rendering'>": {
-      syntax: "auto | optimizeSpeed | optimizeLegibility | geometricPrecision",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering",
-    },
-    "<'text-shadow'>": {
-      syntax: "none | <shadow-t>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow",
-    },
-    "<'text-size-adjust'>": {
-      syntax: "none | auto | <percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust",
-    },
-    "<'text-transform'>": {
-      syntax:
-        "none | capitalize | uppercase | lowercase | full-width | full-size-kana",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform",
-    },
-    "<'text-underline-offset'>": {
-      syntax: "auto | <length> | <percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset",
-    },
-    "<'text-underline-position'>": {
-      syntax: "auto | from-font | [ under || [ left | right ] ]",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position",
-    },
-    "<'top'>": {
-      syntax: "<length> | <percentage> | auto",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/top",
-    },
-    "<'touch-action'>": {
-      syntax:
-        "auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action",
-    },
-    "<'transform'>": {
-      syntax: "none | <transform-list>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform",
-    },
-    "<'transform-box'>": {
-      syntax: "content-box | border-box | fill-box | stroke-box | view-box",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box",
-    },
-    "<'transform-origin'>": {
-      syntax:
-        "[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin",
-    },
-    "<'transform-style'>": {
-      syntax: "flat | preserve-3d",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style",
-    },
-    "<'transition'>": {
-      syntax: "<single-transition>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition",
-      subProps: [
-        "<'transition-delay'>",
-        "<'transition-duration'>",
-        "<'transition-property'>",
-        "<'transition-timing-function'>",
-      ],
-    },
-    "<'transition-delay'>": {
-      syntax: "<time>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay",
-    },
-    "<'transition-duration'>": {
-      syntax: "<time>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration",
-    },
-    "<'transition-property'>": {
-      syntax: "none | <single-transition-property>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property",
-    },
-    "<'transition-timing-function'>": {
-      syntax: "<easing-function>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function",
-    },
-    "<'translate'>": {
-      syntax: "none | <length-percentage> [ <length-percentage> <length>? ]?",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/translate",
-    },
-    "<'unicode-bidi'>": {
-      syntax:
-        "normal | embed | isolate | bidi-override | isolate-override | plaintext",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi",
-    },
-    "<'user-select'>": {
-      syntax: "auto | text | none | contain | all",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/user-select",
-    },
-    "<'vertical-align'>": {
-      syntax:
-        "baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align",
-    },
-    "<'visibility'>": {
-      syntax: "visible | hidden | collapse",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/visibility",
-    },
-    "<'white-space'>": {
-      syntax: "normal | pre | nowrap | pre-wrap | pre-line | break-spaces",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/white-space",
-    },
-    "<'widows'>": {
-      syntax: "<integer>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/widows",
-    },
-    "<'width'>": {
-      syntax:
-        "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/width",
-    },
-    "<'will-change'>": {
-      syntax: "auto | <animateable-feature>#",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/will-change",
-    },
-    "<'word-break'>": {
-      syntax: "normal | break-all | keep-all | break-word",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/word-break",
-    },
-    "<'word-spacing'>": {
-      syntax: "normal | <length-percentage>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing",
-    },
-    "<'writing-mode'>": {
-      syntax:
-        "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode",
-    },
-    "<'z-index'>": {
-      syntax: "auto | <integer>",
-      mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/z-index",
-    },
-  },
-  atRules: {
-    "@counter-style": {
-      "<'additive-symbols'>": {
-        syntax: "[ <integer> && <symbol> ]#",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/additive-symbols",
-      },
-      "<'fallback'>": {
-        syntax: "<counter-style-name>",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/fallback",
-      },
-      "<'negative'>": {
-        syntax: "<symbol> <symbol>?",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/negative",
-      },
-      "<'pad'>": {
-        syntax: "<integer> && <symbol>",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/pad",
-      },
-      "<'prefix'>": {
-        syntax: "<symbol>",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/prefix",
-      },
-      "<'range'>": {
-        syntax: "[ [ <integer> | infinite ]{2} ]# | auto",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/range",
-      },
-      "<'speak-as'>": {
-        syntax:
-          "auto | bullets | numbers | words | spell-out | <counter-style-name>",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/speak-as",
-      },
-      "<'suffix'>": {
-        syntax: "<symbol>",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/suffix",
-      },
-      "<'symbols'>": {
-        syntax: "<symbol>+",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/symbols",
-      },
-      "<'system'>": {
-        syntax:
-          "cyclic | numeric | alphabetic | symbolic | additive | [ fixed <integer>? ] | [ extends <counter-style-name> ]",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/system",
-      },
-    },
-    "@font-face": {
-      "<'ascent-override'>": {
-        syntax: "normal | <percentage>",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override",
-      },
-      "<'descent-override'>": {
-        syntax: "normal | <percentage>",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override",
-      },
-      "<'font-display'>": {
-        syntax: "[ auto | block | swap | fallback | optional ]",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display",
-      },
-      "<'font-family'>": {
-        syntax: "<family-name>",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family",
-      },
-      "<'font-stretch'>": {
-        syntax: "<font-stretch-absolute>{1,2}",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch",
-      },
-      "<'font-style'>": {
-        syntax: "normal | italic | oblique <angle>{0,2}",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style",
-      },
-      "<'font-variant'>": {
-        syntax:
-          "normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name>#) || character-variant(<feature-value-name>#) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-variant",
-        subProps: [
-          "<'font-variant-alternates'>",
-          "<'font-variant-caps'>",
-          "<'font-variant-east-asian'>",
-          "<'font-variant-ligatures'>",
-          "<'font-variant-numeric'>",
-        ],
-      },
-      "<'font-variation-settings'>": {
-        syntax: "normal | [ <string> <number> ]#",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-variation-settings",
-      },
-      "<'font-weight'>": {
-        syntax: "<font-weight-absolute>{1,2}",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight",
-      },
-      "<'line-gap-override'>": {
-        syntax: "normal | <percentage>",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override",
-      },
-      "<'size-adjust'>": {
-        syntax: "<percentage>",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust",
-      },
-      "<'src'>": {
-        syntax: "[ <url> [ format( <string># ) ]? | local( <family-name> ) ]#",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src",
-      },
-      "<'unicode-range'>": {
-        syntax: "<unicode-range>#",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range",
-      },
-    },
-    "@property": {
-      "<'inherits'>": {
-        syntax: "true | false",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@property/inherits",
-      },
-      "<'initial-value'>": {
-        syntax: "<string>",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@property/initial-value",
-      },
-      "<'syntax'>": {
-        syntax: "<string>",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax",
-      },
-    },
-    "@page": {
-      "<'size'>": {
-        syntax:
-          "<length>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ]",
-        mdn: "https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size",
-      },
-    },
-  },
-};
diff --git a/packages/css-value-parser/src/value-syntax-parser.ts b/packages/css-value-parser/src/value-syntax-parser.ts
index 6dcc3cf3..035124a0 100644
--- a/packages/css-value-parser/src/value-syntax-parser.ts
+++ b/packages/css-value-parser/src/value-syntax-parser.ts
@@ -141,7 +141,11 @@ type Combinators =
   | BarNode;
 
 type Components = DataTypeNode | PropertyNode;
-type ValueSyntaxAstNode = Components | KeywordNode | LiteralNode | Combinators;
+export type ValueSyntaxAstNode =
+  | Components
+  | KeywordNode
+  | LiteralNode
+  | Combinators;
 
 export function literal(
   name: string,
diff --git a/packages/css-value-parser/test/css-value-syntax.spec.ts b/packages/css-value-parser/test/css-value-syntax.spec.ts
index 4cc55866..5546be32 100644
--- a/packages/css-value-parser/test/css-value-syntax.spec.ts
+++ b/packages/css-value-parser/test/css-value-syntax.spec.ts
@@ -13,19 +13,39 @@ import {
   property,
 } from "../src/value-syntax-parser";
 
-import { valueDefinitions } from "../src/value-definitions";
-
-describe("sanity", () => {
-  for (const [key, { syntax }] of Object.entries(valueDefinitions.props)) {
-    if (key === "<'overflow-clip-margin'>") {
-      it(key + ": " + syntax, () => {
-        parseValueSyntax(syntax);
+import * as webCssRef from "@webref/css";
+describe(`sanity`, () => {
+  before(async () => {
+    const specs = await webCssRef.listAll();
+    for (const [specName, data] of Object.entries(specs)) {
+      describe(specName, () => {
+        describe("properties", () => {
+          for (const { name, value } of Object.values(data.properties)) {
+            if (value) {
+              it(`<'${name}'>`, () => {
+                parseValueSyntax(value);
+              });
+            }
+          }
+        });
+        describe("valuespaces", () => {
+          for (const [name, { value }] of Object.entries(data.valuespaces)) {
+            if (value) {
+              it(name, () => {
+                parseValueSyntax(value);
+              });
+            }
+          }
+        });
       });
     }
-  }
+  });
+  it(`just here to make the before dynamically load and create tests`, () => {
+    /**/
+  });
 });
 
-// add test for # 
+// add test for #
 
 describe("value-syntax-parser", () => {
   describe("components", () => {
diff --git a/packages/css-value-parser/test/types.d.ts b/packages/css-value-parser/test/types.d.ts
new file mode 100644
index 00000000..bd9ea6e6
--- /dev/null
+++ b/packages/css-value-parser/test/types.d.ts
@@ -0,0 +1,19 @@
+declare module "@webref/css" {
+  interface SpecData {
+    properties: Record<
+      string,
+      {
+        name: string;
+        value?: string;
+        initial: string;
+      }
+    >;
+    valuespaces: Record<
+      string,
+      {
+        value?: string;
+      }
+    >;
+  }
+  export function listAll(): Promise<Record<string, SpecData>>;
+}
diff --git a/yarn.lock b/yarn.lock
index f30ad572..ace1766d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1052,6 +1052,11 @@
   resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
   integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==
 
+"@webref/css@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@webref/css/-/css-2.0.12.tgz#7c6653d0fafe0df3fc71b697f0834ce42d4e07e9"
+  integrity sha512-Jd0GPFb8XAh5LotI7bvdJ7wBNzoTNoTkUz9VQ9yC82kwWhVaZ2jm9qGau3VO/TYgnaLrNmUmYdcZV0kr1fdaMQ==
+
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"

From 49dba1fa74345e56e3ee29e3b18649d9bafa2f92 Mon Sep 17 00:00:00 2001
From: Barak Igal <baraki@wix.com>
Date: Thu, 23 Sep 2021 22:24:08 +0300
Subject: [PATCH 08/16] fix: last helper can return undefined

---
 packages/core/src/helpers.ts                       |  2 +-
 packages/css-selector-parser/src/helpers.ts        |  6 +++---
 .../css-selector-parser/src/selector-parser.ts     | 14 +++++++++-----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/helpers.ts b/packages/core/src/helpers.ts
index fb5147f0..8f708bb5 100644
--- a/packages/core/src/helpers.ts
+++ b/packages/core/src/helpers.ts
@@ -183,6 +183,6 @@ export function trimTokens<Tokens extends Token<any>[]>(
 /**
  * get last item in array
  */
-export function last<T>(arr: T[]): T {
+export function last<T>(arr: T[]): T | undefined {
   return arr[arr.length - 1];
 }
diff --git a/packages/css-selector-parser/src/helpers.ts b/packages/css-selector-parser/src/helpers.ts
index 4c70d063..d68bf675 100644
--- a/packages/css-selector-parser/src/helpers.ts
+++ b/packages/css-selector-parser/src/helpers.ts
@@ -111,19 +111,19 @@ export function trimCombinators(selector: Selector) {
   const firstNode = nodes[0];
   const lastNode = last(nodes);
   // remove first space combinator and add to selector before
-  // (going between comment is not required for the start becuase they are taken care
+  // (going between comment is not required for the start because they are taken care
   // of during parsing)
   if (firstNode?.type === "combinator" && firstNode.combinator === "space") {
     selector.nodes.shift();
     selector.before += firstNode.before + firstNode.value + firstNode.after;
   }
   // remove any edge space combinators (last and between comments)
-  if (lastNode !== firstNode) {
+  if (lastNode && lastNode !== firstNode) {
     let index = nodes.length - 1;
     let current = lastNode;
     let lastComment: Comment | undefined;
     while (
-      (current && current.type === `comment`) ||
+      current.type === `comment` ||
       (current.type === `combinator` && current.combinator === `space`)
     ) {
       if (current.type === `combinator`) {
diff --git a/packages/css-selector-parser/src/selector-parser.ts b/packages/css-selector-parser/src/selector-parser.ts
index 674efa8d..749ef48e 100644
--- a/packages/css-selector-parser/src/selector-parser.ts
+++ b/packages/css-selector-parser/src/selector-parser.ts
@@ -26,7 +26,10 @@ export interface ParseConfig {
   offset: number;
 }
 
-export function parseCssSelector(source: string, options: Partial<ParseConfig> = {}) {
+export function parseCssSelector(
+  source: string,
+  options: Partial<ParseConfig> = {}
+) {
   return parseTokens(source, tokenizeSelector(source, options));
 }
 
@@ -382,8 +385,8 @@ function handleToken(
         end: ended?.end ?? s.peekBack().end,
       });
     } else {
-      if (res.length) {
-        const lastSelector = last(res);
+      const lastSelector = last(res);
+      if (lastSelector) {
         trimCombinators(lastSelector);
       }
       prev.nodes = res;
@@ -392,7 +395,8 @@ function handleToken(
   } else if (isComment(token.type)) {
     ast.push(createCommentAst(token));
   } else if (token.type === ",") {
-    const selector = last(selectors);
+    // we ensure at least one selector present
+    const selector = last(selectors)!;
     selector.end = token.start;
     trimCombinators(selector);
     const newSelector = createEmptySelector();
@@ -403,7 +407,7 @@ function handleToken(
       newSelector.start = s.peek().start;
     }
     selectors.push(newSelector);
-  } else  if (token.type === "&") {
+  } else if (token.type === "&") {
     ast.push({
       type: "nesting",
       value: "&",

From 0ba1c5798c9d3adfaca9c7bb6a330a87487441ed Mon Sep 17 00:00:00 2001
From: Barak Igal <baraki@wix.com>
Date: Thu, 23 Sep 2021 22:27:20 +0300
Subject: [PATCH 09/16] refactors

---
 .../src/value-syntax-parser.ts                | 109 ++++++++++--------
 .../test/css-value-syntax.spec.ts             |   5 +-
 2 files changed, 64 insertions(+), 50 deletions(-)

diff --git a/packages/css-value-parser/src/value-syntax-parser.ts b/packages/css-value-parser/src/value-syntax-parser.ts
index 035124a0..f82522e1 100644
--- a/packages/css-value-parser/src/value-syntax-parser.ts
+++ b/packages/css-value-parser/src/value-syntax-parser.ts
@@ -213,8 +213,27 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
   ) => {
     if (token.type === "<") {
       let closed = false;
-      const name = s.eat("space").next();
-      const type = getComponentType(name);
+      s.eat("space");
+      const nameBlock = s.run<ValueSyntaxToken[]>(
+        (node, ast) => {
+          const { type } = node;
+          if (type === "space" || type === "[" || type === ">") {
+            return false;
+          } else {
+            ast.push(node);
+            return;
+          }
+        },
+        [],
+        _source
+      );
+      if (nameBlock.length === 0) {
+        throw new Error("missing data type name");
+      }
+      s.back();
+      const name = getText(nameBlock, undefined, undefined, source);
+
+      const type = getLiteralValueType(name);
       let range: Range | undefined;
       if (type === "invalid") {
         throw new Error("missing data type name");
@@ -241,20 +260,19 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
       if (!closed) {
         throw new Error('missing ">"');
       }
-      if (type === "property") {
-        ast.push(property(name.value.slice(1, -1), range));
+      if (type === "quoted") {
+        ast.push(property(name.slice(1, -1), range));
       } else {
-        ast.push(dataType(name.value, range));
+        ast.push(dataType(name, range));
       }
     } else if (token.type === "[") {
       const res = s.run(handleToken, { ast: [] }, source);
-      // eslint-disable-next-line no-debugger
       applyPrecedence(res.ast);
       ast.push(group(res.ast));
     } else if (token.type === "]") {
       return false;
     } else if (token.type === "text") {
-      const t = getComponentType(token);
+      const t = getLiteralValueType(token.value);
       if (t === "invalid") {
         if (token.value.startsWith("'")) {
           const tokens = s.run(
@@ -278,7 +296,7 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
         } else {
           throw new Error("invalid literal");
         }
-      } else if (t === "property") {
+      } else if (t === "quoted") {
         ast.push(literal(token.value.slice(1, -1), true));
       } else {
         ast.push(keyword(token.value));
@@ -293,12 +311,7 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
     } else if (token.type === "space") {
       s.eat("space");
     } else if (isRangeMultiplier(token)) {
-      let node = last(ast);
-
-      if (node.type === "juxtaposing") {
-        // TODO: handle multi juxtaposing nesting?
-        node = last(node.nodes);
-      }
+      const node = lastParsedNode(ast);
       if (!node || node.type === "juxtaposing" || isLowLevelGroup(node)) {
         throw new Error("unexpected modifier");
       }
@@ -308,12 +321,8 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
       }
       node.multipliers.range = typeToRange(token.type);
     } else if (token.type === "{") {
-      let node = last(ast);
+      const node = lastParsedNode(ast);
 
-      if (node.type === "juxtaposing") {
-        // TODO: handle multi juxtaposing nesting?
-        node = last(node.nodes);
-      }
       if (!node || isLowLevelGroup(node) || node.type === "juxtaposing") {
         throw new Error("unexpected range modifier");
       }
@@ -326,9 +335,6 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
       if (sep) {
         const end = s.eat("space").take("text");
         const close = s.eat("space").take("}");
-        if (!end) {
-          throw new Error("missing end value");
-        }
         if (!close) {
           throw new Error("missing }");
         }
@@ -339,7 +345,7 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
         }
         node.multipliers.range = [
           parseNumber(start.value),
-          parseNumber(end.value),
+          parseNumber(end?.value ?? "∞"),
         ];
       } else {
         const close = s.eat("space").take("}");
@@ -356,12 +362,7 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
         ];
       }
     } else if (token.type === "#") {
-      let node = last(ast);
-
-      if (node.type === "juxtaposing") {
-        // TODO: handle multi juxtaposing nesting?
-        node = last(node.nodes);
-      }
+      const node = lastParsedNode(ast);
       if (!node || node.type === "juxtaposing" || isLowLevelGroup(node)) {
         throw new Error("unexpected list modifier");
       }
@@ -374,15 +375,9 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
       }
       ast.push(doubleAmpersand([]));
     } else if (token.type === "|") {
-      const nextBar = s.take("|");
-      if (nextBar) {
-        ast.push(doubleBar([]));
-      } else {
-        ast.push(bar([]));
-      }
+      ast.push(s.take("|") ? doubleBar([]) : bar([]));
     } else {
-      s.eat("space");
-      throw new Error(`un handled ${JSON.stringify(token)}`);
+      throw new Error(`UnHandled ${JSON.stringify(token)}`);
     }
 
     applyJuxtaposing(ast);
@@ -401,6 +396,12 @@ function parseTokens(tokens: ValueSyntaxToken[], source: string) {
   return results.ast[0];
 }
 
+function lastParsedNode(ast: ValueSyntaxAstNode[]) {
+  const node = last(ast);
+  // assume the parse process in juxtaposing on each step
+  return node?.type === "juxtaposing" ? last(node.nodes) : node;
+}
+
 function applyPrecedence(ast: ValueSyntaxAstNode[]) {
   const order = ["&&", "||", "|"] as const;
 
@@ -488,30 +489,42 @@ function isLowLevelGroup(
   return type === "&&" || type === "|" || type === "||";
 }
 
-export function stringify(node: ValueSyntaxAstNode) {
+export function stringify(node: ValueSyntaxAstNode): string {
   const { type } = node;
+  if ("multipliers" in node) {
+    throw new Error("TODO: multipliers");
+  }
   if (type === "property") {
     return `<'${node.name}'${node.range ? ` [${node.range}]` : ""}>`;
   } else if (type === "data-type") {
     return `<${node.name}${node.range ? ` [${node.range}]` : ""}>`;
   } else if (type === "literal") {
     return node.enclosed ? `'${node.name}'` : `${node.name}`;
+  } else if (type === "group") {
+    return `[ ${node.nodes.map((child) => stringify(child)).join("")} ]`;
+  } else if (type === "&&") {
+    return node.nodes.map((child) => stringify(child)).join(" && ");
+  } else if (type === "||") {
+    return node.nodes.map((child) => stringify(child)).join(" || ");
+  } else if (type === "|") {
+    return node.nodes.map((child) => stringify(child)).join(" | ");
+  } else if (type === "juxtaposing") {
+    return node.nodes.map((child) => stringify(child)).join(" ");
+  } else if (type === "keyword") {
+    return node.name;
   } else {
     throw new Error(`missing stringify for node ${JSON.stringify(node)}`);
   }
 }
 
-function getComponentType(token: ValueSyntaxToken) {
-  if (token.type === "text") {
-    if (token.value.startsWith("'")) {
-      if (token.value.endsWith("'") && token.value.length > 1) {
-        return "property";
-      } else {
-        return "invalid";
-      }
+function getLiteralValueType(value: string) {
+  if (value.startsWith("'")) {
+    if (value.endsWith("'") && value.length > 1) {
+      return "quoted";
     } else {
-      return "data-type";
+      return "invalid";
     }
+  } else {
+    return "literal";
   }
-  return "invalid";
 }
diff --git a/packages/css-value-parser/test/css-value-syntax.spec.ts b/packages/css-value-parser/test/css-value-syntax.spec.ts
index 5546be32..c2382bbc 100644
--- a/packages/css-value-parser/test/css-value-syntax.spec.ts
+++ b/packages/css-value-parser/test/css-value-syntax.spec.ts
@@ -14,6 +14,7 @@ import {
 } from "../src/value-syntax-parser";
 
 import * as webCssRef from "@webref/css";
+
 describe(`sanity`, () => {
   before(async () => {
     const specs = await webCssRef.listAll();
@@ -22,7 +23,7 @@ describe(`sanity`, () => {
         describe("properties", () => {
           for (const { name, value } of Object.values(data.properties)) {
             if (value) {
-              it(`<'${name}'>`, () => {
+              it(`<'${name}'>: ${value}`, () => {
                 parseValueSyntax(value);
               });
             }
@@ -31,7 +32,7 @@ describe(`sanity`, () => {
         describe("valuespaces", () => {
           for (const [name, { value }] of Object.entries(data.valuespaces)) {
             if (value) {
-              it(name, () => {
+              it(`${name}: ${value}`, () => {
                 parseValueSyntax(value);
               });
             }

From 0dab32ca4a2212da64edd3e69850d18483a60373 Mon Sep 17 00:00:00 2001
From: Ido Rosenthal <idoros@gmail.com>
Date: Fri, 24 Sep 2021 13:19:31 +0300
Subject: [PATCH 10/16] feat: add css-wide-keyword ast to value parser

---
 packages/css-value-parser/src/ast-types.ts    | 13 +++++++
 packages/css-value-parser/src/value-parser.ts | 10 +++++
 .../css-value-parser/src/value-stringify.ts   |  2 +
 .../test/value-parser.spec.ts                 | 38 +++++++++++++++++++
 4 files changed, 63 insertions(+)

diff --git a/packages/css-value-parser/src/ast-types.ts b/packages/css-value-parser/src/ast-types.ts
index 8d9185c0..45fde911 100644
--- a/packages/css-value-parser/src/ast-types.ts
+++ b/packages/css-value-parser/src/ast-types.ts
@@ -15,6 +15,7 @@ export interface CSSValueAST<TYPE extends string> {
 
 export type BaseAstNode =
   | Literal
+  | CssWideKeyword
   | Space
   | Comment
   | Invalid
@@ -45,6 +46,9 @@ export type Literal = CSSValueAST<`literal`> & {
   before: string;
   after: string;
 };
+export type CssWideKeyword = CSSValueAST<`css-wide-keyword`> & {
+  value: AnyCase<`inherit` | `unset` | `initial`>;
+};
 export type Space = CSSValueAST<`space`> & {
   before: string;
   after: string;
@@ -149,6 +153,15 @@ export const literal = (value: Partial<Literal>): Literal => ({
   ...value,
   type: `literal`,
 });
+export const cssWideKeyword = (
+  value: Partial<CssWideKeyword>
+): CssWideKeyword => ({
+  start: 0,
+  end: 0,
+  value: `initial`,
+  ...value,
+  type: `css-wide-keyword`,
+});
 export const space = (value: Partial<Space>): Space => ({
   start: 0,
   end: 0,
diff --git a/packages/css-value-parser/src/value-parser.ts b/packages/css-value-parser/src/value-parser.ts
index e25bffaa..9f1714a8 100644
--- a/packages/css-value-parser/src/value-parser.ts
+++ b/packages/css-value-parser/src/value-parser.ts
@@ -3,6 +3,7 @@ import {
   customIdent,
   dashedIdent,
   literal,
+  cssWideKeyword,
   space,
   string,
   number,
@@ -108,6 +109,15 @@ function handleToken(
           after,
         })
       );
+    } else if (ident.match(/^inherit|unset|initial$/i)) {
+      // css-wide keyword
+      ast.push(
+        cssWideKeyword({
+          value: ident as any,
+          start: token.start,
+          end: s.peek(0).end,
+        })
+      );
     } else if (ident.match(/^--/)) {
       // dashed ident
       ast.push(
diff --git a/packages/css-value-parser/src/value-stringify.ts b/packages/css-value-parser/src/value-stringify.ts
index 68b90e65..32febf12 100644
--- a/packages/css-value-parser/src/value-stringify.ts
+++ b/packages/css-value-parser/src/value-stringify.ts
@@ -1,6 +1,7 @@
 import type {
   BaseAstNode,
   Literal,
+  CssWideKeyword,
   Space,
   Comment,
   String,
@@ -41,6 +42,7 @@ type Printers = {
 const stringifyByType: Printers = {
   space: ({ before, value, after }: Space) => before + value + after,
   literal: ({ before, value, after }: Literal) => before + value + after,
+  "css-wide-keyword": ({ value }: CssWideKeyword) => value,
   invalid: ({ value }: Invalid) => value,
   comment: ({ value }: Comment) => value,
   call: ({ value, before, after, args }: Call) =>
diff --git a/packages/css-value-parser/test/value-parser.spec.ts b/packages/css-value-parser/test/value-parser.spec.ts
index 66dc0bdc..90ada88e 100644
--- a/packages/css-value-parser/test/value-parser.spec.ts
+++ b/packages/css-value-parser/test/value-parser.spec.ts
@@ -4,6 +4,7 @@ import {
   customIdent,
   dashedIdent,
   literal,
+  cssWideKeyword,
   space,
   invalid,
   comment,
@@ -88,6 +89,43 @@ describe(`value-parser`, () => {
       },
     ].forEach(createTest);
   });
+  describe(`css-wide-keyword`, () => {
+    [
+      {
+        type: `inherit`,
+        source: `inherit`,
+        expected: [cssWideKeyword({ value: `inherit`, start: 0, end: 7 })],
+      },
+      {
+        type: `unset`,
+        source: `unset`,
+        expected: [cssWideKeyword({ value: `unset`, start: 0, end: 5 })],
+      },
+      {
+        type: `initial`,
+        source: `initial`,
+        expected: [cssWideKeyword({ value: `initial`, start: 0, end: 7 })],
+      },
+      {
+        type: `inherit`,
+        desc: `case-insensitive`,
+        source: `iNhErIt`,
+        expected: [cssWideKeyword({ value: `iNhErIt`, start: 0, end: 7 })],
+      },
+      {
+        type: `unset`,
+        desc: `case-insensitive`,
+        source: `uNsEt`,
+        expected: [cssWideKeyword({ value: `uNsEt`, start: 0, end: 5 })],
+      },
+      {
+        type: `initial`,
+        desc: `case-insensitive`,
+        source: `InItIaL`,
+        expected: [cssWideKeyword({ value: `InItIaL`, start: 0, end: 7 })],
+      },
+    ].forEach(createTest);
+  });
   describe(`ident`, () => {
     describe(`custom-ident`, () => {
       [

From 35b512ddece8315900162d305b433417bacb2e51 Mon Sep 17 00:00:00 2001
From: Barak Igal <baraki@wix.com>
Date: Wed, 29 Dec 2021 22:17:34 +0200
Subject: [PATCH 11/16] prettify align with master

---
 demos/tokey-tokenizer.html                    |    2 +-
 packages/core/package.json                    |    1 -
 packages/core/src/core.ts                     |  194 +-
 packages/core/src/helpers.ts                  |  197 +-
 packages/core/src/index.ts                    |    8 +-
 packages/core/src/seeker.ts                   |  147 +-
 packages/core/src/types.ts                    |   32 +-
 packages/core/test/core.spec.ts               |  379 +-
 .../core/test/helpers/trim-tokens.spec.ts     |  209 +-
 packages/css-selector-parser/package.json     |    1 -
 .../src/ast-tools/compound.ts                 |  287 +-
 .../src/ast-tools/specificity.ts              |  152 +-
 .../css-selector-parser/src/ast-tools/walk.ts |  235 +-
 packages/css-selector-parser/src/ast-types.ts |  191 +-
 packages/css-selector-parser/src/helpers.ts   |  210 +-
 packages/css-selector-parser/src/index.ts     |   21 +-
 .../css-selector-parser/src/nth-parser.ts     |  475 +-
 .../src/selector-parser.ts                    |  792 +-
 packages/css-selector-parser/src/stringify.ts |  193 +-
 packages/css-selector-parser/src/tokenizer.ts |  123 +-
 packages/css-selector-parser/src/types.ts     |    9 +-
 .../test/ast-tools/compound.spec.ts           | 1747 +++--
 .../test/ast-tools/specificity.spec.ts        |  360 +-
 .../test/ast-tools/walk.spec.ts               |  922 ++-
 .../test/selector-parser.spec.ts              | 6863 ++++++++---------
 .../test/stringify.spec.ts                    |    1 -
 .../test/test-kit/parsing.ts                  |  220 +-
 packages/css-value-parser/package.json        |    1 -
 packages/css-value-parser/src/ast-types.ts    |  374 +-
 .../css-value-parser/src/define-property.ts   |  103 +-
 packages/css-value-parser/src/index.ts        |   14 +-
 .../src/properties/background.ts              |   84 +-
 .../css-value-parser/src/properties/margin.ts |   54 +-
 packages/css-value-parser/src/tokenizer.ts    |   77 +-
 packages/css-value-parser/src/units.ts        |   42 +-
 packages/css-value-parser/src/value-parser.ts |  668 +-
 .../css-value-parser/src/value-stringify.ts   |  106 +-
 .../src/value-syntax-parser.ts                |  767 +-
 .../test/css-value-syntax.spec.ts             |  491 +-
 .../test/define-property.spec.ts              |  732 +-
 .../test/properties/background.spec.ts        |   48 +-
 .../test/properties/margin.spec.ts            |  214 +-
 packages/css-value-parser/test/types.d.ts     |   36 +-
 .../test/value-parser.spec.ts                 | 1244 +--
 packages/experiments/package.json             |    3 +-
 .../experiments/src/css-value-tokenizer.ts    |  198 +-
 packages/experiments/src/index.ts             |    6 +-
 .../experiments/src/separated-shallow-list.ts |  112 +-
 packages/experiments/src/strips-comments.ts   |   52 +-
 .../test/css-value-tokenizer.spec.ts          |  752 +-
 .../test/separated-shallow-list.spec.ts       |  268 +-
 .../experiments/test/strip-comments.spec.ts   |   28 +-
 packages/experiments/test/tsconfig.json       |    5 +-
 packages/imports-parser/package.json          |    3 +-
 packages/imports-parser/src/imports-parser.ts |  439 +-
 .../test/import-tokenizer.spec.ts             |  668 +-
 packages/imports-parser/test/tsconfig.json    |    5 +-
 packages/test-kit/package.json                |    3 +-
 packages/test-kit/src/index.ts                |    6 +-
 packages/test-kit/src/is-match.ts             |   40 +-
 packages/test-kit/src/parse-tester.ts         |  103 +-
 packages/test-kit/src/test-tokenizer.ts       |   24 +-
 packages/test-kit/test/parse-tester.spec.ts   |  180 +-
 packages/url-tokenizer/package.json           |    3 +-
 packages/url-tokenizer/src/url-tokenizer.ts   |   94 +-
 packages/url-tokenizer/test/tsconfig.json     |    5 +-
 .../url-tokenizer/test/url-tokenizer.spec.ts  |  212 +-
 tsconfig.json                                 |    2 +-
 68 files changed, 10911 insertions(+), 11326 deletions(-)

diff --git a/demos/tokey-tokenizer.html b/demos/tokey-tokenizer.html
index 772b9a15..b8749be3 100644
--- a/demos/tokey-tokenizer.html
+++ b/demos/tokey-tokenizer.html
@@ -34,7 +34,7 @@
         return false;
       }
       function isStringDelimiter(ch) {
-        return ch === '"' || ch === "'" || ch === "`"
+        return ch === '"' || ch === "'" || ch === '`';
       }
       function shouldAddToken() {
         return true;
diff --git a/packages/core/package.json b/packages/core/package.json
index e3b6f3ce..119fc4cd 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -26,6 +26,5 @@
   "author": "Wix.com",
   "license": "MIT",
   "repository": "https://github.com/wixplosives/tokey/packages/core",
-  "prettier": {},
   "sideEffects": false
 }
diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
index c4581bc6..6a6dcf4d 100644
--- a/packages/core/src/core.ts
+++ b/packages/core/src/core.ts
@@ -1,114 +1,100 @@
-import type { Token } from "./types";
+import type { Token } from './types';
 
 export interface TokyOptions<T extends Token<unknown>> {
-  shouldAddToken(type: T["type"], value: string): boolean;
-  isStringDelimiter(char: string, previousChar: string): boolean;
-  isDelimiter(char: string, previousChar: string): boolean;
-  isWhitespace(char: string): boolean;
-  getCommentStartType(
-    ch: string,
-    source: string,
-    nextCharIndex: number
-  ): string;
-  isCommentEnd(
-    inComment: string,
-    ch: string,
-    source: string,
-    nextCharIndex: number,
-    previousChar: string
-  ): boolean;
-  getUnclosedComment(inComment: string): string;
-  createToken(value: string, type: T["type"], start: number, end: number): T;
-  offset?: number;
+    shouldAddToken(type: T['type'], value: string): boolean;
+    isStringDelimiter(char: string, previousChar: string): boolean;
+    isDelimiter(char: string, previousChar: string): boolean;
+    isWhitespace(char: string): boolean;
+    getCommentStartType(ch: string, source: string, nextCharIndex: number): string;
+    isCommentEnd(
+        inComment: string,
+        ch: string,
+        source: string,
+        nextCharIndex: number,
+        previousChar: string
+    ): boolean;
+    getUnclosedComment(inComment: string): string;
+    createToken(value: string, type: T['type'], start: number, end: number): T;
+    offset?: number;
 }
 
 export function tokenize<T extends Token<unknown>>(
-  source: string,
-  {
-    isDelimiter,
-    isStringDelimiter,
-    isWhitespace,
-    shouldAddToken,
-    createToken,
-    getCommentStartType,
-    isCommentEnd,
-    getUnclosedComment,
-    offset = 0,
-  }: TokyOptions<T>
+    source: string,
+    {
+        isDelimiter,
+        isStringDelimiter,
+        isWhitespace,
+        shouldAddToken,
+        createToken,
+        getCommentStartType,
+        isCommentEnd,
+        getUnclosedComment,
+        offset = 0,
+    }: TokyOptions<T>
 ): T[] {
-  const tokens: T[] = [];
-  let previousChar = "";
-  let buffer = "";
-  let inComment = "";
-  let inString = "";
-  let start = offset;
-  let nextCharIndex = 0;
-  for (const ch of source) {
-    nextCharIndex += ch.length;
-    if (inString) {
-      buffer += ch;
-      if (ch === inString && previousChar !== "\\") {
-        pushBuffer("string");
-        inString = "";
-      }
-    } else if (inComment) {
-      buffer += ch;
-      if (
-        isCommentEnd(
-          inComment,
-          ch,
-          source,
-          nextCharIndex,
-          previousChar
-        )
-      ) {
-        pushBuffer(inComment);
-        inComment = "";
-      }
-    } else if (
-      (inComment = getCommentStartType(ch, source, nextCharIndex))
-    ) {
-      pushBuffer();
-      buffer += ch;
-    } else if (isStringDelimiter(ch, previousChar)) {
-      pushBuffer();
-      buffer += ch;
-      inString = ch;
-    } else if (isDelimiter(ch, previousChar)) {
-      pushBuffer();
-      buffer += ch;
-      pushBuffer(ch);
-    } else if (isWhitespace(ch) && !isWhitespace(previousChar)) {
-      pushBuffer();
-      buffer += ch;
-    } else if (!isWhitespace(ch) && isWhitespace(previousChar)) {
-      pushBuffer();
-      buffer += ch;
-    } else {
-      buffer += ch;
-    }
-    previousChar = ch;
-  }
-  if (buffer.length) {
-    if (inComment) {
-      pushBuffer(getUnclosedComment(inComment));
-    } else if (inString) {
-      pushBuffer("unclosed-string");
-    } else {
-      pushBuffer();
+    const tokens: T[] = [];
+    let previousChar = '';
+    let buffer = '';
+    let inComment = '';
+    let inString = '';
+    let start = offset;
+    let nextCharIndex = 0;
+    for (const ch of source) {
+        nextCharIndex += ch.length;
+        if (inString) {
+            buffer += ch;
+            if (ch === inString && previousChar !== '\\') {
+                pushBuffer('string');
+                inString = '';
+            }
+        } else if (inComment) {
+            buffer += ch;
+            if (isCommentEnd(inComment, ch, source, nextCharIndex, previousChar)) {
+                pushBuffer(inComment);
+                inComment = '';
+            }
+        } else if ((inComment = getCommentStartType(ch, source, nextCharIndex))) {
+            pushBuffer();
+            buffer += ch;
+        } else if (isStringDelimiter(ch, previousChar)) {
+            pushBuffer();
+            buffer += ch;
+            inString = ch;
+        } else if (isDelimiter(ch, previousChar)) {
+            pushBuffer();
+            buffer += ch;
+            pushBuffer(ch);
+        } else if (isWhitespace(ch) && !isWhitespace(previousChar)) {
+            pushBuffer();
+            buffer += ch;
+        } else if (!isWhitespace(ch) && isWhitespace(previousChar)) {
+            pushBuffer();
+            buffer += ch;
+        } else {
+            buffer += ch;
+        }
+        previousChar = ch;
     }
-  }
-  function pushBuffer(type?: T["type"]) {
-    if (buffer.length === 0) {
-      return;
+    if (buffer.length) {
+        if (inComment) {
+            pushBuffer(getUnclosedComment(inComment));
+        } else if (inString) {
+            pushBuffer('unclosed-string');
+        } else {
+            pushBuffer();
+        }
     }
-    const end = start + buffer.length;
-    type = type ?? (buffer.trim().length ? "text" : "space");
-    if (shouldAddToken(type, buffer)) {
-      tokens[tokens.length] = createToken(buffer, type, start, end);
+    function pushBuffer(type?: T['type']) {
+        if (buffer.length === 0) {
+            return;
+        }
+        const end = start + buffer.length;
+        type = type ?? (buffer.trim().length ? 'text' : 'space');
+        if (shouldAddToken(type, buffer)) {
+            tokens[tokens.length] = createToken(buffer, type, start, end);
+        }
+        start = end;
+        buffer = '';
     }
-    start = end;
-    buffer = "";
-  }
-  return tokens;
+    return tokens;
 }
diff --git a/packages/core/src/helpers.ts b/packages/core/src/helpers.ts
index 8f708bb5..99b95917 100644
--- a/packages/core/src/helpers.ts
+++ b/packages/core/src/helpers.ts
@@ -1,139 +1,123 @@
-import type { Token } from "./types";
+import type { Token } from './types';
 
 /**
  * Checks if a token type is comment
  */
 export function isComment(type: string) {
-  return (
-    type === "line-comment" ||
-    type === "multi-comment" ||
-    type === "unclosed-comment"
-  );
+    return type === 'line-comment' || type === 'multi-comment' || type === 'unclosed-comment';
 }
 
 /**
  * Checks if a token type is string
  */
 export function isString(type: string) {
-  return type === "string" || type === "unclosed-string";
+    return type === 'string' || type === 'unclosed-string';
 }
 
 /**
  * Checks for a set of JS strings
  */
-export const isStringDelimiter = (char: string) =>
-  char === `'` || char === `"` || char === "`";
+export const isStringDelimiter = (char: string) => char === `'` || char === `"` || char === '`';
 
 /**
  * Checks for a set of Whitespace
  */
 export const isWhitespace = (char: string) =>
-  char === " " || char === `\t` || char === `\r` || char === "\n";
+    char === ' ' || char === `\t` || char === `\r` || char === '\n';
 
 /**
  * Creates a basic token
  */
 export const createToken = <Type extends string>(
-  value: string,
-  type: Type,
-  start: number,
-  end: number
+    value: string,
+    type: Type,
+    start: number,
+    end: number
 ) => {
-  return {
-    value,
-    type,
-    start,
-    end,
-  };
+    return {
+        value,
+        type,
+        start,
+        end,
+    };
 };
 
 /**
  * Get JS type of comments for a specific set of start chars when no comment is detected empty string is used
  */
 export function getJSCommentStartType(
-  ch: string,
-  source: string,
-  nextCharIndex: number
-): "" | "line-comment" | "multi-comment" {
-  if (ch === "/" && source[nextCharIndex] === "/") {
-    return "line-comment";
-  } else {
-    return ch === "/" && source[nextCharIndex] === "*" ? "multi-comment" : "";
-  }
+    ch: string,
+    source: string,
+    nextCharIndex: number
+): '' | 'line-comment' | 'multi-comment' {
+    if (ch === '/' && source[nextCharIndex] === '/') {
+        return 'line-comment';
+    } else {
+        return ch === '/' && source[nextCharIndex] === '*' ? 'multi-comment' : '';
+    }
 }
 
 /**
  * Get CSS type of comments for a specific set of start chars when no comment is detected empty string is used
  */
 export function getMultilineCommentStartType(
-  ch: string,
-  source: string,
-  nextCharIndex: number
-): "" | "multi-comment" {
-  return ch === "/" && source[nextCharIndex] === "*" ? "multi-comment" : "";
+    ch: string,
+    source: string,
+    nextCharIndex: number
+): '' | 'multi-comment' {
+    return ch === '/' && source[nextCharIndex] === '*' ? 'multi-comment' : '';
 }
 
 /**
  * Given a JS comment type determine if this is the end of the comment
  */
 export function isCommentEnd(
-  commentType: string,
-  ch: string,
-  _source: string,
-  _nextCharIndex: number,
-  previousChar: string
+    commentType: string,
+    ch: string,
+    _source: string,
+    _nextCharIndex: number,
+    previousChar: string
 ): boolean {
-  if (commentType === "line-comment" && ch === "\n") {
-    return true;
-  } else if (
-    commentType === "multi-comment" &&
-    ch === "/" &&
-    previousChar === "*"
-  ) {
-    return true;
-  }
-  return false;
+    if (commentType === 'line-comment' && ch === '\n') {
+        return true;
+    } else if (commentType === 'multi-comment' && ch === '/' && previousChar === '*') {
+        return true;
+    }
+    return false;
 }
 
 /**
  * Get the type of unclosed comment
  */
-export function getUnclosedComment(
-  commentType: string
-): "line-comment" | "unclosed-comment" {
-  if (commentType === "line-comment") {
-    return commentType;
-  } else {
-    return "unclosed-comment";
-  }
+export function getUnclosedComment(commentType: string): 'line-comment' | 'unclosed-comment' {
+    if (commentType === 'line-comment') {
+        return commentType;
+    } else {
+        return 'unclosed-comment';
+    }
 }
 /**
  * Get the text between two token indexes
  * if source is provided it will slice the text from original source
  * otherwise the value of the tokens will be concatenated
  */
-export function getText(
-  tokens: Token<any>[],
-  startIndex = 0,
-  upToIndex = -1,
-  source?: string
-) {
-  if (tokens.length === 0) {
-    return "";
-  }
-  if (upToIndex === -1) {
-    upToIndex = tokens.length;
-  }
+export function getText(tokens: Token<any>[], startIndex = 0, upToIndex = -1, source?: string) {
+    if (tokens.length === 0) {
+        return '';
+    }
+    if (upToIndex === -1) {
+        upToIndex = tokens.length;
+    }
 
-  if (source) {
-    return source.slice(tokens[startIndex].start, tokens[upToIndex - 1].end);
-  } else {
-    let res = "";
-    for (let i = startIndex; i < upToIndex; i++) {
-      res += tokens[i].value;
+    if (source) {
+        return source.slice(tokens[startIndex].start, tokens[upToIndex - 1].end);
+    } else {
+        let res = '';
+        for (let i = startIndex; i < upToIndex; i++) {
+            res += tokens[i].value;
+        }
+        return res;
     }
-    return res;
-  }
 }
 
 /**
@@ -141,48 +125,49 @@ export function getText(
  * If source is provided the value will contain the text between the tokens,
  * instead of the tokens concatenated text.
  */
-export function groupTokens<
-  Tokens extends Token<any>[],
-  T extends string = "tokens"
->(tokens: Tokens, type: T = "tokens" as T, source?: string) {
-  return {
-    type,
-    start: tokens[0].start,
-    end: tokens[tokens.length - 1].end,
-    value: getText(tokens, undefined, undefined, source),
-    tokens,
-  };
+export function groupTokens<Tokens extends Token<any>[], T extends string = 'tokens'>(
+    tokens: Tokens,
+    type: T = 'tokens' as T,
+    source?: string
+) {
+    return {
+        type,
+        start: tokens[0].start,
+        end: tokens[tokens.length - 1].end,
+        value: getText(tokens, undefined, undefined, source),
+        tokens,
+    };
 }
 
 /**
  * Trim tokens from both ends with a matcher function
  */
 export function trimTokens<Tokens extends Token<any>[]>(
-  tokens: Tokens,
-  shouldTrimToken: (token: Token<any>) => boolean
+    tokens: Tokens,
+    shouldTrimToken: (token: Token<any>) => boolean
 ) {
-  let start = 0;
-  let end = tokens.length;
-  for (let i = 0; i < tokens.length; i++) {
-    if (shouldTrimToken(tokens[i])) {
-      start = i + 1;
-    } else {
-      break;
+    let start = 0;
+    let end = tokens.length;
+    for (let i = 0; i < tokens.length; i++) {
+        if (shouldTrimToken(tokens[i])) {
+            start = i + 1;
+        } else {
+            break;
+        }
     }
-  }
-  for (let i = tokens.length - 1; i > start; i--) {
-    if (shouldTrimToken(tokens[i])) {
-      end = i;
-    } else {
-      break;
+    for (let i = tokens.length - 1; i > start; i--) {
+        if (shouldTrimToken(tokens[i])) {
+            end = i;
+        } else {
+            break;
+        }
     }
-  }
-  return tokens.slice(start, end);
+    return tokens.slice(start, end);
 }
 
 /**
  * get last item in array
  */
 export function last<T>(arr: T[]): T | undefined {
-  return arr[arr.length - 1];
+    return arr[arr.length - 1];
 }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index f4b9752d..6322ac9d 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,4 +1,4 @@
-export * from "./types";
-export * from "./core";
-export * from "./helpers";
-export * from "./seeker";
+export * from './types';
+export * from './core';
+export * from './helpers';
+export * from './seeker';
diff --git a/packages/core/src/seeker.ts b/packages/core/src/seeker.ts
index 360adf04..cc61947f 100644
--- a/packages/core/src/seeker.ts
+++ b/packages/core/src/seeker.ts
@@ -1,91 +1,82 @@
-import type { Token } from "./types";
+import type { Token } from './types';
 
 /**
  * Minimal token traverse helper used to create structure from tokens
  */
 export class Seeker<T extends Token<unknown>> {
-  index = -1;
-  constructor(public tokens: T[]) {}
-  next() {
-    this.index++;
-    return this.tokens[this.index] || { type: "" };
-  }
-  back() {
-    this.index--;
-  }
-  peekBack() {
-    return this.tokens[this.index - 1] || { type: "" };
-  }
-  peek(num = 1) {
-    return this.tokens[this.index + num] || { type: "" };
-  }
-  take(type: T["type"]) {
-    if (this.peek().type === type) {
-      return this.next();
+    index = -1;
+    constructor(public tokens: T[]) {}
+    next() {
+        this.index++;
+        return this.tokens[this.index] || { type: '' };
     }
-    return undefined;
-  }
-  eat(type: T["type"]) {
-    while (this.peek().type === type) {
-      this.index++;
+    back() {
+        this.index--;
     }
-    return this;
-  }
-  takeMany(type: T["type"]) {
-    const tokens = [];
-    while (this.peek().type === type) {
-      tokens.push(this.next());
+    peekBack() {
+        return this.tokens[this.index - 1] || { type: '' };
     }
-    return tokens;
-  }
-  flatBlock(
-    start: string,
-    end: string,
-    isEndError?: (token: Token<any>) => boolean
-  ) {
-    let token = this.next();
-    if (token.type !== start) {
-      return [];
+    peek(num = 1) {
+        return this.tokens[this.index + num] || { type: '' };
     }
-    const block = [];
-    let endIndex;
-    while ((token = this.next())) {
-      if (!token.type) {
-        if (endIndex !== undefined) {
-          this.index = endIndex - 1;
+    take(type: T['type']) {
+        if (this.peek().type === type) {
+            return this.next();
         }
-        return;
-      }
-      if (isEndError && isEndError(token)) {
-        endIndex = this.index;
-      }
-      if (token.type === end) {
-        return block;
-      } else {
-        block.push(token);
-      }
+        return undefined;
     }
-    return [];
-  }
-  done() {
-    return this.index >= this.tokens.length - 1;
-  }
-  run<A>(
-    handleToken: (
-      token: T,
-      ast: A,
-      source: string,
-      seeker: this
-    ) => void | boolean,
-    ast: A,
-    source: string
-  ) {
-    let token;
-    while ((token = this.next()) && token.type) {
-      if (handleToken(token, ast, source, this) === false) {
-        break;
-      }
+    eat(type: T['type']) {
+        while (this.peek().type === type) {
+            this.index++;
+        }
+        return this;
+    }
+    takeMany(type: T['type']) {
+        const tokens = [];
+        while (this.peek().type === type) {
+            tokens.push(this.next());
+        }
+        return tokens;
+    }
+    flatBlock(start: string, end: string, isEndError?: (token: Token<any>) => boolean) {
+        let token = this.next();
+        if (token.type !== start) {
+            return [];
+        }
+        const block = [];
+        let endIndex;
+        while ((token = this.next())) {
+            if (!token.type) {
+                if (endIndex !== undefined) {
+                    this.index = endIndex - 1;
+                }
+                return;
+            }
+            if (isEndError && isEndError(token)) {
+                endIndex = this.index;
+            }
+            if (token.type === end) {
+                return block;
+            } else {
+                block.push(token);
+            }
+        }
+        return [];
+    }
+    done() {
+        return this.index >= this.tokens.length - 1;
+    }
+    run<A>(
+        handleToken: (token: T, ast: A, source: string, seeker: this) => void | boolean,
+        ast: A,
+        source: string
+    ) {
+        let token;
+        while ((token = this.next()) && token.type) {
+            if (handleToken(token, ast, source, this) === false) {
+                break;
+            }
+        }
+        return ast;
     }
-    return ast;
-  }
 }
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index ae746ec4..c4c3e0c4 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1,23 +1,23 @@
 export type Descriptors =
-  | "string"
-  | "text"
-  | "line-comment"
-  | "multi-comment"
-  | "unclosed-string"
-  | "unclosed-comment"
-  | "space";
+    | 'string'
+    | 'text'
+    | 'line-comment'
+    | 'multi-comment'
+    | 'unclosed-string'
+    | 'unclosed-comment'
+    | 'space';
 
 export interface Token<Type = Descriptors> {
-  type: Type;
-  start: number;
-  end: number;
-  value: string;
+    type: Type;
+    start: number;
+    end: number;
+    value: string;
 }
 
 export interface TokenGroup<GroupType, Type = Descriptors> {
-  type: GroupType;
-  start: number;
-  end: number;
-  value: string;
-  tokens: Token<Type>[];
+    type: GroupType;
+    start: number;
+    end: number;
+    value: string;
+    tokens: Token<Type>[];
 }
diff --git a/packages/core/test/core.spec.ts b/packages/core/test/core.spec.ts
index d8d45fd4..bbc6c21a 100644
--- a/packages/core/test/core.spec.ts
+++ b/packages/core/test/core.spec.ts
@@ -1,206 +1,193 @@
-import { testTokenizer as test } from "@tokey/test-kit";
-import { tokenize, TokyOptions } from "@tokey/core";
+import { testTokenizer as test } from '@tokey/test-kit';
+import { tokenize, TokyOptions } from '@tokey/core';
 import {
-  createToken,
-  isWhitespace,
-  isStringDelimiter,
-  getJSCommentStartType,
-  isCommentEnd,
-  getUnclosedComment,
-} from "@tokey/core/dist/helpers";
-import type { Token } from "@tokey/core";
+    createToken,
+    isWhitespace,
+    isStringDelimiter,
+    getJSCommentStartType,
+    isCommentEnd,
+    getUnclosedComment,
+} from '@tokey/core/dist/helpers';
+import type { Token } from '@tokey/core';
 
 const options: TokyOptions<Token> = {
-  isDelimiter(char: string) {
-    return (
-      char === "(" ||
-      char === ")" ||
-      char === "{" ||
-      char === "}" ||
-      char === "[" ||
-      char === "]"
-    );
-  },
-  shouldAddToken() {
-    return true;
-  },
-  isStringDelimiter: isStringDelimiter,
-  isWhitespace: isWhitespace,
-  createToken: createToken,
-  getCommentStartType: getJSCommentStartType,
-  isCommentEnd: isCommentEnd,
-  getUnclosedComment: getUnclosedComment,
+    isDelimiter(char: string) {
+        return (
+            char === '(' ||
+            char === ')' ||
+            char === '{' ||
+            char === '}' ||
+            char === '[' ||
+            char === ']'
+        );
+    },
+    shouldAddToken() {
+        return true;
+    },
+    isStringDelimiter: isStringDelimiter,
+    isWhitespace: isWhitespace,
+    createToken: createToken,
+    getCommentStartType: getJSCommentStartType,
+    isCommentEnd: isCommentEnd,
+    getUnclosedComment: getUnclosedComment,
 };
 
-const defaultTokenizer = <T extends string>(input: T) =>
-  tokenize(input, options);
+const defaultTokenizer = <T extends string>(input: T) => tokenize(input, options);
 
 const ignoreSpaceTokenizer = <T extends string>(input: T) =>
-  tokenize(input, {
-    ...options,
-    shouldAddToken(type) {
-      return type !== "space";
-    },
-  });
+    tokenize(input, {
+        ...options,
+        shouldAddToken(type) {
+            return type !== 'space';
+        },
+    });
 
 const escapeTokenizer = <T extends string>(input: T) =>
-  tokenize(input, {
-    ...options,
-    isDelimiter(char: string, previousChar: string) {
-      return (
-        previousChar !== `\\` &&
-        (char === "(" ||
-          char === ")" ||
-          char === "{" ||
-          char === "}" ||
-          char === "[" ||
-          char === "]")
-      );
-    },
-    isStringDelimiter(char: string, previousChar: string) {
-      return previousChar !== `\\` && isStringDelimiter(char);
-    },
-  });
-
-describe("core - tokenize", () => {
-  it("1", () => {
-    test("1", defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-    ]);
-  });
-
-  it("1'23'", () => {
-    test("1'23'", defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: "'23'", type: "string", start: 1, end: 5 },
-    ]);
-  });
-
-  it("1`23`", () => {
-    test("1`23`", defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: "`23`", type: "string", start: 1, end: 5 },
-    ]);
-  });
-
-  it(`1"23"`, () => {
-    test(`1"23"`, defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: '"23"', type: "string", start: 1, end: 5 },
-    ]);
-  });
-
-  it(`1/*"23"*/`, () => {
-    test(`1/*"23"*/`, defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: '/*"23"*/', type: "multi-comment", start: 1, end: 9 },
-    ]);
-  });
-
-  it(`1/*"23"`, () => {
-    test(`1/*"23"`, defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: '/*"23"', type: "unclosed-comment", start: 1, end: 7 },
-    ]);
-  });
-
-  it(`1//"23"`, () => {
-    test(`1//"23"`, defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: '//"23"', type: "line-comment", start: 1, end: 7 },
-    ]);
-  });
-
-  it(`1//"23"\n4`, () => {
-    test(`1//"23"\n4`, defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: '//"23"\n', type: "line-comment", start: 1, end: 8 },
-      { value: "4", type: "text", start: 8, end: 9 },
-    ]);
-  });
-
-  it(`(1)`, () => {
-    test(`(1)`, defaultTokenizer, [
-      { value: "(", type: "(", start: 0, end: 1 },
-      { value: "1", type: "text", start: 1, end: 2 },
-      { value: ")", type: ")", start: 2, end: 3 },
-    ]);
-  });
-
-  it(`{1}`, () => {
-    test(`{1}`, defaultTokenizer, [
-      { value: "{", type: "{", start: 0, end: 1 },
-      { value: "1", type: "text", start: 1, end: 2 },
-      { value: "}", type: "}", start: 2, end: 3 },
-    ]);
-  });
-
-  it(`[1]`, () => {
-    test(`[1]`, defaultTokenizer, [
-      { value: "[", type: "[", start: 0, end: 1 },
-      { value: "1", type: "text", start: 1, end: 2 },
-      { value: "]", type: "]", start: 2, end: 3 },
-    ]);
-  });
-
-  it(` `, () => {
-    test(` `, defaultTokenizer, [
-      { value: " ", type: "space", start: 0, end: 1 },
-    ]);
-  });
-
-  it(`  `, () => {
-    test(`  `, defaultTokenizer, [
-      { value: "  ", type: "space", start: 0, end: 2 },
-    ]);
-  });
-
-  it(`\t`, () => {
-    test(`\t`, defaultTokenizer, [
-      { value: "\t", type: "space", start: 0, end: 1 },
-    ]);
-  });
-
-  it(`1 2`, () => {
-    test(`1 2`, defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: " ", type: "space", start: 1, end: 2 },
-      { value: "2", type: "text", start: 2, end: 3 },
-    ]);
-  });
-
-  it(`1 2`, () => {
-    test(`1 2`, ignoreSpaceTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: "2", type: "text", start: 2, end: 3 },
-    ]);
-  });
-
-  describe(`escape`, () => {
-    it(`should ignore delimiter when previous char is escape string`, () => {
-      test(`tex\\(t`, escapeTokenizer, [
-        { value: "tex\\(t", type: "text", start: 0, end: 6 },
-      ]);
-    });
-    it(`should ignore string starter when previous char is escape string`, () => {
-      test(`tex\\"\\'t`, escapeTokenizer, [
-        { value: `tex\\"\\'t`, type: "text", start: 0, end: 8 },
-      ]);
-      test("tex\\`t", escapeTokenizer, [
-        { value: "tex\\`t", type: "text", start: 0, end: 6 },
-      ]);
-    });
-  });
-  describe(`offset`, () => {
-    it(`should start from a given offset`, () => {
-      test(
-        `1/*"23"*/`,
-        (source: string) => tokenize(source, { ...options, offset: 10 }),
-        [
-          { value: "1", type: "text", start: 10, end: 11 },
-          { value: '/*"23"*/', type: "multi-comment", start: 11, end: 19 },
-        ]
-      );
-    });
-  });
+    tokenize(input, {
+        ...options,
+        isDelimiter(char: string, previousChar: string) {
+            return (
+                previousChar !== `\\` &&
+                (char === '(' ||
+                    char === ')' ||
+                    char === '{' ||
+                    char === '}' ||
+                    char === '[' ||
+                    char === ']')
+            );
+        },
+        isStringDelimiter(char: string, previousChar: string) {
+            return previousChar !== `\\` && isStringDelimiter(char);
+        },
+    });
+
+describe('core - tokenize', () => {
+    it('1', () => {
+        test('1', defaultTokenizer, [{ value: '1', type: 'text', start: 0, end: 1 }]);
+    });
+
+    it("1'23'", () => {
+        test("1'23'", defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: "'23'", type: 'string', start: 1, end: 5 },
+        ]);
+    });
+
+    it('1`23`', () => {
+        test('1`23`', defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '`23`', type: 'string', start: 1, end: 5 },
+        ]);
+    });
+
+    it(`1"23"`, () => {
+        test(`1"23"`, defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '"23"', type: 'string', start: 1, end: 5 },
+        ]);
+    });
+
+    it(`1/*"23"*/`, () => {
+        test(`1/*"23"*/`, defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '/*"23"*/', type: 'multi-comment', start: 1, end: 9 },
+        ]);
+    });
+
+    it(`1/*"23"`, () => {
+        test(`1/*"23"`, defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '/*"23"', type: 'unclosed-comment', start: 1, end: 7 },
+        ]);
+    });
+
+    it(`1//"23"`, () => {
+        test(`1//"23"`, defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '//"23"', type: 'line-comment', start: 1, end: 7 },
+        ]);
+    });
+
+    it(`1//"23"\n4`, () => {
+        test(`1//"23"\n4`, defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '//"23"\n', type: 'line-comment', start: 1, end: 8 },
+            { value: '4', type: 'text', start: 8, end: 9 },
+        ]);
+    });
+
+    it(`(1)`, () => {
+        test(`(1)`, defaultTokenizer, [
+            { value: '(', type: '(', start: 0, end: 1 },
+            { value: '1', type: 'text', start: 1, end: 2 },
+            { value: ')', type: ')', start: 2, end: 3 },
+        ]);
+    });
+
+    it(`{1}`, () => {
+        test(`{1}`, defaultTokenizer, [
+            { value: '{', type: '{', start: 0, end: 1 },
+            { value: '1', type: 'text', start: 1, end: 2 },
+            { value: '}', type: '}', start: 2, end: 3 },
+        ]);
+    });
+
+    it(`[1]`, () => {
+        test(`[1]`, defaultTokenizer, [
+            { value: '[', type: '[', start: 0, end: 1 },
+            { value: '1', type: 'text', start: 1, end: 2 },
+            { value: ']', type: ']', start: 2, end: 3 },
+        ]);
+    });
+
+    it(` `, () => {
+        test(` `, defaultTokenizer, [{ value: ' ', type: 'space', start: 0, end: 1 }]);
+    });
+
+    it(`  `, () => {
+        test(`  `, defaultTokenizer, [{ value: '  ', type: 'space', start: 0, end: 2 }]);
+    });
+
+    it(`\t`, () => {
+        test(`\t`, defaultTokenizer, [{ value: '\t', type: 'space', start: 0, end: 1 }]);
+    });
+
+    it(`1 2`, () => {
+        test(`1 2`, defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: ' ', type: 'space', start: 1, end: 2 },
+            { value: '2', type: 'text', start: 2, end: 3 },
+        ]);
+    });
+
+    it(`1 2`, () => {
+        test(`1 2`, ignoreSpaceTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '2', type: 'text', start: 2, end: 3 },
+        ]);
+    });
+
+    describe(`escape`, () => {
+        it(`should ignore delimiter when previous char is escape string`, () => {
+            test(`tex\\(t`, escapeTokenizer, [
+                { value: 'tex\\(t', type: 'text', start: 0, end: 6 },
+            ]);
+        });
+        it(`should ignore string starter when previous char is escape string`, () => {
+            test(`tex\\"\\'t`, escapeTokenizer, [
+                { value: `tex\\"\\'t`, type: 'text', start: 0, end: 8 },
+            ]);
+            test('tex\\`t', escapeTokenizer, [
+                { value: 'tex\\`t', type: 'text', start: 0, end: 6 },
+            ]);
+        });
+    });
+    describe(`offset`, () => {
+        it(`should start from a given offset`, () => {
+            test(`1/*"23"*/`, (source: string) => tokenize(source, { ...options, offset: 10 }), [
+                { value: '1', type: 'text', start: 10, end: 11 },
+                { value: '/*"23"*/', type: 'multi-comment', start: 11, end: 19 },
+            ]);
+        });
+    });
 });
diff --git a/packages/core/test/helpers/trim-tokens.spec.ts b/packages/core/test/helpers/trim-tokens.spec.ts
index 2a97c25e..e6eaef22 100644
--- a/packages/core/test/helpers/trim-tokens.spec.ts
+++ b/packages/core/test/helpers/trim-tokens.spec.ts
@@ -1,115 +1,108 @@
-import { testTokenizer as test } from "@tokey/test-kit";
-import { trimTokens } from "@tokey/core/dist/helpers";
-import type { Token } from "@tokey/core";
+import { testTokenizer as test } from '@tokey/test-kit';
+import { trimTokens } from '@tokey/core/dist/helpers';
+import type { Token } from '@tokey/core';
 
-const trimSpace = (tokens: Token[]) =>
-  trimTokens(tokens, (token) => token.type === "space");
+const trimSpace = (tokens: Token[]) => trimTokens(tokens, (token) => token.type === 'space');
 
 function prettyPrint(items: Token[]) {
-  (items as any).toJSON = function () {
-    return items.map(({ type }) => type).join(" ");
-  };
-  return items;
+    (items as any).toJSON = function () {
+        return items.map(({ type }) => type).join(' ');
+    };
+    return items;
 }
 
 describe(`helpers/trim-tokens`, () => {
-  it(`empty`, () => {
-    test([], trimSpace, []);
-  });
-  it(`should remove multiple before & after`, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "text", value: "value" },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-      ]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
-  it(`should remove single before & after`, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "text", value: "value" },
-        { end: 0, start: 0, type: "space", value: " " },
-      ]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
-  it(`should remove single after`, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "text", value: "value" },
-        { end: 0, start: 0, type: "space", value: " " },
-      ]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
-  it(`should remove single before `, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "text", value: "value" },
-      ]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
-  it(`should not trim when there is nothing to trim`, () => {
-    test(
-      prettyPrint([{ end: 0, start: 0, type: "text", value: "value" }]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
-  it(`should trim all when all is "trimmable" (multiple)`, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-      ]),
-      trimSpace,
-      []
-    );
-  });
-  it(`should trim all when all is "trimmable" (single)`, () => {
-    test(
-      prettyPrint([{ end: 0, start: 0, type: "space", value: " " }]),
-      trimSpace,
-      []
-    );
-  });
-  it(`should remove multiple after`, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "text", value: "value" },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-      ]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
-  it(`should remove multiple before`, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "text", value: "value" },
-      ]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
+    it(`empty`, () => {
+        test([], trimSpace, []);
+    });
+    it(`should remove multiple before & after`, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'text', value: 'value' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+            ]),
+            trimSpace,
+            [{ end: 0, start: 0, type: 'text', value: 'value' }]
+        );
+    });
+    it(`should remove single before & after`, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'text', value: 'value' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+            ]),
+            trimSpace,
+            [{ end: 0, start: 0, type: 'text', value: 'value' }]
+        );
+    });
+    it(`should remove single after`, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'text', value: 'value' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+            ]),
+            trimSpace,
+            [{ end: 0, start: 0, type: 'text', value: 'value' }]
+        );
+    });
+    it(`should remove single before `, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'text', value: 'value' },
+            ]),
+            trimSpace,
+            [{ end: 0, start: 0, type: 'text', value: 'value' }]
+        );
+    });
+    it(`should not trim when there is nothing to trim`, () => {
+        test(prettyPrint([{ end: 0, start: 0, type: 'text', value: 'value' }]), trimSpace, [
+            { end: 0, start: 0, type: 'text', value: 'value' },
+        ]);
+    });
+    it(`should trim all when all is "trimmable" (multiple)`, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+            ]),
+            trimSpace,
+            []
+        );
+    });
+    it(`should trim all when all is "trimmable" (single)`, () => {
+        test(prettyPrint([{ end: 0, start: 0, type: 'space', value: ' ' }]), trimSpace, []);
+    });
+    it(`should remove multiple after`, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'text', value: 'value' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+            ]),
+            trimSpace,
+            [{ end: 0, start: 0, type: 'text', value: 'value' }]
+        );
+    });
+    it(`should remove multiple before`, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'text', value: 'value' },
+            ]),
+            trimSpace,
+            [{ end: 0, start: 0, type: 'text', value: 'value' }]
+        );
+    });
 });
diff --git a/packages/css-selector-parser/package.json b/packages/css-selector-parser/package.json
index a261d5ae..94cbb9b0 100644
--- a/packages/css-selector-parser/package.json
+++ b/packages/css-selector-parser/package.json
@@ -27,6 +27,5 @@
   "author": "Wix.com",
   "license": "MIT",
   "repository": "https://github.com/wixplosives/tokey/packages/css-selector-parser",
-  "prettier": {},
   "sideEffects": false
 }
diff --git a/packages/css-selector-parser/src/ast-tools/compound.ts b/packages/css-selector-parser/src/ast-tools/compound.ts
index fd27aa0d..2058b355 100644
--- a/packages/css-selector-parser/src/ast-tools/compound.ts
+++ b/packages/css-selector-parser/src/ast-tools/compound.ts
@@ -1,180 +1,169 @@
 import type {
-  SelectorNode,
-  SelectorList,
-  Selector,
-  CompoundSelector,
-  Comment,
-  CommentWithNoSpacing,
-  ImmutableSelector,
-  ImmutableSelectorList,
-  ImmutableSelectorNode,
-} from "../ast-types";
-import { walk } from "./walk";
+    SelectorNode,
+    SelectorList,
+    Selector,
+    CompoundSelector,
+    Comment,
+    CommentWithNoSpacing,
+    ImmutableSelector,
+    ImmutableSelectorList,
+    ImmutableSelectorNode,
+} from '../ast-types';
+import { walk } from './walk';
 
 export interface GroupCompoundOptions {
-  splitPseudoElements?: boolean;
+    splitPseudoElements?: boolean;
 }
 export function groupCompoundSelectors<AST extends Selector>(
-  input: AST,
-  options?: GroupCompoundOptions
+    input: AST,
+    options?: GroupCompoundOptions
 ): Selector;
 export function groupCompoundSelectors<AST extends ImmutableSelector>(
-  input: AST,
-  options?: GroupCompoundOptions
+    input: AST,
+    options?: GroupCompoundOptions
 ): ImmutableSelector;
 export function groupCompoundSelectors<AST extends SelectorList>(
-  input: AST,
-  options?: GroupCompoundOptions
+    input: AST,
+    options?: GroupCompoundOptions
 ): SelectorList;
 export function groupCompoundSelectors<AST extends ImmutableSelectorList>(
-  input: AST,
-  options?: GroupCompoundOptions
+    input: AST,
+    options?: GroupCompoundOptions
 ): ImmutableSelectorList;
 export function groupCompoundSelectors<
-  AST extends
-    | Selector
-    | ImmutableSelector
-    | SelectorList
-    | ImmutableSelectorList
+    AST extends Selector | ImmutableSelector | SelectorList | ImmutableSelectorList
 >(
-  input: AST,
-  options?: GroupCompoundOptions
+    input: AST,
+    options?: GroupCompoundOptions
 ): Selector | ImmutableSelector | SelectorList | ImmutableSelectorList {
-  const context = createCompoundContext(options);
-  walk(input, (node, _index, _nodes, parents) => {
-    if (parents.length === 0 && node.type === `selector`) {
-      // first level: create top level selector
-      context.addSelector(node);
-    } else {
-      // second level: (parents.length === 1)
-      context.handleNode(node);
-      // don't go deeper - shallow group
-      return walk.skipNested;
-    }
-    return;
-  });
-  return `length` in input ? context.output : context.output[0];
+    const context = createCompoundContext(options);
+    walk(input, (node, _index, _nodes, parents) => {
+        if (parents.length === 0 && node.type === `selector`) {
+            // first level: create top level selector
+            context.addSelector(node);
+        } else {
+            // second level: (parents.length === 1)
+            context.handleNode(node);
+            // don't go deeper - shallow group
+            return walk.skipNested;
+        }
+        return;
+    });
+    return `length` in input ? context.output : context.output[0];
 }
 
-type CompoundSelectorPart = CompoundSelector["nodes"][number];
-function createCompoundContext({
-  splitPseudoElements = true,
-}: GroupCompoundOptions = {}) {
-  const output: SelectorList = [];
-  let lastSelector: Selector;
-  let lastCompound: CompoundSelector | undefined;
-  let lastCompoundInitialPart: CompoundSelectorPart | undefined;
-  const handleNode = (node: SelectorNode | ImmutableSelectorNode) => {
-    if (node.type === `pseudo_element` && splitPseudoElements === true) {
-      lastCompound = undefined;
-    }
-    if (node.type === `combinator`) {
-      lastSelector.nodes.push(node);
-      lastCompound = undefined;
-    } else if (node.type === `comment` && !isCommentWithNoSpacing(node)) {
-      // comment that breaks compound
-      lastSelector.nodes.push(node);
-      lastCompound = undefined;
-    } else if (
-      node.type === `type` ||
-      node.type === `universal` ||
-      node.type === `class` ||
-      node.type === `id` ||
-      node.type === `attribute` ||
-      node.type === `nesting` ||
-      node.type === `pseudo_class` ||
-      node.type === `pseudo_element` ||
-      node.type === `invalid` ||
-      node.type === `comment` /*no spacing*/
-    ) {
-      // part of compound
-      if (!lastCompound) {
-        // add new compound selector
-        lastCompoundInitialPart = undefined;
-        lastCompound = {
-          type: `compound_selector`,
-          start: node.start,
-          end: node.end,
-          before: ``,
-          after: ``,
-          nodes: [],
-          invalid: false,
-        };
-        lastSelector.nodes.push(lastCompound);
-      }
-      if (!lastCompound.invalid && node.type !== `comment`) {
-        // validate compound parts after initial
-        if (lastCompoundInitialPart) {
-          lastCompound.invalid =
-            node.type === `universal` || node.type === `type`;
+type CompoundSelectorPart = CompoundSelector['nodes'][number];
+function createCompoundContext({ splitPseudoElements = true }: GroupCompoundOptions = {}) {
+    const output: SelectorList = [];
+    let lastSelector: Selector;
+    let lastCompound: CompoundSelector | undefined;
+    let lastCompoundInitialPart: CompoundSelectorPart | undefined;
+    const handleNode = (node: SelectorNode | ImmutableSelectorNode) => {
+        if (node.type === `pseudo_element` && splitPseudoElements === true) {
+            lastCompound = undefined;
         }
-        lastCompoundInitialPart = node as CompoundSelectorPart;
-      }
-      lastCompound.nodes.push(node as CompoundSelectorPart);
-      lastCompound.end = node.end;
-    } else if (node.type === `selector` || node.type === `compound_selector`) {
-      // spread
-      for (const innerNode of node.nodes) {
-        handleNode(innerNode);
-      }
-    } else {
-      // handle out of context nodes
-      lastSelector.nodes.push(node as SelectorNode);
-      lastCompound = undefined;
-    }
-  };
-  return {
-    addSelector(node: Selector | ImmutableSelector) {
-      lastSelector = {
-        type: `selector`,
-        start: node.start,
-        end: node.end,
-        before: `before` in node ? node.before : ``,
-        after: `after` in node ? node.after : ``,
-        nodes: [],
-      };
-      output.push(lastSelector);
-      lastCompound = undefined;
-    },
-    handleNode,
-    output,
-  };
+        if (node.type === `combinator`) {
+            lastSelector.nodes.push(node);
+            lastCompound = undefined;
+        } else if (node.type === `comment` && !isCommentWithNoSpacing(node)) {
+            // comment that breaks compound
+            lastSelector.nodes.push(node);
+            lastCompound = undefined;
+        } else if (
+            node.type === `type` ||
+            node.type === `universal` ||
+            node.type === `class` ||
+            node.type === `id` ||
+            node.type === `attribute` ||
+            node.type === `nesting` ||
+            node.type === `pseudo_class` ||
+            node.type === `pseudo_element` ||
+            node.type === `invalid` ||
+            node.type === `comment` /*no spacing*/
+        ) {
+            // part of compound
+            if (!lastCompound) {
+                // add new compound selector
+                lastCompoundInitialPart = undefined;
+                lastCompound = {
+                    type: `compound_selector`,
+                    start: node.start,
+                    end: node.end,
+                    before: ``,
+                    after: ``,
+                    nodes: [],
+                    invalid: false,
+                };
+                lastSelector.nodes.push(lastCompound);
+            }
+            if (!lastCompound.invalid && node.type !== `comment`) {
+                // validate compound parts after initial
+                if (lastCompoundInitialPart) {
+                    lastCompound.invalid = node.type === `universal` || node.type === `type`;
+                }
+                lastCompoundInitialPart = node as CompoundSelectorPart;
+            }
+            lastCompound.nodes.push(node as CompoundSelectorPart);
+            lastCompound.end = node.end;
+        } else if (node.type === `selector` || node.type === `compound_selector`) {
+            // spread
+            for (const innerNode of node.nodes) {
+                handleNode(innerNode);
+            }
+        } else {
+            // handle out of context nodes
+            lastSelector.nodes.push(node as SelectorNode);
+            lastCompound = undefined;
+        }
+    };
+    return {
+        addSelector(node: Selector | ImmutableSelector) {
+            lastSelector = {
+                type: `selector`,
+                start: node.start,
+                end: node.end,
+                before: `before` in node ? node.before : ``,
+                after: `after` in node ? node.after : ``,
+                nodes: [],
+            };
+            output.push(lastSelector);
+            lastCompound = undefined;
+        },
+        handleNode,
+        output,
+    };
 }
 
-export function splitCompoundSelectors<AST extends Selector>(
-  input: AST
-): Selector;
+export function splitCompoundSelectors<AST extends Selector>(input: AST): Selector;
 export function splitCompoundSelectors<AST extends ImmutableSelector>(
-  input: AST
+    input: AST
 ): ImmutableSelector;
-export function splitCompoundSelectors<AST extends SelectorList>(
-  input: AST
-): SelectorList;
+export function splitCompoundSelectors<AST extends SelectorList>(input: AST): SelectorList;
 export function splitCompoundSelectors<AST extends ImmutableSelectorList>(
-  input: AST
+    input: AST
 ): ImmutableSelectorList;
 export function splitCompoundSelectors<AST extends SelectorList | Selector>(
-  input: AST
+    input: AST
 ): SelectorList | Selector | ImmutableSelector | ImmutableSelectorList {
-  const inputSelectors: SelectorList = Array.isArray(input) ? input : [input];
-  const output: SelectorList = [];
-  for (const inputSelector of inputSelectors) {
-    const outputSelector: Selector = {
-      ...inputSelector,
-      nodes: [],
-    };
-    for (const node of inputSelector.nodes) {
-      if (node.type === `compound_selector`) {
-        outputSelector.nodes.push(...node.nodes);
-      } else {
-        outputSelector.nodes.push(node);
-      }
+    const inputSelectors: SelectorList = Array.isArray(input) ? input : [input];
+    const output: SelectorList = [];
+    for (const inputSelector of inputSelectors) {
+        const outputSelector: Selector = {
+            ...inputSelector,
+            nodes: [],
+        };
+        for (const node of inputSelector.nodes) {
+            if (node.type === `compound_selector`) {
+                outputSelector.nodes.push(...node.nodes);
+            } else {
+                outputSelector.nodes.push(node);
+            }
+        }
+        output.push(outputSelector);
     }
-    output.push(outputSelector);
-  }
-  return `length` in input ? output : output[0];
+    return `length` in input ? output : output[0];
 }
 
 function isCommentWithNoSpacing(node: Comment): node is CommentWithNoSpacing {
-  return node.type === `comment` && node.before === `` && node.after === ``;
+    return node.type === `comment` && node.before === `` && node.after === ``;
 }
diff --git a/packages/css-selector-parser/src/ast-tools/specificity.ts b/packages/css-selector-parser/src/ast-tools/specificity.ts
index 6975e5ed..96a307fc 100644
--- a/packages/css-selector-parser/src/ast-tools/specificity.ts
+++ b/packages/css-selector-parser/src/ast-tools/specificity.ts
@@ -1,84 +1,72 @@
-import type {
-  ImmutableSelectorNode,
-  ImmutablePseudoClass,
-  SelectorNode,
-} from "../ast-types";
-import { walk } from "./walk";
+import type { ImmutableSelectorNode, ImmutablePseudoClass, SelectorNode } from '../ast-types';
+import { walk } from './walk';
 
 export type Specificity = [
-  inlineLevel: number,
-  idLevel: number,
-  classOrAttributeLevel: number,
-  typeOrElementLevel: number
+    inlineLevel: number,
+    idLevel: number,
+    classOrAttributeLevel: number,
+    typeOrElementLevel: number
 ];
 export function calcSpecificity(ast: ImmutableSelectorNode): Specificity {
-  const result: Specificity = [0, 0, 0, 0];
-  // ToDo: remove casting once immutable walk is supported
-  walk(ast as SelectorNode, (node) => {
-    switch (node.type) {
-      case `type`:
-      case `pseudo_element`:
-        result[3]++;
-        break;
-      case `class`:
-      case `attribute`:
-        result[2]++;
-        break;
-      case `pseudo_class`:
-        if (customPseudoClass[node.value]) {
-          customPseudoClass[node.value](node, result);
-          return walk.skipNested;
+    const result: Specificity = [0, 0, 0, 0];
+    // ToDo: remove casting once immutable walk is supported
+    walk(ast as SelectorNode, (node) => {
+        switch (node.type) {
+            case `type`:
+            case `pseudo_element`:
+                result[3]++;
+                break;
+            case `class`:
+            case `attribute`:
+                result[2]++;
+                break;
+            case `pseudo_class`:
+                if (customPseudoClass[node.value]) {
+                    customPseudoClass[node.value](node, result);
+                    return walk.skipNested;
+                }
+                result[2]++;
+                break;
+            case `id`:
+                result[1]++;
+                break;
         }
-        result[2]++;
-        break;
-      case `id`:
-        result[1]++;
-        break;
-    }
-    return node.type !== `selector` && node.type !== `compound_selector`
-      ? walk.skipNested
-      : undefined;
-  });
-  return result;
+        return node.type !== `selector` && node.type !== `compound_selector`
+            ? walk.skipNested
+            : undefined;
+    });
+    return result;
 }
 
-const customPseudoClass: Record<
-  string,
-  (node: ImmutablePseudoClass, result: Specificity) => void
-> = {
-  not: mostSpecificInnerSelector,
-  is: mostSpecificInnerSelector,
-  has: mostSpecificInnerSelector,
-  where: () => {
-    /* no specificity*/
-  },
-  "nth-child": pseudoClassPlusMostSpecificInnerSelector,
-  "nth-last-child": pseudoClassPlusMostSpecificInnerSelector,
-  "nth-of-type": pseudoClassPlusMostSpecificInnerSelector,
-  "nth-last-of-type": pseudoClassPlusMostSpecificInnerSelector,
-};
+const customPseudoClass: Record<string, (node: ImmutablePseudoClass, result: Specificity) => void> =
+    {
+        not: mostSpecificInnerSelector,
+        is: mostSpecificInnerSelector,
+        has: mostSpecificInnerSelector,
+        where: () => {
+            /* no specificity*/
+        },
+        'nth-child': pseudoClassPlusMostSpecificInnerSelector,
+        'nth-last-child': pseudoClassPlusMostSpecificInnerSelector,
+        'nth-of-type': pseudoClassPlusMostSpecificInnerSelector,
+        'nth-last-of-type': pseudoClassPlusMostSpecificInnerSelector,
+    };
 
-function pseudoClassPlusMostSpecificInnerSelector(
-  node: ImmutablePseudoClass,
-  result: Specificity
-) {
-  result[2]++;
-  mostSpecificInnerSelector(node, result);
+function pseudoClassPlusMostSpecificInnerSelector(node: ImmutablePseudoClass, result: Specificity) {
+    result[2]++;
+    mostSpecificInnerSelector(node, result);
 }
-function mostSpecificInnerSelector(
-  node: ImmutablePseudoClass,
-  result: Specificity
-) {
-  if (node.nodes?.length) {
-    let highest: Specificity = [0, 0, 0, 0];
-    for (const selector of node.nodes) {
-      const currentSpecificity = calcSpecificity(selector);
-      if (!highest || compareSpecificity(currentSpecificity, highest) === 1) {
-        highest = currentSpecificity;
-      }
+function mostSpecificInnerSelector(node: ImmutablePseudoClass, result: Specificity) {
+    if (node.nodes?.length) {
+        let highest: Specificity = [0, 0, 0, 0];
+        for (const selector of node.nodes) {
+            const currentSpecificity = calcSpecificity(selector);
+            if (!highest || compareSpecificity(currentSpecificity, highest) === 1) {
+                highest = currentSpecificity;
+            }
+        }
+        addSpecificity(result, highest);
     }
-    addSpecificity(result, highest);
-  }
 }
 /**
  * compare 2 specificities
@@ -87,15 +75,15 @@ function mostSpecificInnerSelector(
  * @returns 0 if equal, 1 when a is more specific, -1 when b is more specific
  */
 export function compareSpecificity(a: Specificity, b: Specificity): -1 | 0 | 1 {
-  for (let i = 0; i < 4; ++i) {
-    const specificityDiff = a[i] - b[i];
-    if (specificityDiff > 0) {
-      return 1;
-    } else if (specificityDiff < 0) {
-      return -1;
+    for (let i = 0; i < 4; ++i) {
+        const specificityDiff = a[i] - b[i];
+        if (specificityDiff > 0) {
+            return 1;
+        } else if (specificityDiff < 0) {
+            return -1;
+        }
     }
-  }
-  return 0;
+    return 0;
 }
 
 /**
@@ -104,7 +92,7 @@ export function compareSpecificity(a: Specificity, b: Specificity): -1 | 0 | 1 {
  * @param from specificity amount to add
  */
 function addSpecificity(to: Specificity, from: Specificity) {
-  for (let i = 0; i < 4; ++i) {
-    to[i] += from[i];
-  }
+    for (let i = 0; i < 4; ++i) {
+        to[i] += from[i];
+    }
 }
diff --git a/packages/css-selector-parser/src/ast-tools/walk.ts b/packages/css-selector-parser/src/ast-tools/walk.ts
index 1dcb6be1..cb171dbf 100644
--- a/packages/css-selector-parser/src/ast-tools/walk.ts
+++ b/packages/css-selector-parser/src/ast-tools/walk.ts
@@ -1,20 +1,20 @@
 import type {
-  SelectorNode,
-  SelectorList,
-  FunctionalSelector,
-  ImmutableSelectorNode,
-  ImmutableSelectorList,
-} from "../ast-types";
+    SelectorNode,
+    SelectorList,
+    FunctionalSelector,
+    ImmutableSelectorNode,
+    ImmutableSelectorList,
+} from '../ast-types';
 
 export interface WalkOptions {
-  visitList?: SelectorNode["type"][];
-  ignoreList?: SelectorNode["type"][];
+    visitList?: SelectorNode['type'][];
+    ignoreList?: SelectorNode['type'][];
 }
 export type WalkVisitor<AST extends SelectorNode | ImmutableSelectorNode> = (
-  node: AST,
-  index: number,
-  nodes: AST[],
-  parents: AST[]
+    node: AST,
+    index: number,
+    nodes: AST[],
+    parents: AST[]
 ) => number | undefined | void;
 const nestEnd = Symbol(`nest-end`);
 
@@ -30,132 +30,123 @@ const nestEnd = Symbol(`nest-end`);
  * @param options provide visitList/ignoreList for traversal
  */
 export function walk<AST extends SelectorNode | SelectorList>(
-  topNode: AST,
-  visit: WalkVisitor<SelectorNode>,
-  options?: WalkOptions
+    topNode: AST,
+    visit: WalkVisitor<SelectorNode>,
+    options?: WalkOptions
 ): void;
 export function walk<AST extends ImmutableSelectorNode | ImmutableSelectorList>(
-  topNode: AST,
-  visit: WalkVisitor<ImmutableSelectorNode>,
-  options?: WalkOptions
+    topNode: AST,
+    visit: WalkVisitor<ImmutableSelectorNode>,
+    options?: WalkOptions
 ): void;
 export function walk<
-  AST extends
-    | SelectorNode
-    | SelectorList
-    | ImmutableSelectorNode
-    | ImmutableSelectorList
+    AST extends SelectorNode | SelectorList | ImmutableSelectorNode | ImmutableSelectorList
 >(
-  topNode: AST,
-  visit: WalkVisitor<SelectorNode> | WalkVisitor<ImmutableSelectorNode>,
-  options: WalkOptions = {}
+    topNode: AST,
+    visit: WalkVisitor<SelectorNode> | WalkVisitor<ImmutableSelectorNode>,
+    options: WalkOptions = {}
 ): void {
-  // set initial top nodes to traverse
-  const toVisit: Array<SelectorNode | ImmutableSelectorNode | typeof nestEnd> =
-    Array.isArray(topNode) ? [...topNode] : [topNode];
-  // initiate context
-  const context = createWalkContext(topNode);
-  // iterate nodes
-  while (toVisit.length) {
-    const current = toVisit.shift()!;
-    if (current === nestEnd) {
-      // end of nested level
-      context.up();
-      continue;
-    } else if (
-      (!options.ignoreList || !options.ignoreList.includes(current.type)) &&
-      (!options.visitList || options.visitList.includes(current.type))
-    ) {
-      // visit node
-      let skipAmount =
-        (visit(
-          current as SelectorNode,
-          context.indexInSelector,
-          context.nodesInSelector as SelectorNode[],
-          context.parents as SelectorNode[]
-        ) as number) ?? -1;
-      // point to next selector node
-      context.next();
-
-      // check if to skip nested or current/following selectors
-      if (skipAmount === Infinity) {
-        // stop all: fast bail out
-        return;
-      } else if (skipAmount >= 0) {
-        // skip levels
-        while (skipAmount > 0 && toVisit.length) {
-          const next = toVisit.shift()!;
-          if (next === nestEnd) {
-            skipAmount--;
+    // set initial top nodes to traverse
+    const toVisit: Array<SelectorNode | ImmutableSelectorNode | typeof nestEnd> = Array.isArray(
+        topNode
+    )
+        ? [...topNode]
+        : [topNode];
+    // initiate context
+    const context = createWalkContext(topNode);
+    // iterate nodes
+    while (toVisit.length) {
+        const current = toVisit.shift()!;
+        if (current === nestEnd) {
+            // end of nested level
             context.up();
-          }
+            continue;
+        } else if (
+            (!options.ignoreList || !options.ignoreList.includes(current.type)) &&
+            (!options.visitList || options.visitList.includes(current.type))
+        ) {
+            // visit node
+            let skipAmount =
+                (visit(
+                    current as SelectorNode,
+                    context.indexInSelector,
+                    context.nodesInSelector as SelectorNode[],
+                    context.parents as SelectorNode[]
+                ) as number) ?? -1;
+            // point to next selector node
+            context.next();
+
+            // check if to skip nested or current/following selectors
+            if (skipAmount === Infinity) {
+                // stop all: fast bail out
+                return;
+            } else if (skipAmount >= 0) {
+                // skip levels
+                while (skipAmount > 0 && toVisit.length) {
+                    const next = toVisit.shift()!;
+                    if (next === nestEnd) {
+                        skipAmount--;
+                        context.up();
+                    }
+                }
+                continue;
+            }
+        } else {
+            // point to next selector node
+            context.next();
+        }
+        // add nested nodes
+        if (isWithNodes(current)) {
+            context.insertNested(current);
+            toVisit.unshift(...current.nodes, nestEnd);
         }
-        continue;
-      }
-    } else {
-      // point to next selector node
-      context.next();
-    }
-    // add nested nodes
-    if (isWithNodes(current)) {
-      context.insertNested(current);
-      toVisit.unshift(...current.nodes, nestEnd);
     }
-  }
 }
 
 interface WalkContext<AST> {
-  parents: AST[];
-  indexInSelector: number;
-  nodesInSelector: ReadonlyArray<AST>;
-  up(): void;
-  next(): void;
-  insertNested(node: ContainerWithNodes): void;
+    parents: AST[];
+    indexInSelector: number;
+    nodesInSelector: ReadonlyArray<AST>;
+    up(): void;
+    next(): void;
+    insertNested(node: ContainerWithNodes): void;
 }
+function createWalkContext(topNode: SelectorNode | SelectorList): WalkContext<SelectorNode>;
 function createWalkContext(
-  topNode: SelectorNode | SelectorList
-): WalkContext<SelectorNode>;
-function createWalkContext(
-  topNode: ImmutableSelectorNode | ImmutableSelectorList
+    topNode: ImmutableSelectorNode | ImmutableSelectorList
 ): WalkContext<ImmutableSelectorNode>;
 function createWalkContext(
-  topNode:
-    | SelectorNode
-    | SelectorList
-    | ImmutableSelectorNode
-    | ImmutableSelectorList
+    topNode: SelectorNode | SelectorList | ImmutableSelectorNode | ImmutableSelectorList
 ) {
-  const prevIndex: number[] = [];
-  const prevParents: ImmutableSelectorNode[][] = [[]];
-  const context: WalkContext<SelectorNode | ImmutableSelectorNode> = {
-    parents: [],
-    indexInSelector: 0,
-    nodesInSelector: Array.isArray(topNode)
-      ? topNode
-      : `nodes` in topNode
-      ? topNode.nodes!
-      : ([topNode] as SelectorNode[]),
-    up() {
-      context.parents.pop();
-      context.indexInSelector = prevIndex.shift()!;
-      const currentParents = context.parents;
-      const currentParent = currentParents[currentParents.length - 1];
-      context.nodesInSelector = currentParent
-        ? (currentParent as any).nodes
-        : topNode;
-    },
-    next() {
-      context.indexInSelector++;
-    },
-    insertNested(node) {
-      context.parents = [...context.parents, node];
-      prevParents.push(context.parents);
-      prevIndex.unshift(context.indexInSelector);
-      context.indexInSelector = 0;
-      context.nodesInSelector = node.nodes;
-    },
-  };
-  return context;
+    const prevIndex: number[] = [];
+    const prevParents: ImmutableSelectorNode[][] = [[]];
+    const context: WalkContext<SelectorNode | ImmutableSelectorNode> = {
+        parents: [],
+        indexInSelector: 0,
+        nodesInSelector: Array.isArray(topNode)
+            ? topNode
+            : `nodes` in topNode
+            ? topNode.nodes!
+            : ([topNode] as SelectorNode[]),
+        up() {
+            context.parents.pop();
+            context.indexInSelector = prevIndex.shift()!;
+            const currentParents = context.parents;
+            const currentParent = currentParents[currentParents.length - 1];
+            context.nodesInSelector = currentParent ? (currentParent as any).nodes : topNode;
+        },
+        next() {
+            context.indexInSelector++;
+        },
+        insertNested(node) {
+            context.parents = [...context.parents, node];
+            prevParents.push(context.parents);
+            prevIndex.unshift(context.indexInSelector);
+            context.indexInSelector = 0;
+            context.nodesInSelector = node.nodes;
+        },
+    };
+    return context;
 }
 
 walk.skipNested = 0 as const;
@@ -164,5 +155,5 @@ walk.stopAll = Infinity;
 
 type ContainerWithNodes = FunctionalSelector & { nodes: SelectorNode[] };
 function isWithNodes(node: any): node is ContainerWithNodes {
-  return node && `nodes` in node;
+    return node && `nodes` in node;
 }
diff --git a/packages/css-selector-parser/src/ast-types.ts b/packages/css-selector-parser/src/ast-types.ts
index ebfe652c..e32b2e08 100644
--- a/packages/css-selector-parser/src/ast-types.ts
+++ b/packages/css-selector-parser/src/ast-types.ts
@@ -1,143 +1,136 @@
-import type { Immutable } from "./types";
-import type { Token } from "@tokey/core";
+import type { Immutable } from './types';
+import type { Token } from '@tokey/core';
 
-export interface Selector extends Omit<Token<"selector">, "value"> {
-  nodes: SelectorNodes;
-  before: string;
-  after: string;
+export interface Selector extends Omit<Token<'selector'>, 'value'> {
+    nodes: SelectorNodes;
+    before: string;
+    after: string;
 }
 
 export type NthSelectorList = [Nth, ...SelectorList];
 
 // ToDo: try type NthSelectorList only for the specific set of types
-export interface PseudoClass extends Token<"pseudo_class"> {
-  nodes?: SelectorList | NthSelectorList;
-  colonComments: Comment[];
+export interface PseudoClass extends Token<'pseudo_class'> {
+    nodes?: SelectorList | NthSelectorList;
+    colonComments: Comment[];
 }
 
-export interface PseudoElement extends Token<"pseudo_element"> {
-  nodes?: SelectorList;
-  colonComments: { first: Comment[]; second: Comment[] };
+export interface PseudoElement extends Token<'pseudo_element'> {
+    nodes?: SelectorList;
+    colonComments: { first: Comment[]; second: Comment[] };
 }
 
-export interface Class extends Token<"class"> {
-  nodes?: SelectorList;
-  dotComments: SelectorNodes;
+export interface Class extends Token<'class'> {
+    nodes?: SelectorList;
+    dotComments: SelectorNodes;
 }
 
-export interface Id extends Token<"id"> {
-  nodes?: SelectorList;
+export interface Id extends Token<'id'> {
+    nodes?: SelectorList;
 }
 
-export interface Attribute extends Token<"attribute"> {
-  // left: string;
-  // right: string;
-  // op: "" | "=" | "~=" | "|=" | "^=" | "$=" | "*=";
-  // quotes: "'" | '"' | "";
-  nodes?: SelectorList;
+export interface Attribute extends Token<'attribute'> {
+    // left: string;
+    // right: string;
+    // op: "" | "=" | "~=" | "|=" | "^=" | "$=" | "*=";
+    // quotes: "'" | '"' | "";
+    nodes?: SelectorList;
 }
 
 export interface Namespace {
-  value: string;
-  beforeComments: Comment[];
-  afterComments: Comment[];
-  invalid?: "namespace" | "target" | "namespace,target" | "";
+    value: string;
+    beforeComments: Comment[];
+    afterComments: Comment[];
+    invalid?: 'namespace' | 'target' | 'namespace,target' | '';
 }
 
-export interface Type extends Token<"type"> {
-  namespace?: Namespace;
-  nodes?: SelectorList;
+export interface Type extends Token<'type'> {
+    namespace?: Namespace;
+    nodes?: SelectorList;
 }
 
-export interface Universal extends Token<"universal"> {
-  namespace?: Namespace;
-  nodes?: SelectorList;
+export interface Universal extends Token<'universal'> {
+    namespace?: Namespace;
+    nodes?: SelectorList;
 }
 
-export interface Combinator extends Token<"combinator"> {
-  combinator: "space" | "+" | "~" | ">";
-  before: string;
-  after: string;
-  invalid: boolean;
+export interface Combinator extends Token<'combinator'> {
+    combinator: 'space' | '+' | '~' | '>';
+    before: string;
+    after: string;
+    invalid: boolean;
 }
 
-export interface Nesting extends Token<"nesting"> {
-  value: "&";
-  nodes?: SelectorList;
+export interface Nesting extends Token<'nesting'> {
+    value: '&';
+    nodes?: SelectorList;
 }
 
-export type Invalid = Token<"invalid">;
-export interface Comment extends Token<"comment"> {
-  before: string;
-  after: string;
+export type Invalid = Token<'invalid'>;
+export interface Comment extends Token<'comment'> {
+    before: string;
+    after: string;
 }
-export type CommentWithNoSpacing = Comment & { before: ""; after: "" };
+export type CommentWithNoSpacing = Comment & { before: ''; after: '' };
 
 export interface NthBase<PART extends string> extends Token<PART> {
-  before: string;
-  after: string;
-  invalid?: boolean;
+    before: string;
+    after: string;
+    invalid?: boolean;
 }
-export type NthStep = NthBase<"nth_step">;
-export type NthOffset = NthBase<"nth_offset">;
-export type NthDash = NthBase<"nth_dash">;
-export type NthOf = NthBase<"nth_of">;
+export type NthStep = NthBase<'nth_step'>;
+export type NthOffset = NthBase<'nth_offset'>;
+export type NthDash = NthBase<'nth_dash'>;
+export type NthOf = NthBase<'nth_of'>;
 export type NthNode = NthStep | NthOffset | NthDash | NthOf | Comment;
-export interface Nth extends Omit<Token<"nth">, "value"> {
-  nodes: Array<NthNode>;
-  before: string;
-  after: string;
-  // invalid?: boolean;
+export interface Nth extends Omit<Token<'nth'>, 'value'> {
+    nodes: Array<NthNode>;
+    before: string;
+    after: string;
+    // invalid?: boolean;
 }
 
 export type NamespacedNode = Type | Universal;
 
-export type SimpleSelector =
-  | Type
-  | Universal
-  | Attribute
-  | Class
-  | Id
-  | PseudoClass;
-
-export interface CompoundSelector
-  extends Omit<Token<"compound_selector">, "value"> {
-  nodes: Array<
-    | SimpleSelector
-    // non standard
-    | Nesting
-    | CommentWithNoSpacing
-    | Invalid
-    | PseudoElement
-    | CompoundSelector
-    | Selector
-  >;
-  before: string;
-  after: string;
-  invalid: boolean;
+export type SimpleSelector = Type | Universal | Attribute | Class | Id | PseudoClass;
+
+export interface CompoundSelector extends Omit<Token<'compound_selector'>, 'value'> {
+    nodes: Array<
+        | SimpleSelector
+        // non standard
+        | Nesting
+        | CommentWithNoSpacing
+        | Invalid
+        | PseudoElement
+        | CompoundSelector
+        | Selector
+    >;
+    before: string;
+    after: string;
+    invalid: boolean;
 }
 
 export type FunctionalSelector =
-  | NamespacedNode
-  | Attribute
-  | Id
-  | Class
-  | PseudoClass
-  | PseudoElement
-  | Nesting;
+    | NamespacedNode
+    | Attribute
+    | Id
+    | Class
+    | PseudoClass
+    | PseudoElement
+    | Nesting;
 
 export type SelectorNode =
-  | FunctionalSelector
-  | Selector
-  | CompoundSelector
-  | Combinator
-  | Comment
-  | Invalid
-  | Nth
-  | NthStep
-  | NthDash
-  | NthOffset
-  | NthOf;
+    | FunctionalSelector
+    | Selector
+    | CompoundSelector
+    | Combinator
+    | Comment
+    | Invalid
+    | Nth
+    | NthStep
+    | NthDash
+    | NthOffset
+    | NthOf;
 export type SelectorNodes = SelectorNode[];
 export type SelectorList = Selector[];
 
diff --git a/packages/css-selector-parser/src/helpers.ts b/packages/css-selector-parser/src/helpers.ts
index d68bf675..37b34eef 100644
--- a/packages/css-selector-parser/src/helpers.ts
+++ b/packages/css-selector-parser/src/helpers.ts
@@ -1,146 +1,132 @@
-import type { CSSSelectorToken } from "./tokenizer";
+import type { CSSSelectorToken } from './tokenizer';
 import type {
-  Combinator,
-  Comment,
-  Selector,
-  Nth,
-  NamespacedNode,
-  SelectorList,
-  SelectorNode,
-} from "./ast-types";
-import { Token, last } from "@tokey/core";
+    Combinator,
+    Comment,
+    Selector,
+    Nth,
+    NamespacedNode,
+    SelectorList,
+    SelectorNode,
+} from './ast-types';
+import { Token, last } from '@tokey/core';
 
 // create ast nodes
 
 export function createEmptySelector(): Selector {
-  return {
-    type: "selector",
-    start: -1,
-    end: -1,
-    before: "",
-    after: "",
-    nodes: [],
-  };
+    return {
+        type: 'selector',
+        start: -1,
+        end: -1,
+        before: '',
+        after: '',
+        nodes: [],
+    };
 }
 
 export function createEmptyNth(): Nth {
-  return {
-    type: "nth",
-    start: -1,
-    end: -1,
-    before: "",
-    after: "",
-    nodes: [],
-  };
+    return {
+        type: 'nth',
+        start: -1,
+        end: -1,
+        before: '',
+        after: '',
+        nodes: [],
+    };
 }
 
 export function createCombinatorAst({
-  value,
-  type,
-  start,
-  end,
-}: CSSSelectorToken & Token<"space" | "+" | ">" | "~">): Combinator {
-  return {
-    type: `combinator`,
-    combinator: type,
-    value: type === `space` ? ` ` : value,
+    value,
+    type,
     start,
     end,
-    before: ``,
-    after: type === `space` ? value.slice(1) : ``,
-    invalid: false,
-  };
+}: CSSSelectorToken & Token<'space' | '+' | '>' | '~'>): Combinator {
+    return {
+        type: `combinator`,
+        combinator: type,
+        value: type === `space` ? ` ` : value,
+        start,
+        end,
+        before: ``,
+        after: type === `space` ? value.slice(1) : ``,
+        invalid: false,
+    };
 }
 
-export function createCommentAst({
-  value,
-  start,
-  end,
-}: CSSSelectorToken): Comment {
-  return {
-    type: `comment`,
-    value,
-    start,
-    end,
-    before: ``,
-    after: ``,
-  };
+export function createCommentAst({ value, start, end }: CSSSelectorToken): Comment {
+    return {
+        type: `comment`,
+        value,
+        start,
+        end,
+        before: ``,
+        after: ``,
+    };
 }
 
 // type guards
 
 export function isCombinatorToken(
-  token: CSSSelectorToken
-): token is Token<"space" | "+" | ">" | "~"> {
-  return (
-    token.type === "space" ||
-    token.type === "+" ||
-    token.type === ">" ||
-    token.type === "~"
-  );
+    token: CSSSelectorToken
+): token is Token<'space' | '+' | '>' | '~'> {
+    return token.type === 'space' || token.type === '+' || token.type === '>' || token.type === '~';
 }
 
-export function isNamespacedToken(
-  token: CSSSelectorToken
-): token is Token<"text" | "*"> {
-  return token.type === `*` || token.type === `text`;
+export function isNamespacedToken(token: CSSSelectorToken): token is Token<'text' | '*'> {
+    return token.type === `*` || token.type === `text`;
 }
 export function isNamespacedAst(token: SelectorNode): token is NamespacedNode {
-  return token.type === `universal` || token.type === `type`;
+    return token.type === `universal` || token.type === `type`;
 }
 
 // utils
 
-export function ensureSelector(
-  selectors: SelectorList,
-  startToken: CSSSelectorToken
-) {
-  let lastSelector = last(selectors);
-  if (!lastSelector) {
-    lastSelector = createEmptySelector();
-    lastSelector.start = startToken.start;
-    selectors.push(lastSelector);
-  }
-  return lastSelector;
+export function ensureSelector(selectors: SelectorList, startToken: CSSSelectorToken) {
+    let lastSelector = last(selectors);
+    if (!lastSelector) {
+        lastSelector = createEmptySelector();
+        lastSelector.start = startToken.start;
+        selectors.push(lastSelector);
+    }
+    return lastSelector;
 }
 
 export function trimCombinators(selector: Selector) {
-  // costly way to turn combinators to before and after.
-  // this can be inlined in the handle token process
-  const nodes = selector.nodes;
-  const firstNode = nodes[0];
-  const lastNode = last(nodes);
-  // remove first space combinator and add to selector before
-  // (going between comment is not required for the start because they are taken care
-  // of during parsing)
-  if (firstNode?.type === "combinator" && firstNode.combinator === "space") {
-    selector.nodes.shift();
-    selector.before += firstNode.before + firstNode.value + firstNode.after;
-  }
-  // remove any edge space combinators (last and between comments)
-  if (lastNode && lastNode !== firstNode) {
-    let index = nodes.length - 1;
-    let current = lastNode;
-    let lastComment: Comment | undefined;
-    while (
-      current.type === `comment` ||
-      (current.type === `combinator` && current.combinator === `space`)
-    ) {
-      if (current.type === `combinator`) {
-        if (!lastComment) {
-          // attach space to end of selector
-          selector.nodes.pop();
-          selector.after += current.before + current.value + current.after;
-        } else {
-          // attach space to start of comment
-          selector.nodes.splice(index, 1);
-          lastComment.before += current.before + current.value + current.after;
-          lastComment.start = current.start;
+    // costly way to turn combinators to before and after.
+    // this can be inlined in the handle token process
+    const nodes = selector.nodes;
+    const firstNode = nodes[0];
+    const lastNode = last(nodes);
+    // remove first space combinator and add to selector before
+    // (going between comment is not required for the start because they are taken care
+    // of during parsing)
+    if (firstNode?.type === 'combinator' && firstNode.combinator === 'space') {
+        selector.nodes.shift();
+        selector.before += firstNode.before + firstNode.value + firstNode.after;
+    }
+    // remove any edge space combinators (last and between comments)
+    if (lastNode && lastNode !== firstNode) {
+        let index = nodes.length - 1;
+        let current = lastNode;
+        let lastComment: Comment | undefined;
+        while (
+            current.type === `comment` ||
+            (current.type === `combinator` && current.combinator === `space`)
+        ) {
+            if (current.type === `combinator`) {
+                if (!lastComment) {
+                    // attach space to end of selector
+                    selector.nodes.pop();
+                    selector.after += current.before + current.value + current.after;
+                } else {
+                    // attach space to start of comment
+                    selector.nodes.splice(index, 1);
+                    lastComment.before += current.before + current.value + current.after;
+                    lastComment.start = current.start;
+                }
+            } else {
+                lastComment = current;
+            }
+            current = nodes[--index];
         }
-      } else {
-        lastComment = current;
-      }
-      current = nodes[--index];
     }
-  }
 }
diff --git a/packages/css-selector-parser/src/index.ts b/packages/css-selector-parser/src/index.ts
index 885ac817..4aa23f52 100644
--- a/packages/css-selector-parser/src/index.ts
+++ b/packages/css-selector-parser/src/index.ts
@@ -1,12 +1,9 @@
-export { parseCssSelector } from "./selector-parser";
-export type { ParseConfig } from "./selector-parser";
-export * from "./ast-types";
-export { stringifySelectorAst } from "./stringify";
-export { walk } from "./ast-tools/walk";
-export type { WalkOptions } from "./ast-tools/walk";
-export {
-  groupCompoundSelectors,
-  splitCompoundSelectors,
-} from "./ast-tools/compound";
-export { calcSpecificity, compareSpecificity } from "./ast-tools/specificity";
-export type { Specificity } from "./ast-tools/specificity";
+export { parseCssSelector } from './selector-parser';
+export type { ParseConfig } from './selector-parser';
+export * from './ast-types';
+export { stringifySelectorAst } from './stringify';
+export { walk } from './ast-tools/walk';
+export type { WalkOptions } from './ast-tools/walk';
+export { groupCompoundSelectors, splitCompoundSelectors } from './ast-tools/compound';
+export { calcSpecificity, compareSpecificity } from './ast-tools/specificity';
+export type { Specificity } from './ast-tools/specificity';
diff --git a/packages/css-selector-parser/src/nth-parser.ts b/packages/css-selector-parser/src/nth-parser.ts
index 37b03847..c2dc844a 100644
--- a/packages/css-selector-parser/src/nth-parser.ts
+++ b/packages/css-selector-parser/src/nth-parser.ts
@@ -1,257 +1,246 @@
-import type { CSSSelectorToken } from "./tokenizer";
-import type { Nth, NthOf, NthOffset, NthStep } from "./ast-types";
-import { createCommentAst } from "./helpers";
-import { isComment, Seeker, last } from "@tokey/core";
+import type { CSSSelectorToken } from './tokenizer';
+import type { Nth, NthOf, NthOffset, NthStep } from './ast-types';
+import { createCommentAst } from './helpers';
+import { isComment, Seeker, last } from '@tokey/core';
 
 export class NthParser {
-  static isNthPseudoClass(name: string): boolean {
-    return (
-      name === `nth-child` ||
-      name === `nth-last-child` ||
-      name === `nth-of-type` ||
-      name === `nth-last-of-type`
-    );
-  }
-  /**
-   * check (case insensitive) and returns 2 groups:
-   * 1. plus/minus sign (invalid step value)
-   * 2. odd/even string
-   * [
-   *  `+`|`-`|undefined,
-   *  `odd`|`even`
-   * ]
-   */
-  static oddEvenStep = /([-+]?)(odd|even)/i;
-  /**
-   * check for valid step
-   * starts with optional minus or plus,
-   * ends with 0 or more digits following a `n`/`N` character
-   */
-  static validStep = /^[-+]?\d*n$/i;
-  /**
-   * check for valid offset
-   * starts with optional minus or plus,
-   * ends with 1 or more digits
-   */
-  static validOffset = /^[-+]?\d+$/;
-  /**
-   * check for valid start of nth expression
-   * and returns 2 groups:
-   * 1. An: optional minus or plus, 0 or more digits, `n`/`N` character
-   * 2. anything after that
-   */
-  static nthStartExp = /([-+]?\d*[nN]?)(.*)/;
+    static isNthPseudoClass(name: string): boolean {
+        return (
+            name === `nth-child` ||
+            name === `nth-last-child` ||
+            name === `nth-of-type` ||
+            name === `nth-last-of-type`
+        );
+    }
+    /**
+     * check (case insensitive) and returns 2 groups:
+     * 1. plus/minus sign (invalid step value)
+     * 2. odd/even string
+     * [
+     *  `+`|`-`|undefined,
+     *  `odd`|`even`
+     * ]
+     */
+    static oddEvenStep = /([-+]?)(odd|even)/i;
+    /**
+     * check for valid step
+     * starts with optional minus or plus,
+     * ends with 0 or more digits following a `n`/`N` character
+     */
+    static validStep = /^[-+]?\d*n$/i;
+    /**
+     * check for valid offset
+     * starts with optional minus or plus,
+     * ends with 1 or more digits
+     */
+    static validOffset = /^[-+]?\d+$/;
+    /**
+     * check for valid start of nth expression
+     * and returns 2 groups:
+     * 1. An: optional minus or plus, 0 or more digits, `n`/`N` character
+     * 2. anything after that
+     */
+    static nthStartExp = /([-+]?\d*[nN]?)(.*)/;
 
-  public state: "step" | `dash` | `offset` | `of` | `selector` = `step`;
-  private standaloneDash = false;
-  private ast: Nth["nodes"];
-  constructor(private selectorNode: Nth, private s: Seeker<CSSSelectorToken>) {
-    this.ast = selectorNode.nodes;
-  }
-  public handleToken(token: CSSSelectorToken): boolean {
-    const type = token.type;
-    if (type === `text` || type === `+`) {
-      switch (this.state) {
-        case `step`: {
-          // pickup 1 or more tokens for `5n` / `+5n` / `+5n-4` / `5`
-          const nextToken =
-            type === `+` && this.s.peek().type === `text`
-              ? this.s.next()
-              : undefined;
-          this.breakFirstChunk({
-            type: `text`,
-            value: token.value + (nextToken?.value || ``),
-            start: token.start,
-            end: nextToken?.end || token.end,
-          });
-          return true;
-        }
-        case `dash`: {
-          const nextToken =
-            type === `+` && this.s.peek().type === `text`
-              ? this.s.next()
-              : undefined;
-          this.pushDash({
-            type: `text`,
-            value: token.value + (nextToken?.value || ``),
-            start: token.start,
-            end: nextToken?.end || token.end,
-          });
-          return true;
+    public state: 'step' | `dash` | `offset` | `of` | `selector` = `step`;
+    private standaloneDash = false;
+    private ast: Nth['nodes'];
+    constructor(private selectorNode: Nth, private s: Seeker<CSSSelectorToken>) {
+        this.ast = selectorNode.nodes;
+    }
+    public handleToken(token: CSSSelectorToken): boolean {
+        const type = token.type;
+        if (type === `text` || type === `+`) {
+            switch (this.state) {
+                case `step`: {
+                    // pickup 1 or more tokens for `5n` / `+5n` / `+5n-4` / `5`
+                    const nextToken =
+                        type === `+` && this.s.peek().type === `text` ? this.s.next() : undefined;
+                    this.breakFirstChunk({
+                        type: `text`,
+                        value: token.value + (nextToken?.value || ``),
+                        start: token.start,
+                        end: nextToken?.end || token.end,
+                    });
+                    return true;
+                }
+                case `dash`: {
+                    const nextToken =
+                        type === `+` && this.s.peek().type === `text` ? this.s.next() : undefined;
+                    this.pushDash({
+                        type: `text`,
+                        value: token.value + (nextToken?.value || ``),
+                        start: token.start,
+                        end: nextToken?.end || token.end,
+                    });
+                    return true;
+                }
+                case `offset`: {
+                    const nextToken =
+                        type === `+` && this.s.peek().type === `text` ? this.s.next() : undefined;
+                    this.pushOffset({
+                        type: `text`,
+                        value: token.value + (nextToken?.value || ``),
+                        start: token.start,
+                        end: nextToken?.end || token.end,
+                    });
+                    return true;
+                }
+                case `of`: {
+                    this.pushOf(token);
+                    return false;
+                }
+            }
+        } else if (type === `space`) {
+            // improve typing
+            const lastNode = last(this.ast);
+            if (lastNode) {
+                lastNode.after += token.value;
+                lastNode.end += token.value.length;
+            } else {
+                // add initial space to top selector
+                this.selectorNode.before += token.value;
+            }
+            return true;
+        } else if (isComment(type)) {
+            this.ast.push(createCommentAst(token));
+            return true;
         }
-        case `offset`: {
-          const nextToken =
-            type === `+` && this.s.peek().type === `text`
-              ? this.s.next()
-              : undefined;
-          this.pushOffset({
-            type: `text`,
-            value: token.value + (nextToken?.value || ``),
-            start: token.start,
-            end: nextToken?.end || token.end,
-          });
-          return true;
+        // not part of `An+b of`: bail out
+        this.s.back();
+        return false;
+    }
+    /**
+     * first token can only be (minus contained in text):
+     * step: `5n`/`+5n`/`-5n`
+     * step & offset: `5n`/`5n-5
+     */
+    private breakFirstChunk(token: CSSSelectorToken) {
+        const value = token.value;
+        // find odd/even
+        const oddEventMatch = value.match(NthParser.oddEvenStep);
+        if (oddEventMatch) {
+            const isInvalid = !!oddEventMatch[1];
+            this.pushStep(token, isInvalid);
+            return;
         }
-        case `of`: {
-          this.pushOf(token);
-          return false;
+        // separate valid step start from rest: `-5n-4` / `-5n` / `-4` / `5n-4`
+        const matchValidStart = value.match(NthParser.nthStartExp);
+        if (!matchValidStart) {
+            // invalid step
+            this.pushStep(token);
+        } else {
+            const step = matchValidStart[1];
+            const offset = matchValidStart[2];
+            if (!offset && !step.match(/[nN]+$/) && step.match(NthParser.validOffset)) {
+                // no `n` - just offset
+                this.pushOffset(token);
+            } else if (offset === `-`) {
+                // connected dash: `5n-`
+                this.pushStep({
+                    type: `text`,
+                    value: step,
+                    start: token.start,
+                    end: token.start + step.length,
+                });
+                this.pushDash({
+                    type: `text`,
+                    value: `-`,
+                    start: token.end - 1,
+                    end: token.end,
+                });
+            } else if (offset && !offset.match(/-\d+/)) {
+                // invalid step: `-3x`
+                this.pushStep(token);
+            } else {
+                // step with potential minus offset: `5n-4`
+                this.pushStep({
+                    type: `text`,
+                    value: step,
+                    start: token.start,
+                    end: token.start + step.length,
+                });
+                if (offset) {
+                    this.pushOffset({
+                        type: `text`,
+                        value: offset,
+                        start: token.end - offset.length,
+                        end: token.end,
+                    });
+                }
+            }
         }
-      }
-    } else if (type === `space`) {
-      // improve typing
-      const lastNode = last(this.ast);
-      if (lastNode) {
-        lastNode.after += token.value;
-        lastNode.end += token.value.length;
-      } else {
-        // add initial space to top selector
-        this.selectorNode.before += token.value;
-      }
-      return true;
-    } else if (isComment(type)) {
-      this.ast.push(createCommentAst(token));
-      return true;
-    }
-    // not part of `An+b of`: bail out
-    this.s.back();
-    return false;
-  }
-  /**
-   * first token can only be (minus contained in text):
-   * step: `5n`/`+5n`/`-5n`
-   * step & offset: `5n`/`5n-5
-   */
-  private breakFirstChunk(token: CSSSelectorToken) {
-    const value = token.value;
-    // find odd/even
-    const oddEventMatch = value.match(NthParser.oddEvenStep);
-    if (oddEventMatch) {
-      const isInvalid = !!oddEventMatch[1];
-      this.pushStep(token, isInvalid);
-      return;
     }
-    // separate valid step start from rest: `-5n-4` / `-5n` / `-4` / `5n-4`
-    const matchValidStart = value.match(NthParser.nthStartExp);
-    if (!matchValidStart) {
-      // invalid step
-      this.pushStep(token);
-    } else {
-      const step = matchValidStart[1];
-      const offset = matchValidStart[2];
-      if (
-        !offset &&
-        !step.match(/[nN]+$/) &&
-        step.match(NthParser.validOffset)
-      ) {
-        // no `n` - just offset
-        this.pushOffset(token);
-      } else if (offset === `-`) {
-        // connected dash: `5n-`
-        this.pushStep({
-          type: `text`,
-          value: step,
-          start: token.start,
-          end: token.start + step.length,
-        });
-        this.pushDash({
-          type: `text`,
-          value: `-`,
-          start: token.end - 1,
-          end: token.end,
-        });
-      } else if (offset && !offset.match(/-\d+/)) {
-        // invalid step: `-3x`
-        this.pushStep(token);
-      } else {
-        // step with potential minus offset: `5n-4`
-        this.pushStep({
-          type: `text`,
-          value: step,
-          start: token.start,
-          end: token.start + step.length,
-        });
-        if (offset) {
-          this.pushOffset({
-            type: `text`,
-            value: offset,
-            start: token.end - offset.length,
+    private pushStep(token: CSSSelectorToken, isInvalid?: boolean) {
+        const value = token.value;
+        const stepNode: NthStep = {
+            type: `nth_step`,
+            value,
+            before: ``,
+            after: ``,
+            start: token.start,
             end: token.end,
-          });
+        };
+        isInvalid = isInvalid !== undefined ? isInvalid : !value.match(NthParser.validStep);
+        if (isInvalid) {
+            stepNode.invalid = true;
         }
-      }
-    }
-  }
-  private pushStep(token: CSSSelectorToken, isInvalid?: boolean) {
-    const value = token.value;
-    const stepNode: NthStep = {
-      type: `nth_step`,
-      value,
-      before: ``,
-      after: ``,
-      start: token.start,
-      end: token.end,
-    };
-    isInvalid =
-      isInvalid !== undefined ? isInvalid : !value.match(NthParser.validStep);
-    if (isInvalid) {
-      stepNode.invalid = true;
+        this.state = `dash`;
+        this.ast.push(stepNode);
     }
-    this.state = `dash`;
-    this.ast.push(stepNode);
-  }
-  private pushDash(token: CSSSelectorToken) {
-    const value = token.value;
-    if (value === `+` || value === `-`) {
-      this.ast.push({
-        type: `nth_dash`,
-        value: token.value,
-        start: token.start,
-        end: token.end,
-        before: ``,
-        after: ``,
-      });
-      this.standaloneDash = true;
-      this.state = `offset`;
-    } else {
-      this.pushOffset(token);
+    private pushDash(token: CSSSelectorToken) {
+        const value = token.value;
+        if (value === `+` || value === `-`) {
+            this.ast.push({
+                type: `nth_dash`,
+                value: token.value,
+                start: token.start,
+                end: token.end,
+                before: ``,
+                after: ``,
+            });
+            this.standaloneDash = true;
+            this.state = `offset`;
+        } else {
+            this.pushOffset(token);
+        }
     }
-  }
-  private pushOffset(token: CSSSelectorToken) {
-    if (token.value === `of`) {
-      this.pushOf(token);
-    } else {
-      const value = token.value;
-      const offsetNode: NthOffset = {
-        type: `nth_offset`,
-        value,
-        before: ``,
-        after: ``,
-        start: token.start,
-        end: token.end,
-      };
-      if (
-        !value.match(NthParser.validOffset) ||
-        (this.standaloneDash && value.match(/^[-+]/))
-      ) {
-        offsetNode.invalid = true;
-      }
-      this.state = `of`;
-      this.ast.push(offsetNode);
+    private pushOffset(token: CSSSelectorToken) {
+        if (token.value === `of`) {
+            this.pushOf(token);
+        } else {
+            const value = token.value;
+            const offsetNode: NthOffset = {
+                type: `nth_offset`,
+                value,
+                before: ``,
+                after: ``,
+                start: token.start,
+                end: token.end,
+            };
+            if (
+                !value.match(NthParser.validOffset) ||
+                (this.standaloneDash && value.match(/^[-+]/))
+            ) {
+                offsetNode.invalid = true;
+            }
+            this.state = `of`;
+            this.ast.push(offsetNode);
+        }
     }
-  }
-  private pushOf(token: CSSSelectorToken) {
-    const ofNode: NthOf = {
-      type: `nth_of`,
-      value: token.value,
-      before: ``,
-      after: ``,
-      start: token.start,
-      end: token.end,
-    };
-    if (token.value !== `of`) {
-      ofNode.invalid = true;
+    private pushOf(token: CSSSelectorToken) {
+        const ofNode: NthOf = {
+            type: `nth_of`,
+            value: token.value,
+            before: ``,
+            after: ``,
+            start: token.start,
+            end: token.end,
+        };
+        if (token.value !== `of`) {
+            ofNode.invalid = true;
+        }
+        this.ast.push(ofNode);
+        this.state = `selector`;
     }
-    this.ast.push(ofNode);
-    this.state = `selector`;
-  }
 }
diff --git a/packages/css-selector-parser/src/selector-parser.ts b/packages/css-selector-parser/src/selector-parser.ts
index 749ef48e..4fe0633d 100644
--- a/packages/css-selector-parser/src/selector-parser.ts
+++ b/packages/css-selector-parser/src/selector-parser.ts
@@ -1,430 +1,418 @@
-import { tokenizeSelector, CSSSelectorToken } from "./tokenizer";
-import { NthParser } from "./nth-parser";
+import { tokenizeSelector, CSSSelectorToken } from './tokenizer';
+import { NthParser } from './nth-parser';
 import type {
-  Namespace,
-  Combinator,
-  Comment,
-  NamespacedNode,
-  Selector,
-  SelectorList,
-  SelectorNode,
-} from "./ast-types";
+    Namespace,
+    Combinator,
+    Comment,
+    NamespacedNode,
+    Selector,
+    SelectorList,
+    SelectorNode,
+} from './ast-types';
 import {
-  createCombinatorAst,
-  createCommentAst,
-  createEmptySelector,
-  createEmptyNth,
-  isCombinatorToken,
-  isNamespacedAst,
-  isNamespacedToken,
-  ensureSelector,
-  trimCombinators,
-} from "./helpers";
-import { isComment, getText, Seeker, last } from "@tokey/core";
+    createCombinatorAst,
+    createCommentAst,
+    createEmptySelector,
+    createEmptyNth,
+    isCombinatorToken,
+    isNamespacedAst,
+    isNamespacedToken,
+    ensureSelector,
+    trimCombinators,
+} from './helpers';
+import { isComment, getText, Seeker, last } from '@tokey/core';
 
 export interface ParseConfig {
-  offset: number;
+    offset: number;
 }
 
-export function parseCssSelector(
-  source: string,
-  options: Partial<ParseConfig> = {}
-) {
-  return parseTokens(source, tokenizeSelector(source, options));
+export function parseCssSelector(source: string, options: Partial<ParseConfig> = {}) {
+    return parseTokens(source, tokenizeSelector(source, options));
 }
 
 function parseTokens(source: string, tokens: CSSSelectorToken[]): SelectorList {
-  return new Seeker(tokens).run<SelectorList>(handleToken, [], source);
+    return new Seeker(tokens).run<SelectorList>(handleToken, [], source);
 }
 
 function handleToken(
-  token: CSSSelectorToken,
-  selectors: SelectorList,
-  source: string,
-  s: Seeker<CSSSelectorToken>
+    token: CSSSelectorToken,
+    selectors: SelectorList,
+    source: string,
+    s: Seeker<CSSSelectorToken>
 ): void {
-  let t;
-  const currentSelector = ensureSelector(selectors, token);
-  const ast = currentSelector.nodes;
-  if (token.type === ".") {
-    const comments = s.takeMany("multi-comment").map(createCommentAst);
-    const name = s.take("text");
-    ast.push({
-      type: "class",
-      value: name?.value ?? "",
-      start: token.start,
-      end: name?.end ?? last(comments)?.end ?? token.end,
-      dotComments: comments,
-    });
-  } else if (token.type === ":") {
-    const firstComments = s.takeMany("multi-comment").map(createCommentAst);
-    const type = s.take(":") || token;
-    const isClass = token === type;
+    let t;
+    const currentSelector = ensureSelector(selectors, token);
+    const ast = currentSelector.nodes;
+    if (token.type === '.') {
+        const comments = s.takeMany('multi-comment').map(createCommentAst);
+        const name = s.take('text');
+        ast.push({
+            type: 'class',
+            value: name?.value ?? '',
+            start: token.start,
+            end: name?.end ?? last(comments)?.end ?? token.end,
+            dotComments: comments,
+        });
+    } else if (token.type === ':') {
+        const firstComments = s.takeMany('multi-comment').map(createCommentAst);
+        const type = s.take(':') || token;
+        const isClass = token === type;
 
-    if (isClass) {
-      const name = s.take("text");
-      const endToken = name || last(firstComments) || type;
-      ast.push({
-        type: "pseudo_class",
-        value: name?.value ?? "",
-        start: token.start,
-        end: name?.end ?? endToken.end,
-        colonComments: firstComments,
-      });
-    } else {
-      const secondComments = s.takeMany("multi-comment").map(createCommentAst);
-      const name = s.take("text");
-      const endToken = name || last(secondComments) || type;
+        if (isClass) {
+            const name = s.take('text');
+            const endToken = name || last(firstComments) || type;
+            ast.push({
+                type: 'pseudo_class',
+                value: name?.value ?? '',
+                start: token.start,
+                end: name?.end ?? endToken.end,
+                colonComments: firstComments,
+            });
+        } else {
+            const secondComments = s.takeMany('multi-comment').map(createCommentAst);
+            const name = s.take('text');
+            const endToken = name || last(secondComments) || type;
 
-      ast.push({
-        type: "pseudo_element",
-        value: name?.value ?? "",
-        start: token.start,
-        end: name?.end ?? endToken.end,
-        colonComments: { first: firstComments, second: secondComments },
-      });
-    }
-  } else if (token.type === "[") {
-    const block = s.run(
-      (token, ast) => {
-        ast.push(token);
-        return token.type !== "]";
-      },
-      [token],
-      source
-    );
-    const closed = last(block)?.type === "]";
-    if (closed) {
-      ast.push({
-        type: "attribute",
-        value:
-          block.length > 2 ? getText(block, 1, block.length - 1, source) : "",
-        start: token.start,
-        end: last(block)?.end ?? token.end,
-      });
-    } else {
-      ast.push({
-        type: "invalid",
-        value: getText(block, undefined, undefined, source),
-        start: token.start,
-        end: last(block)?.end ?? token.end,
-      });
-    }
-  } else if (isCombinatorToken(token)) {
-    let lastCombinatorAst = createCombinatorAst(token);
-    let lastAst: Combinator | Comment = lastCombinatorAst;
-    // insert token as a combinator
-    ast.push(lastCombinatorAst);
-    // save the insertion point of the first combinator in case it's a space
-    // that might be considered a normal space later and will need to be changed.
-    let initialSpaceCombIndex: number =
-      lastCombinatorAst.combinator === `space` ? ast.length - 1 : -1;
-    /**
-     * take next spaces/combinators/comments:
-     * - combinator/space token:
-     *  - spaces: merge to previous ast node before them
-     *  - previous ast equal to space combinator
-     *    - turn previous ast to the next combinator type
-     *    - merge spaces between them
-     *    - cancel initial space tracking - must be merged with other non space combinator or already canceled
-     *  - initial ast is space (must be comments following it)
-     *    - initial space is first in selector: merge initial ast into the selector before
-     *    - otherwise merge initial ast the comment following it
-     *  - insert an invalid combinator
-     * - comment token: insert to ast
-     */
-    //
-    let next = s.next();
-    while (next) {
-      if (isCombinatorToken(next)) {
-        if (next.type === `space`) {
-          // add space to the last ast node
-          lastAst.after += next.value;
-          lastAst.end = next.end;
-        } else if (
-          lastAst === lastCombinatorAst &&
-          lastAst.combinator === "space"
-        ) {
-          // combine next combinator into previous (space)
-          const nextCombinator = createCombinatorAst(next);
-          lastCombinatorAst.combinator = nextCombinator.combinator;
-          lastCombinatorAst.before +=
-            lastCombinatorAst.after +
-            lastCombinatorAst.value +
-            nextCombinator.before;
-          lastCombinatorAst.after = nextCombinator.after;
-          lastCombinatorAst.value = nextCombinator.value;
-          lastCombinatorAst.end = nextCombinator.end;
-          // reset initial space
-          initialSpaceCombIndex = -1;
-        } else if (initialSpaceCombIndex !== -1) {
-          // merge initial space combinator (classified as combinator before a comment)
-          const initialSpace = ast[initialSpaceCombIndex] as Combinator;
-          const spaceValue =
-            initialSpace.before + initialSpace.value + initialSpace.after;
-          if (initialSpaceCombIndex === 0) {
-            // merge to beginning of selector
-            currentSelector.before += spaceValue;
-          } else {
-            // merge to the next comment
-            const nodeAfterInitial = ast[initialSpaceCombIndex + 1];
-            if (nodeAfterInitial?.type === `comment`) {
-              nodeAfterInitial.before += spaceValue;
-              nodeAfterInitial.start = initialSpace.start;
+            ast.push({
+                type: 'pseudo_element',
+                value: name?.value ?? '',
+                start: token.start,
+                end: name?.end ?? endToken.end,
+                colonComments: { first: firstComments, second: secondComments },
+            });
+        }
+    } else if (token.type === '[') {
+        const block = s.run(
+            (token, ast) => {
+                ast.push(token);
+                return token.type !== ']';
+            },
+            [token],
+            source
+        );
+        const closed = last(block)?.type === ']';
+        if (closed) {
+            ast.push({
+                type: 'attribute',
+                value: block.length > 2 ? getText(block, 1, block.length - 1, source) : '',
+                start: token.start,
+                end: last(block)?.end ?? token.end,
+            });
+        } else {
+            ast.push({
+                type: 'invalid',
+                value: getText(block, undefined, undefined, source),
+                start: token.start,
+                end: last(block)?.end ?? token.end,
+            });
+        }
+    } else if (isCombinatorToken(token)) {
+        let lastCombinatorAst = createCombinatorAst(token);
+        let lastAst: Combinator | Comment = lastCombinatorAst;
+        // insert token as a combinator
+        ast.push(lastCombinatorAst);
+        // save the insertion point of the first combinator in case it's a space
+        // that might be considered a normal space later and will need to be changed.
+        let initialSpaceCombIndex: number =
+            lastCombinatorAst.combinator === `space` ? ast.length - 1 : -1;
+        /**
+         * take next spaces/combinators/comments:
+         * - combinator/space token:
+         *  - spaces: merge to previous ast node before them
+         *  - previous ast equal to space combinator
+         *    - turn previous ast to the next combinator type
+         *    - merge spaces between them
+         *    - cancel initial space tracking - must be merged with other non space combinator or already canceled
+         *  - initial ast is space (must be comments following it)
+         *    - initial space is first in selector: merge initial ast into the selector before
+         *    - otherwise merge initial ast the comment following it
+         *  - insert an invalid combinator
+         * - comment token: insert to ast
+         */
+        //
+        let next = s.next();
+        while (next) {
+            if (isCombinatorToken(next)) {
+                if (next.type === `space`) {
+                    // add space to the last ast node
+                    lastAst.after += next.value;
+                    lastAst.end = next.end;
+                } else if (lastAst === lastCombinatorAst && lastAst.combinator === 'space') {
+                    // combine next combinator into previous (space)
+                    const nextCombinator = createCombinatorAst(next);
+                    lastCombinatorAst.combinator = nextCombinator.combinator;
+                    lastCombinatorAst.before +=
+                        lastCombinatorAst.after + lastCombinatorAst.value + nextCombinator.before;
+                    lastCombinatorAst.after = nextCombinator.after;
+                    lastCombinatorAst.value = nextCombinator.value;
+                    lastCombinatorAst.end = nextCombinator.end;
+                    // reset initial space
+                    initialSpaceCombIndex = -1;
+                } else if (initialSpaceCombIndex !== -1) {
+                    // merge initial space combinator (classified as combinator before a comment)
+                    const initialSpace = ast[initialSpaceCombIndex] as Combinator;
+                    const spaceValue =
+                        initialSpace.before + initialSpace.value + initialSpace.after;
+                    if (initialSpaceCombIndex === 0) {
+                        // merge to beginning of selector
+                        currentSelector.before += spaceValue;
+                    } else {
+                        // merge to the next comment
+                        const nodeAfterInitial = ast[initialSpaceCombIndex + 1];
+                        if (nodeAfterInitial?.type === `comment`) {
+                            nodeAfterInitial.before += spaceValue;
+                            nodeAfterInitial.start = initialSpace.start;
+                        } else {
+                            // shouldn't happen as initial space is considered as a combinator
+                            // only when a comment is following it and before
+                        }
+                    }
+                    ast.splice(initialSpaceCombIndex, 1);
+                    initialSpaceCombIndex = -1;
+                    // add combinator
+                    lastCombinatorAst = createCombinatorAst(next);
+                    lastAst = lastCombinatorAst;
+                    ast.push(lastCombinatorAst);
+                } else {
+                    // add invalid combinator
+                    lastCombinatorAst = createCombinatorAst(next);
+                    lastCombinatorAst.invalid = true;
+                    lastAst = lastCombinatorAst;
+                    ast.push(lastCombinatorAst);
+                }
+            } else if (isComment(next.type)) {
+                lastAst = createCommentAst(next);
+                ast.push(lastAst);
+            } else {
+                break;
+            }
+            next = s.next();
+        }
+        // put back any unrelated token
+        if (next && !isCombinatorToken(next)) {
+            s.back();
+        }
+    } else if (token.type === 'text') {
+        ast.push({
+            type: 'type',
+            value: token.value,
+            start: token.start,
+            end: token.end,
+        });
+    } else if (token.type === '#') {
+        t = s.take('text');
+        ast.push({
+            type: 'id',
+            value: t?.value ?? '',
+            start: token.start,
+            end: t?.end ?? token.end,
+        });
+    } else if (token.type === '*') {
+        ast.push({
+            type: 'universal',
+            value: '*',
+            start: token.start,
+            end: token.end,
+        });
+    } else if (token.type === '|') {
+        // search backwards compatible namespace in ast
+        let prevAst: NamespacedNode | undefined;
+        let prevInvalidAst: SelectorNode | undefined;
+        const beforeComments: Comment[] = [];
+        for (let i = ast.length - 1; i >= 0; --i) {
+            const current = ast[i];
+            if (isNamespacedAst(current)) {
+                if (current.namespace) {
+                    // already namespaced
+                    prevInvalidAst = current;
+                } else {
+                    // merge with previous
+                    prevAst = current;
+                }
+                break;
+            } else if (
+                current.type === `comment` &&
+                current.before === `` &&
+                current.after === ``
+            ) {
+                beforeComments.unshift(current);
+            } else {
+                prevInvalidAst = current;
+                break;
+            }
+        }
+        // search forward target token
+        let target: CSSSelectorToken | undefined;
+        let searchIndex = 1;
+        const potentialAfterComments: CSSSelectorToken[] = [];
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            const nextToken = s.peek(searchIndex);
+            if (isComment(nextToken.type)) {
+                potentialAfterComments.push(nextToken);
+            } else if (isNamespacedToken(nextToken)) {
+                target = nextToken;
+                break;
             } else {
-              // shouldn't happen as initial space is considered as a combinator
-              // only when a comment is following it and before
+                // space or end of tokens
+                break;
             }
-          }
-          ast.splice(initialSpaceCombIndex, 1);
-          initialSpaceCombIndex = -1;
-          // add combinator
-          lastCombinatorAst = createCombinatorAst(next);
-          lastAst = lastCombinatorAst;
-          ast.push(lastCombinatorAst);
+            searchIndex++;
+        }
+        // create/update ast
+        const validNamespace = !prevInvalidAst;
+        const validTarget = !!target;
+        const type = target?.type === `*` ? `universal` : `type`;
+        let invalid: NonNullable<Namespace['invalid']> = ``;
+        // remove before/after pipe comments
+        if (validNamespace) {
+            ast.splice(ast.length - beforeComments.length, beforeComments.length);
         } else {
-          // add invalid combinator
-          lastCombinatorAst = createCombinatorAst(next);
-          lastCombinatorAst.invalid = true;
-          lastAst = lastCombinatorAst;
-          ast.push(lastCombinatorAst);
+            invalid = `namespace`;
         }
-      } else if (isComment(next.type)) {
-        lastAst = createCommentAst(next);
-        ast.push(lastAst);
-      } else {
-        break;
-      }
-      next = s.next();
-    }
-    // put back any unrelated token
-    if (next && !isCombinatorToken(next)) {
-      s.back();
-    }
-  } else if (token.type === "text") {
-    ast.push({
-      type: "type",
-      value: token.value,
-      start: token.start,
-      end: token.end,
-    });
-  } else if (token.type === "#") {
-    t = s.take("text");
-    ast.push({
-      type: "id",
-      value: t?.value ?? "",
-      start: token.start,
-      end: t?.end ?? token.end,
-    });
-  } else if (token.type === "*") {
-    ast.push({
-      type: "universal",
-      value: "*",
-      start: token.start,
-      end: token.end,
-    });
-  } else if (token.type === "|") {
-    // search backwards compatible namespace in ast
-    let prevAst: NamespacedNode | undefined;
-    let prevInvalidAst: SelectorNode | undefined;
-    const beforeComments: Comment[] = [];
-    for (let i = ast.length - 1; i >= 0; --i) {
-      const current = ast[i];
-      if (isNamespacedAst(current)) {
-        if (current.namespace) {
-          // already namespaced
-          prevInvalidAst = current;
+        if (validTarget) {
+            potentialAfterComments.forEach(() => s.next());
+            s.next();
         } else {
-          // merge with previous
-          prevAst = current;
+            invalid = invalid ? `namespace,target` : `target`;
         }
-        break;
-      } else if (
-        current.type === `comment` &&
-        current.before === `` &&
-        current.after === ``
-      ) {
-        beforeComments.unshift(current);
-      } else {
-        prevInvalidAst = current;
-        break;
-      }
-    }
-    // search forward target token
-    let target: CSSSelectorToken | undefined;
-    let searchIndex = 1;
-    const potentialAfterComments: CSSSelectorToken[] = [];
-    // eslint-disable-next-line no-constant-condition
-    while (true) {
-      const nextToken = s.peek(searchIndex);
-      if (isComment(nextToken.type)) {
-        potentialAfterComments.push(nextToken);
-      } else if (isNamespacedToken(nextToken)) {
-        target = nextToken;
-        break;
-      } else {
-        // space or end of tokens
-        break;
-      }
-      searchIndex++;
-    }
-    // create/update ast
-    const validNamespace = !prevInvalidAst;
-    const validTarget = !!target;
-    const type = target?.type === `*` ? `universal` : `type`;
-    let invalid: NonNullable<Namespace["invalid"]> = ``;
-    // remove before/after pipe comments
-    if (validNamespace) {
-      ast.splice(ast.length - beforeComments.length, beforeComments.length);
-    } else {
-      invalid = `namespace`;
-    }
-    if (validTarget) {
-      potentialAfterComments.forEach(() => s.next());
-      s.next();
-    } else {
-      invalid = invalid ? `namespace,target` : `target`;
-    }
-    // create new ast or modify the prev
-    const nsAst: NamespacedNode =
-      prevAst ||
-      ({
-        type,
-        value: ``,
-        start: token.start,
-        end: target?.end || token.end,
-      } as NamespacedNode);
-    nsAst.type = type;
-    nsAst.namespace = {
-      value: prevAst?.value || ``,
-      beforeComments: validNamespace ? beforeComments : [],
-      afterComments: validTarget
-        ? potentialAfterComments.map(createCommentAst)
-        : [],
-    };
-    nsAst.value = target?.value || ``;
-    nsAst.end = target?.end || token.end;
-    // set invalid
-    if (invalid) {
-      nsAst.namespace.invalid = invalid;
-    }
-    // add ast if not modified
-    if (!prevAst) {
-      ast.push(nsAst);
-    }
-  } else if (token.type === "(") {
-    const prev = last(ast);
-    const res: SelectorList = [];
-    // handle nth selector
-    if (
-      prev &&
-      prev.type === `pseudo_class` &&
-      NthParser.isNthPseudoClass(prev.value) &&
-      s.peek().type !== `)`
-    ) {
-      // collect "An+B of" expression
-      const nthSelector = createEmptyNth();
-      nthSelector.start = s.peek().start;
-      res.push(nthSelector as unknown as Selector);
-      const nthParser = new NthParser(nthSelector, s);
-      s.run(
-        (token) => {
-          if (nthParser.state === `selector`) {
-            // got to selector, push back and stop
-            s.back();
-            return false;
-          }
-          return nthParser.handleToken(token);
-        },
-        nthSelector,
-        source
-      );
-      // setup next selector
-      if (s.peek().type !== `)`) {
-        nthSelector.end = last(nthSelector.nodes)?.end || nthSelector.start;
-        // add "of" selector
-        const newSelector = createEmptySelector();
-        newSelector.start = nthSelector.end;
-        res.push(newSelector);
-      }
-    }
-    // get all tokens until closed
-    s.run(
-      (token, selectors) => {
-        if (token.type === ")") {
-          const currentSelector = last(selectors);
-          if (currentSelector) {
-            currentSelector.end =
-              last(currentSelector.nodes)?.end ?? currentSelector.start;
-          }
-          return false;
+        // create new ast or modify the prev
+        const nsAst: NamespacedNode =
+            prevAst ||
+            ({
+                type,
+                value: ``,
+                start: token.start,
+                end: target?.end || token.end,
+            } as NamespacedNode);
+        nsAst.type = type;
+        nsAst.namespace = {
+            value: prevAst?.value || ``,
+            beforeComments: validNamespace ? beforeComments : [],
+            afterComments: validTarget ? potentialAfterComments.map(createCommentAst) : [],
+        };
+        nsAst.value = target?.value || ``;
+        nsAst.end = target?.end || token.end;
+        // set invalid
+        if (invalid) {
+            nsAst.namespace.invalid = invalid;
         }
-        return handleToken(token, selectors, source, s);
-      },
-      res,
-      source
-    );
+        // add ast if not modified
+        if (!prevAst) {
+            ast.push(nsAst);
+        }
+    } else if (token.type === '(') {
+        const prev = last(ast);
+        const res: SelectorList = [];
+        // handle nth selector
+        if (
+            prev &&
+            prev.type === `pseudo_class` &&
+            NthParser.isNthPseudoClass(prev.value) &&
+            s.peek().type !== `)`
+        ) {
+            // collect "An+B of" expression
+            const nthSelector = createEmptyNth();
+            nthSelector.start = s.peek().start;
+            res.push(nthSelector as unknown as Selector);
+            const nthParser = new NthParser(nthSelector, s);
+            s.run(
+                (token) => {
+                    if (nthParser.state === `selector`) {
+                        // got to selector, push back and stop
+                        s.back();
+                        return false;
+                    }
+                    return nthParser.handleToken(token);
+                },
+                nthSelector,
+                source
+            );
+            // setup next selector
+            if (s.peek().type !== `)`) {
+                nthSelector.end = last(nthSelector.nodes)?.end || nthSelector.start;
+                // add "of" selector
+                const newSelector = createEmptySelector();
+                newSelector.start = nthSelector.end;
+                res.push(newSelector);
+            }
+        }
+        // get all tokens until closed
+        s.run(
+            (token, selectors) => {
+                if (token.type === ')') {
+                    const currentSelector = last(selectors);
+                    if (currentSelector) {
+                        currentSelector.end =
+                            last(currentSelector.nodes)?.end ?? currentSelector.start;
+                    }
+                    return false;
+                }
+                return handleToken(token, selectors, source, s);
+            },
+            res,
+            source
+        );
 
-    const ended = s.peek(0);
-    if (
-      !prev ||
-      "nodes" in prev ||
-      prev.type === "invalid" ||
-      prev.type === "combinator" ||
-      prev.type === "comment" ||
-      prev.type === "nth_step" ||
-      prev.type === "nth_dash" ||
-      prev.type === "nth_offset" ||
-      prev.type === "nth_of" ||
-      ended.type !== ")"
-    ) {
-      ast.push({
-        type: "invalid",
-        value: getText([token, ended], undefined, undefined, source),
-        start: token.start,
-        end: ended?.end ?? s.peekBack().end,
-      });
+        const ended = s.peek(0);
+        if (
+            !prev ||
+            'nodes' in prev ||
+            prev.type === 'invalid' ||
+            prev.type === 'combinator' ||
+            prev.type === 'comment' ||
+            prev.type === 'nth_step' ||
+            prev.type === 'nth_dash' ||
+            prev.type === 'nth_offset' ||
+            prev.type === 'nth_of' ||
+            ended.type !== ')'
+        ) {
+            ast.push({
+                type: 'invalid',
+                value: getText([token, ended], undefined, undefined, source),
+                start: token.start,
+                end: ended?.end ?? s.peekBack().end,
+            });
+        } else {
+            const lastSelector = last(res);
+            if (lastSelector) {
+                trimCombinators(lastSelector);
+            }
+            prev.nodes = res;
+            prev.end = ended.end;
+        }
+    } else if (isComment(token.type)) {
+        ast.push(createCommentAst(token));
+    } else if (token.type === ',') {
+        // we ensure at least one selector present
+        const selector = last(selectors)!;
+        selector.end = token.start;
+        trimCombinators(selector);
+        const newSelector = createEmptySelector();
+        if (s.done()) {
+            newSelector.start = token.end;
+            newSelector.end = token.end;
+        } else {
+            newSelector.start = s.peek().start;
+        }
+        selectors.push(newSelector);
+    } else if (token.type === '&') {
+        ast.push({
+            type: 'nesting',
+            value: '&',
+            start: token.start,
+            end: token.end,
+        });
     } else {
-      const lastSelector = last(res);
-      if (lastSelector) {
-        trimCombinators(lastSelector);
-      }
-      prev.nodes = res;
-      prev.end = ended.end;
+        ast.push({
+            type: 'invalid',
+            value: token.value,
+            start: token.start,
+            end: token.end,
+        });
     }
-  } else if (isComment(token.type)) {
-    ast.push(createCommentAst(token));
-  } else if (token.type === ",") {
-    // we ensure at least one selector present
-    const selector = last(selectors)!;
-    selector.end = token.start;
-    trimCombinators(selector);
-    const newSelector = createEmptySelector();
     if (s.done()) {
-      newSelector.start = token.end;
-      newSelector.end = token.end;
-    } else {
-      newSelector.start = s.peek().start;
+        currentSelector.end = last(currentSelector.nodes)?.end ?? currentSelector.start;
+        trimCombinators(currentSelector);
     }
-    selectors.push(newSelector);
-  } else if (token.type === "&") {
-    ast.push({
-      type: "nesting",
-      value: "&",
-      start: token.start,
-      end: token.end,
-    });
-  } else {
-    ast.push({
-      type: "invalid",
-      value: token.value,
-      start: token.start,
-      end: token.end,
-    });
-  }
-  if (s.done()) {
-    currentSelector.end =
-      last(currentSelector.nodes)?.end ?? currentSelector.start;
-    trimCombinators(currentSelector);
-  }
 }
diff --git a/packages/css-selector-parser/src/stringify.ts b/packages/css-selector-parser/src/stringify.ts
index 18183419..86ec0532 100644
--- a/packages/css-selector-parser/src/stringify.ts
+++ b/packages/css-selector-parser/src/stringify.ts
@@ -1,131 +1,110 @@
-import { NthParser } from "./nth-parser";
+import { NthParser } from './nth-parser';
 import type {
-  ImmutableId,
-  ImmutableAttribute,
-  ImmutableClass,
-  ImmutableCombinator,
-  ImmutableComment,
-  ImmutableType,
-  ImmutableInvalid,
-  ImmutableNth,
-  ImmutableNthDash,
-  ImmutableNthOf,
-  ImmutableNthOffset,
-  ImmutableNthStep,
-  ImmutablePseudoClass,
-  ImmutablePseudoElement,
-  ImmutableSelector,
-  ImmutableCompoundSelector,
-  ImmutableUniversal,
-  ImmutableNesting,
-  ImmutableSelectorNode,
-  ImmutableSelectorList,
-  ImmutableNthSelectorList,
-  ImmutableFunctionalSelector,
-  ImmutableNamespacedNode,
-} from "./ast-types";
+    ImmutableId,
+    ImmutableAttribute,
+    ImmutableClass,
+    ImmutableCombinator,
+    ImmutableComment,
+    ImmutableType,
+    ImmutableInvalid,
+    ImmutableNth,
+    ImmutableNthDash,
+    ImmutableNthOf,
+    ImmutableNthOffset,
+    ImmutableNthStep,
+    ImmutablePseudoClass,
+    ImmutablePseudoElement,
+    ImmutableSelector,
+    ImmutableCompoundSelector,
+    ImmutableUniversal,
+    ImmutableNesting,
+    ImmutableSelectorNode,
+    ImmutableSelectorList,
+    ImmutableNthSelectorList,
+    ImmutableFunctionalSelector,
+    ImmutableNamespacedNode,
+} from './ast-types';
 
 export function stringifySelectorAst(
-  value:
-    | ImmutableSelectorNode
-    | ImmutableSelectorList
-    | ImmutableNthSelectorList
+    value: ImmutableSelectorNode | ImmutableSelectorList | ImmutableNthSelectorList
 ): string {
-  return "length" in value ? stringifySelectors(value) : stringifyNode(value);
+    return 'length' in value ? stringifySelectors(value) : stringifyNode(value);
 }
 
 type Printers = {
-  [K in ImmutableSelectorNode as K["type"]]: (node: K) => string;
+    [K in ImmutableSelectorNode as K['type']]: (node: K) => string;
 };
 
 const printers: Printers = {
-  id: (node: ImmutableId) => `#${node.value}${stringifyNested(node)}`,
-  class: (node: ImmutableClass) =>
-    `.${node.dotComments.map(stringifyNode).join("")}${
-      node.value
-    }${stringifyNested(node)}`,
-  type: (node: ImmutableType) =>
-    `${stringifyNamespace(node)}${node.value}${stringifyNested(node)}`,
-  combinator: (node: ImmutableCombinator) =>
-    `${node.before}${node.value}${node.after}`,
-  attribute: (node: ImmutableAttribute) =>
-    `[${node.value}]${stringifyNested(node)}`,
-  pseudo_class: (node: ImmutablePseudoClass) =>
-    `:${node.colonComments.map(stringifyNode).join("")}${
-      node.value
-    }${stringifyNested(node)}`,
-  pseudo_element: (node: ImmutablePseudoElement) =>
-    `:${node.colonComments.first
-      .map(stringifyNode)
-      .join("")}:${node.colonComments.second.map(stringifyNode).join("")}${
-      node.value
-    }${stringifyNested(node)}`,
-  comment: ({ before, value, after }: ImmutableComment) =>
-    `${before}${value}${after}`,
-  universal: (node: ImmutableUniversal) =>
-    `${stringifyNamespace(node)}${node.value}${stringifyNested(node)}`,
-  nesting: (node: ImmutableNesting) => `${node.value}${stringifyNested(node)}`,
-  selector: (node: ImmutableSelector) =>
-    `${node.before}${node.nodes.map(stringifyNode).join("")}${node.after}`,
-  compound_selector: (node: ImmutableCompoundSelector) =>
-    `${node.before}${node.nodes.map(stringifyNode).join("")}${node.after}`,
-  invalid: (node: ImmutableInvalid) => node.value,
-  nth: (node: ImmutableNth) =>
-    `${node.before}${node.nodes.map(stringifyNode).join("")}${node.after}`,
-  nth_step: ({ before, value, after }: ImmutableNthStep) =>
-    `${before}${value}${after}`,
-  nth_dash: ({ before, value, after }: ImmutableNthDash) =>
-    `${before}${value}${after}`,
-  nth_offset: ({ before, value, after }: ImmutableNthOffset) =>
-    `${before}${value}${after}`,
-  nth_of: ({ before, value, after }: ImmutableNthOf) =>
-    `${before}${value}${after}`,
+    id: (node: ImmutableId) => `#${node.value}${stringifyNested(node)}`,
+    class: (node: ImmutableClass) =>
+        `.${node.dotComments.map(stringifyNode).join('')}${node.value}${stringifyNested(node)}`,
+    type: (node: ImmutableType) =>
+        `${stringifyNamespace(node)}${node.value}${stringifyNested(node)}`,
+    combinator: (node: ImmutableCombinator) => `${node.before}${node.value}${node.after}`,
+    attribute: (node: ImmutableAttribute) => `[${node.value}]${stringifyNested(node)}`,
+    pseudo_class: (node: ImmutablePseudoClass) =>
+        `:${node.colonComments.map(stringifyNode).join('')}${node.value}${stringifyNested(node)}`,
+    pseudo_element: (node: ImmutablePseudoElement) =>
+        `:${node.colonComments.first.map(stringifyNode).join('')}:${node.colonComments.second
+            .map(stringifyNode)
+            .join('')}${node.value}${stringifyNested(node)}`,
+    comment: ({ before, value, after }: ImmutableComment) => `${before}${value}${after}`,
+    universal: (node: ImmutableUniversal) =>
+        `${stringifyNamespace(node)}${node.value}${stringifyNested(node)}`,
+    nesting: (node: ImmutableNesting) => `${node.value}${stringifyNested(node)}`,
+    selector: (node: ImmutableSelector) =>
+        `${node.before}${node.nodes.map(stringifyNode).join('')}${node.after}`,
+    compound_selector: (node: ImmutableCompoundSelector) =>
+        `${node.before}${node.nodes.map(stringifyNode).join('')}${node.after}`,
+    invalid: (node: ImmutableInvalid) => node.value,
+    nth: (node: ImmutableNth) =>
+        `${node.before}${node.nodes.map(stringifyNode).join('')}${node.after}`,
+    nth_step: ({ before, value, after }: ImmutableNthStep) => `${before}${value}${after}`,
+    nth_dash: ({ before, value, after }: ImmutableNthDash) => `${before}${value}${after}`,
+    nth_offset: ({ before, value, after }: ImmutableNthOffset) => `${before}${value}${after}`,
+    nth_of: ({ before, value, after }: ImmutableNthOf) => `${before}${value}${after}`,
 };
 
 function stringifyNode(node: ImmutableSelectorNode): string {
-  return printers[node.type]?.(node as never) ?? "";
+    return printers[node.type]?.(node as never) ?? '';
 }
 
-function stringifySelectors(
-  selectors: ReadonlyArray<ImmutableSelector | ImmutableNth>
-) {
-  const result: string[] = [];
-  for (const node of selectors) {
-    result.push(stringifyNode(node));
-  }
-  return result.join(`,`);
+function stringifySelectors(selectors: ReadonlyArray<ImmutableSelector | ImmutableNth>) {
+    const result: string[] = [];
+    for (const node of selectors) {
+        result.push(stringifyNode(node));
+    }
+    return result.join(`,`);
 }
 
 function stringifyNested(node: ImmutableFunctionalSelector): string {
-  if ("nodes" in node) {
-    if (node.nodes?.length) {
-      if (
-        node.type === `pseudo_class` &&
-        NthParser.isNthPseudoClass(node.value)
-      ) {
-        const [nthNode, ...selectors] = node.nodes;
-        return `(${stringifyNode(nthNode)}${stringifySelectors(selectors)})`;
-      } else {
-        return `(${stringifySelectors(node.nodes)})`;
-      }
-    } else {
-      return `()`;
+    if ('nodes' in node) {
+        if (node.nodes?.length) {
+            if (node.type === `pseudo_class` && NthParser.isNthPseudoClass(node.value)) {
+                const [nthNode, ...selectors] = node.nodes;
+                return `(${stringifyNode(nthNode)}${stringifySelectors(selectors)})`;
+            } else {
+                return `(${stringifySelectors(node.nodes)})`;
+            }
+        } else {
+            return `()`;
+        }
     }
-  }
-  return "";
+    return '';
 }
 
 function stringifyNamespace({ namespace }: ImmutableNamespacedNode): string {
-  let ns = ``;
-  if (namespace) {
-    ns += namespace.value;
-    for (const comment of namespace.beforeComments) {
-      ns += printers.comment(comment);
-    }
-    ns += `|`;
-    for (const comment of namespace.afterComments) {
-      ns += printers.comment(comment);
+    let ns = ``;
+    if (namespace) {
+        ns += namespace.value;
+        for (const comment of namespace.beforeComments) {
+            ns += printers.comment(comment);
+        }
+        ns += `|`;
+        for (const comment of namespace.afterComments) {
+            ns += printers.comment(comment);
+        }
     }
-  }
-  return ns;
+    return ns;
 }
diff --git a/packages/css-selector-parser/src/tokenizer.ts b/packages/css-selector-parser/src/tokenizer.ts
index d92c26e7..44d171d8 100644
--- a/packages/css-selector-parser/src/tokenizer.ts
+++ b/packages/css-selector-parser/src/tokenizer.ts
@@ -1,72 +1,69 @@
 import {
-  tokenize,
-  isStringDelimiter,
-  isWhitespace,
-  createToken,
-  getJSCommentStartType,
-  getMultilineCommentStartType,
-  isCommentEnd,
-  getUnclosedComment,
-} from "@tokey/core";
-import type { Token, Descriptors } from "@tokey/core";
+    tokenize,
+    isStringDelimiter,
+    isWhitespace,
+    createToken,
+    getJSCommentStartType,
+    getMultilineCommentStartType,
+    isCommentEnd,
+    getUnclosedComment,
+} from '@tokey/core';
+import type { Token, Descriptors } from '@tokey/core';
 
 type Delimiters =
-  | "["
-  | "]"
-  | "("
-  | ")"
-  | ","
-  | "*"
-  | "|"
-  | ":"
-  | "."
-  | "#"
-  | ">"
-  | "~"
-  | "+"
-  | "{"
-  | "}"
-  | "&";
+    | '['
+    | ']'
+    | '('
+    | ')'
+    | ','
+    | '*'
+    | '|'
+    | ':'
+    | '.'
+    | '#'
+    | '>'
+    | '~'
+    | '+'
+    | '{'
+    | '}'
+    | '&';
 
 export type CSSSelectorToken = Token<Descriptors | Delimiters>;
 
-export function tokenizeSelector(
-  source: string,
-  options: { offset?: number } = {}
-) {
-  const parseLineComments = false; // why would that be a choice?
-  return tokenize<CSSSelectorToken>(source, {
-    isDelimiter,
-    isStringDelimiter(char: string, previousChar: string) {
-      return previousChar !== `\\` && isStringDelimiter(char);
-    },
-    isWhitespace,
-    shouldAddToken: () => true,
-    createToken,
-    getCommentStartType: parseLineComments
-      ? getJSCommentStartType
-      : getMultilineCommentStartType,
-    isCommentEnd,
-    getUnclosedComment,
-    offset: options.offset,
-  });
+export function tokenizeSelector(source: string, options: { offset?: number } = {}) {
+    const parseLineComments = false; // why would that be a choice?
+    return tokenize<CSSSelectorToken>(source, {
+        isDelimiter,
+        isStringDelimiter(char: string, previousChar: string) {
+            return previousChar !== `\\` && isStringDelimiter(char);
+        },
+        isWhitespace,
+        shouldAddToken: () => true,
+        createToken,
+        getCommentStartType: parseLineComments
+            ? getJSCommentStartType
+            : getMultilineCommentStartType,
+        isCommentEnd,
+        getUnclosedComment,
+        offset: options.offset,
+    });
 }
 
 const isDelimiter = (char: string, previousChar: string) =>
-  previousChar !== "\\" &&
-  (char === "[" ||
-    char === "]" ||
-    char === "(" ||
-    char === ")" ||
-    char === "," ||
-    char === "*" ||
-    char === "|" ||
-    char === ":" ||
-    char === "." ||
-    char === "#" ||
-    char === ">" ||
-    char === "~" ||
-    char === "+" ||
-    char === "{" ||
-    char === "}" ||
-    char === "&");
+    previousChar !== '\\' &&
+    (char === '[' ||
+        char === ']' ||
+        char === '(' ||
+        char === ')' ||
+        char === ',' ||
+        char === '*' ||
+        char === '|' ||
+        char === ':' ||
+        char === '.' ||
+        char === '#' ||
+        char === '>' ||
+        char === '~' ||
+        char === '+' ||
+        char === '{' ||
+        char === '}' ||
+        char === '&');
diff --git a/packages/css-selector-parser/src/types.ts b/packages/css-selector-parser/src/types.ts
index f9b15333..5ff4ee7d 100644
--- a/packages/css-selector-parser/src/types.ts
+++ b/packages/css-selector-parser/src/types.ts
@@ -1,13 +1,8 @@
 /**
  * convert object|array into a replica deep readonly type
  */
-export type Immutable<T> = T extends Function
-  ? T
-  : T extends object
-  ? ImmutableMap<T>
-  : T;
+export type Immutable<T> = T extends Function ? T : T extends object ? ImmutableMap<T> : T;
 
 type ImmutableMap<T> = {
-  readonly [P in keyof T]: Immutable<T[P]>;
+    readonly [P in keyof T]: Immutable<T[P]>;
 };
-
diff --git a/packages/css-selector-parser/test/ast-tools/compound.spec.ts b/packages/css-selector-parser/test/ast-tools/compound.spec.ts
index f84ac96f..62c7fae7 100644
--- a/packages/css-selector-parser/test/ast-tools/compound.spec.ts
+++ b/packages/css-selector-parser/test/ast-tools/compound.spec.ts
@@ -1,918 +1,911 @@
 import {
-  parseCssSelector,
-  groupCompoundSelectors,
-  splitCompoundSelectors,
-  SelectorList,
-  CommentWithNoSpacing,
-  ImmutableSelectorList,
-  ImmutableSelector,
-  Selector,
-  PseudoClass,
-  Nth,
-} from "@tokey/css-selector-parser";
-import { createNode } from "../test-kit/parsing";
-import { expect } from "chai";
+    parseCssSelector,
+    groupCompoundSelectors,
+    splitCompoundSelectors,
+    SelectorList,
+    CommentWithNoSpacing,
+    ImmutableSelectorList,
+    ImmutableSelector,
+    Selector,
+    PseudoClass,
+    Nth,
+} from '@tokey/css-selector-parser';
+import { createNode } from '../test-kit/parsing';
+import { expect } from 'chai';
 
 describe(`ast-tools/compound`, () => {
-  it(`should split a given selector list according to dom targets (by combinators)`, () => {
-    const ast = parseCssSelector(`.a .b`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 5,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 2,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+    it(`should split a given selector list according to dom targets (by combinators)`, () => {
+        const ast = parseCssSelector(`.a .b`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 2,
-              }),
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `space`,
-            value: ` `,
-            start: 2,
-            end: 3,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 3,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 3,
                 end: 5,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should split multiple selectors`, () => {
-    const ast = parseCssSelector(`.a,.b .c`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 2,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 2,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 2,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `space`,
+                        value: ` `,
+                        start: 2,
+                        end: 3,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 3,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 3,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should split multiple selectors`, () => {
+        const ast = parseCssSelector(`.a,.b .c`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
                 end: 2,
-              }),
-            ],
-          }),
-        ],
-      }),
-      createNode({
-        type: `selector`,
-        start: 3,
-        end: 8,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 3,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `b`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 2,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+            createNode({
+                type: `selector`,
                 start: 3,
-                end: 5,
-              }),
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `space`,
-            value: ` `,
-            start: 5,
-            end: 6,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 6,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `c`,
-                start: 6,
-                end: 8,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should keep track of selector spaces`, () => {
-    const ast = parseCssSelector(` .a , .b `);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 4,
-        before: ` `,
-        after: ` `,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 1,
-            end: 3,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 1,
-                end: 3,
-              }),
-            ],
-          }),
-        ],
-      }),
-      createNode({
-        type: `selector`,
-        start: 5,
-        end: 9,
-        before: ` `,
-        after: ` `,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 6,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 6,
                 end: 8,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should split on nesting selectors`, () => {
-    const ast = parseCssSelector(`&>&`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 3,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 1,
-            nodes: [
-              createNode({
-                type: `nesting`,
-                value: `&`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 3,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 3,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `space`,
+                        value: ` `,
+                        start: 5,
+                        end: 6,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 6,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `c`,
+                                start: 6,
+                                end: 8,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should keep track of selector spaces`, () => {
+        const ast = parseCssSelector(` .a , .b `);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
+                start: 0,
+                end: 4,
+                before: ` `,
+                after: ` `,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 1,
+                        end: 3,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 1,
+                                end: 3,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+            createNode({
+                type: `selector`,
+                start: 5,
+                end: 9,
+                before: ` `,
+                after: ` `,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 6,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 6,
+                                end: 8,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should split on nesting selectors`, () => {
+        const ast = parseCssSelector(`&>&`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 1,
-              }),
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `>`,
-            value: `>`,
-            start: 1,
-            end: 2,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 2,
-            end: 3,
-            nodes: [
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 2,
                 end: 3,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should split pseudo-elements by default`, () => {
-    const ast = parseCssSelector(`.a::b::c`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 8,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 2,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 1,
+                        nodes: [
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 0,
+                                end: 1,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `>`,
+                        value: `>`,
+                        start: 1,
+                        end: 2,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 2,
+                        end: 3,
+                        nodes: [
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 2,
+                                end: 3,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should split pseudo-elements by default`, () => {
+        const ast = parseCssSelector(`.a::b::c`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 2,
-              }),
-            ],
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 2,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `b`,
-                start: 2,
-                end: 5,
-              }),
-            ],
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 5,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `c`,
-                start: 5,
                 end: 8,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should configure no split for pseudo-elements (combined into target)`, () => {
-    const ast = parseCssSelector(`.a::b::c`);
-
-    const groupedSelectors = groupCompoundSelectors(ast, {
-      splitPseudoElements: false,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 2,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 2,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `b`,
+                                start: 2,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 5,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `c`,
+                                start: 5,
+                                end: 8,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
     });
+    it(`should configure no split for pseudo-elements (combined into target)`, () => {
+        const ast = parseCssSelector(`.a::b::c`);
+
+        const groupedSelectors = groupCompoundSelectors(ast, {
+            splitPseudoElements: false,
+        });
 
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 8,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 2,
-              }),
-              createNode({
-                type: `pseudo_element`,
-                value: `b`,
-                start: 2,
-                end: 5,
-              }),
-              createNode({
-                type: `pseudo_element`,
-                value: `c`,
-                start: 5,
                 end: 8,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should not split any other selectors`, () => {
-    const ast = parseCssSelector(`.a:hover[attr]+el.b#id`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 22,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 14,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `b`,
+                                start: 2,
+                                end: 5,
+                            }),
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `c`,
+                                start: 5,
+                                end: 8,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should not split any other selectors`, () => {
+        const ast = parseCssSelector(`.a:hover[attr]+el.b#id`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 2,
-              }),
-              createNode({
-                type: `pseudo_class`,
-                value: `hover`,
-                start: 2,
-                end: 8,
-              }),
-              createNode({
-                type: `attribute`,
-                value: `attr`,
-                start: 8,
-                end: 14,
-              }),
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `+`,
-            value: `+`,
-            start: 14,
-            end: 15,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 15,
-            end: 22,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `el`,
-                start: 15,
-                end: 17,
-              }),
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 17,
-                end: 19,
-              }),
-              createNode({
-                type: `id`,
-                value: `id`,
-                start: 19,
                 end: 22,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should return zero selectors for empty selector`, () => {
-    const ast = parseCssSelector(``);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should combine non breaking comments into the compound nodes`, () => {
-    const ast = parseCssSelector(`/*c1*/.a/*c2*/ /*c3*/.b/*c4*/`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 29,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 14,
-            nodes: [
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 14,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `hover`,
+                                start: 2,
+                                end: 8,
+                            }),
+                            createNode({
+                                type: `attribute`,
+                                value: `attr`,
+                                start: 8,
+                                end: 14,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `+`,
+                        value: `+`,
+                        start: 14,
+                        end: 15,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 15,
+                        end: 22,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `el`,
+                                start: 15,
+                                end: 17,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 17,
+                                end: 19,
+                            }),
+                            createNode({
+                                type: `id`,
+                                value: `id`,
+                                start: 19,
+                                end: 22,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should return zero selectors for empty selector`, () => {
+        const ast = parseCssSelector(``);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should combine non breaking comments into the compound nodes`, () => {
+        const ast = parseCssSelector(`/*c1*/.a/*c2*/ /*c3*/.b/*c4*/`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 6,
-              }) as CommentWithNoSpacing,
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 6,
-                end: 8,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c2*/`,
-                start: 8,
-                end: 14,
-              }) as CommentWithNoSpacing,
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `space`,
-            value: ` `,
-            start: 14,
-            end: 15,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 15,
-            end: 29,
-            nodes: [
-              createNode({
-                type: `comment`,
-                value: `/*c3*/`,
-                start: 15,
-                end: 21,
-              }) as CommentWithNoSpacing,
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 21,
-                end: 23,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c4*/`,
-                start: 23,
                 end: 29,
-              }) as CommentWithNoSpacing,
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should not split nested selectors`, () => {
-    const ast = parseCssSelector(`:has(.a .b)`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 11,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 11,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `has`,
-                start: 0,
-                end: 11,
                 nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 5,
-                    end: 10,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 5,
-                        end: 7,
-                      }),
-                      createNode({
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 14,
+                        nodes: [
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 0,
+                                end: 6,
+                            }) as CommentWithNoSpacing,
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 6,
+                                end: 8,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c2*/`,
+                                start: 8,
+                                end: 14,
+                            }) as CommentWithNoSpacing,
+                        ],
+                    }),
+                    createNode({
                         type: `combinator`,
                         combinator: `space`,
                         value: ` `,
+                        start: 14,
+                        end: 15,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 15,
+                        end: 29,
+                        nodes: [
+                            createNode({
+                                type: `comment`,
+                                value: `/*c3*/`,
+                                start: 15,
+                                end: 21,
+                            }) as CommentWithNoSpacing,
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 21,
+                                end: 23,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c4*/`,
+                                start: 23,
+                                end: 29,
+                            }) as CommentWithNoSpacing,
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should not split nested selectors`, () => {
+        const ast = parseCssSelector(`:has(.a .b)`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
+                start: 0,
+                end: 11,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 11,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `has`,
+                                start: 0,
+                                end: 11,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 5,
+                                        end: 10,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 5,
+                                                end: 7,
+                                            }),
+                                            createNode({
+                                                type: `combinator`,
+                                                combinator: `space`,
+                                                value: ` `,
+                                                start: 7,
+                                                end: 8,
+                                            }),
+                                            createNode({
+                                                type: `class`,
+                                                value: `b`,
+                                                start: 8,
+                                                end: 10,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should accept a single selector`, () => {
+        const ast = parseCssSelector(`.a .b, .c~.d`);
+
+        const groupedSelector = groupCompoundSelectors(ast[1]);
+
+        expect(groupedSelector, `group`).to.eql(
+            createNode({
+                type: `selector`,
+                start: 6,
+                end: 12,
+                before: ` `,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
                         start: 7,
-                        end: 8,
-                      }),
-                      createNode({
-                        type: `class`,
-                        value: `b`,
-                        start: 8,
+                        end: 9,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `c`,
+                                start: 7,
+                                end: 9,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `~`,
+                        value: `~`,
+                        start: 9,
                         end: 10,
-                      }),
-                    ],
-                  }),
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 10,
+                        end: 12,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `d`,
+                                start: 10,
+                                end: 12,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should accept a single selector`, () => {
-    const ast = parseCssSelector(`.a .b, .c~.d`);
-
-    const groupedSelector = groupCompoundSelectors(ast[1]);
-
-    expect(groupedSelector, `group`).to.eql(
-      createNode({
-        type: `selector`,
-        start: 6,
-        end: 12,
-        before: ` `,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 7,
-            end: 9,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `c`,
-                start: 7,
-                end: 9,
-              }),
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `~`,
-            value: `~`,
-            start: 9,
-            end: 10,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 10,
-            end: 12,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `d`,
-                start: 10,
-                end: 12,
-              }),
-            ],
-          }),
-        ],
-      })
-    );
-    expect(splitCompoundSelectors(groupedSelector), `split`).to.eql(ast[1]);
-  });
-  it(`should accept readonly value and return readonly accordingly (type checks)`, () => {
-    function expectType<T>(_actual: T) {
-      /**/
-    }
-    const immutable = parseCssSelector(`.a .b`) as ImmutableSelectorList;
-    expectType<ImmutableSelector>(groupCompoundSelectors(immutable[0]));
-    expectType<ImmutableSelectorList>(groupCompoundSelectors(immutable));
-    expectType<ImmutableSelector>(splitCompoundSelectors(immutable[0]));
-    expectType<ImmutableSelectorList>(splitCompoundSelectors(immutable));
-
-    const mutable = parseCssSelector(`.a .b`);
-    expectType<Selector>(groupCompoundSelectors(mutable[0]));
-    expectType<SelectorList>(groupCompoundSelectors(mutable));
-    expectType<Selector>(splitCompoundSelectors(mutable[0]));
-    expectType<SelectorList>(splitCompoundSelectors(mutable));
-  });
-  it(`should set invalid flag on compound with universal or type not at the start`, () => {
-    const ast = parseCssSelector(`.a*`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 3,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 3,
-            invalid: true,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+            })
+        );
+        expect(splitCompoundSelectors(groupedSelector), `split`).to.eql(ast[1]);
+    });
+    it(`should accept readonly value and return readonly accordingly (type checks)`, () => {
+        function expectType<T>(_actual: T) {
+            /**/
+        }
+        const immutable = parseCssSelector(`.a .b`) as ImmutableSelectorList;
+        expectType<ImmutableSelector>(groupCompoundSelectors(immutable[0]));
+        expectType<ImmutableSelectorList>(groupCompoundSelectors(immutable));
+        expectType<ImmutableSelector>(splitCompoundSelectors(immutable[0]));
+        expectType<ImmutableSelectorList>(splitCompoundSelectors(immutable));
+
+        const mutable = parseCssSelector(`.a .b`);
+        expectType<Selector>(groupCompoundSelectors(mutable[0]));
+        expectType<SelectorList>(groupCompoundSelectors(mutable));
+        expectType<Selector>(splitCompoundSelectors(mutable[0]));
+        expectType<SelectorList>(splitCompoundSelectors(mutable));
+    });
+    it(`should set invalid flag on compound with universal or type not at the start`, () => {
+        const ast = parseCssSelector(`.a*`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 2,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 2,
                 end: 3,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should flat selectors and compound selectors into compound`, () => {
-    const selector = parseCssSelector(`.x.y`)[0];
-    const compound = groupCompoundSelectors(parseCssSelector(`.q.t`)[0])
-      .nodes[0];
-    const ast = parseCssSelector(`.a`);
-    ast[0].nodes.push(selector, compound);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 2,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 4,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 0,
-                end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `x`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 3,
+                        invalid: true,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 2,
+                                end: 3,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should flat selectors and compound selectors into compound`, () => {
+        const selector = parseCssSelector(`.x.y`)[0];
+        const compound = groupCompoundSelectors(parseCssSelector(`.q.t`)[0]).nodes[0];
+        const ast = parseCssSelector(`.a`);
+        ast[0].nodes.push(selector, compound);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
                 end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `y`,
-                start: 2,
-                end: 4,
-              }),
-              createNode({
-                type: `class`,
-                value: `q`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 4,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `x`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `y`,
+                                start: 2,
+                                end: 4,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `q`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `t`,
+                                start: 2,
+                                end: 4,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split cannot reconstruct`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
                 end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `t`,
-                start: 2,
-                end: 4,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(
-      splitCompoundSelectors(groupedSelectors),
-      `split cannot reconstruct`
-    ).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 2,
-        nodes: [
-          createNode({
-            type: `class`,
-            value: `a`,
-            start: 0,
-            end: 2,
-          }),
-          createNode({
-            type: `class`,
-            value: `x`,
-            start: 0,
-            end: 2,
-          }),
-          createNode({
-            type: `class`,
-            value: `y`,
-            start: 2,
-            end: 4,
-          }),
-          createNode({
-            type: `class`,
-            value: `q`,
-            start: 0,
-            end: 2,
-          }),
-          createNode({
-            type: `class`,
-            value: `t`,
-            start: 2,
-            end: 4,
-          }),
-        ],
-      }),
-    ]);
-  });
-  it(`should flat selectors multiple into compounds`, () => {
-    const selector = parseCssSelector(`.x .y`)[0];
-    const ast = parseCssSelector(`.a`);
-    ast[0].nodes.push(selector);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 2,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 2,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+                nodes: [
+                    createNode({
+                        type: `class`,
+                        value: `a`,
+                        start: 0,
+                        end: 2,
+                    }),
+                    createNode({
+                        type: `class`,
+                        value: `x`,
+                        start: 0,
+                        end: 2,
+                    }),
+                    createNode({
+                        type: `class`,
+                        value: `y`,
+                        start: 2,
+                        end: 4,
+                    }),
+                    createNode({
+                        type: `class`,
+                        value: `q`,
+                        start: 0,
+                        end: 2,
+                    }),
+                    createNode({
+                        type: `class`,
+                        value: `t`,
+                        start: 2,
+                        end: 4,
+                    }),
+                ],
+            }),
+        ]);
+    });
+    it(`should flat selectors multiple into compounds`, () => {
+        const selector = parseCssSelector(`.x .y`)[0];
+        const ast = parseCssSelector(`.a`);
+        ast[0].nodes.push(selector);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
                 end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `x`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 2,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `x`,
+                                start: 0,
+                                end: 2,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `space`,
+                        value: ` `,
+                        start: 2,
+                        end: 3,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 3,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `y`,
+                                start: 3,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split cannot reconstruct`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
                 end: 2,
-              }),
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `space`,
-            value: ` `,
-            start: 2,
-            end: 3,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 3,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `y`,
-                start: 3,
-                end: 5,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(
-      splitCompoundSelectors(groupedSelectors),
-      `split cannot reconstruct`
-    ).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 2,
-        nodes: [
-          createNode({
-            type: `class`,
-            value: `a`,
-            start: 0,
-            end: 2,
-          }),
-          createNode({
-            type: `class`,
-            value: `x`,
-            start: 0,
-            end: 2,
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `space`,
-            value: ` `,
-            start: 2,
-            end: 3,
-          }),
-          createNode({
-            type: `class`,
-            value: `y`,
-            start: 3,
-            end: 5,
-          }),
-        ],
-      }),
-    ]);
-  });
-  it(`should keep out-of-context nodes out of compound selector`, () => {
-    const nthSelector = parseCssSelector(`:nth-child(5n- 4 of)`)[0];
-    const nth = (nthSelector.nodes[0] as PseudoClass).nodes![0] as Nth;
-    const ast = parseCssSelector(`.a.b`);
-    // create broken selector: ".a5n - 4 of.b"
-    ast[0].nodes.splice(1, 0, nth, ...nth.nodes);
-    nth.nodes.length = 0;
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 4,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 2,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+                nodes: [
+                    createNode({
+                        type: `class`,
+                        value: `a`,
+                        start: 0,
+                        end: 2,
+                    }),
+                    createNode({
+                        type: `class`,
+                        value: `x`,
+                        start: 0,
+                        end: 2,
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `space`,
+                        value: ` `,
+                        start: 2,
+                        end: 3,
+                    }),
+                    createNode({
+                        type: `class`,
+                        value: `y`,
+                        start: 3,
+                        end: 5,
+                    }),
+                ],
+            }),
+        ]);
+    });
+    it(`should keep out-of-context nodes out of compound selector`, () => {
+        const nthSelector = parseCssSelector(`:nth-child(5n- 4 of)`)[0];
+        const nth = (nthSelector.nodes[0] as PseudoClass).nodes![0] as Nth;
+        const ast = parseCssSelector(`.a.b`);
+        // create broken selector: ".a5n - 4 of.b"
+        ast[0].nodes.splice(1, 0, nth, ...nth.nodes);
+        nth.nodes.length = 0;
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 2,
-              }),
-            ],
-          }),
-          createNode({
-            type: `nth`,
-            start: 11,
-            end: 19,
-            nodes: [],
-          }),
-          createNode({
-            type: `nth_step`,
-            value: `5n`,
-            start: 11,
-            end: 13,
-          }),
-          createNode({
-            type: `nth_dash`,
-            value: `-`,
-            start: 13,
-            end: 15,
-            after: ` `,
-          }),
-          createNode({
-            type: `nth_offset`,
-            value: `4`,
-            start: 15,
-            end: 17,
-            after: ` `,
-          }),
-          createNode({
-            type: `nth_of`,
-            value: `of`,
-            start: 17,
-            end: 19,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 2,
-            end: 4,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 2,
                 end: 4,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 2,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `nth`,
+                        start: 11,
+                        end: 19,
+                        nodes: [],
+                    }),
+                    createNode({
+                        type: `nth_step`,
+                        value: `5n`,
+                        start: 11,
+                        end: 13,
+                    }),
+                    createNode({
+                        type: `nth_dash`,
+                        value: `-`,
+                        start: 13,
+                        end: 15,
+                        after: ` `,
+                    }),
+                    createNode({
+                        type: `nth_offset`,
+                        value: `4`,
+                        start: 15,
+                        end: 17,
+                        after: ` `,
+                    }),
+                    createNode({
+                        type: `nth_of`,
+                        value: `of`,
+                        start: 17,
+                        end: 19,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 2,
+                        end: 4,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 2,
+                                end: 4,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
 });
diff --git a/packages/css-selector-parser/test/ast-tools/specificity.spec.ts b/packages/css-selector-parser/test/ast-tools/specificity.spec.ts
index 15b918c6..3cfa56fb 100644
--- a/packages/css-selector-parser/test/ast-tools/specificity.spec.ts
+++ b/packages/css-selector-parser/test/ast-tools/specificity.spec.ts
@@ -1,203 +1,175 @@
 import {
-  calcSpecificity,
-  compareSpecificity,
-  groupCompoundSelectors,
-  parseCssSelector,
-  ImmutableSelectorNode,
-} from "@tokey/css-selector-parser";
-import { expect } from "chai";
+    calcSpecificity,
+    compareSpecificity,
+    groupCompoundSelectors,
+    parseCssSelector,
+    ImmutableSelectorNode,
+} from '@tokey/css-selector-parser';
+import { expect } from 'chai';
 
 describe(`ast-tools/specificity`, () => {
-  describe(`calcSpecificity`, () => {
-    const basicSelectors = [
-      {
-        selectorType: `universal`,
-        selector: `*`,
-        expected: [0, 0, 0, 0],
-      },
-      {
-        selectorType: `type`,
-        selector: `span`,
-        expected: [0, 0, 0, 1],
-      },
-      {
-        selectorType: `pseudo-element`,
-        selector: `::before`,
-        expected: [0, 0, 0, 1],
-      },
-      {
-        selectorType: `class`,
-        selector: `.a`,
-        expected: [0, 0, 1, 0],
-      },
-      {
-        selectorType: `attribute`,
-        selector: `[attr]`,
-        expected: [0, 0, 1, 0],
-      },
-      {
-        selectorType: `pseudo-class`,
-        selector: `:hover`,
-        expected: [0, 0, 1, 0],
-      },
-      {
-        selectorType: `id`,
-        selector: `#a`,
-        expected: [0, 1, 0, 0],
-      },
-      {
-        selectorType: `nested`,
-        selector: `&`,
-        expected: [0, 0, 0, 0],
-      },
-    ];
-    describe(`basic selectors`, () => {
-      basicSelectors.forEach(({ selectorType, selector, expected }) => {
-        it(`should return correct specificity for ${selectorType} selector`, () => {
-          const specificity = calcSpecificity(parseCssSelector(selector)[0]);
-          expect(specificity).to.eql(expected);
+    describe(`calcSpecificity`, () => {
+        const basicSelectors = [
+            {
+                selectorType: `universal`,
+                selector: `*`,
+                expected: [0, 0, 0, 0],
+            },
+            {
+                selectorType: `type`,
+                selector: `span`,
+                expected: [0, 0, 0, 1],
+            },
+            {
+                selectorType: `pseudo-element`,
+                selector: `::before`,
+                expected: [0, 0, 0, 1],
+            },
+            {
+                selectorType: `class`,
+                selector: `.a`,
+                expected: [0, 0, 1, 0],
+            },
+            {
+                selectorType: `attribute`,
+                selector: `[attr]`,
+                expected: [0, 0, 1, 0],
+            },
+            {
+                selectorType: `pseudo-class`,
+                selector: `:hover`,
+                expected: [0, 0, 1, 0],
+            },
+            {
+                selectorType: `id`,
+                selector: `#a`,
+                expected: [0, 1, 0, 0],
+            },
+            {
+                selectorType: `nested`,
+                selector: `&`,
+                expected: [0, 0, 0, 0],
+            },
+        ];
+        describe(`basic selectors`, () => {
+            basicSelectors.forEach(({ selectorType, selector, expected }) => {
+                it(`should return correct specificity for ${selectorType} selector`, () => {
+                    const specificity = calcSpecificity(parseCssSelector(selector)[0]);
+                    expect(specificity).to.eql(expected);
+                });
+            });
         });
-      });
-    });
-    describe(`special cases`, () => {
-      it(`should only add the most specific inner selector for :not()`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:not(.a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 0, 0]);
-      });
-      it(`should only add the most specific inner selector for :is()`, () => {
-        const specificity = calcSpecificity(parseCssSelector(`:is(.a, #b)`)[0]);
-        expect(specificity).to.eql([0, 1, 0, 0]);
-      });
-      it(`should only add the most specific inner selector for :has()`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:has(.a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 0, 0]);
-      });
-      it(`should add zero specificity for :where()`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:where(.a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 0, 0, 0]);
-      });
-      it(`should add :nth-child pseudo-class plus the most specific inner selectors`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:nth-child(5n - 4 of .a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 1, 0]);
-      });
-      it(`should add :nth-last-child pseudo-class plus the most specific inner selectors`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:nth-last-child(5n -4 of .a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 1, 0]);
-      });
-      it(`should add :nth-of-type pseudo-class plus the most specific inner selectors`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:nth-of-type(5n -4 of .a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 1, 0]);
-      });
-      it(`should add :nth-last-of-type pseudo-class plus the most specific inner selectors`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:nth-last-of-type(5n -4 of .a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 1, 0]);
-      });
-    });
-    describe(`complex selectors`, () => {
-      it(`should not add specificity for combinators`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`.a + .b ~ .c > .d .e`)[0]
-        );
-        expect(specificity).to.eql([0, 0, 5, 0]);
-      });
-      it(`should handle nested pseudo classes`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:is(:where(#zero), :has(:not(span, #a), .a))`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 0, 0]);
-      });
-      it(`should not add specificity for comments`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`/*c1*/./*c2*/a/*c3*/`)[0]
-        );
-        expect(specificity).to.eql([0, 0, 1, 0]);
-      });
-      it(`should not add specificity for invalid`, () => {
-        const specificity = calcSpecificity(parseCssSelector(`:a(`)[0]);
-        expect(specificity).to.eql([0, 0, 1, 0]);
-      });
-      it(`should not take non native functional selectors arguments into account`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(
-            `div(#a).x(#b)::y(#c)[attr](#d)&(#e)*(#f)#id(#g):unknown(#h)`
-          )[0]
-        );
-        expect(specificity).to.eql([0, 1, 3, 2]);
-      });
-      it(`should handle compound selector AST`, () => {
-        const specificity = calcSpecificity(
-          groupCompoundSelectors(parseCssSelector(`.a .b`)[0])
-        );
-        expect(specificity).to.eql([0, 0, 2, 0]);
-      });
-      it(`should handle empty functional selector`, () => {
-        const specificity = calcSpecificity(
-          groupCompoundSelectors(parseCssSelector(`div:not()`)[0])
-        );
-        expect(specificity).to.eql([0, 0, 0, 1]);
-      });
-    });
-    describe(`accepted values`, () => {
-      basicSelectors.forEach(({ selectorType, selector, expected }) => {
-        it(`should accept ${selectorType} selector AST`, () => {
-          const basicNode = parseCssSelector(selector)[0].nodes[0];
-          const specificity = calcSpecificity(basicNode);
-          expect(specificity).to.eql(expected);
+        describe(`special cases`, () => {
+            it(`should only add the most specific inner selector for :not()`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`:not(.a, #b)`)[0]);
+                expect(specificity).to.eql([0, 1, 0, 0]);
+            });
+            it(`should only add the most specific inner selector for :is()`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`:is(.a, #b)`)[0]);
+                expect(specificity).to.eql([0, 1, 0, 0]);
+            });
+            it(`should only add the most specific inner selector for :has()`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`:has(.a, #b)`)[0]);
+                expect(specificity).to.eql([0, 1, 0, 0]);
+            });
+            it(`should add zero specificity for :where()`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`:where(.a, #b)`)[0]);
+                expect(specificity).to.eql([0, 0, 0, 0]);
+            });
+            it(`should add :nth-child pseudo-class plus the most specific inner selectors`, () => {
+                const specificity = calcSpecificity(
+                    parseCssSelector(`:nth-child(5n - 4 of .a, #b)`)[0]
+                );
+                expect(specificity).to.eql([0, 1, 1, 0]);
+            });
+            it(`should add :nth-last-child pseudo-class plus the most specific inner selectors`, () => {
+                const specificity = calcSpecificity(
+                    parseCssSelector(`:nth-last-child(5n -4 of .a, #b)`)[0]
+                );
+                expect(specificity).to.eql([0, 1, 1, 0]);
+            });
+            it(`should add :nth-of-type pseudo-class plus the most specific inner selectors`, () => {
+                const specificity = calcSpecificity(
+                    parseCssSelector(`:nth-of-type(5n -4 of .a, #b)`)[0]
+                );
+                expect(specificity).to.eql([0, 1, 1, 0]);
+            });
+            it(`should add :nth-last-of-type pseudo-class plus the most specific inner selectors`, () => {
+                const specificity = calcSpecificity(
+                    parseCssSelector(`:nth-last-of-type(5n -4 of .a, #b)`)[0]
+                );
+                expect(specificity).to.eql([0, 1, 1, 0]);
+            });
         });
-      });
-      it(`should accept readonly value (type checks)`, () => {
-        const immutable = parseCssSelector(`.a .b`)[0] as ImmutableSelectorNode;
-        calcSpecificity(immutable);
+        describe(`complex selectors`, () => {
+            it(`should not add specificity for combinators`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`.a + .b ~ .c > .d .e`)[0]);
+                expect(specificity).to.eql([0, 0, 5, 0]);
+            });
+            it(`should handle nested pseudo classes`, () => {
+                const specificity = calcSpecificity(
+                    parseCssSelector(`:is(:where(#zero), :has(:not(span, #a), .a))`)[0]
+                );
+                expect(specificity).to.eql([0, 1, 0, 0]);
+            });
+            it(`should not add specificity for comments`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`/*c1*/./*c2*/a/*c3*/`)[0]);
+                expect(specificity).to.eql([0, 0, 1, 0]);
+            });
+            it(`should not add specificity for invalid`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`:a(`)[0]);
+                expect(specificity).to.eql([0, 0, 1, 0]);
+            });
+            it(`should not take non native functional selectors arguments into account`, () => {
+                const specificity = calcSpecificity(
+                    parseCssSelector(
+                        `div(#a).x(#b)::y(#c)[attr](#d)&(#e)*(#f)#id(#g):unknown(#h)`
+                    )[0]
+                );
+                expect(specificity).to.eql([0, 1, 3, 2]);
+            });
+            it(`should handle compound selector AST`, () => {
+                const specificity = calcSpecificity(
+                    groupCompoundSelectors(parseCssSelector(`.a .b`)[0])
+                );
+                expect(specificity).to.eql([0, 0, 2, 0]);
+            });
+            it(`should handle empty functional selector`, () => {
+                const specificity = calcSpecificity(
+                    groupCompoundSelectors(parseCssSelector(`div:not()`)[0])
+                );
+                expect(specificity).to.eql([0, 0, 0, 1]);
+            });
+        });
+        describe(`accepted values`, () => {
+            basicSelectors.forEach(({ selectorType, selector, expected }) => {
+                it(`should accept ${selectorType} selector AST`, () => {
+                    const basicNode = parseCssSelector(selector)[0].nodes[0];
+                    const specificity = calcSpecificity(basicNode);
+                    expect(specificity).to.eql(expected);
+                });
+            });
+            it(`should accept readonly value (type checks)`, () => {
+                const immutable = parseCssSelector(`.a .b`)[0] as ImmutableSelectorNode;
+                calcSpecificity(immutable);
 
-        const mutable = parseCssSelector(`.a .b`)[0];
-        calcSpecificity(mutable);
-      });
-    });
-  });
-  describe(`compareSpecificity`, () => {
-    it(`should return 0 when equal`, () => {
-      expect(
-        compareSpecificity([0, 0, 0, 0], [0, 0, 0, 0]),
-        `all zeros`
-      ).to.equal(0);
-      expect(
-        compareSpecificity([5, 4, 3, 2], [5, 4, 3, 2]),
-        `complex`
-      ).to.equal(0);
-    });
-    it(`should return 1 when first specificity is higher`, () => {
-      expect(
-        compareSpecificity([1, 0, 0, 0], [0, 9, 0, 0]),
-        `higher place`
-      ).to.equal(1);
-      expect(
-        compareSpecificity([0, 5, 0, 0], [0, 4, 0, 0]),
-        `higher value`
-      ).to.equal(1);
+                const mutable = parseCssSelector(`.a .b`)[0];
+                calcSpecificity(mutable);
+            });
+        });
     });
-    it(`should return -1 when second specificity is higher`, () => {
-      expect(
-        compareSpecificity([0, 9, 0, 0], [1, 0, 0, 0]),
-        `higher place`
-      ).to.equal(-1);
-      expect(
-        compareSpecificity([0, 4, 0, 0], [0, 5, 0, 0]),
-        `higher value`
-      ).to.equal(-1);
+    describe(`compareSpecificity`, () => {
+        it(`should return 0 when equal`, () => {
+            expect(compareSpecificity([0, 0, 0, 0], [0, 0, 0, 0]), `all zeros`).to.equal(0);
+            expect(compareSpecificity([5, 4, 3, 2], [5, 4, 3, 2]), `complex`).to.equal(0);
+        });
+        it(`should return 1 when first specificity is higher`, () => {
+            expect(compareSpecificity([1, 0, 0, 0], [0, 9, 0, 0]), `higher place`).to.equal(1);
+            expect(compareSpecificity([0, 5, 0, 0], [0, 4, 0, 0]), `higher value`).to.equal(1);
+        });
+        it(`should return -1 when second specificity is higher`, () => {
+            expect(compareSpecificity([0, 9, 0, 0], [1, 0, 0, 0]), `higher place`).to.equal(-1);
+            expect(compareSpecificity([0, 4, 0, 0], [0, 5, 0, 0]), `higher value`).to.equal(-1);
+        });
     });
-  });
 });
diff --git a/packages/css-selector-parser/test/ast-tools/walk.spec.ts b/packages/css-selector-parser/test/ast-tools/walk.spec.ts
index ab8d8089..2f65b314 100644
--- a/packages/css-selector-parser/test/ast-tools/walk.spec.ts
+++ b/packages/css-selector-parser/test/ast-tools/walk.spec.ts
@@ -1,491 +1,479 @@
 import {
-  parseCssSelector,
-  walk,
-  WalkOptions,
-  groupCompoundSelectors,
-  SelectorNode,
-  SelectorList,
-  ImmutableSelectorList,
-  ImmutableSelectorNode,
-} from "@tokey/css-selector-parser";
-import { isMatch } from "@tokey/test-kit";
+    parseCssSelector,
+    walk,
+    WalkOptions,
+    groupCompoundSelectors,
+    SelectorNode,
+    SelectorList,
+    ImmutableSelectorList,
+    ImmutableSelectorNode,
+} from '@tokey/css-selector-parser';
+import { isMatch } from '@tokey/test-kit';
 
 function testWalk(
-  topNode: SelectorNode | SelectorList,
-  {
-    walkOptions,
-    mapVisit,
-    resultVisit,
-    expectedMap,
-  }: {
-    walkOptions?: WalkOptions;
-    mapVisit: (
-      node: SelectorNode,
-      index: number,
-      nodes: SelectorNode[],
-      parents: SelectorNode[]
-    ) => any;
-    resultVisit?: (
-      node: SelectorNode,
-      index: number,
-      nodes: SelectorNode[],
-      parents: SelectorNode[]
-    ) => number | undefined;
-    expectedMap: any[];
-  }
+    topNode: SelectorNode | SelectorList,
+    {
+        walkOptions,
+        mapVisit,
+        resultVisit,
+        expectedMap,
+    }: {
+        walkOptions?: WalkOptions;
+        mapVisit: (
+            node: SelectorNode,
+            index: number,
+            nodes: SelectorNode[],
+            parents: SelectorNode[]
+        ) => any;
+        resultVisit?: (
+            node: SelectorNode,
+            index: number,
+            nodes: SelectorNode[],
+            parents: SelectorNode[]
+        ) => number | undefined;
+        expectedMap: any[];
+    }
 ) {
-  const actual: any[] = [];
-  try {
-    walk(
-      topNode,
-      (
-        current: SelectorNode,
-        index: number,
-        nodes: SelectorNode[],
-        parents: SelectorNode[]
-      ) => {
-        actual.push(
-          mapVisit ? mapVisit(current, index, nodes, parents) : current
+    const actual: any[] = [];
+    try {
+        walk(
+            topNode,
+            (
+                current: SelectorNode,
+                index: number,
+                nodes: SelectorNode[],
+                parents: SelectorNode[]
+            ) => {
+                actual.push(mapVisit ? mapVisit(current, index, nodes, parents) : current);
+                return resultVisit ? resultVisit(current, index, nodes, parents) : undefined;
+            },
+            walkOptions
         );
-        return resultVisit
-          ? resultVisit(current, index, nodes, parents)
-          : undefined;
-      },
-      walkOptions
-    );
-  } catch (e) {
-    throw new Error(`error in walk, ${e}`);
-  }
-  if (!isMatch(actual, expectedMap)) {
-    const e = JSON.stringify(expectedMap, null, 2);
-    const a = JSON.stringify(actual, null, 2);
-    throw new Error(`Fail walk: \n${a}\nTo\n${e}`);
-  }
+    } catch (e) {
+        throw new Error(`error in walk, ${e}`);
+    }
+    if (!isMatch(actual, expectedMap)) {
+        const e = JSON.stringify(expectedMap, null, 2);
+        const a = JSON.stringify(actual, null, 2);
+        throw new Error(`Fail walk: \n${a}\nTo\n${e}`);
+    }
 }
 
 describe(`ast-tools/walk`, () => {
-  it(`should visit nodes`, () => {
-    testWalk(parseCssSelector(`.a#b`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `a` },
-        { type: `id`, value: `b` },
-      ],
+    it(`should visit nodes`, () => {
+        testWalk(parseCssSelector(`.a#b`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `a` },
+                { type: `id`, value: `b` },
+            ],
+        });
     });
-  });
-  it(`should not visit specified types`, () => {
-    testWalk(parseCssSelector(`.a#b.c`), {
-      walkOptions: {
-        ignoreList: ["selector", `id`],
-      },
-      mapVisit: ({ type, value }: any, index) => ({ type, value, index }),
-      expectedMap: [
-        { type: `class`, value: `a`, index: 0 },
-        { type: `class`, value: `c`, index: 2 },
-      ],
+    it(`should not visit specified types`, () => {
+        testWalk(parseCssSelector(`.a#b.c`), {
+            walkOptions: {
+                ignoreList: ['selector', `id`],
+            },
+            mapVisit: ({ type, value }: any, index) => ({ type, value, index }),
+            expectedMap: [
+                { type: `class`, value: `a`, index: 0 },
+                { type: `class`, value: `c`, index: 2 },
+            ],
+        });
     });
-  });
-  it(`should visit only specified types`, () => {
-    testWalk(parseCssSelector(`.a#b.c #d`), {
-      walkOptions: {
-        visitList: [`id`],
-      },
-      mapVisit: ({ type, value }: any, index) => ({ type, value, index }),
-      expectedMap: [
-        { type: `id`, value: `b`, index: 1 },
-        { type: `id`, value: `d`, index: 4 },
-      ],
+    it(`should visit only specified types`, () => {
+        testWalk(parseCssSelector(`.a#b.c #d`), {
+            walkOptions: {
+                visitList: [`id`],
+            },
+            mapVisit: ({ type, value }: any, index) => ({ type, value, index }),
+            expectedMap: [
+                { type: `id`, value: `b`, index: 1 },
+                { type: `id`, value: `d`, index: 4 },
+            ],
+        });
     });
-  });
-  it(`should visit combinators`, () => {
-    testWalk(parseCssSelector(`.a + .b`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `a` },
-        { type: `combinator`, value: `+` },
-        { type: `class`, value: `b` },
-      ],
+    it(`should visit combinators`, () => {
+        testWalk(parseCssSelector(`.a + .b`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `a` },
+                { type: `combinator`, value: `+` },
+                { type: `class`, value: `b` },
+            ],
+        });
     });
-  });
-  it(`should visit all basic selector types`, () => {
-    testWalk(parseCssSelector(`*.a + :b > ::c ~ #d[e] /*f*/`), {
-      walkOptions: {
-        ignoreList: [`selector`],
-      },
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      expectedMap: [
-        { type: `universal`, value: `*` },
-        { type: `class`, value: `a` },
-        { type: `combinator`, value: `+` },
-        { type: `pseudo_class`, value: `b` },
-        { type: `combinator`, value: `>` },
-        { type: `pseudo_element`, value: `c` },
-        { type: `combinator`, value: `~` },
-        { type: `id`, value: `d` },
-        { type: `attribute`, value: `e` },
-        { type: `comment`, value: `/*f*/` },
-      ],
+    it(`should visit all basic selector types`, () => {
+        testWalk(parseCssSelector(`*.a + :b > ::c ~ #d[e] /*f*/`), {
+            walkOptions: {
+                ignoreList: [`selector`],
+            },
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            expectedMap: [
+                { type: `universal`, value: `*` },
+                { type: `class`, value: `a` },
+                { type: `combinator`, value: `+` },
+                { type: `pseudo_class`, value: `b` },
+                { type: `combinator`, value: `>` },
+                { type: `pseudo_element`, value: `c` },
+                { type: `combinator`, value: `~` },
+                { type: `id`, value: `d` },
+                { type: `attribute`, value: `e` },
+                { type: `comment`, value: `/*f*/` },
+            ],
+        });
     });
-  });
-  it(`should visit nested`, () => {
-    testWalk(parseCssSelector(`:a(::b(.c(d(x))), y) + z`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `a` },
-        { type: `selector`, value: undefined },
-        { type: `pseudo_element`, value: `b` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `c` },
-        { type: `selector`, value: undefined },
-        { type: `type`, value: `d` },
-        { type: `selector`, value: undefined },
-        { type: `type`, value: `x` },
-        { type: `selector`, value: undefined },
-        { type: `type`, value: `y` },
-        { type: `combinator`, value: `+` },
-        { type: `type`, value: `z` },
-      ],
+    it(`should visit nested`, () => {
+        testWalk(parseCssSelector(`:a(::b(.c(d(x))), y) + z`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `a` },
+                { type: `selector`, value: undefined },
+                { type: `pseudo_element`, value: `b` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `c` },
+                { type: `selector`, value: undefined },
+                { type: `type`, value: `d` },
+                { type: `selector`, value: undefined },
+                { type: `type`, value: `x` },
+                { type: `selector`, value: undefined },
+                { type: `type`, value: `y` },
+                { type: `combinator`, value: `+` },
+                { type: `type`, value: `z` },
+            ],
+        });
     });
-  });
-  it(`should visit compound selectors`, () => {
-    testWalk(groupCompoundSelectors(parseCssSelector(`.a.b .c.d`)), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `compound_selector`, value: undefined },
-        { type: `class`, value: `a` },
-        { type: `class`, value: `b` },
-        { type: `combinator`, value: ` ` },
-        { type: `compound_selector`, value: undefined },
-        { type: `class`, value: `c` },
-        { type: `class`, value: `d` },
-      ],
+    it(`should visit compound selectors`, () => {
+        testWalk(groupCompoundSelectors(parseCssSelector(`.a.b .c.d`)), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `compound_selector`, value: undefined },
+                { type: `class`, value: `a` },
+                { type: `class`, value: `b` },
+                { type: `combinator`, value: ` ` },
+                { type: `compound_selector`, value: undefined },
+                { type: `class`, value: `c` },
+                { type: `class`, value: `d` },
+            ],
+        });
     });
-  });
-  it(`should skip nested (return 0)`, () => {
-    testWalk(parseCssSelector(`:is(:skip-nested(.a).b, .c).d, .e`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      resultVisit: ({ value }: any) =>
-        value === `skip-nested` ? walk.skipNested : undefined,
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `is` },
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `skip-nested` },
-        { type: `class`, value: `b` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `c` },
-        { type: `class`, value: `d` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `e` },
-      ],
+    it(`should skip nested (return 0)`, () => {
+        testWalk(parseCssSelector(`:is(:skip-nested(.a).b, .c).d, .e`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            resultVisit: ({ value }: any) =>
+                value === `skip-nested` ? walk.skipNested : undefined,
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `is` },
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `skip-nested` },
+                { type: `class`, value: `b` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `c` },
+                { type: `class`, value: `d` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `e` },
+            ],
+        });
     });
-  });
-  it(`should skip current selector`, () => {
-    testWalk(parseCssSelector(`:is(:skip-selector(.a).b, .c).d, .e`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      resultVisit: ({ value }: any) =>
-        value === `skip-selector` ? walk.skipCurrentSelector : undefined,
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `is` },
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `skip-selector` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `c` },
-        { type: `class`, value: `d` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `e` },
-      ],
+    it(`should skip current selector`, () => {
+        testWalk(parseCssSelector(`:is(:skip-selector(.a).b, .c).d, .e`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            resultVisit: ({ value }: any) =>
+                value === `skip-selector` ? walk.skipCurrentSelector : undefined,
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `is` },
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `skip-selector` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `c` },
+                { type: `class`, value: `d` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `e` },
+            ],
+        });
     });
-  });
-  it(`should stop walk completely`, () => {
-    testWalk(parseCssSelector(`:is(:stop(.a).b, .c).d, .e`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      resultVisit: ({ value }: any) =>
-        value === `stop` ? walk.stopAll : undefined,
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `is` },
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `stop` },
-      ],
+    it(`should stop walk completely`, () => {
+        testWalk(parseCssSelector(`:is(:stop(.a).b, .c).d, .e`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            resultVisit: ({ value }: any) => (value === `stop` ? walk.stopAll : undefined),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `is` },
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `stop` },
+            ],
+        });
     });
-  });
-  it(`should skip X levels down (2)`, () => {
-    testWalk(parseCssSelector(`:is(:skip-2-levels(.a).b, .c).d, .e`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      resultVisit: ({ value }: any) =>
-        value === `skip-2-levels` ? 2 : undefined,
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `is` },
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `skip-2-levels` },
-        { type: `class`, value: `d` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `e` },
-      ],
+    it(`should skip X levels down (2)`, () => {
+        testWalk(parseCssSelector(`:is(:skip-2-levels(.a).b, .c).d, .e`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            resultVisit: ({ value }: any) => (value === `skip-2-levels` ? 2 : undefined),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `is` },
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `skip-2-levels` },
+                { type: `class`, value: `d` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `e` },
+            ],
+        });
     });
-  });
-  it(`should skip X levels down through selectors (3)`, () => {
-    testWalk(parseCssSelector(`:is(:skip-3-levels(.a).b, .c).d, .e`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      resultVisit: ({ value }: any) =>
-        value === `skip-3-levels` ? 3 : undefined,
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `is` },
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `skip-3-levels` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `e` },
-      ],
+    it(`should skip X levels down through selectors (3)`, () => {
+        testWalk(parseCssSelector(`:is(:skip-3-levels(.a).b, .c).d, .e`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            resultVisit: ({ value }: any) => (value === `skip-3-levels` ? 3 : undefined),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `is` },
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `skip-3-levels` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `e` },
+            ],
+        });
     });
-  });
-  it(`should accept readonly value and iterate on readonly accordingly (type checks)`, () => {
-    function expectType<T>(_actual: T) {
-      /**/
-    }
+    it(`should accept readonly value and iterate on readonly accordingly (type checks)`, () => {
+        function expectType<T>(_actual: T) {
+            /**/
+        }
 
-    walk({} as ImmutableSelectorList, (node, _index, nodes, parents) => {
-      expectType<ImmutableSelectorNode>(node);
-      expectType<ImmutableSelectorNode[]>(nodes);
-      expectType<ImmutableSelectorNode[]>(parents);
-    });
-    walk({} as ImmutableSelectorNode, (node, _index, nodes, parents) => {
-      expectType<ImmutableSelectorNode>(node);
-      expectType<ImmutableSelectorNode[]>(nodes);
-      expectType<ImmutableSelectorNode[]>(parents);
-    });
-    walk({} as SelectorList, (node, _index, nodes, parents) => {
-      expectType<SelectorNode>(node);
-      expectType<SelectorNode[]>(nodes);
-      expectType<SelectorNode[]>(parents);
+        walk({} as ImmutableSelectorList, (node, _index, nodes, parents) => {
+            expectType<ImmutableSelectorNode>(node);
+            expectType<ImmutableSelectorNode[]>(nodes);
+            expectType<ImmutableSelectorNode[]>(parents);
+        });
+        walk({} as ImmutableSelectorNode, (node, _index, nodes, parents) => {
+            expectType<ImmutableSelectorNode>(node);
+            expectType<ImmutableSelectorNode[]>(nodes);
+            expectType<ImmutableSelectorNode[]>(parents);
+        });
+        walk({} as SelectorList, (node, _index, nodes, parents) => {
+            expectType<SelectorNode>(node);
+            expectType<SelectorNode[]>(nodes);
+            expectType<SelectorNode[]>(parents);
+        });
+        walk({} as SelectorNode, (node, _index, nodes, parents) => {
+            expectType<SelectorNode>(node);
+            expectType<SelectorNode[]>(nodes);
+            expectType<SelectorNode[]>(parents);
+        });
     });
-    walk({} as SelectorNode, (node, _index, nodes, parents) => {
-      expectType<SelectorNode>(node);
-      expectType<SelectorNode[]>(nodes);
-      expectType<SelectorNode[]>(parents);
-    });
-  });
-  describe(`context`, () => {
-    it(`should provide index and sibling nodes within selector`, () => {
-      testWalk(parseCssSelector(`:a(.a1.a2, .aX.aY), :b(.b1.b2)`), {
-        mapVisit: ({ type, value }: any, index: number, nodes: any[]) => ({
-          type,
-          value,
-          index,
-          nodes: nodes.map(({ value, type }) => value || type).join(`,`),
-        }),
-        expectedMap: [
-          {
-            type: `selector`,
-            value: undefined,
-            index: 0,
-            nodes: `selector,selector`,
-          },
-          { type: `pseudo_class`, value: `a`, index: 0, nodes: `a` },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 0,
-            nodes: `selector,selector`,
-          },
-          {
-            type: `class`,
-            value: `a1`,
-            index: 0,
-            nodes: `a1,a2`,
-          },
-          {
-            type: `class`,
-            value: `a2`,
-            index: 1,
-            nodes: `a1,a2`,
-          },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 1,
-            nodes: `selector,selector`,
-          },
-          {
-            type: `class`,
-            value: `aX`,
-            index: 0,
-            nodes: `aX,aY`,
-          },
-          {
-            type: `class`,
-            value: `aY`,
-            index: 1,
-            nodes: `aX,aY`,
-          },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 1,
-            nodes: `selector,selector`,
-          },
-          { type: `pseudo_class`, value: `b`, index: 0, nodes: `b` },
-          { type: `selector`, value: undefined, index: 0, nodes: `selector` },
-          {
-            type: `class`,
-            value: `b1`,
-            index: 0,
-            nodes: `b1,b2`,
-          },
-          {
-            type: `class`,
-            value: `b2`,
-            index: 1,
-            nodes: `b1,b2`,
-          },
-        ],
-      });
-    });
-    it(`should provide index and sibling nodes within selector (skip nodes)`, () => {
-      testWalk(parseCssSelector(`:a(.a1.a2, .aX.aY), :b(.b1.b2):c`), {
-        mapVisit: ({ type, value }: any, index: number, nodes: any[]) => ({
-          type,
-          value,
-          index,
-          nodes: nodes.map(({ value, type }) => value || type).join(`,`),
-        }),
-        resultVisit: ({ value }: any) => {
-          if (value === `a1`) {
-            return walk.skipCurrentSelector;
-          } else if (value === `b`) {
-            return walk.skipNested;
-          }
-          return;
-        },
-        expectedMap: [
-          {
-            type: `selector`,
-            value: undefined,
-            index: 0,
-            nodes: `selector,selector`,
-          },
-          { type: `pseudo_class`, value: `a`, index: 0, nodes: `a` },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 0,
-            nodes: `selector,selector`,
-          },
-          {
-            type: `class`,
-            value: `a1`,
-            index: 0,
-            nodes: `a1,a2`,
-          },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 1,
-            nodes: `selector,selector`,
-          },
-          {
-            type: `class`,
-            value: `aX`,
-            index: 0,
-            nodes: `aX,aY`,
-          },
-          {
-            type: `class`,
-            value: `aY`,
-            index: 1,
-            nodes: `aX,aY`,
-          },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 1,
-            nodes: `selector,selector`,
-          },
-          { type: `pseudo_class`, value: `b`, index: 0, nodes: `b,c` },
-          { type: `pseudo_class`, value: `c`, index: 1, nodes: `b,c` },
-        ],
-      });
-    });
-    it(`should provide parent list to visit`, () => {
-      testWalk(parseCssSelector(`:a(:b(:c))`), {
-        mapVisit: (
-          { type, value }: any,
-          index: number,
-          _nodes: any[],
-          parents: any[]
-        ) => ({
-          type,
-          value,
-          index,
-          parents: parents.map(({ value, type }) => value || type).join(`,`),
-        }),
-        expectedMap: [
-          { type: `selector`, value: undefined, index: 0, parents: `` },
-          { type: `pseudo_class`, value: `a`, index: 0, parents: `selector` },
-          { type: `selector`, value: undefined, index: 0, parents: `selector,a` },
-          {
-            type: `pseudo_class`,
-            value: `b`,
-            index: 0,
-            parents: `selector,a,selector`,
-          },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 0,
-            parents: `selector,a,selector,b`,
-          },
-          {
-            type: `pseudo_class`,
-            value: `c`,
-            index: 0,
-            parents: `selector,a,selector,b,selector`,
-          },
-        ],
-      });
-    });
-    it(`should provide parent list to visit (test multi selectors)`, () => {
-      testWalk(parseCssSelector(`:a(:a1(), :a2), :b(:b1)`), {
-        walkOptions: {
-          ignoreList: [`selector`],
-        },
-        mapVisit: (
-          { type, value }: any,
-          _index: number,
-          _nodes: any[],
-          parents: any[]
-        ) => ({
-          type,
-          value,
-          parents: parents.map(({ value, type }) => value || type).join(`,`),
-        }),
-        expectedMap: [
-          { type: `pseudo_class`, value: `a`, parents: `selector` },
-          {
-            type: `pseudo_class`,
-            value: `a1`,
-            parents: `selector,a,selector`,
-          },
-          {
-            type: `pseudo_class`,
-            value: `a2`,
-            parents: `selector,a,selector`,
-          },
-          { type: `pseudo_class`, value: `b`, parents: `selector` },
-          {
-            type: `pseudo_class`,
-            value: `b1`,
-            parents: `selector,b,selector`,
-          },
-        ],
-      });
+    describe(`context`, () => {
+        it(`should provide index and sibling nodes within selector`, () => {
+            testWalk(parseCssSelector(`:a(.a1.a2, .aX.aY), :b(.b1.b2)`), {
+                mapVisit: ({ type, value }: any, index: number, nodes: any[]) => ({
+                    type,
+                    value,
+                    index,
+                    nodes: nodes.map(({ value, type }) => value || type).join(`,`),
+                }),
+                expectedMap: [
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 0,
+                        nodes: `selector,selector`,
+                    },
+                    { type: `pseudo_class`, value: `a`, index: 0, nodes: `a` },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 0,
+                        nodes: `selector,selector`,
+                    },
+                    {
+                        type: `class`,
+                        value: `a1`,
+                        index: 0,
+                        nodes: `a1,a2`,
+                    },
+                    {
+                        type: `class`,
+                        value: `a2`,
+                        index: 1,
+                        nodes: `a1,a2`,
+                    },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 1,
+                        nodes: `selector,selector`,
+                    },
+                    {
+                        type: `class`,
+                        value: `aX`,
+                        index: 0,
+                        nodes: `aX,aY`,
+                    },
+                    {
+                        type: `class`,
+                        value: `aY`,
+                        index: 1,
+                        nodes: `aX,aY`,
+                    },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 1,
+                        nodes: `selector,selector`,
+                    },
+                    { type: `pseudo_class`, value: `b`, index: 0, nodes: `b` },
+                    { type: `selector`, value: undefined, index: 0, nodes: `selector` },
+                    {
+                        type: `class`,
+                        value: `b1`,
+                        index: 0,
+                        nodes: `b1,b2`,
+                    },
+                    {
+                        type: `class`,
+                        value: `b2`,
+                        index: 1,
+                        nodes: `b1,b2`,
+                    },
+                ],
+            });
+        });
+        it(`should provide index and sibling nodes within selector (skip nodes)`, () => {
+            testWalk(parseCssSelector(`:a(.a1.a2, .aX.aY), :b(.b1.b2):c`), {
+                mapVisit: ({ type, value }: any, index: number, nodes: any[]) => ({
+                    type,
+                    value,
+                    index,
+                    nodes: nodes.map(({ value, type }) => value || type).join(`,`),
+                }),
+                resultVisit: ({ value }: any) => {
+                    if (value === `a1`) {
+                        return walk.skipCurrentSelector;
+                    } else if (value === `b`) {
+                        return walk.skipNested;
+                    }
+                    return;
+                },
+                expectedMap: [
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 0,
+                        nodes: `selector,selector`,
+                    },
+                    { type: `pseudo_class`, value: `a`, index: 0, nodes: `a` },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 0,
+                        nodes: `selector,selector`,
+                    },
+                    {
+                        type: `class`,
+                        value: `a1`,
+                        index: 0,
+                        nodes: `a1,a2`,
+                    },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 1,
+                        nodes: `selector,selector`,
+                    },
+                    {
+                        type: `class`,
+                        value: `aX`,
+                        index: 0,
+                        nodes: `aX,aY`,
+                    },
+                    {
+                        type: `class`,
+                        value: `aY`,
+                        index: 1,
+                        nodes: `aX,aY`,
+                    },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 1,
+                        nodes: `selector,selector`,
+                    },
+                    { type: `pseudo_class`, value: `b`, index: 0, nodes: `b,c` },
+                    { type: `pseudo_class`, value: `c`, index: 1, nodes: `b,c` },
+                ],
+            });
+        });
+        it(`should provide parent list to visit`, () => {
+            testWalk(parseCssSelector(`:a(:b(:c))`), {
+                mapVisit: ({ type, value }: any, index: number, _nodes: any[], parents: any[]) => ({
+                    type,
+                    value,
+                    index,
+                    parents: parents.map(({ value, type }) => value || type).join(`,`),
+                }),
+                expectedMap: [
+                    { type: `selector`, value: undefined, index: 0, parents: `` },
+                    { type: `pseudo_class`, value: `a`, index: 0, parents: `selector` },
+                    { type: `selector`, value: undefined, index: 0, parents: `selector,a` },
+                    {
+                        type: `pseudo_class`,
+                        value: `b`,
+                        index: 0,
+                        parents: `selector,a,selector`,
+                    },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 0,
+                        parents: `selector,a,selector,b`,
+                    },
+                    {
+                        type: `pseudo_class`,
+                        value: `c`,
+                        index: 0,
+                        parents: `selector,a,selector,b,selector`,
+                    },
+                ],
+            });
+        });
+        it(`should provide parent list to visit (test multi selectors)`, () => {
+            testWalk(parseCssSelector(`:a(:a1(), :a2), :b(:b1)`), {
+                walkOptions: {
+                    ignoreList: [`selector`],
+                },
+                mapVisit: (
+                    { type, value }: any,
+                    _index: number,
+                    _nodes: any[],
+                    parents: any[]
+                ) => ({
+                    type,
+                    value,
+                    parents: parents.map(({ value, type }) => value || type).join(`,`),
+                }),
+                expectedMap: [
+                    { type: `pseudo_class`, value: `a`, parents: `selector` },
+                    {
+                        type: `pseudo_class`,
+                        value: `a1`,
+                        parents: `selector,a,selector`,
+                    },
+                    {
+                        type: `pseudo_class`,
+                        value: `a2`,
+                        parents: `selector,a,selector`,
+                    },
+                    { type: `pseudo_class`, value: `b`, parents: `selector` },
+                    {
+                        type: `pseudo_class`,
+                        value: `b1`,
+                        parents: `selector,b,selector`,
+                    },
+                ],
+            });
+        });
     });
-  });
 });
diff --git a/packages/css-selector-parser/test/selector-parser.spec.ts b/packages/css-selector-parser/test/selector-parser.spec.ts
index 1fdc8377..a4888823 100644
--- a/packages/css-selector-parser/test/selector-parser.spec.ts
+++ b/packages/css-selector-parser/test/selector-parser.spec.ts
@@ -1,3507 +1,3504 @@
-import { test, createNode } from "./test-kit/parsing";
+import { test, createNode } from './test-kit/parsing';
 
 describe(`selector-parser`, () => {
-  describe(`selector types`, () => {
-    it(`*`, () => {
-      test(`*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 1,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`some-element`, () => {
-      test(`some-element`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 12,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `some-element`,
-                start: 0,
-                end: 12,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`someelement`, () => {
-      test(`someelement`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 11,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `someelement`,
-                start: 0,
-                end: 11,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`.classX`, () => {
-      test(`.classX`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 7,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `classX`,
-                start: 0,
-                end: 7,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`#x-id`, () => {
-      test(`#x-id`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `id`,
-                value: `x-id`,
-                start: 0,
-                end: 5,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:pseudo-class-x`, () => {
-      test(`:pseudo-class-x`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `pseudo-class-x`,
-                start: 0,
-                end: 15,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nested-pseudo-class-x()`, () => {
-      test(`:nested-pseudo-class-x()`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 24,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nested-pseudo-class-x`,
-                start: 0,
-                end: 24,
-                nodes: [],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nested-pseudo-class-x(.a)`, () => {
-      test(`:nested-pseudo-class-x(.a)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 26,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nested-pseudo-class-x`,
-                start: 0,
-                end: 26,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 23,
-                    end: 25,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 23,
-                        end: 25,
-                      }),
-                    ],
-                  }),
+    describe(`selector types`, () => {
+        it(`*`, () => {
+            test(`*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 1,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nested-pseudo-class-x(.a, .b)`, () => {
-      test(`:nested-pseudo-class-x(.a, .b)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 30,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nested-pseudo-class-x`,
-                start: 0,
-                end: 30,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 23,
-                    end: 25,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 23,
-                        end: 25,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 26,
-                    end: 29,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `b`,
-                        start: 27,
-                        end: 29,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`some-element`, () => {
+            test(`some-element`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 12,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `some-element`,
+                                start: 0,
+                                end: 12,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`::pseudo-element-x`, () => {
-      test(`::pseudo-element-x`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 18,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `pseudo-element-x`,
-                start: 0,
-                end: 18,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`::pseudo-element-x()`, () => {
-      test(`::pseudo-element-x()`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 20,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `pseudo-element-x`,
-                start: 0,
-                end: 20,
-                nodes: [],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`::pseudo-element-x(.a)`, () => {
-      test(`::pseudo-element-x(.a)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 22,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `pseudo-element-x`,
-                start: 0,
-                end: 22,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 19,
-                    end: 21,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 19,
-                        end: 21,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`someelement`, () => {
+            test(`someelement`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 11,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `someelement`,
+                                start: 0,
+                                end: 11,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`::pseudo-element-x(.a, .b)`, () => {
-      test(`::pseudo-element-x(.a, .b)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 26,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `pseudo-element-x`,
-                start: 0,
-                end: 26,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 19,
-                    end: 21,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 19,
-                        end: 21,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 22,
-                    end: 25,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `b`,
-                        start: 23,
-                        end: 25,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`.classX`, () => {
+            test(`.classX`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 7,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `classX`,
+                                start: 0,
+                                end: 7,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`[attr-x]`, () => {
-      test(`[attr-x]`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `attribute`,
-                value: `attr-x`,
-                start: 0,
-                end: 8,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`[attr-x="attr-value"]`, () => {
-      test(`[attr-x="attr-value"]`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 21,
-            nodes: [
-              createNode({
-                type: `attribute`,
-                value: `attr-x="attr-value"`,
-                start: 0,
-                end: 21,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`[&="&"]`, () => {
-      test(`[&="&"]`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 7,
-            nodes: [
-              createNode({
-                type: `attribute`,
-                value: `&="&"`,
-                start: 0,
-                end: 7,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`&`, () => {
-      test(`&`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 1,
-            nodes: [
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 0,
-                end: 1,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`&&`, () => {
-      test(`&&`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 2,
-            nodes: [
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 1,
-                end: 2,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`nth`, () => {
-    it(`:nth-child()`, () => {
-      test(`:nth-child()`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 12,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 12,
-                nodes: [],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n)`, () => {
-      test(`:nth-child(2n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 14,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 14,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 13,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`#x-id`, () => {
+            test(`#x-id`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `id`,
+                                value: `x-id`,
+                                start: 0,
+                                end: 5,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(-2n)`, () => {
-      test(`:nth-child(-2n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 15,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 14,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `-2n`,
-                        start: 11,
-                        end: 14,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:pseudo-class-x`, () => {
+            test(`:pseudo-class-x`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 15,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `pseudo-class-x`,
+                                start: 0,
+                                end: 15,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(+2N)`, () => {
-      test(`:nth-child(+2N)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 15,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 14,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `+2N`,
-                        start: 11,
-                        end: 14,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nested-pseudo-class-x()`, () => {
+            test(`:nested-pseudo-class-x()`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 24,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nested-pseudo-class-x`,
+                                start: 0,
+                                end: 24,
+                                nodes: [],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(-n)`, () => {
-      test(`:nth-child(-n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 14,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 14,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 13,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `-n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nested-pseudo-class-x(.a)`, () => {
+            test(`:nested-pseudo-class-x(.a)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 26,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nested-pseudo-class-x`,
+                                start: 0,
+                                end: 26,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 23,
+                                        end: 25,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 23,
+                                                end: 25,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(+n)`, () => {
-      test(`:nth-child(+n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 14,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 14,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 13,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `+n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nested-pseudo-class-x(.a, .b)`, () => {
+            test(`:nested-pseudo-class-x(.a, .b)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 30,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nested-pseudo-class-x`,
+                                start: 0,
+                                end: 30,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 23,
+                                        end: 25,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 23,
+                                                end: 25,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 26,
+                                        end: 29,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `b`,
+                                                start: 27,
+                                                end: 29,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`::pseudo-element-x`, () => {
+            test(`::pseudo-element-x`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 18,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `pseudo-element-x`,
+                                start: 0,
+                                end: 18,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`::pseudo-element-x()`, () => {
+            test(`::pseudo-element-x()`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 20,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `pseudo-element-x`,
+                                start: 0,
+                                end: 20,
+                                nodes: [],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`::pseudo-element-x(.a)`, () => {
+            test(`::pseudo-element-x(.a)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 22,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `pseudo-element-x`,
+                                start: 0,
+                                end: 22,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 19,
+                                        end: 21,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 19,
+                                                end: 21,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`::pseudo-element-x(.a, .b)`, () => {
+            test(`::pseudo-element-x(.a, .b)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 26,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `pseudo-element-x`,
+                                start: 0,
+                                end: 26,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 19,
+                                        end: 21,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 19,
+                                                end: 21,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 22,
+                                        end: 25,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `b`,
+                                                start: 23,
+                                                end: 25,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`[attr-x]`, () => {
+            test(`[attr-x]`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `attribute`,
+                                value: `attr-x`,
+                                start: 0,
+                                end: 8,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`[attr-x="attr-value"]`, () => {
+            test(`[attr-x="attr-value"]`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 21,
+                        nodes: [
+                            createNode({
+                                type: `attribute`,
+                                value: `attr-x="attr-value"`,
+                                start: 0,
+                                end: 21,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`[&="&"]`, () => {
+            test(`[&="&"]`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 7,
+                        nodes: [
+                            createNode({
+                                type: `attribute`,
+                                value: `&="&"`,
+                                start: 0,
+                                end: 7,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
+        it(`&`, () => {
+            test(`&`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 1,
+                        nodes: [
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 0,
+                                end: 1,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`&&`, () => {
+            test(`&&`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 2,
+                        nodes: [
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 1,
+                                end: 2,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
     });
-    it(`:nth-child(n)`, () => {
-      test(`:nth-child(n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 13,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 13,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 12,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `n`,
-                        start: 11,
+    describe(`nth`, () => {
+        it(`:nth-child()`, () => {
+            test(`:nth-child()`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 12,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 12,
+                                nodes: [],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(odd)`, () => {
-      test(`:nth-child(odd)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 15,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 14,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `odd`,
-                        start: 11,
+            });
+        });
+        it(`:nth-child(2n)`, () => {
+            test(`:nth-child(2n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 14,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 14,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 13,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(even)`, () => {
-      test(`:nth-child(even)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 16,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 16,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 15,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `even`,
-                        start: 11,
+            });
+        });
+        it(`:nth-child(-2n)`, () => {
+            test(`:nth-child(-2n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 15,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 15,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 14,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `-2n`,
+                                                start: 11,
+                                                end: 14,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n-3)`, () => {
-      test(`:nth-child(2n-3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 16,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 16,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 15,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `-3`,
-                        start: 13,
+            });
+        });
+        it(`:nth-child(+2N)`, () => {
+            test(`:nth-child(+2N)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 15,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 15,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 14,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `+2N`,
+                                                start: 11,
+                                                end: 14,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n+3)`, () => {
-      test(`:nth-child(2n+3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 16,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 16,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 15,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `+3`,
-                        start: 13,
-                        end: 15,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(-n)`, () => {
+            test(`:nth-child(-n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 14,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 14,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 13,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `-n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(3)`, () => {
-      test(`:nth-child(3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 13,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 13,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 12,
-                    nodes: [
-                      createNode({
-                        type: `nth_offset`,
-                        value: `3`,
-                        start: 11,
-                        end: 12,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(+n)`, () => {
+            test(`:nth-child(+n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 14,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 14,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 13,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `+n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n- 3)`, () => {
-      test(`:nth-child(2n- 3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 17,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 17,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
+            });
+        });
+        it(`:nth-child(n)`, () => {
+            test(`:nth-child(n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 13,
-                      }),
-                      createNode({
-                        type: `nth_dash`,
-                        value: `-`,
-                        start: 13,
-                        end: 15,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `3`,
-                        start: 15,
-                        end: 16,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 13,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 12,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `n`,
+                                                start: 11,
+                                                end: 12,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n+ 3)`, () => {
-      test(`:nth-child(2n+ 3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 17,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 17,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                      createNode({
-                        type: `nth_dash`,
-                        value: `+`,
-                        start: 13,
+            });
+        });
+        it(`:nth-child(odd)`, () => {
+            test(`:nth-child(odd)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 15,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `3`,
-                        start: 15,
-                        end: 16,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 15,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 14,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `odd`,
+                                                start: 11,
+                                                end: 14,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n - 3)`, () => {
-      test(`:nth-child(2n - 3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 18,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 18,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 17,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 14,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_dash`,
-                        value: `-`,
-                        start: 14,
+            });
+        });
+        it(`:nth-child(even)`, () => {
+            test(`:nth-child(even)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 16,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `3`,
-                        start: 16,
-                        end: 17,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 16,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 15,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `even`,
+                                                start: 11,
+                                                end: 15,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n + 3)`, () => {
-      test(`:nth-child(2n + 3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 18,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 18,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 17,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 14,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_dash`,
-                        value: `+`,
-                        start: 14,
+            });
+        });
+        it(`:nth-child(2n-3)`, () => {
+            test(`:nth-child(2n-3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 16,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `3`,
-                        start: 16,
-                        end: 17,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 16,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 15,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `-3`,
+                                                start: 13,
+                                                end: 15,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n + 3 of div.klass)`, () => {
-      test(`:nth-child(2n + 3 of div.klass)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 31,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 31,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 20,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 14,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_dash`,
-                        value: `+`,
-                        start: 14,
+            });
+        });
+        it(`:nth-child(2n+3)`, () => {
+            test(`:nth-child(2n+3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 16,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `3`,
-                        start: 16,
-                        end: 18,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_of`,
-                        value: `of`,
-                        start: 18,
-                        end: 20,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 20,
-                    end: 30,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `type`,
-                        value: `div`,
-                        start: 21,
-                        end: 24,
-                      }),
-                      createNode({
-                        type: `class`,
-                        value: `klass`,
-                        start: 24,
-                        end: 30,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 16,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 15,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `+3`,
+                                                start: 13,
+                                                end: 15,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n of html|div)`, () => {
-      test(`:nth-child(2n of html|div)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 26,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 26,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 14,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_of`,
-                        value: `of`,
-                        start: 14,
+            });
+        });
+        it(`:nth-child(3)`, () => {
+            test(`:nth-child(3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 13,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 13,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 12,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `3`,
+                                                start: 11,
+                                                end: 12,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n- 3)`, () => {
+            test(`:nth-child(2n- 3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 17,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 17,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `-`,
+                                                start: 13,
+                                                end: 15,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `3`,
+                                                start: 15,
+                                                end: 16,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n+ 3)`, () => {
+            test(`:nth-child(2n+ 3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 17,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 17,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `+`,
+                                                start: 13,
+                                                end: 15,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `3`,
+                                                start: 15,
+                                                end: 16,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n - 3)`, () => {
+            test(`:nth-child(2n - 3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 18,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 18,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 17,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 14,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `-`,
+                                                start: 14,
+                                                end: 16,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `3`,
+                                                start: 16,
+                                                end: 17,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n + 3)`, () => {
+            test(`:nth-child(2n + 3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 18,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 18,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 17,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 14,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `+`,
+                                                start: 14,
+                                                end: 16,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `3`,
+                                                start: 16,
+                                                end: 17,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n + 3 of div.klass)`, () => {
+            test(`:nth-child(2n + 3 of div.klass)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 31,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 31,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 20,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 14,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `+`,
+                                                start: 14,
+                                                end: 16,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `3`,
+                                                start: 16,
+                                                end: 18,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_of`,
+                                                value: `of`,
+                                                start: 18,
+                                                end: 20,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 20,
+                                        end: 30,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `type`,
+                                                value: `div`,
+                                                start: 21,
+                                                end: 24,
+                                            }),
+                                            createNode({
+                                                type: `class`,
+                                                value: `klass`,
+                                                start: 24,
+                                                end: 30,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n of html|div)`, () => {
+            test(`:nth-child(2n of html|div)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 26,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 26,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 14,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_of`,
+                                                value: `of`,
+                                                start: 14,
+                                                end: 16,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 16,
+                                        end: 25,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `type`,
+                                                value: `div`,
+                                                start: 17,
+                                                end: 25,
+                                                namespace: {
+                                                    value: `html`,
+                                                    beforeComments: [],
+                                                    afterComments: [],
+                                                },
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n of div, span)`, () => {
+            test(`:nth-child(2n of div, span)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 27,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 27,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 14,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_of`,
+                                                value: `of`,
+                                                start: 14,
+                                                end: 16,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 16,
+                                        end: 20,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `type`,
+                                                value: `div`,
+                                                start: 17,
+                                                end: 20,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 21,
+                                        end: 26,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `type`,
+                                                value: `span`,
+                                                start: 22,
+                                                end: 26,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-last-child(2n)`, () => {
+            test(`:nth-last-child(2n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 19,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-last-child`,
+                                start: 0,
+                                end: 19,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 16,
+                                        end: 18,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 16,
+                                                end: 18,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-of-type(2n)`, () => {
+            test(`:nth-of-type(2n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 16,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 16,
-                    end: 25,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `type`,
-                        value: `div`,
-                        start: 17,
-                        end: 25,
-                        namespace: {
-                          value: `html`,
-                          beforeComments: [],
-                          afterComments: [],
-                        },
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-of-type`,
+                                start: 0,
+                                end: 16,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 13,
+                                        end: 15,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 13,
+                                                end: 15,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-last-of-type(2n)`, () => {
+            test(`:nth-last-of-type(2n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 21,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-last-of-type`,
+                                start: 0,
+                                end: 21,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 18,
+                                        end: 20,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 18,
+                                                end: 20,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child( 2n)`, () => {
+            test(`:nth-child( 2n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 15,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 15,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 14,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 12,
+                                                end: 14,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
     });
-    it(`:nth-child(2n of div, span)`, () => {
-      test(`:nth-child(2n of div, span)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 27,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 27,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 14,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_of`,
-                        value: `of`,
-                        start: 14,
-                        end: 16,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 16,
-                    end: 20,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `type`,
-                        value: `div`,
-                        start: 17,
+    describe(`namespace`, () => {
+        it(`ns|div`, () => {
+            test(`ns|div`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 6,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 0,
+                                end: 6,
+                                namespace: {
+                                    value: `ns`,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*|div`, () => {
+            test(`*|div`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 0,
+                                end: 5,
+                                namespace: {
+                                    value: `*`,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`|div`, () => {
+            test(`|div`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 4,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 0,
+                                end: 4,
+                                namespace: {
+                                    value: ``,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`ns|*`, () => {
+            test(`ns|*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 4,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 4,
+                                namespace: {
+                                    value: `ns`,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+    });
+    describe(`nesting (not-native)`, () => {
+        it(`div(:hover)`, () => {
+            test(`div(:hover)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 11,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 0,
+                                end: 11,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 4,
+                                        end: 10,
+                                        nodes: [
+                                            createNode({
+                                                type: `pseudo_class`,
+                                                value: `hover`,
+                                                start: 4,
+                                                end: 10,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`#id(:hover)`, () => {
+            test(`#id(:hover)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 11,
+                        nodes: [
+                            createNode({
+                                type: `id`,
+                                value: `id`,
+                                start: 0,
+                                end: 11,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 4,
+                                        end: 10,
+                                        nodes: [
+                                            createNode({
+                                                type: `pseudo_class`,
+                                                value: `hover`,
+                                                start: 4,
+                                                end: 10,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`.a(:hover)`, () => {
+            test(`.a(:hover)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 10,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 10,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 3,
+                                        end: 9,
+                                        nodes: [
+                                            createNode({
+                                                type: `pseudo_class`,
+                                                value: `hover`,
+                                                start: 3,
+                                                end: 9,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`[attr="val"](:hover)`, () => {
+            test(`[attr="val"](:hover)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 20,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 21,
-                    end: 26,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `type`,
-                        value: `span`,
-                        start: 22,
-                        end: 26,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `attribute`,
+                                value: `attr="val"`,
+                                start: 0,
+                                end: 20,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 13,
+                                        end: 19,
+                                        nodes: [
+                                            createNode({
+                                                type: `pseudo_class`,
+                                                value: `hover`,
+                                                start: 13,
+                                                end: 19,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`&(:hover)`, () => {
+            test(`&(:hover)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 9,
+                        nodes: [
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 0,
+                                end: 9,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 2,
+                                        end: 8,
+                                        nodes: [
+                                            createNode({
+                                                type: `pseudo_class`,
+                                                value: `hover`,
+                                                start: 2,
+                                                end: 8,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
     });
-    it(`:nth-last-child(2n)`, () => {
-      test(`:nth-last-child(2n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 19,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-last-child`,
-                start: 0,
-                end: 19,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 16,
-                    end: 18,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 16,
+    describe(`comments`, () => {
+        it(`/* comment  */`, () => {
+            test(`/* comment  */`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 14,
+                        nodes: [
+                            createNode({
+                                type: `comment`,
+                                value: `/* comment  */`,
+                                start: 0,
+                                end: 14,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`./*comment1???*//*???comment2*/classX`, () => {
+            test(`./*comment1???*//*???comment2*/classX`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 37,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `classX`,
+                                start: 0,
+                                end: 37,
+                                dotComments: [
+                                    createNode({
+                                        type: `comment`,
+                                        value: `/*comment1???*/`,
+                                        start: 1,
+                                        end: 16,
+                                    }),
+                                    createNode({
+                                        type: `comment`,
+                                        value: `/*???comment2*/`,
+                                        start: 16,
+                                        end: 31,
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:/*comment1???*//*???comment2*/pseudo-class`, () => {
+            test(`:/*comment1???*//*???comment2*/pseudo-class`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 43,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `pseudo-class`,
+                                start: 0,
+                                end: 43,
+                                colonComments: [
+                                    createNode({
+                                        type: `comment`,
+                                        value: `/*comment1???*/`,
+                                        start: 1,
+                                        end: 16,
+                                    }),
+                                    createNode({
+                                        type: `comment`,
+                                        value: `/*???comment2*/`,
+                                        start: 16,
+                                        end: 31,
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:/*c1*//*c2*/:/*c3*//*c4*/pseudo-element`, () => {
+            test(`:/*c1*//*c2*/:/*c3*//*c4*/pseudo-element`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 40,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `pseudo-element`,
+                                start: 0,
+                                end: 40,
+                                colonComments: {
+                                    first: [
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c1*/`,
+                                            start: 1,
+                                            end: 7,
+                                        }),
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c2*/`,
+                                            start: 7,
+                                            end: 13,
+                                        }),
+                                    ],
+                                    second: [
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c3*/`,
+                                            start: 14,
+                                            end: 20,
+                                        }),
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c4*/`,
+                                            start: 20,
+                                            end: 26,
+                                        }),
+                                    ],
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*+/*c1*/+*`, () => {
+            test(`*+/*c1*/+*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 10,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 2,
+                                end: 8,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 8,
+                                end: 9,
+                                invalid: true,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 9,
+                                end: 10,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*+/*c1*/  *`, () => {
+            test(`*+/*c1*/  *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 11,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 2,
+                                end: 10,
+                                after: `  `,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 10,
+                                end: 11,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*+ /*c1*/ /*c2*/ *`, () => {
+            test(`*+ /*c1*/ /*c2*/ *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 18,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 3,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 3,
+                                end: 10,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c2*/`,
+                                start: 10,
+                                end: 17,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 17,
+                                end: 18,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*/*c1*//*c2*/|/*c3*//*c4*/div`, () => {
+            test(`*/*c1*//*c2*/|/*c3*//*c4*/div`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 29,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 0,
+                                end: 29,
+                                namespace: {
+                                    value: `*`,
+                                    beforeComments: [
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c1*/`,
+                                            start: 1,
+                                            end: 7,
+                                        }),
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c2*/`,
+                                            start: 7,
+                                            end: 13,
+                                        }),
+                                    ],
+                                    afterComments: [
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c3*/`,
+                                            start: 14,
+                                            end: 20,
+                                        }),
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c4*/`,
+                                            start: 20,
+                                            end: 26,
+                                        }),
+                                    ],
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(/*c0*/ -5n /*c1*/ - /*c2*/ 10 /*c3*/ of /*c4*/div/*c5*/)`, () => {
+            test(`:nth-child(/*c0*/ -5n /*c1*/ - /*c2*/ 10 /*c3*/ of /*c4*/div/*c5*/)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 67,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 67,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 50,
+                                        nodes: [
+                                            createNode({
+                                                type: `comment`,
+                                                value: `/*c0*/`,
+                                                start: 11,
+                                                end: 18,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `-5n`,
+                                                start: 18,
+                                                end: 22,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `comment`,
+                                                value: `/*c1*/`,
+                                                start: 22,
+                                                end: 29,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `-`,
+                                                start: 29,
+                                                end: 31,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `comment`,
+                                                value: `/*c2*/`,
+                                                start: 31,
+                                                end: 38,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `10`,
+                                                start: 38,
+                                                end: 41,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `comment`,
+                                                value: `/*c3*/`,
+                                                start: 41,
+                                                end: 48,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_of`,
+                                                value: `of`,
+                                                start: 48,
+                                                end: 50,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 50,
+                                        end: 66,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `comment`,
+                                                value: `/*c4*/`,
+                                                start: 51,
+                                                end: 57,
+                                            }),
+                                            createNode({
+                                                type: `type`,
+                                                value: `div`,
+                                                start: 57,
+                                                end: 60,
+                                            }),
+                                            createNode({
+                                                type: `comment`,
+                                                value: `/*c5*/`,
+                                                start: 60,
+                                                end: 66,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+    });
+    describe(`combinators`, () => {
+        it(`* .nested-class`, () => {
+            test(`* .nested-class`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 15,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `space`,
+                                value: ` `,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `nested-class`,
+                                start: 2,
+                                end: 15,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*+.adjacent-class`, () => {
+            test(`*+.adjacent-class`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 17,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `adjacent-class`,
+                                start: 2,
+                                end: 17,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*~.proceeding-sibling-class`, () => {
+            test(`*~.proceeding-sibling-class`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 27,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `~`,
+                                value: `~`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `proceeding-sibling-class`,
+                                start: 2,
+                                end: 27,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*>.direct-child-class`, () => {
+            test(`*>.direct-child-class`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 21,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `>`,
+                                value: `>`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `direct-child-class`,
+                                start: 2,
+                                end: 21,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*++*`, () => {
+            test(`*++*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 4,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 2,
+                                end: 3,
+                                invalid: true,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 3,
+                                end: 4,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`* ++*`, () => {
+            test(`* ++*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 3,
+                                before: ` `,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 3,
+                                end: 4,
+                                invalid: true,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 4,
+                                end: 5,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
+        it(`*+*+*`, () => {
+            test(`*+*+*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 2,
+                                end: 3,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 3,
+                                end: 4,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 4,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*   *`, () => {
+            test(`*   *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `space`,
+                                value: ` `,
+                                start: 1,
+                                end: 4,
+                                after: `  `,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 4,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`* + *`, () => {
+            test(`* + *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 4,
+                                before: ` `,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 4,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*+~> *`, () => {
+            test(`*+~> *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 6,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `~`,
+                                value: `~`,
+                                start: 2,
+                                end: 3,
+                                invalid: true,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `>`,
+                                value: `>`,
+                                start: 3,
+                                end: 5,
+                                after: ` `,
+                                invalid: true,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 5,
+                                end: 6,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`* /*c1*/ + *`, () => {
+            test(`* /*c1*/ + *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 12,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 1,
+                                end: 9,
+                                before: ` `,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 9,
+                                end: 11,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 11,
+                                end: 12,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(` /*c1*/ + *`, () => {
+            test(` /*c1*/ + *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 11,
+                        before: ` `,
+                        nodes: [
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 1,
+                                end: 8,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 8,
+                                end: 10,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 10,
+                                end: 11,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
     });
-    it(`:nth-of-type(2n)`, () => {
-      test(`:nth-of-type(2n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 16,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-of-type`,
-                start: 0,
-                end: 16,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 13,
-                    end: 15,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 13,
+    describe(`invalid`, () => {
+        it(`:pseudo(`, () => {
+            test(`:pseudo(`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `pseudo`,
+                                start: 0,
+                                end: 7,
+                            }),
+                            createNode({
+                                type: `invalid`,
+                                value: `(`,
+                                start: 7,
+                                end: 8,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`::pseudo(`, () => {
+            test(`::pseudo(`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 9,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `pseudo`,
+                                start: 0,
+                                end: 8,
+                            }),
+                            createNode({
+                                type: `invalid`,
+                                value: `(`,
+                                start: 8,
+                                end: 9,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`.ns|*`, () => {
+            test(`.ns|*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `ns`,
+                                start: 0,
+                                end: 3,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 3,
+                                end: 5,
+                                namespace: {
+                                    value: ``,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                    invalid: `namespace`,
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`ns|`, () => {
+            test(`ns|`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 3,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: ``,
+                                start: 0,
+                                end: 3,
+                                namespace: {
+                                    value: `ns`,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                    invalid: `target`,
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:x|`, () => {
+            test(`:x|`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 3,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `x`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `type`,
+                                value: ``,
+                                start: 2,
+                                end: 3,
+                                namespace: {
+                                    value: ``,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                    invalid: `namespace,target`,
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`ns|||div`, () => {
+            test(`ns|||div`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: ``,
+                                start: 0,
+                                end: 3,
+                                namespace: {
+                                    value: `ns`,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                    invalid: `target`,
+                                },
+                            }),
+                            createNode({
+                                type: `type`,
+                                value: ``,
+                                start: 3,
+                                end: 4,
+                                namespace: {
+                                    value: ``,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                    invalid: `namespace,target`,
+                                },
+                            }),
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 4,
+                                end: 8,
+                                namespace: {
+                                    value: ``,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                    invalid: `namespace`,
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(-3x)`, () => {
+            test(`:nth-child(-3x)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 15,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 15,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 14,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `-3x`,
+                                                start: 11,
+                                                end: 14,
+                                                invalid: true,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-last-of-type(2n)`, () => {
-      test(`:nth-last-of-type(2n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 21,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-last-of-type`,
-                start: 0,
-                end: 21,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 18,
-                    end: 20,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 18,
-                        end: 20,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(-odd)`, () => {
+            test(`:nth-child(-odd)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 16,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 16,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 15,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `-odd`,
+                                                start: 11,
+                                                end: 15,
+                                                invalid: true,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child( 2n)`, () => {
-      test(`:nth-child( 2n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 15,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 14,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 12,
-                        end: 14,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(+even)`, () => {
+            test(`:nth-child(+even)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 17,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 17,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `+even`,
+                                                start: 11,
+                                                end: 16,
+                                                invalid: true,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`namespace`, () => {
-    it(`ns|div`, () => {
-      test(`ns|div`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 6,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 0,
-                end: 6,
-                namespace: {
-                  value: `ns`,
-                  beforeComments: [],
-                  afterComments: [],
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*|div`, () => {
-      test(`*|div`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 0,
-                end: 5,
-                namespace: {
-                  value: `*`,
-                  beforeComments: [],
-                  afterComments: [],
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`|div`, () => {
-      test(`|div`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 4,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 0,
-                end: 4,
-                namespace: {
-                  value: ``,
-                  beforeComments: [],
-                  afterComments: [],
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`ns|*`, () => {
-      test(`ns|*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 4,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 4,
-                namespace: {
-                  value: `ns`,
-                  beforeComments: [],
-                  afterComments: [],
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`nesting (not-native)`, () => {
-    it(`div(:hover)`, () => {
-      test(`div(:hover)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 11,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 0,
-                end: 11,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 4,
-                    end: 10,
-                    nodes: [
-                      createNode({
-                        type: `pseudo_class`,
-                        value: `hover`,
-                        start: 4,
-                        end: 10,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(5n-3n)`, () => {
+            test(`:nth-child(5n-3n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 17,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 17,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `5n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `-3n`,
+                                                start: 13,
+                                                end: 16,
+                                                invalid: true,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`#id(:hover)`, () => {
-      test(`#id(:hover)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 11,
-            nodes: [
-              createNode({
-                type: `id`,
-                value: `id`,
-                start: 0,
-                end: 11,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 4,
-                    end: 10,
-                    nodes: [
-                      createNode({
-                        type: `pseudo_class`,
-                        value: `hover`,
-                        start: 4,
-                        end: 10,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(2n+3 off div)`, () => {
+            test(`:nth-child(2n+3 off div)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 24,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 24,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 19,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `+3`,
+                                                start: 13,
+                                                end: 16,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_of`,
+                                                value: `off`,
+                                                start: 16,
+                                                end: 19,
+                                                invalid: true,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 19,
+                                        end: 23,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `type`,
+                                                value: `div`,
+                                                start: 20,
+                                                end: 23,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`.a(:hover)`, () => {
-      test(`.a(:hover)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 10,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 0,
-                end: 10,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 3,
-                    end: 9,
-                    nodes: [
-                      createNode({
-                        type: `pseudo_class`,
-                        value: `hover`,
-                        start: 3,
-                        end: 9,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(- 5)`, () => {
+            test(`:nth-child(- 5)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 15,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 15,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 14,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `-`,
+                                                start: 11,
+                                                end: 13,
+                                                after: ` `,
+                                                invalid: true,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `5`,
+                                                start: 13,
+                                                end: 14,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`[attr="val"](:hover)`, () => {
-      test(`[attr="val"](:hover)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 20,
-            nodes: [
-              createNode({
-                type: `attribute`,
-                value: `attr="val"`,
-                start: 0,
-                end: 20,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 13,
-                    end: 19,
-                    nodes: [
-                      createNode({
-                        type: `pseudo_class`,
-                        value: `hover`,
-                        start: 13,
+            });
+        });
+        it(`:nth-child(5n - +3)`, () => {
+            test(`:nth-child(5n - +3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 19,
-                      }),
-                    ],
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`&(:hover)`, () => {
-      test(`&(:hover)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 9,
-            nodes: [
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 0,
-                end: 9,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 2,
-                    end: 8,
-                    nodes: [
-                      createNode({
-                        type: `pseudo_class`,
-                        value: `hover`,
-                        start: 2,
-                        end: 8,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 19,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 18,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `5n`,
+                                                start: 11,
+                                                end: 14,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `-`,
+                                                start: 14,
+                                                end: 16,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `+3`,
+                                                start: 16,
+                                                end: 18,
+                                                invalid: true,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`comments`, () => {
-    it(`/* comment  */`, () => {
-      test(`/* comment  */`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 14,
-            nodes: [
-              createNode({
-                type: `comment`,
-                value: `/* comment  */`,
-                start: 0,
-                end: 14,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`./*comment1???*//*???comment2*/classX`, () => {
-      test(`./*comment1???*//*???comment2*/classX`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 37,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `classX`,
-                start: 0,
-                end: 37,
-                dotComments: [
-                  createNode({
-                    type: `comment`,
-                    value: `/*comment1???*/`,
-                    start: 1,
-                    end: 16,
-                  }),
-                  createNode({
-                    type: `comment`,
-                    value: `/*???comment2*/`,
-                    start: 16,
-                    end: 31,
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:/*comment1???*//*???comment2*/pseudo-class`, () => {
-      test(`:/*comment1???*//*???comment2*/pseudo-class`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 43,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `pseudo-class`,
-                start: 0,
-                end: 43,
-                colonComments: [
-                  createNode({
-                    type: `comment`,
-                    value: `/*comment1???*/`,
-                    start: 1,
-                    end: 16,
-                  }),
-                  createNode({
-                    type: `comment`,
-                    value: `/*???comment2*/`,
-                    start: 16,
-                    end: 31,
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:/*c1*//*c2*/:/*c3*//*c4*/pseudo-element`, () => {
-      test(`:/*c1*//*c2*/:/*c3*//*c4*/pseudo-element`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 40,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `pseudo-element`,
-                start: 0,
-                end: 40,
-                colonComments: {
-                  first: [
-                    createNode({
-                      type: `comment`,
-                      value: `/*c1*/`,
-                      start: 1,
-                      end: 7,
-                    }),
-                    createNode({
-                      type: `comment`,
-                      value: `/*c2*/`,
-                      start: 7,
-                      end: 13,
-                    }),
-                  ],
-                  second: [
-                    createNode({
-                      type: `comment`,
-                      value: `/*c3*/`,
-                      start: 14,
-                      end: 20,
-                    }),
-                    createNode({
-                      type: `comment`,
-                      value: `/*c4*/`,
-                      start: 20,
-                      end: 26,
-                    }),
-                  ],
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*+/*c1*/+*`, () => {
-      test(`*+/*c1*/+*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 10,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
-                start: 2,
-                end: 8,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 8,
-                end: 9,
-                invalid: true,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 9,
-                end: 10,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*+/*c1*/  *`, () => {
-      test(`*+/*c1*/  *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 11,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
-                start: 2,
-                end: 10,
-                after: `  `,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 10,
-                end: 11,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*+ /*c1*/ /*c2*/ *`, () => {
-      test(`*+ /*c1*/ /*c2*/ *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 18,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 3,
-                after: ` `,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
-                start: 3,
-                end: 10,
-                after: ` `,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c2*/`,
-                start: 10,
-                end: 17,
-                after: ` `,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 17,
-                end: 18,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*/*c1*//*c2*/|/*c3*//*c4*/div`, () => {
-      test(`*/*c1*//*c2*/|/*c3*//*c4*/div`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 29,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 0,
-                end: 29,
-                namespace: {
-                  value: `*`,
-                  beforeComments: [
-                    createNode({
-                      type: `comment`,
-                      value: `/*c1*/`,
-                      start: 1,
-                      end: 7,
-                    }),
-                    createNode({
-                      type: `comment`,
-                      value: `/*c2*/`,
-                      start: 7,
-                      end: 13,
-                    }),
-                  ],
-                  afterComments: [
-                    createNode({
-                      type: `comment`,
-                      value: `/*c3*/`,
-                      start: 14,
-                      end: 20,
-                    }),
-                    createNode({
-                      type: `comment`,
-                      value: `/*c4*/`,
-                      start: 20,
-                      end: 26,
-                    }),
-                  ],
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(/*c0*/ -5n /*c1*/ - /*c2*/ 10 /*c3*/ of /*c4*/div/*c5*/)`, () => {
-      test(
-        `:nth-child(/*c0*/ -5n /*c1*/ - /*c2*/ 10 /*c3*/ of /*c4*/div/*c5*/)`,
-        {
-          expectedAst: [
-            createNode({
-              type: `selector`,
-              start: 0,
-              end: 67,
-              nodes: [
-                createNode({
-                  type: `pseudo_class`,
-                  value: `nth-child`,
-                  start: 0,
-                  end: 67,
-                  nodes: [
-                    createNode({
-                      type: `nth`,
-                      start: 11,
-                      end: 50,
-                      nodes: [
-                        createNode({
-                          type: `comment`,
-                          value: `/*c0*/`,
-                          start: 11,
-                          end: 18,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `nth_step`,
-                          value: `-5n`,
-                          start: 18,
-                          end: 22,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `comment`,
-                          value: `/*c1*/`,
-                          start: 22,
-                          end: 29,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `nth_dash`,
-                          value: `-`,
-                          start: 29,
-                          end: 31,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `comment`,
-                          value: `/*c2*/`,
-                          start: 31,
-                          end: 38,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `nth_offset`,
-                          value: `10`,
-                          start: 38,
-                          end: 41,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `comment`,
-                          value: `/*c3*/`,
-                          start: 41,
-                          end: 48,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `nth_of`,
-                          value: `of`,
-                          start: 48,
-                          end: 50,
-                        }),
-                      ],
+            });
+        });
+        it(`&|&`, () => {
+            test(`&|&`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 3,
+                        nodes: [
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `type`,
+                                value: ``,
+                                start: 1,
+                                end: 2,
+                                namespace: {
+                                    value: ``,
+                                    invalid: `namespace,target`,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                },
+                            }),
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 2,
+                                end: 3,
+                            }),
+                        ],
                     }),
+                ],
+            });
+        });
+        it(`.x{}`, () => {
+            test(`.x{}`, {
+                expectedAst: [
                     createNode({
-                      type: `selector`,
-                      start: 50,
-                      end: 66,
-                      before: ` `,
-                      nodes: [
-                        createNode({
-                          type: `comment`,
-                          value: `/*c4*/`,
-                          start: 51,
-                          end: 57,
-                        }),
-                        createNode({
-                          type: `type`,
-                          value: `div`,
-                          start: 57,
-                          end: 60,
-                        }),
-                        createNode({
-                          type: `comment`,
-                          value: `/*c5*/`,
-                          start: 60,
-                          end: 66,
-                        }),
-                      ],
-                    }),
-                  ],
-                }),
-              ],
-            }),
-          ],
-        }
-      );
-    });
-  });
-  describe(`combinators`, () => {
-    it(`* .nested-class`, () => {
-      test(`* .nested-class`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `space`,
-                value: ` `,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `nested-class`,
-                start: 2,
-                end: 15,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*+.adjacent-class`, () => {
-      test(`*+.adjacent-class`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 17,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `adjacent-class`,
-                start: 2,
-                end: 17,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*~.proceeding-sibling-class`, () => {
-      test(`*~.proceeding-sibling-class`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 27,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `~`,
-                value: `~`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `proceeding-sibling-class`,
-                start: 2,
-                end: 27,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*>.direct-child-class`, () => {
-      test(`*>.direct-child-class`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 21,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `>`,
-                value: `>`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `direct-child-class`,
-                start: 2,
-                end: 21,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*++*`, () => {
-      test(`*++*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 4,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 2,
-                end: 3,
-                invalid: true,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 3,
-                end: 4,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`* ++*`, () => {
-      test(`* ++*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 3,
-                before: ` `,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 3,
-                end: 4,
-                invalid: true,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 4,
-                end: 5,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*+*+*`, () => {
-      test(`*+*+*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 2,
-                end: 3,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 3,
-                end: 4,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 4,
-                end: 5,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*   *`, () => {
-      test(`*   *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `space`,
-                value: ` `,
-                start: 1,
-                end: 4,
-                after: `  `,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 4,
-                end: 5,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`* + *`, () => {
-      test(`* + *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 4,
-                before: ` `,
-                after: ` `,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 4,
-                end: 5,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*+~> *`, () => {
-      test(`*+~> *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 6,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `~`,
-                value: `~`,
-                start: 2,
-                end: 3,
-                invalid: true,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `>`,
-                value: `>`,
-                start: 3,
-                end: 5,
-                after: ` `,
-                invalid: true,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 5,
-                end: 6,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`* /*c1*/ + *`, () => {
-      test(`* /*c1*/ + *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 12,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
-                start: 1,
-                end: 9,
-                before: ` `,
-                after: ` `,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 9,
-                end: 11,
-                after: ` `,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 11,
-                end: 12,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(` /*c1*/ + *`, () => {
-      test(` /*c1*/ + *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 11,
-            before: ` `,
-            nodes: [
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
-                start: 1,
-                end: 8,
-                after: ` `,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 8,
-                end: 10,
-                after: ` `,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 10,
-                end: 11,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`invalid`, () => {
-    it(`:pseudo(`, () => {
-      test(`:pseudo(`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `pseudo`,
-                start: 0,
-                end: 7,
-              }),
-              createNode({
-                type: `invalid`,
-                value: `(`,
-                start: 7,
-                end: 8,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`::pseudo(`, () => {
-      test(`::pseudo(`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 9,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `pseudo`,
-                start: 0,
-                end: 8,
-              }),
-              createNode({
-                type: `invalid`,
-                value: `(`,
-                start: 8,
-                end: 9,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`.ns|*`, () => {
-      test(`.ns|*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `ns`,
-                start: 0,
-                end: 3,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 3,
-                end: 5,
-                namespace: {
-                  value: ``,
-                  beforeComments: [],
-                  afterComments: [],
-                  invalid: `namespace`,
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`ns|`, () => {
-      test(`ns|`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 3,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: ``,
-                start: 0,
-                end: 3,
-                namespace: {
-                  value: `ns`,
-                  beforeComments: [],
-                  afterComments: [],
-                  invalid: `target`,
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:x|`, () => {
-      test(`:x|`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 3,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `x`,
-                start: 0,
-                end: 2,
-              }),
-              createNode({
-                type: `type`,
-                value: ``,
-                start: 2,
-                end: 3,
-                namespace: {
-                  value: ``,
-                  beforeComments: [],
-                  afterComments: [],
-                  invalid: `namespace,target`,
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`ns|||div`, () => {
-      test(`ns|||div`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: ``,
-                start: 0,
-                end: 3,
-                namespace: {
-                  value: `ns`,
-                  beforeComments: [],
-                  afterComments: [],
-                  invalid: `target`,
-                },
-              }),
-              createNode({
-                type: `type`,
-                value: ``,
-                start: 3,
-                end: 4,
-                namespace: {
-                  value: ``,
-                  beforeComments: [],
-                  afterComments: [],
-                  invalid: `namespace,target`,
-                },
-              }),
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 4,
-                end: 8,
-                namespace: {
-                  value: ``,
-                  beforeComments: [],
-                  afterComments: [],
-                  invalid: `namespace`,
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(-3x)`, () => {
-      test(`:nth-child(-3x)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 15,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 14,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `-3x`,
-                        start: 11,
-                        end: 14,
-                        invalid: true,
-                      }),
-                    ],
-                  }),
+                        type: `selector`,
+                        start: 0,
+                        end: 4,
+                        nodes: [
+                            createNode({ type: 'class', value: 'x', start: 0, end: 2 }),
+                            createNode({ type: 'invalid', value: '{', start: 2, end: 3 }),
+                            createNode({ type: 'invalid', value: '}', start: 3, end: 4 }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
     });
-    it(`:nth-child(-odd)`, () => {
-      test(`:nth-child(-odd)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 16,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 16,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 15,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `-odd`,
-                        start: 11,
-                        end: 15,
-                        invalid: true,
-                      }),
-                    ],
-                  }),
+    describe(`spaces`, () => {
+        it(`:p(  .a  ,   .b  )`, () => {
+            test(`:p(  .a  ,   .b  )`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 18,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `p`,
+                                start: 0,
+                                end: 18,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 3,
+                                        end: 9,
+                                        before: `  `,
+                                        after: `  `,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 5,
+                                                end: 7,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 10,
+                                        end: 17,
+                                        before: `   `,
+                                        after: `  `,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `b`,
+                                                start: 13,
+                                                end: 15,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(+even)`, () => {
-      test(`:nth-child(+even)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 17,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 17,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `+even`,
-                        start: 11,
-                        end: 16,
-                        invalid: true,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`::p(  .a  ,   .b  )`, () => {
+            test(`::p(  .a  ,   .b  )`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 19,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `p`,
+                                start: 0,
+                                end: 19,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 4,
+                                        end: 10,
+                                        before: `  `,
+                                        after: `  `,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 6,
+                                                end: 8,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 11,
+                                        end: 18,
+                                        before: `   `,
+                                        after: `  `,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `b`,
+                                                start: 14,
+                                                end: 16,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(5n-3n)`, () => {
-      test(`:nth-child(5n-3n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 17,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 17,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `5n`,
-                        start: 11,
+            });
+        });
+        it(`*    .a  + .b`, () => {
+            test(`*    .a  + .b`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 13,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `-3n`,
-                        start: 13,
-                        end: 16,
-                        invalid: true,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `space`,
+                                value: ` `,
+                                after: `   `,
+                                start: 1,
+                                end: 5,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 5,
+                                end: 7,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                before: `  `,
+                                after: ` `,
+                                start: 7,
+                                end: 11,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 11,
+                                end: 13,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n+3 off div)`, () => {
-      test(`:nth-child(2n+3 off div)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 24,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 24,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 19,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `+3`,
-                        start: 13,
-                        end: 16,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_of`,
-                        value: `off`,
-                        start: 16,
-                        end: 19,
-                        invalid: true,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 19,
-                    end: 23,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `type`,
-                        value: `div`,
-                        start: 20,
-                        end: 23,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(` /*c1*/ .a .b /*c2*/ `, () => {
+            test(` /*c1*/ .a .b /*c2*/ `, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 21,
+                        before: ` `,
+                        nodes: [
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 1,
+                                end: 8,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 8,
+                                end: 10,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `space`,
+                                value: ` `,
+                                start: 10,
+                                end: 11,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 11,
+                                end: 13,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c2*/`,
+                                start: 13,
+                                end: 21,
+                                before: ` `,
+                                after: ` `,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
     });
-    it(`:nth-child(- 5)`, () => {
-      test(`:nth-child(- 5)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 15,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 14,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `-`,
-                        start: 11,
-                        end: 13,
-                        after: ` `,
-                        invalid: true,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `5`,
-                        start: 13,
-                        end: 14,
-                      }),
-                    ],
-                  }),
+    describe(`escaped`, () => {
+        it(`should parse escaped delimiters as part of value`, () => {
+            test(`.classWith\\.dot`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 15,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `classWith\\.dot`,
+                                start: 0,
+                                end: 15,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(5n - +3)`, () => {
-      test(`:nth-child(5n - +3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 19,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 19,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 18,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `5n`,
-                        start: 11,
-                        end: 14,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_dash`,
-                        value: `-`,
-                        start: 14,
-                        end: 16,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `+3`,
-                        start: 16,
-                        end: 18,
-                        invalid: true,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`should parse escaped delimiters (various)`, () => {
+            test(`.a\\.\\[\\]\\(\\)\\,\\*\\|\\:\\#\\>\\~\\+\\{\\}`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 32,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a\\.\\[\\]\\(\\)\\,\\*\\|\\:\\#\\>\\~\\+\\{\\}`,
+                                start: 0,
+                                end: 32,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`&|&`, () => {
-      test(`&|&`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 3,
-            nodes: [
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `type`,
-                value: ``,
-                start: 1,
-                end: 2,
-                namespace: {
-                  value: ``,
-                  invalid: `namespace,target`,
-                  beforeComments: [],
-                  afterComments: [],
-                },
-              }),
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 2,
-                end: 3,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`.x{}`, () => {
-      test(`.x{}`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 4,
-            nodes: [
-              createNode({ type: "class", value: "x", start: 0, end: 2 }),
-              createNode({ type: "invalid", value: "{", start: 2, end: 3 }),
-              createNode({ type: "invalid", value: "}", start: 3, end: 4 }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
+        it(`should parse escaped string delimiters as part of value`, () => {
+            test(`.a\\"\\'`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 6,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a\\"\\'`,
+                                start: 0,
+                                end: 6,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
     });
-  });
-  describe(`spaces`, () => {
-    it(`:p(  .a  ,   .b  )`, () => {
-      test(`:p(  .a  ,   .b  )`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 18,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `p`,
-                start: 0,
-                end: 18,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 3,
-                    end: 9,
-                    before: `  `,
-                    after: `  `,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 5,
+    describe(`combinations`, () => {
+        it(`:a(.b,::d(.e,.f))`, () => {
+            test(`:a(.b,::d(.e,.f))`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 17,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `a`,
+                                start: 0,
+                                end: 17,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 3,
+                                        end: 5,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `b`,
+                                                start: 3,
+                                                end: 5,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 6,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `pseudo_element`,
+                                                value: `d`,
+                                                start: 6,
+                                                end: 16,
+                                                nodes: [
+                                                    createNode({
+                                                        type: `selector`,
+                                                        start: 10,
+                                                        end: 12,
+                                                        nodes: [
+                                                            createNode({
+                                                                type: `class`,
+                                                                value: `e`,
+                                                                start: 10,
+                                                                end: 12,
+                                                            }),
+                                                        ],
+                                                    }),
+                                                    createNode({
+                                                        type: `selector`,
+                                                        start: 13,
+                                                        end: 15,
+                                                        nodes: [
+                                                            createNode({
+                                                                type: `class`,
+                                                                value: `f`,
+                                                                start: 13,
+                                                                end: 15,
+                                                            }),
+                                                        ],
+                                                    }),
+                                                ],
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`* .a+.b`, () => {
+            test(`* .a+.b`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 7,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 10,
-                    end: 17,
-                    before: `   `,
-                    after: `  `,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `b`,
-                        start: 13,
-                        end: 15,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `space`,
+                                value: ` `,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 2,
+                                end: 4,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 4,
+                                end: 5,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 5,
+                                end: 7,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`::p(  .a  ,   .b  )`, () => {
-      test(`::p(  .a  ,   .b  )`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 19,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `p`,
-                start: 0,
-                end: 19,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 4,
-                    end: 10,
-                    before: `  `,
-                    after: `  `,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 6,
-                        end: 8,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 11,
-                    end: 18,
-                    before: `   `,
-                    after: `  `,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `b`,
-                        start: 14,
-                        end: 16,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`.z&div`, () => {
+            test(`.z&div`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 6,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `z`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 2,
+                                end: 3,
+                            }),
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 3,
+                                end: 6,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*    .a  + .b`, () => {
-      test(`*    .a  + .b`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 13,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `space`,
-                value: ` `,
-                after: `   `,
-                start: 1,
-                end: 5,
-              }),
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 5,
-                end: 7,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                before: `  `,
-                after: ` `,
-                start: 7,
-                end: 11,
-              }),
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 11,
-                end: 13,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(` /*c1*/ .a .b /*c2*/ `, () => {
-      test(` /*c1*/ .a .b /*c2*/ `, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 21,
-            before: ` `,
-            nodes: [
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
-                start: 1,
-                end: 8,
-                after: ` `,
-              }),
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 8,
-                end: 10,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `space`,
-                value: ` `,
-                start: 10,
-                end: 11,
-              }),
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 11,
-                end: 13,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c2*/`,
-                start: 13,
-                end: 21,
-                before: ` `,
-                after: ` `,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`escaped`, () => {
-    it(`should parse escaped delimiters as part of value`, () => {
-      test(`.classWith\\.dot`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `classWith\\.dot`,
-                start: 0,
-                end: 15,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`should parse escaped delimiters (various)`, () => {
-      test(`.a\\.\\[\\]\\(\\)\\,\\*\\|\\:\\#\\>\\~\\+\\{\\}`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 32,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a\\.\\[\\]\\(\\)\\,\\*\\|\\:\\#\\>\\~\\+\\{\\}`,
-                start: 0,
-                end: 32,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`should parse escaped string delimiters as part of value`, () => {
-      test(`.a\\"\\'`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 6,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a\\"\\'`,
-                start: 0,
-                end: 6,
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
     });
-  });
-  describe(`combinations`, () => {
-    it(`:a(.b,::d(.e,.f))`, () => {
-      test(`:a(.b,::d(.e,.f))`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 17,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `a`,
-                start: 0,
-                end: 17,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 3,
-                    end: 5,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `b`,
-                        start: 3,
-                        end: 5,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 6,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `pseudo_element`,
-                        value: `d`,
-                        start: 6,
-                        end: 16,
-                        nodes: [
-                          createNode({
+    describe(`config`, () => {
+        describe(`offset`, () => {
+            it(`should start from a given offset`, () => {
+                test(`.classX`, {
+                    config: { offset: 10 },
+                    expectedAst: [
+                        createNode({
                             type: `selector`,
                             start: 10,
-                            end: 12,
+                            end: 17,
                             nodes: [
-                              createNode({
-                                type: `class`,
-                                value: `e`,
-                                start: 10,
-                                end: 12,
-                              }),
-                            ],
-                          }),
-                          createNode({
-                            type: `selector`,
-                            start: 13,
-                            end: 15,
-                            nodes: [
-                              createNode({
-                                type: `class`,
-                                value: `f`,
-                                start: 13,
-                                end: 15,
-                              }),
+                                createNode({
+                                    type: `class`,
+                                    value: `classX`,
+                                    start: 10,
+                                    end: 17,
+                                }),
                             ],
-                          }),
-                        ],
-                      }),
+                        }),
                     ],
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`* .a+.b`, () => {
-      test(`* .a+.b`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 7,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `space`,
-                value: ` `,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 2,
-                end: 4,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 4,
-                end: 5,
-              }),
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 5,
-                end: 7,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`.z&div`, () => {
-      test(`.z&div`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 6,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `z`,
-                start: 0,
-                end: 2,
-              }),
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 2,
-                end: 3,
-              }),
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 3,
-                end: 6,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`config`, () => {
-    describe(`offset`, () => {
-      it(`should start from a given offset`, () => {
-        test(`.classX`, {
-          config: { offset: 10 },
-          expectedAst: [
-            createNode({
-              type: `selector`,
-              start: 10,
-              end: 17,
-              nodes: [
-                createNode({
-                  type: `class`,
-                  value: `classX`,
-                  start: 10,
-                  end: 17,
-                }),
-              ],
-            }),
-          ],
-        });
-      });
+                });
+            });
+        });
     });
-  });
 });
diff --git a/packages/css-selector-parser/test/stringify.spec.ts b/packages/css-selector-parser/test/stringify.spec.ts
index d716dd97..3ea41020 100644
--- a/packages/css-selector-parser/test/stringify.spec.ts
+++ b/packages/css-selector-parser/test/stringify.spec.ts
@@ -58,6 +58,5 @@ describe(`stringifySelectorAst`, () => {
         ].forEach((ast) => {
             stringifySelectorAst(ast); // expect no type error
         });
-        
     });
 });
diff --git a/packages/css-selector-parser/test/test-kit/parsing.ts b/packages/css-selector-parser/test/test-kit/parsing.ts
index c524cb74..c058d19d 100644
--- a/packages/css-selector-parser/test/test-kit/parsing.ts
+++ b/packages/css-selector-parser/test/test-kit/parsing.ts
@@ -1,118 +1,114 @@
-import {
-  parseCssSelector,
-  stringifySelectorAst,
-} from "@tokey/css-selector-parser";
+import { parseCssSelector, stringifySelectorAst } from '@tokey/css-selector-parser';
 import type {
-  SelectorNode,
-  Selector,
-  Universal,
-  Class,
-  PseudoElement,
-  PseudoClass,
-  Attribute,
-  Type,
-  Id,
-  Comment,
-  Nth,
-  NthStep,
-  NthDash,
-  NthOffset,
-  NthOf,
-  Nesting,
-  CompoundSelector,
-  ParseConfig,
-} from "@tokey/css-selector-parser";
-import { createParseTester } from "@tokey/test-kit";
+    SelectorNode,
+    Selector,
+    Universal,
+    Class,
+    PseudoElement,
+    PseudoClass,
+    Attribute,
+    Type,
+    Id,
+    Comment,
+    Nth,
+    NthStep,
+    NthDash,
+    NthOffset,
+    NthOf,
+    Nesting,
+    CompoundSelector,
+    ParseConfig,
+} from '@tokey/css-selector-parser';
+import { createParseTester } from '@tokey/test-kit';
 
 export const test = createParseTester({
-  parse: (selector: string, config?: ParseConfig) =>
-    parseCssSelector(selector, config),
-  stringify: stringifySelectorAst,
+    parse: (selector: string, config?: ParseConfig) => parseCssSelector(selector, config),
+    stringify: stringifySelectorAst,
 });
 
-export function createNode<TYPE extends SelectorNode["type"]>(
-  expected: Partial<SelectorNode> & { type: TYPE }
-): TYPE extends "selector"
-  ? Selector
-  : TYPE extends "universal"
-  ? Universal
-  : TYPE extends "comment"
-  ? Comment
-  : TYPE extends "nth"
-  ? Nth
-  : TYPE extends "nth_step"
-  ? NthStep
-  : TYPE extends "nth_dash"
-  ? NthDash
-  : TYPE extends "nth_offset"
-  ? NthOffset
-  : TYPE extends "nth_of"
-  ? NthOf
-  : TYPE extends "compound_selector"
-  ? CompoundSelector
-  : TYPE extends "class"
-  ? Class
-  : TYPE extends "pseudo_element"
-  ? PseudoElement
-  : TYPE extends "pseudo_class"
-  ? PseudoClass
-  : TYPE extends "attribute"
-  ? Attribute
-  : TYPE extends "type"
-  ? Type
-  : TYPE extends "id"
-  ? Id
-  : TYPE extends "nesting"
-  ? Nesting
-  : SelectorNode {
-  const defaults: SelectorNode = {
-    type: expected.type,
-    start: 0,
-    end: 0,
-    // value: ``,
-  } as any;
-  // if (
-  //   defaults.type === `attribute` ||
-  //   defaults.type === `id` ||
-  //   defaults.type === `class` ||
-  //   defaults.type === `selector` ||
-  //   defaults.type === `pseudo_class` ||
-  //   defaults.type === `pseudo_element` ||
-  //   defaults.type === `star`
-  // ) {
-  //   defaults.nodes = [];
-  // }
-  if (defaults.type === `class`) {
-    defaults.dotComments = [];
-  }
-  if (defaults.type === `universal` || defaults.type === `type`) {
-    // defaults.namespace = { value: ``, beforeComments: [], afterComments: [] };
-  }
-  if (defaults.type === `pseudo_class`) {
-    defaults.colonComments = [];
-  }
-  if (defaults.type === `pseudo_element`) {
-    defaults.colonComments = { first: [], second: [] };
-  }
-  if (
-    defaults.type === `selector` ||
-    defaults.type === `compound_selector` ||
-    defaults.type === `combinator` ||
-    defaults.type === `comment` ||
-    defaults.type === `nth` ||
-    defaults.type === `nth_step` ||
-    defaults.type === `nth_dash` ||
-    defaults.type === `nth_offset` ||
-    defaults.type === `nth_of`
-  ) {
-    defaults.before = ``;
-    defaults.after = ``;
-  }
-  if (defaults.type === `combinator` || defaults.type === `compound_selector`) {
-    defaults.invalid = false;
-  }
-  return {
-    ...defaults,
-    ...(expected as unknown as any),
-  };
+export function createNode<TYPE extends SelectorNode['type']>(
+    expected: Partial<SelectorNode> & { type: TYPE }
+): TYPE extends 'selector'
+    ? Selector
+    : TYPE extends 'universal'
+    ? Universal
+    : TYPE extends 'comment'
+    ? Comment
+    : TYPE extends 'nth'
+    ? Nth
+    : TYPE extends 'nth_step'
+    ? NthStep
+    : TYPE extends 'nth_dash'
+    ? NthDash
+    : TYPE extends 'nth_offset'
+    ? NthOffset
+    : TYPE extends 'nth_of'
+    ? NthOf
+    : TYPE extends 'compound_selector'
+    ? CompoundSelector
+    : TYPE extends 'class'
+    ? Class
+    : TYPE extends 'pseudo_element'
+    ? PseudoElement
+    : TYPE extends 'pseudo_class'
+    ? PseudoClass
+    : TYPE extends 'attribute'
+    ? Attribute
+    : TYPE extends 'type'
+    ? Type
+    : TYPE extends 'id'
+    ? Id
+    : TYPE extends 'nesting'
+    ? Nesting
+    : SelectorNode {
+    const defaults: SelectorNode = {
+        type: expected.type,
+        start: 0,
+        end: 0,
+        // value: ``,
+    } as any;
+    // if (
+    //   defaults.type === `attribute` ||
+    //   defaults.type === `id` ||
+    //   defaults.type === `class` ||
+    //   defaults.type === `selector` ||
+    //   defaults.type === `pseudo_class` ||
+    //   defaults.type === `pseudo_element` ||
+    //   defaults.type === `star`
+    // ) {
+    //   defaults.nodes = [];
+    // }
+    if (defaults.type === `class`) {
+        defaults.dotComments = [];
+    }
+    if (defaults.type === `universal` || defaults.type === `type`) {
+        // defaults.namespace = { value: ``, beforeComments: [], afterComments: [] };
+    }
+    if (defaults.type === `pseudo_class`) {
+        defaults.colonComments = [];
+    }
+    if (defaults.type === `pseudo_element`) {
+        defaults.colonComments = { first: [], second: [] };
+    }
+    if (
+        defaults.type === `selector` ||
+        defaults.type === `compound_selector` ||
+        defaults.type === `combinator` ||
+        defaults.type === `comment` ||
+        defaults.type === `nth` ||
+        defaults.type === `nth_step` ||
+        defaults.type === `nth_dash` ||
+        defaults.type === `nth_offset` ||
+        defaults.type === `nth_of`
+    ) {
+        defaults.before = ``;
+        defaults.after = ``;
+    }
+    if (defaults.type === `combinator` || defaults.type === `compound_selector`) {
+        defaults.invalid = false;
+    }
+    return {
+        ...defaults,
+        ...(expected as unknown as any),
+    };
 }
diff --git a/packages/css-value-parser/package.json b/packages/css-value-parser/package.json
index 73b4219b..92b9c5e5 100644
--- a/packages/css-value-parser/package.json
+++ b/packages/css-value-parser/package.json
@@ -31,6 +31,5 @@
   "author": "Wix.com",
   "license": "MIT",
   "repository": "https://github.com/wixplosives/tokey/packages/css-value-parser",
-  "prettier": {},
   "sideEffects": false
 }
diff --git a/packages/css-value-parser/src/ast-types.ts b/packages/css-value-parser/src/ast-types.ts
index 45fde911..06f3b53a 100644
--- a/packages/css-value-parser/src/ast-types.ts
+++ b/packages/css-value-parser/src/ast-types.ts
@@ -1,70 +1,70 @@
 import type {
-  lengthValidUnits,
-  angleValidUnits,
-  frequencyValidUnits,
-  resolutionValidUnits,
-  timeValidUnits,
-} from "./units";
+    lengthValidUnits,
+    angleValidUnits,
+    frequencyValidUnits,
+    resolutionValidUnits,
+    timeValidUnits,
+} from './units';
 
 export interface CSSValueAST<TYPE extends string> {
-  type: TYPE;
-  start: number;
-  end: number;
-  value: string;
+    type: TYPE;
+    start: number;
+    end: number;
+    value: string;
 }
 
 export type BaseAstNode =
-  | Literal
-  | CssWideKeyword
-  | Space
-  | Comment
-  | Invalid
-  | CustomIdent
-  | DashedIdent
-  | Call
-  | String
-  | Number
-  | Integer
-  | Length
-  | Angle
-  | Time
-  | Percentage
-  | Frequency
-  | Resolution
-  | Flex
-  | UnknownUnit
-  | Color;
+    | Literal
+    | CssWideKeyword
+    | Space
+    | Comment
+    | Invalid
+    | CustomIdent
+    | DashedIdent
+    | Call
+    | String
+    | Number
+    | Integer
+    | Length
+    | Angle
+    | Time
+    | Percentage
+    | Frequency
+    | Resolution
+    | Flex
+    | UnknownUnit
+    | Color;
 
 /* types */
 
 // custom
 export type BuildVarAst = CSSValueAST<`build-var`> & {
-  subType: string;
-  id: string;
+    subType: string;
+    id: string;
 };
 export type Literal = CSSValueAST<`literal`> & {
-  before: string;
-  after: string;
+    before: string;
+    after: string;
 };
 export type CssWideKeyword = CSSValueAST<`css-wide-keyword`> & {
-  value: AnyCase<`inherit` | `unset` | `initial`>;
+    value: AnyCase<`inherit` | `unset` | `initial`>;
 };
 export type Space = CSSValueAST<`space`> & {
-  before: string;
-  after: string;
+    before: string;
+    after: string;
 };
 export type Comment = CSSValueAST<`comment`> & {
-  before: string;
-  after: string;
+    before: string;
+    after: string;
 };
-export type Call<TYPE extends string = "call"> = CSSValueAST<TYPE> & {
-  args: CSSValueAST<any>[];
-  before: string;
-  after: string;
+export type Call<TYPE extends string = 'call'> = CSSValueAST<TYPE> & {
+    args: CSSValueAST<any>[];
+    before: string;
+    after: string;
 };
 type Unit<TYPE extends string, UNIT extends string> = CSSValueAST<TYPE> & {
-  unit: UNIT;
-  integer: boolean;
+    unit: UNIT;
+    integer: boolean;
 };
 export type Invalid = CSSValueAST<`invalid`>;
 export type UnknownUnit = Unit<`unknown-unit`, string>;
@@ -85,14 +85,8 @@ export type Length = Unit<`<length>`, AnyCase<typeof lengthValidUnits[number]>>;
 export type Flex = Unit<`<flex>`, AnyCase<`fr`>>;
 export type Angle = Unit<`<angle>`, AnyCase<typeof angleValidUnits[number]>>;
 export type Time = Unit<`<time>`, AnyCase<typeof timeValidUnits[number]>>;
-export type Frequency = Unit<
-  `<frequency>`,
-  AnyCase<typeof frequencyValidUnits[number]>
->;
-export type Resolution = Unit<
-  `<resolution>`,
-  AnyCase<typeof resolutionValidUnits[number]>
->;
+export type Frequency = Unit<`<frequency>`, AnyCase<typeof frequencyValidUnits[number]>>;
+export type Resolution = Unit<`<resolution>`, AnyCase<typeof resolutionValidUnits[number]>>;
 // other
 export type Color = CSSValueAST<`<color>`>;
 export type Image = CSSValueAST<`<image>`>;
@@ -127,181 +121,171 @@ export type Attribute = CSSValueAST<`<attr()>`>;
 */
 /////////////////////
 type AnyCase<T extends string> = string extends T
-  ? string
-  : T extends `${infer F1}${infer F2}${infer R}`
-  ? `${Uppercase<F1> | Lowercase<F1>}${
-      | Uppercase<F2>
-      | Lowercase<F2>}${AnyCase<R>}`
-  : T extends `${infer F}${infer R}`
-  ? `${Uppercase<F> | Lowercase<F>}${AnyCase<R>}`
-  : "";
+    ? string
+    : T extends `${infer F1}${infer F2}${infer R}`
+    ? `${Uppercase<F1> | Lowercase<F1>}${Uppercase<F2> | Lowercase<F2>}${AnyCase<R>}`
+    : T extends `${infer F}${infer R}`
+    ? `${Uppercase<F> | Lowercase<F>}${AnyCase<R>}`
+    : '';
 /////////////////////
 
 export const invalid = (value: Partial<Invalid>): Invalid => ({
-  start: 0,
-  end: 0,
-  value: ``,
-  ...value,
-  type: `invalid`,
+    start: 0,
+    end: 0,
+    value: ``,
+    ...value,
+    type: `invalid`,
 });
 export const literal = (value: Partial<Literal>): Literal => ({
-  start: 0,
-  end: 0,
-  before: ``,
-  after: ``,
-  value: ``,
-  ...value,
-  type: `literal`,
+    start: 0,
+    end: 0,
+    before: ``,
+    after: ``,
+    value: ``,
+    ...value,
+    type: `literal`,
 });
-export const cssWideKeyword = (
-  value: Partial<CssWideKeyword>
-): CssWideKeyword => ({
-  start: 0,
-  end: 0,
-  value: `initial`,
-  ...value,
-  type: `css-wide-keyword`,
+export const cssWideKeyword = (value: Partial<CssWideKeyword>): CssWideKeyword => ({
+    start: 0,
+    end: 0,
+    value: `initial`,
+    ...value,
+    type: `css-wide-keyword`,
 });
 export const space = (value: Partial<Space>): Space => ({
-  start: 0,
-  end: 0,
-  before: ``,
-  after: ``,
-  value: ` `,
-  ...value,
-  type: `space`,
+    start: 0,
+    end: 0,
+    before: ``,
+    after: ``,
+    value: ` `,
+    ...value,
+    type: `space`,
 });
 export const comment = (value: Partial<Comment>): Comment => ({
-  start: 0,
-  end: 0,
-  before: ``,
-  after: ``,
-  value: ``,
-  ...value,
-  type: `comment`,
+    start: 0,
+    end: 0,
+    before: ``,
+    after: ``,
+    value: ``,
+    ...value,
+    type: `comment`,
 });
 export const customIdent = (value: Partial<CustomIdent>): CustomIdent => ({
-  start: 0,
-  end: 0,
-  value: ``,
-  ...value,
-  type: `<custom-ident>`,
+    start: 0,
+    end: 0,
+    value: ``,
+    ...value,
+    type: `<custom-ident>`,
 });
 export const dashedIdent = (value: Partial<DashedIdent>): DashedIdent => ({
-  start: 0,
-  end: 0,
-  value: `-`,
-  ...value,
-  type: `<dashed-ident>`,
+    start: 0,
+    end: 0,
+    value: `-`,
+    ...value,
+    type: `<dashed-ident>`,
 });
 export const string = (value: Partial<String>): String => ({
-  start: 0,
-  end: 0,
-  value: `""`,
-  ...value,
-  type: `<string>`,
+    start: 0,
+    end: 0,
+    value: `""`,
+    ...value,
+    type: `<string>`,
 });
 export const integer = (value: Partial<Integer>): Integer => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  ...value,
-  type: `<integer>`,
+    start: 0,
+    end: 0,
+    value: `0`,
+    ...value,
+    type: `<integer>`,
 });
 export const number = (value: Partial<Number>): Number => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  ...value,
-  type: `<number>`,
+    start: 0,
+    end: 0,
+    value: `0`,
+    ...value,
+    type: `<number>`,
 });
 export const unknownUnit = (value: Partial<UnknownUnit>): UnknownUnit => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  unit: ``,
-  integer: false,
-  ...value,
-  type: `unknown-unit`,
+    start: 0,
+    end: 0,
+    value: `0`,
+    unit: ``,
+    integer: false,
+    ...value,
+    type: `unknown-unit`,
 });
-export const length = (
-  value: Partial<Length> & Pick<Length, "unit">
-): Length => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  integer: false,
-  ...value,
-  type: `<length>`,
+export const length = (value: Partial<Length> & Pick<Length, 'unit'>): Length => ({
+    start: 0,
+    end: 0,
+    value: `0`,
+    integer: false,
+    ...value,
+    type: `<length>`,
 });
-export const angle = (value: Partial<Angle> & Pick<Angle, "unit">): Angle => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  integer: false,
-  ...value,
-  type: `<angle>`,
+export const angle = (value: Partial<Angle> & Pick<Angle, 'unit'>): Angle => ({
+    start: 0,
+    end: 0,
+    value: `0`,
+    integer: false,
+    ...value,
+    type: `<angle>`,
 });
 export const percentage = (value: Partial<Percentage>): Percentage => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  unit: `%`,
-  integer: false,
-  ...value,
-  type: `<percentage>`,
+    start: 0,
+    end: 0,
+    value: `0`,
+    unit: `%`,
+    integer: false,
+    ...value,
+    type: `<percentage>`,
 });
 export const flex = (value: Partial<Flex>): Flex => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  unit: `fr`,
-  integer: false,
-  ...value,
-  type: `<flex>`,
+    start: 0,
+    end: 0,
+    value: `0`,
+    unit: `fr`,
+    integer: false,
+    ...value,
+    type: `<flex>`,
 });
-export const time = (value: Partial<Time> & Pick<Time, "unit">): Time => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  integer: false,
-  ...value,
-  type: `<time>`,
+export const time = (value: Partial<Time> & Pick<Time, 'unit'>): Time => ({
+    start: 0,
+    end: 0,
+    value: `0`,
+    integer: false,
+    ...value,
+    type: `<time>`,
 });
-export const frequency = (
-  value: Partial<Frequency> & Pick<Frequency, "unit">
-): Frequency => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  integer: false,
-  ...value,
-  type: `<frequency>`,
+export const frequency = (value: Partial<Frequency> & Pick<Frequency, 'unit'>): Frequency => ({
+    start: 0,
+    end: 0,
+    value: `0`,
+    integer: false,
+    ...value,
+    type: `<frequency>`,
 });
-export const resolution = (
-  value: Partial<Resolution> & Pick<Resolution, "unit">
-): Resolution => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  integer: false,
-  ...value,
-  type: `<resolution>`,
+export const resolution = (value: Partial<Resolution> & Pick<Resolution, 'unit'>): Resolution => ({
+    start: 0,
+    end: 0,
+    value: `0`,
+    integer: false,
+    ...value,
+    type: `<resolution>`,
 });
 export const call = (value: Partial<Call>): Call => ({
-  start: 0,
-  end: 0,
-  value: ``,
-  args: value.args || [],
-  before: ``,
-  after: ``,
-  ...value,
-  type: `call`,
+    start: 0,
+    end: 0,
+    value: ``,
+    args: value.args || [],
+    before: ``,
+    after: ``,
+    ...value,
+    type: `call`,
 });
 export const color = (value: Partial<Color>): Color => ({
-  start: 0,
-  end: 0,
-  value: `#000000`,
-  ...value,
-  type: `<color>`,
+    start: 0,
+    end: 0,
+    value: `#000000`,
+    ...value,
+    type: `<color>`,
 });
diff --git a/packages/css-value-parser/src/define-property.ts b/packages/css-value-parser/src/define-property.ts
index 822c4b38..ef988cfb 100644
--- a/packages/css-value-parser/src/define-property.ts
+++ b/packages/css-value-parser/src/define-property.ts
@@ -1,71 +1,68 @@
-import type { CSSValueAST, BuildVarAst } from "./ast-types";
-import type { ParseResults } from "./value-parser";
+import type { CSSValueAST, BuildVarAst } from './ast-types';
+import type { ParseResults } from './value-parser';
 
 export function defineProperty<
-  FORMATS extends string,
-  CLASSIFICATIONS extends string,
-  TOP_COMMA extends boolean = false
+    FORMATS extends string,
+    CLASSIFICATIONS extends string,
+    TOP_COMMA extends boolean = false
 >(_config: {
-  name: string;
-  syntax: string;
-  subSyntax?: Record<string, string>;
-  subProperties?: Record<string, ReturnType<typeof defineProperty>>;
-  topLevelCommaSeparation?: TOP_COMMA;
-  formats?: Record<FORMATS, string>;
-  classifications?: Record<
-    CLASSIFICATIONS,
-    | MatchClassification // ToDo: optional default value / required
-    | (TOP_COMMA extends true
-        ? {
-            match?: MatchClassification;
-            syntax?: string;
-            inTopLevelIndex?: (index: number, total: number) => boolean;
-            cssProperty?: ReturnType<typeof defineProperty>;
-          }
-        : {
-            match?: MatchClassification;
-            syntax?: string;
-            cssProperty?: ReturnType<typeof defineProperty>;
-          })
-  >;
+    name: string;
+    syntax: string;
+    subSyntax?: Record<string, string>;
+    subProperties?: Record<string, ReturnType<typeof defineProperty>>;
+    topLevelCommaSeparation?: TOP_COMMA;
+    formats?: Record<FORMATS, string>;
+    classifications?: Record<
+        CLASSIFICATIONS,
+        | MatchClassification // ToDo: optional default value / required
+        | (TOP_COMMA extends true
+              ? {
+                    match?: MatchClassification;
+                    syntax?: string;
+                    inTopLevelIndex?: (index: number, total: number) => boolean;
+                    cssProperty?: ReturnType<typeof defineProperty>;
+                }
+              : {
+                    match?: MatchClassification;
+                    syntax?: string;
+                    cssProperty?: ReturnType<typeof defineProperty>;
+                })
+    >;
 }): {
-  validate: (
-    ast: CSSValueAST<any>[],
-    options?: ActionParams
-  ) => [...errors: string[]];
-  getFormat: (ast: CSSValueAST<any>[], options?: ActionParams) => FORMATS;
-  classify: (
-    ast: CSSValueAST<any>[],
-    options?: ActionParams & { deep?: boolean; ignoreComments?: boolean }
-  ) => TOP_COMMA extends true
-    ? Record<CLASSIFICATIONS, Classification>[]
-    : Record<CLASSIFICATIONS, Classification>;
+    validate: (ast: CSSValueAST<any>[], options?: ActionParams) => [...errors: string[]];
+    getFormat: (ast: CSSValueAST<any>[], options?: ActionParams) => FORMATS;
+    classify: (
+        ast: CSSValueAST<any>[],
+        options?: ActionParams & { deep?: boolean; ignoreComments?: boolean }
+    ) => TOP_COMMA extends true
+        ? Record<CLASSIFICATIONS, Classification>[]
+        : Record<CLASSIFICATIONS, Classification>;
 } {
-  return {} as any;
+    return {} as any;
 }
 
 defineProperty.errors = {
-  unexpectedType: (node: CSSValueAST<any>, expectedType: string) =>
-    `expected to get ${expectedType}, but got ${node.type}`,
-  unexpectedComma: () => `unexpected comma`,
+    unexpectedType: (node: CSSValueAST<any>, expectedType: string) =>
+        `expected to get ${expectedType}, but got ${node.type}`,
+    unexpectedComma: () => `unexpected comma`,
 };
 
 export interface ActionParams {
-  cssVars?: Record<string, CSSValueAST<any>[]>;
-  resolveBuildVar?: (node: BuildVarAst) => CSSValueAST<any>[];
+    cssVars?: Record<string, CSSValueAST<any>[]>;
+    resolveBuildVar?: (node: BuildVarAst) => CSSValueAST<any>[];
 }
 
 type MatchClassification = (
-  node: CSSValueAST<any>,
-  info: {
-    index: number;
-    indexOfType: number;
-    amountOfType: number;
-  }
+    node: CSSValueAST<any>,
+    info: {
+        index: number;
+        indexOfType: number;
+        amountOfType: number;
+    }
 ) => boolean;
 
 type Classification = {
-  value: CSSValueAST<any>[];
-  resolved: { origin: ParseResults; nodes: CSSValueAST<any>[] }[][]; // ToDo: should probably be more detailed... need to see cases
-  isProperty: boolean;
+    value: CSSValueAST<any>[];
+    resolved: { origin: ParseResults; nodes: CSSValueAST<any>[] }[][]; // ToDo: should probably be more detailed... need to see cases
+    isProperty: boolean;
 };
diff --git a/packages/css-value-parser/src/index.ts b/packages/css-value-parser/src/index.ts
index a71000fa..acf3b729 100644
--- a/packages/css-value-parser/src/index.ts
+++ b/packages/css-value-parser/src/index.ts
@@ -1,9 +1,9 @@
-export * from "./ast-types";
-export { parseCSSValue } from "./value-parser";
-export { stringifyCSSValue } from "./value-stringify";
-export { defineProperty } from "./define-property";
+export * from './ast-types';
+export { parseCSSValue } from './value-parser';
+export { stringifyCSSValue } from './value-stringify';
+export { defineProperty } from './define-property';
 // properties
-export { background } from "./properties/background";
-export { margin } from "./properties/margin";
+export { background } from './properties/background';
+export { margin } from './properties/margin';
 // syntax
-export { parseValueSyntax } from "./value-syntax-parser";
+export { parseValueSyntax } from './value-syntax-parser';
diff --git a/packages/css-value-parser/src/properties/background.ts b/packages/css-value-parser/src/properties/background.ts
index 25a18da2..165b792c 100644
--- a/packages/css-value-parser/src/properties/background.ts
+++ b/packages/css-value-parser/src/properties/background.ts
@@ -1,46 +1,46 @@
-import { defineProperty } from "../define-property";
+import { defineProperty } from '../define-property';
 
 export const background = defineProperty({
-  name: `background`,
-  syntax: `[ <bg-layer> , ]* <final-bg-layer>`,
-  subSyntax: {
-    "<bg-layer>": `<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>`,
-    "<final-bg-layer>": `<'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>`,
-  },
-  subProperties: {
-    // ToDo: define and add
-  },
-  topLevelCommaSeparation: true,
-  classifications: {
-    "background-image": () => {
-      return false;
+    name: `background`,
+    syntax: `[ <bg-layer> , ]* <final-bg-layer>`,
+    subSyntax: {
+        '<bg-layer>': `<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>`,
+        '<final-bg-layer>': `<'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>`,
+    },
+    subProperties: {
+        // ToDo: define and add
+    },
+    topLevelCommaSeparation: true,
+    classifications: {
+        'background-image': () => {
+            return false;
+        },
+        'background-position': () => {
+            return false;
+        },
+        'background-size': {
+            syntax: `<bg-size>`,
+            match: () => true,
+        },
+        'background-repeat': () => {
+            return false;
+        },
+        'background-origin': () => {
+            return false;
+        },
+        'background-clip': () => {
+            return false;
+        },
+        'background-attachment': () => {
+            return false;
+        },
+        'background-color': {
+            inTopLevelIndex: (index, total) => {
+                return index === total - 1;
+            },
+            match: () => {
+                return false;
+            },
+        },
     },
-    "background-position": () => {
-      return false;
-    },
-    "background-size": {
-      syntax: `<bg-size>`,
-      match: () => true,
-    },
-    "background-repeat": () => {
-      return false;
-    },
-    "background-origin": () => {
-      return false;
-    },
-    "background-clip": () => {
-      return false;
-    },
-    "background-attachment": () => {
-      return false;
-    },
-    "background-color": {
-      inTopLevelIndex: (index, total) => {
-        return index === total - 1;
-      },
-      match: () => {
-        return false;
-      },
-    },
-  },
 });
diff --git a/packages/css-value-parser/src/properties/margin.ts b/packages/css-value-parser/src/properties/margin.ts
index a131be10..c42a4f67 100644
--- a/packages/css-value-parser/src/properties/margin.ts
+++ b/packages/css-value-parser/src/properties/margin.ts
@@ -1,36 +1,36 @@
-import { defineProperty } from "../define-property";
+import { defineProperty } from '../define-property';
 
 const subMarginPlacements: Record<
-  "top" | "right" | "bottom" | "left",
-  [single: number, two: number, three: number, four: number]
+    'top' | 'right' | 'bottom' | 'left',
+    [single: number, two: number, three: number, four: number]
 > = {
-  top: [0, 1, 0, 0],
-  left: [0, 0, 1, 3],
-  bottom: [0, 1, 2, 2],
-  right: [0, 0, 1, 1],
+    top: [0, 1, 0, 0],
+    left: [0, 0, 1, 3],
+    bottom: [0, 1, 2, 2],
+    right: [0, 0, 1, 1],
 };
 
 export const margin = defineProperty({
-  name: `margin`,
-  syntax: `<length>{1,4}`,
-  formats: {
-    all: `<length>`,
-    "horizontal-vertical": `<length><length>`,
-    "top-horizontal-bottom": `<length><length><length>`,
-    "top-right-bottom-left": `<length><length><length><length>`,
-  },
-  classifications: {
-    "margin-top": (_node, { amountOfType, indexOfType }) => {
-      return subMarginPlacements.top[amountOfType - 1] === indexOfType;
+    name: `margin`,
+    syntax: `<length>{1,4}`,
+    formats: {
+        all: `<length>`,
+        'horizontal-vertical': `<length><length>`,
+        'top-horizontal-bottom': `<length><length><length>`,
+        'top-right-bottom-left': `<length><length><length><length>`,
     },
-    "margin-right": (_node, { amountOfType, indexOfType }) => {
-      return subMarginPlacements.right[amountOfType - 1] === indexOfType;
+    classifications: {
+        'margin-top': (_node, { amountOfType, indexOfType }) => {
+            return subMarginPlacements.top[amountOfType - 1] === indexOfType;
+        },
+        'margin-right': (_node, { amountOfType, indexOfType }) => {
+            return subMarginPlacements.right[amountOfType - 1] === indexOfType;
+        },
+        'margin-bottom': (_node, { amountOfType, indexOfType }) => {
+            return subMarginPlacements.bottom[amountOfType - 1] === indexOfType;
+        },
+        'margin-left': (_node, { amountOfType, indexOfType }) => {
+            return subMarginPlacements.left[amountOfType - 1] === indexOfType;
+        },
     },
-    "margin-bottom": (_node, { amountOfType, indexOfType }) => {
-      return subMarginPlacements.bottom[amountOfType - 1] === indexOfType;
-    },
-    "margin-left": (_node, { amountOfType, indexOfType }) => {
-      return subMarginPlacements.left[amountOfType - 1] === indexOfType;
-    },
-  },
 });
diff --git a/packages/css-value-parser/src/tokenizer.ts b/packages/css-value-parser/src/tokenizer.ts
index 66cf69cd..bfe5b0b7 100644
--- a/packages/css-value-parser/src/tokenizer.ts
+++ b/packages/css-value-parser/src/tokenizer.ts
@@ -1,48 +1,45 @@
 import {
-  tokenize,
-  isStringDelimiter,
-  isWhitespace,
-  createToken,
-  getJSCommentStartType,
-  getMultilineCommentStartType,
-  isCommentEnd,
-  getUnclosedComment,
-} from "@tokey/core";
-import type { Token, Descriptors } from "@tokey/core";
-
-type Delimiters = "(" | ")" | "," | "/" | "+" | "-" | "*" | "#";
-
-export type CSSValueToken = Token<Descriptors | Delimiters>;
-
-export function tokenizeValue(
-  source: string,
-  options: { offset?: number } = {}
-) {
-  const parseLineComments = false; // why would that be a choice?
-  return tokenize<CSSValueToken>(source, {
-    isDelimiter,
-    isStringDelimiter(char: string, previousChar: string) {
-      return previousChar !== `\\` && isStringDelimiter(char);
-    },
+    tokenize,
+    isStringDelimiter,
     isWhitespace,
-    shouldAddToken: () => true,
     createToken,
-    getCommentStartType: parseLineComments
-      ? getJSCommentStartType
-      : getMultilineCommentStartType,
+    getJSCommentStartType,
+    getMultilineCommentStartType,
     isCommentEnd,
     getUnclosedComment,
-    offset: options.offset,
-  });
+} from '@tokey/core';
+import type { Token, Descriptors } from '@tokey/core';
+
+type Delimiters = '(' | ')' | ',' | '/' | '+' | '-' | '*' | '#';
+
+export type CSSValueToken = Token<Descriptors | Delimiters>;
+
+export function tokenizeValue(source: string, options: { offset?: number } = {}) {
+    const parseLineComments = false; // why would that be a choice?
+    return tokenize<CSSValueToken>(source, {
+        isDelimiter,
+        isStringDelimiter(char: string, previousChar: string) {
+            return previousChar !== `\\` && isStringDelimiter(char);
+        },
+        isWhitespace,
+        shouldAddToken: () => true,
+        createToken,
+        getCommentStartType: parseLineComments
+            ? getJSCommentStartType
+            : getMultilineCommentStartType,
+        isCommentEnd,
+        getUnclosedComment,
+        offset: options.offset,
+    });
 }
 
 const isDelimiter = (char: string, previousChar: string) =>
-  previousChar !== "\\" &&
-  (char === "(" ||
-    char === ")" ||
-    char === "," ||
-    char === "/" ||
-    char === "+" ||
-    char === "-" ||
-    char === "*" ||
-    char === "#");
+    previousChar !== '\\' &&
+    (char === '(' ||
+        char === ')' ||
+        char === ',' ||
+        char === '/' ||
+        char === '+' ||
+        char === '-' ||
+        char === '*' ||
+        char === '#');
diff --git a/packages/css-value-parser/src/units.ts b/packages/css-value-parser/src/units.ts
index 244dc367..f743f92a 100644
--- a/packages/css-value-parser/src/units.ts
+++ b/packages/css-value-parser/src/units.ts
@@ -1,25 +1,25 @@
 export const lengthValidUnits = [
-  `px`,
-  `em`,
-  `ex`,
-  `cap`,
-  `ch`,
-  `ic`,
-  `rem`,
-  `lh`,
-  `rlh`,
-  `vw`,
-  `vh`,
-  `vi`,
-  `vb`,
-  `vmin`,
-  `vmax`,
-  `cm`,
-  `mm`,
-  `q`,
-  `in`,
-  `pt`,
-  `pc`,
+    `px`,
+    `em`,
+    `ex`,
+    `cap`,
+    `ch`,
+    `ic`,
+    `rem`,
+    `lh`,
+    `rlh`,
+    `vw`,
+    `vh`,
+    `vi`,
+    `vb`,
+    `vmin`,
+    `vmax`,
+    `cm`,
+    `mm`,
+    `q`,
+    `in`,
+    `pt`,
+    `pc`,
 ] as const;
 export const angleValidUnits = [`deg`, `grad`, `rad`, `turn`] as const;
 export const timeValidUnits = [`s`, `ms`] as const;
diff --git a/packages/css-value-parser/src/value-parser.ts b/packages/css-value-parser/src/value-parser.ts
index 9f1714a8..7f7768be 100644
--- a/packages/css-value-parser/src/value-parser.ts
+++ b/packages/css-value-parser/src/value-parser.ts
@@ -1,364 +1,356 @@
 import {
-  BaseAstNode,
-  customIdent,
-  dashedIdent,
-  literal,
-  cssWideKeyword,
-  space,
-  string,
-  number,
-  unknownUnit,
-  length,
-  percentage,
-  angle,
-  time,
-  flex,
-  call,
-  frequency,
-  resolution,
-  integer,
-  color,
-  invalid,
-} from "./ast-types";
+    BaseAstNode,
+    customIdent,
+    dashedIdent,
+    literal,
+    cssWideKeyword,
+    space,
+    string,
+    number,
+    unknownUnit,
+    length,
+    percentage,
+    angle,
+    time,
+    flex,
+    call,
+    frequency,
+    resolution,
+    integer,
+    color,
+    invalid,
+} from './ast-types';
 import {
-  lengthValidUnits,
-  angleValidUnits,
-  timeValidUnits,
-  frequencyValidUnits,
-  resolutionValidUnits,
-} from "./units";
-import { tokenizeValue, CSSValueToken } from "./tokenizer";
-import { stringifyCSSValue } from "./value-stringify";
-import { Seeker, isComment } from "@tokey/core";
-import { comment } from ".";
+    lengthValidUnits,
+    angleValidUnits,
+    timeValidUnits,
+    frequencyValidUnits,
+    resolutionValidUnits,
+} from './units';
+import { tokenizeValue, CSSValueToken } from './tokenizer';
+import { stringifyCSSValue } from './value-stringify';
+import { Seeker, isComment } from '@tokey/core';
+import { comment } from '.';
 
 export type ParseResults = Array<BaseAstNode>;
 
 export function parseCSSValue(
-  source: string,
-  _options?: { parseBuildVar?: () => { id: string; subType: string } }
+    source: string,
+    _options?: { parseBuildVar?: () => { id: string; subType: string } }
 ): ParseResults {
-  const tokens = tokenizeValue(source);
-  return new Seeker(tokens).run<ParseResults>(handleToken, [], source);
+    const tokens = tokenizeValue(source);
+    return new Seeker(tokens).run<ParseResults>(handleToken, [], source);
 }
 
 function handleToken(
-  token: CSSValueToken,
-  ast: ParseResults,
-  source: string,
-  s: Seeker<CSSValueToken>
+    token: CSSValueToken,
+    ast: ParseResults,
+    source: string,
+    s: Seeker<CSSValueToken>
 ): void {
-  const { type, value, start, end } = token;
-  if (type === `,` || type === `/`) {
-    ast.push(
-      literal({
-        start,
-        end,
-        value,
-      })
-    );
-  } else if (type === `space`) {
-    const firstSpace = value.indexOf(` `);
-    const before = firstSpace !== -1 ? value.substring(0, firstSpace) : ``;
-    const after =
-      firstSpace !== -1 ? value.substring(firstSpace + 1) : value.substring(1);
-    ast.push(
-      space({
-        value: firstSpace !== -1 ? ` ` : value[0],
-        start,
-        end,
-        before,
-        after,
-      })
-    );
-  } else if (type === `text` || type === `-`) {
-    // numbers and lengths
-    if (parseNumber(token, ast, source, s)) {
-      return;
-    }
-    const ident = collectIdent(token, ast, source, s);
-    if (s.peek().type === `(`) {
-      // function
-      s.next();
-      const args: ParseResults = [];
-      s.run(
-        (token, args) => {
-          if (token.type === ")") {
-            return false;
-          }
-          return handleToken(token, args, source, s);
-        },
-        args,
-        source
-      );
-      const before =
-        args.length && args[0].type === `space`
-          ? stringifyCSSValue(args.shift()!)
-          : ``;
-      const after =
-        args.length && args[args.length - 1].type === `space`
-          ? stringifyCSSValue(args.pop()!)
-          : ``;
-      ast.push(
-        call({
-          value: ident,
-          start,
-          end: s.peek(0).end,
-          args,
-          before,
-          after,
-        })
-      );
-    } else if (ident.match(/^inherit|unset|initial$/i)) {
-      // css-wide keyword
-      ast.push(
-        cssWideKeyword({
-          value: ident as any,
-          start: token.start,
-          end: s.peek(0).end,
-        })
-      );
-    } else if (ident.match(/^--/)) {
-      // dashed ident
-      ast.push(
-        dashedIdent({
-          value: ident,
-          start: token.start,
-          end: s.peek(0).end,
-        })
-      );
-    } else if (ident.match(/^[-][a-z]|[a-z]/i)) {
-      // custom ident
-      ast.push(
-        customIdent({
-          value: ident,
-          start: token.start,
-          end: s.peek(0).end,
-        })
-      );
-    } else {
-      ast.push(
-        literal({
-          value: ident,
-          start,
-          end: s.peek(0).end,
-        })
-      );
-    }
-  } else if (type === `string`) {
-    ast.push(
-      string({
-        value,
-        start,
-        end,
-      })
-    );
-  } else if (type === `+`) {
-    if (parseNumber(token, ast, source, s)) {
-      return;
-    }
-    ast.push(
-      literal({
-        value,
-        start,
-        end,
-      })
-    );
-  } else if (type === `#`) {
-    const nextToken = s.next(); // #000000
-    const isValidColor =
-      nextToken.type === `text` &&
-      nextToken.value.match(/^[0-9a-f]{3,8}$/i) &&
-      nextToken.value.length !== 5 &&
-      nextToken.value.length !== 7;
-    if (isValidColor) {
-      ast.push(
-        color({
-          value: value + nextToken.value,
-          start,
-          end: nextToken.end,
-        })
-      );
+    const { type, value, start, end } = token;
+    if (type === `,` || type === `/`) {
+        ast.push(
+            literal({
+                start,
+                end,
+                value,
+            })
+        );
+    } else if (type === `space`) {
+        const firstSpace = value.indexOf(` `);
+        const before = firstSpace !== -1 ? value.substring(0, firstSpace) : ``;
+        const after = firstSpace !== -1 ? value.substring(firstSpace + 1) : value.substring(1);
+        ast.push(
+            space({
+                value: firstSpace !== -1 ? ` ` : value[0],
+                start,
+                end,
+                before,
+                after,
+            })
+        );
+    } else if (type === `text` || type === `-`) {
+        // numbers and lengths
+        if (parseNumber(token, ast, source, s)) {
+            return;
+        }
+        const ident = collectIdent(token, ast, source, s);
+        if (s.peek().type === `(`) {
+            // function
+            s.next();
+            const args: ParseResults = [];
+            s.run(
+                (token, args) => {
+                    if (token.type === ')') {
+                        return false;
+                    }
+                    return handleToken(token, args, source, s);
+                },
+                args,
+                source
+            );
+            const before =
+                args.length && args[0].type === `space` ? stringifyCSSValue(args.shift()!) : ``;
+            const after =
+                args.length && args[args.length - 1].type === `space`
+                    ? stringifyCSSValue(args.pop()!)
+                    : ``;
+            ast.push(
+                call({
+                    value: ident,
+                    start,
+                    end: s.peek(0).end,
+                    args,
+                    before,
+                    after,
+                })
+            );
+        } else if (ident.match(/^inherit|unset|initial$/i)) {
+            // css-wide keyword
+            ast.push(
+                cssWideKeyword({
+                    value: ident as any,
+                    start: token.start,
+                    end: s.peek(0).end,
+                })
+            );
+        } else if (ident.match(/^--/)) {
+            // dashed ident
+            ast.push(
+                dashedIdent({
+                    value: ident,
+                    start: token.start,
+                    end: s.peek(0).end,
+                })
+            );
+        } else if (ident.match(/^[-][a-z]|[a-z]/i)) {
+            // custom ident
+            ast.push(
+                customIdent({
+                    value: ident,
+                    start: token.start,
+                    end: s.peek(0).end,
+                })
+            );
+        } else {
+            ast.push(
+                literal({
+                    value: ident,
+                    start,
+                    end: s.peek(0).end,
+                })
+            );
+        }
+    } else if (type === `string`) {
+        ast.push(
+            string({
+                value,
+                start,
+                end,
+            })
+        );
+    } else if (type === `+`) {
+        if (parseNumber(token, ast, source, s)) {
+            return;
+        }
+        ast.push(
+            literal({
+                value,
+                start,
+                end,
+            })
+        );
+    } else if (type === `#`) {
+        const nextToken = s.next(); // #000000
+        const isValidColor =
+            nextToken.type === `text` &&
+            nextToken.value.match(/^[0-9a-f]{3,8}$/i) &&
+            nextToken.value.length !== 5 &&
+            nextToken.value.length !== 7;
+        if (isValidColor) {
+            ast.push(
+                color({
+                    value: value + nextToken.value,
+                    start,
+                    end: nextToken.end,
+                })
+            );
+        } else {
+            s.back();
+            ast.push(
+                invalid({
+                    value: `#`,
+                    start,
+                    end,
+                })
+            );
+        }
+    } else if (isComment(type)) {
+        ast.push(
+            comment({
+                value,
+                start,
+                end,
+            })
+        );
     } else {
-      s.back();
-      ast.push(
-        invalid({
-          value: `#`,
-          start,
-          end,
-        })
-      );
+        ast.push(
+            invalid({
+                value,
+                start,
+                end,
+            })
+        );
     }
-  } else if (isComment(type)) {
-    ast.push(
-      comment({
-        value,
-        start,
-        end,
-      })
-    );
-  } else {
-    ast.push(
-      invalid({
-        value,
-        start,
-        end,
-      })
-    );
-  }
 }
 
 /** parse ident **/
 function collectIdent(
-  token: CSSValueToken,
-  _ast: ParseResults,
-  _source: string,
-  s: Seeker<CSSValueToken>
+    token: CSSValueToken,
+    _ast: ParseResults,
+    _source: string,
+    s: Seeker<CSSValueToken>
 ) {
-  let collectedValue = ``;
-  let pickAmount = 0;
-  let current = token;
-  while (current.type === `text` || current.type === `-`) {
-    collectedValue += current.value;
-    pickAmount++;
-    current = s.peek(pickAmount);
-  }
-  s.index += pickAmount - 1;
-  return collectedValue;
+    let collectedValue = ``;
+    let pickAmount = 0;
+    let current = token;
+    while (current.type === `text` || current.type === `-`) {
+        collectedValue += current.value;
+        pickAmount++;
+        current = s.peek(pickAmount);
+    }
+    s.index += pickAmount - 1;
+    return collectedValue;
 }
 
 /** parse number **/
 function parseNumber(
-  token: CSSValueToken,
-  ast: ParseResults,
-  _source: string,
-  s: Seeker<CSSValueToken>
+    token: CSSValueToken,
+    ast: ParseResults,
+    _source: string,
+    s: Seeker<CSSValueToken>
 ) {
-  const { value, start } = token;
-  let startMatch = isStartOfNumber(value);
-  if (!startMatch) {
-    return false;
-  }
-  let [numberValue, numberUnit] = startMatch;
-  // check number is a valid full number (e.g. 5em -> [5e, m])
-  if (numberUnit && !isNumber(numberValue)) {
-    const fullNumberMatch = startWithValidNumber(value);
-    if (!fullNumberMatch) {
-      // token is not a valid number: bail out
-      return;
+    const { value, start } = token;
+    let startMatch = isStartOfNumber(value);
+    if (!startMatch) {
+        return false;
     }
-    // token is number with a unit
-    [numberValue, numberUnit] = fullNumberMatch;
-  }
-  let peekCount = 1;
-  if (!numberUnit) {
-    // collect potential extra number parts
-    let nextToken = s.peek(peekCount);
-    while (
-      nextToken.type === `-` ||
-      nextToken.type === `+` ||
-      nextToken.type === `text`
-    ) {
-      const nextValue = numberValue + nextToken.value;
-      // const validNumber = isNumber(nextValue);
-      startMatch = isStartOfNumber(nextValue);
-      if (!startMatch) {
-        if (!isNumber(numberValue)) {
-          // doesn't amount to a number: bail out
-          return;
+    let [numberValue, numberUnit] = startMatch;
+    // check number is a valid full number (e.g. 5em -> [5e, m])
+    if (numberUnit && !isNumber(numberValue)) {
+        const fullNumberMatch = startWithValidNumber(value);
+        if (!fullNumberMatch) {
+            // token is not a valid number: bail out
+            return;
         }
-        // collected a number: stop collection
-        peekCount--;
-        break;
-      }
-      //
-      peekCount++;
-      const [matchedNumber, leftover] = startMatch;
-      numberValue = matchedNumber;
-      if (leftover) {
-        // leftover must be unit: no more number to collect
-        numberUnit = leftover;
-        break;
-      }
-      nextToken = s.peek(peekCount);
+        // token is number with a unit
+        [numberValue, numberUnit] = fullNumberMatch;
     }
-    // check final collected number
-    if (!isNumber(numberValue)) {
-      // check for partial initial number (e.g 5e with m as unit)
-      const fullNumberMatch = startWithValidNumber(numberValue + numberUnit);
-      if (!fullNumberMatch) {
-        return;
-      }
-      [numberValue, numberUnit] = fullNumberMatch;
+    let peekCount = 1;
+    if (!numberUnit) {
+        // collect potential extra number parts
+        let nextToken = s.peek(peekCount);
+        while (nextToken.type === `-` || nextToken.type === `+` || nextToken.type === `text`) {
+            const nextValue = numberValue + nextToken.value;
+            // const validNumber = isNumber(nextValue);
+            startMatch = isStartOfNumber(nextValue);
+            if (!startMatch) {
+                if (!isNumber(numberValue)) {
+                    // doesn't amount to a number: bail out
+                    return;
+                }
+                // collected a number: stop collection
+                peekCount--;
+                break;
+            }
+            //
+            peekCount++;
+            const [matchedNumber, leftover] = startMatch;
+            numberValue = matchedNumber;
+            if (leftover) {
+                // leftover must be unit: no more number to collect
+                numberUnit = leftover;
+                break;
+            }
+            nextToken = s.peek(peekCount);
+        }
+        // check final collected number
+        if (!isNumber(numberValue)) {
+            // check for partial initial number (e.g 5e with m as unit)
+            const fullNumberMatch = startWithValidNumber(numberValue + numberUnit);
+            if (!fullNumberMatch) {
+                return;
+            }
+            [numberValue, numberUnit] = fullNumberMatch;
+        }
+        // forward index by the tokens used for number value
+        s.index += peekCount - 1;
+        // take potential unit
+        if (!numberUnit && s.peek().type === `text`) {
+            numberUnit = s.next().value;
+        }
     }
-    // forward index by the tokens used for number value
-    s.index += peekCount - 1;
-    // take potential unit
-    if (!numberUnit && s.peek().type === `text`) {
-      numberUnit = s.next().value;
+    const isInteger = numberValue.match(integerRegExp);
+    // add to ast
+    if (numberUnit) {
+        const nodeType =
+            knownUnits[numberUnit.toLowerCase() as keyof typeof knownUnits] || unknownUnit;
+        ast.push(
+            nodeType({
+                value: numberValue,
+                unit: numberUnit,
+                integer: !!isInteger,
+                start,
+                end: s.peek(0).end,
+            } as any)
+        );
+    } else {
+        const nodeType = isInteger ? integer : number;
+        ast.push(
+            nodeType({
+                value: numberValue,
+                start,
+                end: s.peek(0).end,
+            })
+        );
     }
-  }
-  const isInteger = numberValue.match(integerRegExp);
-  // add to ast
-  if (numberUnit) {
-    const nodeType =
-      knownUnits[numberUnit.toLowerCase() as keyof typeof knownUnits] ||
-      unknownUnit;
-    ast.push(
-      nodeType({
-        value: numberValue,
-        unit: numberUnit,
-        integer: !!isInteger,
-        start,
-        end: s.peek(0).end,
-      } as any)
-    );
-  } else {
-    const nodeType = isInteger ? integer : number;
-    ast.push(
-      nodeType({
-        value: numberValue,
-        start,
-        end: s.peek(0).end,
-      })
-    );
-  }
-  return true;
+    return true;
 }
 const knownUnits = {
-  "%": percentage,
-  fr: flex,
-  ...lengthValidUnits.reduce((units, unit) => {
-    units[unit] = length;
-    return units;
-  }, {} as Record<typeof lengthValidUnits[number], typeof length>),
-  ...angleValidUnits.reduce((units, unit) => {
-    units[unit] = angle;
-    return units;
-  }, {} as Record<typeof angleValidUnits[number], typeof angle>),
-  ...timeValidUnits.reduce((units, unit) => {
-    units[unit] = time;
-    return units;
-  }, {} as Record<typeof timeValidUnits[number], typeof time>),
-  ...frequencyValidUnits.reduce((units, unit) => {
-    units[unit] = frequency;
-    return units;
-  }, {} as Record<typeof frequencyValidUnits[number], typeof frequency>),
-  ...resolutionValidUnits.reduce((units, unit) => {
-    units[unit] = resolution;
-    return units;
-  }, {} as Record<typeof resolutionValidUnits[number], typeof resolution>),
+    '%': percentage,
+    fr: flex,
+    ...lengthValidUnits.reduce((units, unit) => {
+        units[unit] = length;
+        return units;
+    }, {} as Record<typeof lengthValidUnits[number], typeof length>),
+    ...angleValidUnits.reduce((units, unit) => {
+        units[unit] = angle;
+        return units;
+    }, {} as Record<typeof angleValidUnits[number], typeof angle>),
+    ...timeValidUnits.reduce((units, unit) => {
+        units[unit] = time;
+        return units;
+    }, {} as Record<typeof timeValidUnits[number], typeof time>),
+    ...frequencyValidUnits.reduce((units, unit) => {
+        units[unit] = frequency;
+        return units;
+    }, {} as Record<typeof frequencyValidUnits[number], typeof frequency>),
+    ...resolutionValidUnits.reduce((units, unit) => {
+        units[unit] = resolution;
+        return units;
+    }, {} as Record<typeof resolutionValidUnits[number], typeof resolution>),
 } as const;
 
 const NumberRegExp = /[-+]?(\d+\.?\d*|\d*\.?\d+)(e[-+]?\d+)?/i;
 const integerRegExp = /^[-+]?\d+$/i; // one or more decimal digits 0 through 9 (preceded by -/+ ) - https://www.w3.org/TR/css-values-4/#integer-value
 const validNumberRegex = [
-  /[-+]?(\d+\.?\d*|\d*\.?\d+)(e[-+]?\d*)?/, // float+exponential
-  /[-+]?\d+(e[-+]?\d*)?/, // int+exponential
-  /[-+]/, // sign
+    /[-+]?(\d+\.?\d*|\d*\.?\d+)(e[-+]?\d*)?/, // float+exponential
+    /[-+]?\d+(e[-+]?\d*)?/, // int+exponential
+    /[-+]/, // sign
 ]
-  .map((r) => r.source)
-  .join(`|`); // join with one-of ("or")
+    .map((r) => r.source)
+    .join(`|`); // join with one-of ("or")
 
 /**
  * Return true if the input is a valid number
@@ -368,21 +360,17 @@ const validNumberRegex = [
  * @returns true if value is valid as a number
  */
 function isNumber(value: string) {
-  const match = value.match(NumberRegExp);
-  const numVal = match?.[0];
-  return !!numVal && numVal === value;
+    const match = value.match(NumberRegExp);
+    const numVal = match?.[0];
+    return !!numVal && numVal === value;
 }
-function isStartOfNumber(
-  value: string
-): false | [number: string, leftover: string] {
-  const match = value.match(new RegExp(validNumberRegex, `i`));
-  const numVal = match?.[0];
-  return numVal ? [numVal, value.substring(numVal.length)] : false;
+function isStartOfNumber(value: string): false | [number: string, leftover: string] {
+    const match = value.match(new RegExp(validNumberRegex, `i`));
+    const numVal = match?.[0];
+    return numVal ? [numVal, value.substring(numVal.length)] : false;
 }
-function startWithValidNumber(
-  value: string
-): false | [number: string, leftover: string] {
-  const match = value.match(NumberRegExp);
-  const numVal = match?.[0];
-  return numVal ? [numVal, value.substring(numVal.length)] : false;
+function startWithValidNumber(value: string): false | [number: string, leftover: string] {
+    const match = value.match(NumberRegExp);
+    const numVal = match?.[0];
+    return numVal ? [numVal, value.substring(numVal.length)] : false;
 }
diff --git a/packages/css-value-parser/src/value-stringify.ts b/packages/css-value-parser/src/value-stringify.ts
index 32febf12..3f57c3ea 100644
--- a/packages/css-value-parser/src/value-stringify.ts
+++ b/packages/css-value-parser/src/value-stringify.ts
@@ -1,64 +1,64 @@
 import type {
-  BaseAstNode,
-  Literal,
-  CssWideKeyword,
-  Space,
-  Comment,
-  String,
-  Number,
-  Call,
-  CustomIdent,
-  DashedIdent,
-  Integer,
-  Angle,
-  Color,
-  Flex,
-  Frequency,
-  Invalid,
-  Length,
-  Percentage,
-  Resolution,
-  Time,
-  UnknownUnit,
-} from "./ast-types";
+    BaseAstNode,
+    Literal,
+    CssWideKeyword,
+    Space,
+    Comment,
+    String,
+    Number,
+    Call,
+    CustomIdent,
+    DashedIdent,
+    Integer,
+    Angle,
+    Color,
+    Flex,
+    Frequency,
+    Invalid,
+    Length,
+    Percentage,
+    Resolution,
+    Time,
+    UnknownUnit,
+} from './ast-types';
 
 export function stringifyCSSValue(ast: BaseAstNode | BaseAstNode[]) {
-  if (!Array.isArray(ast)) {
-    return stringifyNode(ast);
-  }
-  let result = ``;
-  for (const node of ast) {
-    result += stringifyNode(node);
-  }
-  return result;
+    if (!Array.isArray(ast)) {
+        return stringifyNode(ast);
+    }
+    let result = ``;
+    for (const node of ast) {
+        result += stringifyNode(node);
+    }
+    return result;
 }
 function stringifyNode(node: BaseAstNode) {
-  return stringifyByType[node.type]?.(node as any) || ``;
+    return stringifyByType[node.type]?.(node as any) || ``;
 }
 
 type Printers = {
-  [K in BaseAstNode as K["type"]]: (node: K) => string;
+    [K in BaseAstNode as K['type']]: (node: K) => string;
 };
 const stringifyByType: Printers = {
-  space: ({ before, value, after }: Space) => before + value + after,
-  literal: ({ before, value, after }: Literal) => before + value + after,
-  "css-wide-keyword": ({ value }: CssWideKeyword) => value,
-  invalid: ({ value }: Invalid) => value,
-  comment: ({ value }: Comment) => value,
-  call: ({ value, before, after, args }: Call) =>
-    `${value}(${before}${stringifyCSSValue(args)}${after})`,
-  "<custom-ident>": ({ value }: CustomIdent) => value,
-  "<dashed-ident>": ({ value }: DashedIdent) => value,
-  "<string>": ({ value }: String) => value,
-  "<number>": ({ value }: Number) => value,
-  "<integer>": ({ value }: Integer) => value,
-  "<length>": ({ value, unit }: Length) => value + unit,
-  "<percentage>": ({ value, unit }: Percentage) => value + unit,
-  "<angle>": ({ value, unit }: Angle) => value + unit,
-  "<time>": ({ value, unit }: Time) => value + unit,
-  "<frequency>": ({ value, unit }: Frequency) => value + unit,
-  "<resolution>": ({ value, unit }: Resolution) => value + unit,
-  "<flex>": ({ value, unit }: Flex) => value + unit,
-  "unknown-unit": ({ value, unit }: UnknownUnit) => value + unit,
-  "<color>": ({ value }: Color) => value,
+    space: ({ before, value, after }: Space) => before + value + after,
+    literal: ({ before, value, after }: Literal) => before + value + after,
+    'css-wide-keyword': ({ value }: CssWideKeyword) => value,
+    invalid: ({ value }: Invalid) => value,
+    comment: ({ value }: Comment) => value,
+    call: ({ value, before, after, args }: Call) =>
+        `${value}(${before}${stringifyCSSValue(args)}${after})`,
+    '<custom-ident>': ({ value }: CustomIdent) => value,
+    '<dashed-ident>': ({ value }: DashedIdent) => value,
+    '<string>': ({ value }: String) => value,
+    '<number>': ({ value }: Number) => value,
+    '<integer>': ({ value }: Integer) => value,
+    '<length>': ({ value, unit }: Length) => value + unit,
+    '<percentage>': ({ value, unit }: Percentage) => value + unit,
+    '<angle>': ({ value, unit }: Angle) => value + unit,
+    '<time>': ({ value, unit }: Time) => value + unit,
+    '<frequency>': ({ value, unit }: Frequency) => value + unit,
+    '<resolution>': ({ value, unit }: Resolution) => value + unit,
+    '<flex>': ({ value, unit }: Flex) => value + unit,
+    'unknown-unit': ({ value, unit }: UnknownUnit) => value + unit,
+    '<color>': ({ value }: Color) => value,
 };
diff --git a/packages/css-value-parser/src/value-syntax-parser.ts b/packages/css-value-parser/src/value-syntax-parser.ts
index f82522e1..af40e88f 100644
--- a/packages/css-value-parser/src/value-syntax-parser.ts
+++ b/packages/css-value-parser/src/value-syntax-parser.ts
@@ -1,29 +1,22 @@
-import {
-  tokenize,
-  createToken,
-  Token,
-  Seeker,
-  getText,
-  last,
-} from "@tokey/core";
+import { tokenize, createToken, Token, Seeker, getText, last } from '@tokey/core';
 
-type RangeMultipliers = "!" | "?" | "+" | "*";
+type RangeMultipliers = '!' | '?' | '+' | '*';
 
 type Delimiters =
-  | "<"
-  | ">"
-  | "["
-  | "]"
-  | ","
-  | "/"
-  | "|"
-  | "&"
-  | "#"
-  | "("
-  | ")"
-  | "{"
-  | "}"
-  | RangeMultipliers;
+    | '<'
+    | '>'
+    | '['
+    | ']'
+    | ','
+    | '/'
+    | '|'
+    | '&'
+    | '#'
+    | '('
+    | ')'
+    | '{'
+    | '}'
+    | RangeMultipliers;
 
 /**
  * Add comments
@@ -31,500 +24,458 @@ type Delimiters =
  */
 
 const isDelimiter = (char: string) =>
-  char === "<" ||
-  char === ">" ||
-  char === "[" ||
-  char === "]" ||
-  char === "," ||
-  char === "/" ||
-  char === "|" ||
-  char === "&" ||
-  char === "#" ||
-  char === "(" ||
-  char === ")" ||
-  char === "{" ||
-  char === "}" ||
-  char === "?" ||
-  char === "!" ||
-  char === "*" ||
-  char === "+";
-
-type ValueSyntaxToken = Token<"space" | "text" | Delimiters>;
+    char === '<' ||
+    char === '>' ||
+    char === '[' ||
+    char === ']' ||
+    char === ',' ||
+    char === '/' ||
+    char === '|' ||
+    char === '&' ||
+    char === '#' ||
+    char === '(' ||
+    char === ')' ||
+    char === '{' ||
+    char === '}' ||
+    char === '?' ||
+    char === '!' ||
+    char === '*' ||
+    char === '+';
+
+type ValueSyntaxToken = Token<'space' | 'text' | Delimiters>;
 
 export const isWhitespace = (char: string) =>
-  char === " " ||
-  char === `\t` ||
-  char === `\r` ||
-  char === "\n" ||
-  char === "\f";
+    char === ' ' || char === `\t` || char === `\r` || char === '\n' || char === '\f';
 
 export function parseValueSyntax(source: string) {
-  return parseTokens(
-    tokenize<ValueSyntaxToken>(source, {
-      isDelimiter,
-      isWhitespace,
-      createToken,
-      isStringDelimiter: () => false,
-      shouldAddToken: () => true,
-      getCommentStartType: () => "",
-      isCommentEnd: () => false,
-      getUnclosedComment: () => "",
-    }),
-    source
-  );
+    return parseTokens(
+        tokenize<ValueSyntaxToken>(source, {
+            isDelimiter,
+            isWhitespace,
+            createToken,
+            isStringDelimiter: () => false,
+            shouldAddToken: () => true,
+            getCommentStartType: () => '',
+            isCommentEnd: () => false,
+            getUnclosedComment: () => '',
+        }),
+        source
+    );
 }
 
 type Range = [min: number, max: number];
 
 interface Multipliers {
-  range?: Range;
-  list?: boolean;
+    range?: Range;
+    list?: boolean;
 }
 
 interface DataTypeNode {
-  type: "data-type";
-  name: string;
-  range?: Range;
-  multipliers?: Multipliers;
+    type: 'data-type';
+    name: string;
+    range?: Range;
+    multipliers?: Multipliers;
 }
 
 interface PropertyNode {
-  type: "property";
-  name: string;
-  range?: Range;
-  multipliers?: Multipliers;
+    type: 'property';
+    name: string;
+    range?: Range;
+    multipliers?: Multipliers;
 }
 
 interface LiteralNode {
-  type: "literal";
-  name: string;
-  enclosed: boolean;
-  multipliers?: Multipliers;
+    type: 'literal';
+    name: string;
+    enclosed: boolean;
+    multipliers?: Multipliers;
 }
 
 interface KeywordNode {
-  type: "keyword";
-  name: string;
-  multipliers?: Multipliers;
+    type: 'keyword';
+    name: string;
+    multipliers?: Multipliers;
 }
 
 interface CombinatorGroup {
-  nodes: ValueSyntaxAstNode[];
+    nodes: ValueSyntaxAstNode[];
 }
 
 interface JuxtaposingNode extends CombinatorGroup {
-  type: "juxtaposing";
+    type: 'juxtaposing';
 }
 
 interface DoubleAmpersandNode extends CombinatorGroup {
-  type: "&&";
+    type: '&&';
 }
 
 interface DoubleBarNode extends CombinatorGroup {
-  type: "||";
+    type: '||';
 }
 
 interface BarNode extends CombinatorGroup {
-  type: "|";
+    type: '|';
 }
 
 interface GroupNode extends CombinatorGroup {
-  type: "group";
-  multipliers?: Multipliers;
+    type: 'group';
+    multipliers?: Multipliers;
 }
 
-type Combinators =
-  | GroupNode
-  | JuxtaposingNode
-  | DoubleAmpersandNode
-  | DoubleBarNode
-  | BarNode;
+type Combinators = GroupNode | JuxtaposingNode | DoubleAmpersandNode | DoubleBarNode | BarNode;
 
 type Components = DataTypeNode | PropertyNode;
-export type ValueSyntaxAstNode =
-  | Components
-  | KeywordNode
-  | LiteralNode
-  | Combinators;
+export type ValueSyntaxAstNode = Components | KeywordNode | LiteralNode | Combinators;
 
-export function literal(
-  name: string,
-  enclosed = false,
-  multipliers?: Multipliers
-): LiteralNode {
-  return { type: "literal", name, enclosed, multipliers };
+export function literal(name: string, enclosed = false, multipliers?: Multipliers): LiteralNode {
+    return { type: 'literal', name, enclosed, multipliers };
 }
 
 export function keyword(name: string, multipliers?: Multipliers): KeywordNode {
-  return { type: "keyword", name, multipliers };
+    return { type: 'keyword', name, multipliers };
 }
 
-export function property(
-  name: string,
-  range?: Range,
-  multipliers?: Multipliers
-): PropertyNode {
-  return { type: "property", name, range, multipliers };
+export function property(name: string, range?: Range, multipliers?: Multipliers): PropertyNode {
+    return { type: 'property', name, range, multipliers };
 }
 
-export function dataType(
-  name: string,
-  range?: Range,
-  multipliers?: Multipliers
-): DataTypeNode {
-  return { type: "data-type", name, range, multipliers };
+export function dataType(name: string, range?: Range, multipliers?: Multipliers): DataTypeNode {
+    return { type: 'data-type', name, range, multipliers };
 }
 
-export function group(
-  nodes: ValueSyntaxAstNode[],
-  multipliers?: Multipliers
-): GroupNode {
-  return { type: "group", nodes, multipliers };
+export function group(nodes: ValueSyntaxAstNode[], multipliers?: Multipliers): GroupNode {
+    return { type: 'group', nodes, multipliers };
 }
 
 export function juxtaposing(nodes: ValueSyntaxAstNode[]): JuxtaposingNode {
-  return { type: "juxtaposing", nodes };
+    return { type: 'juxtaposing', nodes };
 }
 
 export function bar(nodes: ValueSyntaxAstNode[]): BarNode {
-  return { type: "|", nodes };
+    return { type: '|', nodes };
 }
 
-export function doubleAmpersand(
-  nodes: ValueSyntaxAstNode[]
-): DoubleAmpersandNode {
-  return { type: "&&", nodes };
+export function doubleAmpersand(nodes: ValueSyntaxAstNode[]): DoubleAmpersandNode {
+    return { type: '&&', nodes };
 }
 
 export function doubleBar(nodes: ValueSyntaxAstNode[]): DoubleBarNode {
-  return { type: "||", nodes };
+    return { type: '||', nodes };
 }
 
 interface ParsingContext {
-  ast: ValueSyntaxAstNode[];
+    ast: ValueSyntaxAstNode[];
 }
 
 function parseTokens(tokens: ValueSyntaxToken[], source: string) {
-  const handleToken = (
-    token: ValueSyntaxToken,
-    { ast }: ParsingContext,
-    _source: string,
-    s: Seeker<ValueSyntaxToken>
-  ) => {
-    if (token.type === "<") {
-      let closed = false;
-      s.eat("space");
-      const nameBlock = s.run<ValueSyntaxToken[]>(
-        (node, ast) => {
-          const { type } = node;
-          if (type === "space" || type === "[" || type === ">") {
-            return false;
-          } else {
-            ast.push(node);
-            return;
-          }
-        },
-        [],
-        _source
-      );
-      if (nameBlock.length === 0) {
-        throw new Error("missing data type name");
-      }
-      s.back();
-      const name = getText(nameBlock, undefined, undefined, source);
-
-      const type = getLiteralValueType(name);
-      let range: Range | undefined;
-      if (type === "invalid") {
-        throw new Error("missing data type name");
-      } else {
-        const t = s.eat("space").next();
-        if (t.type === ">") {
-          closed = true;
-        } else if (t.type === "[") {
-          const min = s.eat("space").take("text");
-          const sep = s.eat("space").take(",");
-          const max = s.eat("space").take("text");
-          const end = s.eat("space").take("]");
-          if (min && sep && max && end) {
-            range = [parseNumber(min.value), parseNumber(max.value)];
-          } else {
-            throw new Error("Invalid range");
-          }
-          const t = s.eat("space").take(">");
-          if (t) {
-            closed = true;
-          }
-        }
-      }
-      if (!closed) {
-        throw new Error('missing ">"');
-      }
-      if (type === "quoted") {
-        ast.push(property(name.slice(1, -1), range));
-      } else {
-        ast.push(dataType(name, range));
-      }
-    } else if (token.type === "[") {
-      const res = s.run(handleToken, { ast: [] }, source);
-      applyPrecedence(res.ast);
-      ast.push(group(res.ast));
-    } else if (token.type === "]") {
-      return false;
-    } else if (token.type === "text") {
-      const t = getLiteralValueType(token.value);
-      if (t === "invalid") {
-        if (token.value.startsWith("'")) {
-          const tokens = s.run(
-            (token, ast) => {
-              ast.push(token);
-              return token.value.endsWith("'") ? false : undefined;
-            },
-            [token] as ValueSyntaxToken[],
-            source
-          );
-          if (tokens.length <= 2) {
-            throw new Error("unclosed or empty literal");
-          } else {
-            ast.push(
-              literal(
-                getText(tokens, undefined, undefined, source).slice(1, -1),
-                true
-              )
+    const handleToken = (
+        token: ValueSyntaxToken,
+        { ast }: ParsingContext,
+        _source: string,
+        s: Seeker<ValueSyntaxToken>
+    ) => {
+        if (token.type === '<') {
+            let closed = false;
+            s.eat('space');
+            const nameBlock = s.run<ValueSyntaxToken[]>(
+                (node, ast) => {
+                    const { type } = node;
+                    if (type === 'space' || type === '[' || type === '>') {
+                        return false;
+                    } else {
+                        ast.push(node);
+                        return;
+                    }
+                },
+                [],
+                _source
             );
-          }
+            if (nameBlock.length === 0) {
+                throw new Error('missing data type name');
+            }
+            s.back();
+            const name = getText(nameBlock, undefined, undefined, source);
+
+            const type = getLiteralValueType(name);
+            let range: Range | undefined;
+            if (type === 'invalid') {
+                throw new Error('missing data type name');
+            } else {
+                const t = s.eat('space').next();
+                if (t.type === '>') {
+                    closed = true;
+                } else if (t.type === '[') {
+                    const min = s.eat('space').take('text');
+                    const sep = s.eat('space').take(',');
+                    const max = s.eat('space').take('text');
+                    const end = s.eat('space').take(']');
+                    if (min && sep && max && end) {
+                        range = [parseNumber(min.value), parseNumber(max.value)];
+                    } else {
+                        throw new Error('Invalid range');
+                    }
+                    const t = s.eat('space').take('>');
+                    if (t) {
+                        closed = true;
+                    }
+                }
+            }
+            if (!closed) {
+                throw new Error('missing ">"');
+            }
+            if (type === 'quoted') {
+                ast.push(property(name.slice(1, -1), range));
+            } else {
+                ast.push(dataType(name, range));
+            }
+        } else if (token.type === '[') {
+            const res = s.run(handleToken, { ast: [] }, source);
+            applyPrecedence(res.ast);
+            ast.push(group(res.ast));
+        } else if (token.type === ']') {
+            return false;
+        } else if (token.type === 'text') {
+            const t = getLiteralValueType(token.value);
+            if (t === 'invalid') {
+                if (token.value.startsWith("'")) {
+                    const tokens = s.run(
+                        (token, ast) => {
+                            ast.push(token);
+                            return token.value.endsWith("'") ? false : undefined;
+                        },
+                        [token] as ValueSyntaxToken[],
+                        source
+                    );
+                    if (tokens.length <= 2) {
+                        throw new Error('unclosed or empty literal');
+                    } else {
+                        ast.push(
+                            literal(
+                                getText(tokens, undefined, undefined, source).slice(1, -1),
+                                true
+                            )
+                        );
+                    }
+                } else {
+                    throw new Error('invalid literal');
+                }
+            } else if (t === 'quoted') {
+                ast.push(literal(token.value.slice(1, -1), true));
+            } else {
+                ast.push(keyword(token.value));
+            }
+        } else if (
+            token.type === ',' ||
+            token.type === '/' ||
+            token.type === '(' ||
+            token.type === ')'
+        ) {
+            ast.push(literal(token.value));
+        } else if (token.type === 'space') {
+            s.eat('space');
+        } else if (isRangeMultiplier(token)) {
+            const node = lastParsedNode(ast);
+            if (!node || node.type === 'juxtaposing' || isLowLevelGroup(node)) {
+                throw new Error('unexpected modifier');
+            }
+            node.multipliers ??= {};
+            if (node.multipliers.range) {
+                throw new Error('multiple multipliers on same node');
+            }
+            node.multipliers.range = typeToRange(token.type);
+        } else if (token.type === '{') {
+            const node = lastParsedNode(ast);
+
+            if (!node || isLowLevelGroup(node) || node.type === 'juxtaposing') {
+                throw new Error('unexpected range modifier');
+            }
+
+            const start = s.eat('space').take('text');
+            if (!start) {
+                throw new Error('missing range start value');
+            }
+            const sep = s.eat('space').take(',');
+            if (sep) {
+                const end = s.eat('space').take('text');
+                const close = s.eat('space').take('}');
+                if (!close) {
+                    throw new Error('missing }');
+                }
+
+                node.multipliers ??= {};
+                if (node.multipliers.range) {
+                    throw new Error('multiple multipliers on same node');
+                }
+                node.multipliers.range = [parseNumber(start.value), parseNumber(end?.value ?? '∞')];
+            } else {
+                const close = s.eat('space').take('}');
+                if (!close) {
+                    throw new Error('missing }');
+                }
+                node.multipliers ??= {};
+                if (node.multipliers.range) {
+                    throw new Error('multiple multipliers on same node');
+                }
+                node.multipliers.range = [parseNumber(start.value), parseNumber(start.value)];
+            }
+        } else if (token.type === '#') {
+            const node = lastParsedNode(ast);
+            if (!node || node.type === 'juxtaposing' || isLowLevelGroup(node)) {
+                throw new Error('unexpected list modifier');
+            }
+            node.multipliers ??= {};
+            node.multipliers.list = true;
+        } else if (token.type === '&') {
+            const nextAnd = s.take('&');
+            if (!nextAnd) {
+                throw new Error('missing &');
+            }
+            ast.push(doubleAmpersand([]));
+        } else if (token.type === '|') {
+            ast.push(s.take('|') ? doubleBar([]) : bar([]));
         } else {
-          throw new Error("invalid literal");
-        }
-      } else if (t === "quoted") {
-        ast.push(literal(token.value.slice(1, -1), true));
-      } else {
-        ast.push(keyword(token.value));
-      }
-    } else if (
-      token.type === "," ||
-      token.type === "/" ||
-      token.type === "(" ||
-      token.type === ")"
-    ) {
-      ast.push(literal(token.value));
-    } else if (token.type === "space") {
-      s.eat("space");
-    } else if (isRangeMultiplier(token)) {
-      const node = lastParsedNode(ast);
-      if (!node || node.type === "juxtaposing" || isLowLevelGroup(node)) {
-        throw new Error("unexpected modifier");
-      }
-      node.multipliers ??= {};
-      if (node.multipliers.range) {
-        throw new Error("multiple multipliers on same node");
-      }
-      node.multipliers.range = typeToRange(token.type);
-    } else if (token.type === "{") {
-      const node = lastParsedNode(ast);
-
-      if (!node || isLowLevelGroup(node) || node.type === "juxtaposing") {
-        throw new Error("unexpected range modifier");
-      }
-
-      const start = s.eat("space").take("text");
-      if (!start) {
-        throw new Error("missing range start value");
-      }
-      const sep = s.eat("space").take(",");
-      if (sep) {
-        const end = s.eat("space").take("text");
-        const close = s.eat("space").take("}");
-        if (!close) {
-          throw new Error("missing }");
-        }
-
-        node.multipliers ??= {};
-        if (node.multipliers.range) {
-          throw new Error("multiple multipliers on same node");
+            throw new Error(`UnHandled ${JSON.stringify(token)}`);
         }
-        node.multipliers.range = [
-          parseNumber(start.value),
-          parseNumber(end?.value ?? "∞"),
-        ];
-      } else {
-        const close = s.eat("space").take("}");
-        if (!close) {
-          throw new Error("missing }");
-        }
-        node.multipliers ??= {};
-        if (node.multipliers.range) {
-          throw new Error("multiple multipliers on same node");
-        }
-        node.multipliers.range = [
-          parseNumber(start.value),
-          parseNumber(start.value),
-        ];
-      }
-    } else if (token.type === "#") {
-      const node = lastParsedNode(ast);
-      if (!node || node.type === "juxtaposing" || isLowLevelGroup(node)) {
-        throw new Error("unexpected list modifier");
-      }
-      node.multipliers ??= {};
-      node.multipliers.list = true;
-    } else if (token.type === "&") {
-      const nextAnd = s.take("&");
-      if (!nextAnd) {
-        throw new Error("missing &");
-      }
-      ast.push(doubleAmpersand([]));
-    } else if (token.type === "|") {
-      ast.push(s.take("|") ? doubleBar([]) : bar([]));
-    } else {
-      throw new Error(`UnHandled ${JSON.stringify(token)}`);
-    }
 
-    applyJuxtaposing(ast);
+        applyJuxtaposing(ast);
 
-    return;
-  };
+        return;
+    };
 
-  const results = new Seeker(tokens).run<ParsingContext>(
-    handleToken,
-    { ast: [] },
-    source
-  );
+    const results = new Seeker(tokens).run<ParsingContext>(handleToken, { ast: [] }, source);
 
-  applyPrecedence(results.ast);
+    applyPrecedence(results.ast);
 
-  return results.ast[0];
+    return results.ast[0];
 }
 
 function lastParsedNode(ast: ValueSyntaxAstNode[]) {
-  const node = last(ast);
-  // assume the parse process in juxtaposing on each step
-  return node?.type === "juxtaposing" ? last(node.nodes) : node;
+    const node = last(ast);
+    // assume the parse process in juxtaposing on each step
+    return node?.type === 'juxtaposing' ? last(node.nodes) : node;
 }
 
 function applyPrecedence(ast: ValueSyntaxAstNode[]) {
-  const order = ["&&", "||", "|"] as const;
-
-  for (let i = 0; i < order.length; i++) {
-    const type = order[i];
-    for (let j = 0; j < ast.length; j++) {
-      const node = ast[j];
-      if (node.type === type) {
-        const before = ast[j - 1];
-        const after = ast[j + 1];
-        if (!before) {
-          throw new Error(`missing node before ${type}`);
-        }
-        if (!after) {
-          throw new Error(`missing node after ${type}`);
-        }
-        if (after.type === type) {
-          throw new Error("invalid grouping");
+    const order = ['&&', '||', '|'] as const;
+
+    for (let i = 0; i < order.length; i++) {
+        const type = order[i];
+        for (let j = 0; j < ast.length; j++) {
+            const node = ast[j];
+            if (node.type === type) {
+                const before = ast[j - 1];
+                const after = ast[j + 1];
+                if (!before) {
+                    throw new Error(`missing node before ${type}`);
+                }
+                if (!after) {
+                    throw new Error(`missing node after ${type}`);
+                }
+                if (after.type === type) {
+                    throw new Error('invalid grouping');
+                }
+                if (before.type === type) {
+                    before.nodes.push(after);
+                    ast.splice(j - 1, 3, before);
+                } else {
+                    node.nodes.push(before, after);
+                    ast.splice(j - 1, 3, node);
+                }
+                j--;
+            }
         }
-        if (before.type === type) {
-          before.nodes.push(after);
-          ast.splice(j - 1, 3, before);
-        } else {
-          node.nodes.push(before, after);
-          ast.splice(j - 1, 3, node);
-        }
-        j--;
-      }
     }
-  }
 
-  if (ast.length > 1) {
-    throw new Error("could not applyPrecedence");
-  }
+    if (ast.length > 1) {
+        throw new Error('could not applyPrecedence');
+    }
 }
 
 function parseNumber(value: string): number {
-  if (value === "∞") {
-    return Infinity;
-  }
-  if (value === `-∞`) {
-    return -Infinity;
-  }
-  // TODO: check for valid number, NaN, more...
-  return parseFloat(value);
+    if (value === '∞') {
+        return Infinity;
+    }
+    if (value === `-∞`) {
+        return -Infinity;
+    }
+    // TODO: check for valid number, NaN, more...
+    return parseFloat(value);
 }
 
-function isRangeMultiplier(
-  token: ValueSyntaxToken
-): token is Token<RangeMultipliers> {
-  const { type } = token;
-  return type === "!" || type === "?" || type === "+" || type === "*";
+function isRangeMultiplier(token: ValueSyntaxToken): token is Token<RangeMultipliers> {
+    const { type } = token;
+    return type === '!' || type === '?' || type === '+' || type === '*';
 }
 
 function typeToRange(type: RangeMultipliers): [number, number] {
-  switch (type) {
-    case "!":
-      return [1, 1];
-    case "*":
-      return [0, Infinity];
-    case "+":
-      return [1, Infinity];
-    case "?":
-      return [0, 1];
-  }
+    switch (type) {
+        case '!':
+            return [1, 1];
+        case '*':
+            return [0, Infinity];
+        case '+':
+            return [1, Infinity];
+        case '?':
+            return [0, 1];
+    }
 }
 
 function applyJuxtaposing(ast: ValueSyntaxAstNode[]) {
-  if (ast.length > 1) {
-    const last = ast[ast.length - 1];
-    const prev = ast[ast.length - 2];
-    if (prev.type === "juxtaposing" && !isLowLevelGroup(last)) {
-      ast.length = ast.length - 1;
-      prev.nodes.push(last);
-    } else if (!isLowLevelGroup(prev) && !isLowLevelGroup(last)) {
-      ast.splice(ast.length - 2, 2, juxtaposing([prev, last]));
+    if (ast.length > 1) {
+        const last = ast[ast.length - 1];
+        const prev = ast[ast.length - 2];
+        if (prev.type === 'juxtaposing' && !isLowLevelGroup(last)) {
+            ast.length = ast.length - 1;
+            prev.nodes.push(last);
+        } else if (!isLowLevelGroup(prev) && !isLowLevelGroup(last)) {
+            ast.splice(ast.length - 2, 2, juxtaposing([prev, last]));
+        }
     }
-  }
 }
 
 function isLowLevelGroup(
-  node: ValueSyntaxAstNode
+    node: ValueSyntaxAstNode
 ): node is DoubleBarNode | DoubleAmpersandNode | BarNode {
-  const { type } = node;
-  return type === "&&" || type === "|" || type === "||";
+    const { type } = node;
+    return type === '&&' || type === '|' || type === '||';
 }
 
 export function stringify(node: ValueSyntaxAstNode): string {
-  const { type } = node;
-  if ("multipliers" in node) {
-    throw new Error("TODO: multipliers");
-  }
-  if (type === "property") {
-    return `<'${node.name}'${node.range ? ` [${node.range}]` : ""}>`;
-  } else if (type === "data-type") {
-    return `<${node.name}${node.range ? ` [${node.range}]` : ""}>`;
-  } else if (type === "literal") {
-    return node.enclosed ? `'${node.name}'` : `${node.name}`;
-  } else if (type === "group") {
-    return `[ ${node.nodes.map((child) => stringify(child)).join("")} ]`;
-  } else if (type === "&&") {
-    return node.nodes.map((child) => stringify(child)).join(" && ");
-  } else if (type === "||") {
-    return node.nodes.map((child) => stringify(child)).join(" || ");
-  } else if (type === "|") {
-    return node.nodes.map((child) => stringify(child)).join(" | ");
-  } else if (type === "juxtaposing") {
-    return node.nodes.map((child) => stringify(child)).join(" ");
-  } else if (type === "keyword") {
-    return node.name;
-  } else {
-    throw new Error(`missing stringify for node ${JSON.stringify(node)}`);
-  }
+    const { type } = node;
+    if ('multipliers' in node) {
+        throw new Error('TODO: multipliers');
+    }
+    if (type === 'property') {
+        return `<'${node.name}'${node.range ? ` [${node.range}]` : ''}>`;
+    } else if (type === 'data-type') {
+        return `<${node.name}${node.range ? ` [${node.range}]` : ''}>`;
+    } else if (type === 'literal') {
+        return node.enclosed ? `'${node.name}'` : `${node.name}`;
+    } else if (type === 'group') {
+        return `[ ${node.nodes.map((child) => stringify(child)).join('')} ]`;
+    } else if (type === '&&') {
+        return node.nodes.map((child) => stringify(child)).join(' && ');
+    } else if (type === '||') {
+        return node.nodes.map((child) => stringify(child)).join(' || ');
+    } else if (type === '|') {
+        return node.nodes.map((child) => stringify(child)).join(' | ');
+    } else if (type === 'juxtaposing') {
+        return node.nodes.map((child) => stringify(child)).join(' ');
+    } else if (type === 'keyword') {
+        return node.name;
+    } else {
+        throw new Error(`missing stringify for node ${JSON.stringify(node)}`);
+    }
 }
 
 function getLiteralValueType(value: string) {
-  if (value.startsWith("'")) {
-    if (value.endsWith("'") && value.length > 1) {
-      return "quoted";
+    if (value.startsWith("'")) {
+        if (value.endsWith("'") && value.length > 1) {
+            return 'quoted';
+        } else {
+            return 'invalid';
+        }
     } else {
-      return "invalid";
+        return 'literal';
     }
-  } else {
-    return "literal";
-  }
 }
diff --git a/packages/css-value-parser/test/css-value-syntax.spec.ts b/packages/css-value-parser/test/css-value-syntax.spec.ts
index c2382bbc..727da0dc 100644
--- a/packages/css-value-parser/test/css-value-syntax.spec.ts
+++ b/packages/css-value-parser/test/css-value-syntax.spec.ts
@@ -1,290 +1,245 @@
-import { parseValueSyntax } from "@tokey/css-value-parser";
-import { expect } from "chai";
+import { parseValueSyntax } from '@tokey/css-value-parser';
+import { expect } from 'chai';
 //TODO: fixme
 import {
-  bar,
-  dataType,
-  doubleAmpersand,
-  doubleBar,
-  group,
-  juxtaposing,
-  keyword,
-  literal,
-  property,
-} from "../src/value-syntax-parser";
+    bar,
+    dataType,
+    doubleAmpersand,
+    doubleBar,
+    group,
+    juxtaposing,
+    keyword,
+    literal,
+    property,
+} from '../src/value-syntax-parser';
 
-import * as webCssRef from "@webref/css";
+import * as webCssRef from '@webref/css';
 
 describe(`sanity`, () => {
-  before(async () => {
-    const specs = await webCssRef.listAll();
-    for (const [specName, data] of Object.entries(specs)) {
-      describe(specName, () => {
-        describe("properties", () => {
-          for (const { name, value } of Object.values(data.properties)) {
-            if (value) {
-              it(`<'${name}'>: ${value}`, () => {
-                parseValueSyntax(value);
-              });
-            }
-          }
-        });
-        describe("valuespaces", () => {
-          for (const [name, { value }] of Object.entries(data.valuespaces)) {
-            if (value) {
-              it(`${name}: ${value}`, () => {
-                parseValueSyntax(value);
-              });
-            }
-          }
-        });
-      });
-    }
-  });
-  it(`just here to make the before dynamically load and create tests`, () => {
-    /**/
-  });
+    before(async () => {
+        const specs = await webCssRef.listAll();
+        for (const [specName, data] of Object.entries(specs)) {
+            describe(specName, () => {
+                describe('properties', () => {
+                    for (const { name, value } of Object.values(data.properties)) {
+                        if (value) {
+                            it(`<'${name}'>: ${value}`, () => {
+                                parseValueSyntax(value);
+                            });
+                        }
+                    }
+                });
+                describe('valuespaces', () => {
+                    for (const [name, { value }] of Object.entries(data.valuespaces)) {
+                        if (value) {
+                            it(`${name}: ${value}`, () => {
+                                parseValueSyntax(value);
+                            });
+                        }
+                    }
+                });
+            });
+        }
+    });
+    it(`just here to make the before dynamically load and create tests`, () => {
+        /**/
+    });
 });
 
 // add test for #
 
-describe("value-syntax-parser", () => {
-  describe("components", () => {
-    it("should parse simple data-type component", () => {
-      expect(parseValueSyntax(`<name>`)).to.eql(dataType("name"));
-    });
+describe('value-syntax-parser', () => {
+    describe('components', () => {
+        it('should parse simple data-type component', () => {
+            expect(parseValueSyntax(`<name>`)).to.eql(dataType('name'));
+        });
 
-    it("should parse simple data-type component with range definition", () => {
-      expect(parseValueSyntax(`<name [1,1000]>`)).to.eql(
-        dataType("name", [1, 1000])
-      );
-      expect(parseValueSyntax(`<name [ 1 , 1000 ] >`)).to.eql(
-        dataType("name", [1, 1000])
-      );
-    });
+        it('should parse simple data-type component with range definition', () => {
+            expect(parseValueSyntax(`<name [1,1000]>`)).to.eql(dataType('name', [1, 1000]));
+            expect(parseValueSyntax(`<name [ 1 , 1000 ] >`)).to.eql(dataType('name', [1, 1000]));
+        });
 
-    it("should parse simple property component", () => {
-      expect(parseValueSyntax(`<'name'>`)).to.eql(property("name"));
-    });
+        it('should parse simple property component', () => {
+            expect(parseValueSyntax(`<'name'>`)).to.eql(property('name'));
+        });
 
-    it("should parse simple property component with range definition", () => {
-      expect(parseValueSyntax(`<'name' [1,1000]>`)).to.eql(
-        property("name", [1, 1000])
-      );
-      expect(parseValueSyntax(`<'name' [ 1 , 1000 ] >`)).to.eql(
-        property("name", [1, 1000])
-      );
-      expect(parseValueSyntax(`<'name' [ -∞ , ∞ ] >`)).to.eql(
-        property("name", [-Infinity, Infinity])
-      );
+        it('should parse simple property component with range definition', () => {
+            expect(parseValueSyntax(`<'name' [1,1000]>`)).to.eql(property('name', [1, 1000]));
+            expect(parseValueSyntax(`<'name' [ 1 , 1000 ] >`)).to.eql(property('name', [1, 1000]));
+            expect(parseValueSyntax(`<'name' [ -∞ , ∞ ] >`)).to.eql(
+                property('name', [-Infinity, Infinity])
+            );
+        });
     });
-  });
 
-  describe("literals/keyword", () => {
-    it("should parse simple keyword value", () => {
-      expect(parseValueSyntax(`name`)).to.eql(keyword("name"));
-    });
-    it("should parse open enclosed literal value (with delimiter)", () => {
-      expect(parseValueSyntax(`'<'`)).to.eql(literal("<", true));
-    });
-    it("should parse open enclosed literal value", () => {
-      expect(parseValueSyntax(`'name'`)).to.eql(literal("name", true));
-    });
-    it("should parse open enclosed literal value (with delimiter in the middle)", () => {
-      expect(parseValueSyntax(`'na>me'`)).to.eql(literal("na>me", true));
-    });
-    it("should parse open parentheses literal value", () => {
-      expect(parseValueSyntax(`(`)).to.eql(literal("("));
-    });
-    it("should parse close parentheses literal value", () => {
-      expect(parseValueSyntax(`)`)).to.eql(literal(")"));
-    });
-    it("should parse comma literal value", () => {
-      expect(parseValueSyntax(`,`)).to.eql(literal(","));
-    });
-    it("should parse slash literal value", () => {
-      expect(parseValueSyntax(`/`)).to.eql(literal("/"));
+    describe('literals/keyword', () => {
+        it('should parse simple keyword value', () => {
+            expect(parseValueSyntax(`name`)).to.eql(keyword('name'));
+        });
+        it('should parse open enclosed literal value (with delimiter)', () => {
+            expect(parseValueSyntax(`'<'`)).to.eql(literal('<', true));
+        });
+        it('should parse open enclosed literal value', () => {
+            expect(parseValueSyntax(`'name'`)).to.eql(literal('name', true));
+        });
+        it('should parse open enclosed literal value (with delimiter in the middle)', () => {
+            expect(parseValueSyntax(`'na>me'`)).to.eql(literal('na>me', true));
+        });
+        it('should parse open parentheses literal value', () => {
+            expect(parseValueSyntax(`(`)).to.eql(literal('('));
+        });
+        it('should parse close parentheses literal value', () => {
+            expect(parseValueSyntax(`)`)).to.eql(literal(')'));
+        });
+        it('should parse comma literal value', () => {
+            expect(parseValueSyntax(`,`)).to.eql(literal(','));
+        });
+        it('should parse slash literal value', () => {
+            expect(parseValueSyntax(`/`)).to.eql(literal('/'));
+        });
     });
-  });
 
-  describe("multipliers", () => {
-    it("data-type with multipliers", () => {
-      expect(parseValueSyntax(`<name>!`)).to.eql(
-        dataType("name", undefined, { range: [1, 1] })
-      );
-      expect(parseValueSyntax(`<name>?`)).to.eql(
-        dataType("name", undefined, { range: [0, 1] })
-      );
-      expect(parseValueSyntax(`<name>+`)).to.eql(
-        dataType("name", undefined, { range: [1, Infinity] })
-      );
-      expect(parseValueSyntax(`<name>*`)).to.eql(
-        dataType("name", undefined, { range: [0, Infinity] })
-      );
-      expect(parseValueSyntax(`<name>{2}`)).to.eql(
-        dataType("name", undefined, { range: [2, 2] })
-      );
-      expect(parseValueSyntax(`<name>{2, 4}`)).to.eql(
-        dataType("name", undefined, { range: [2, 4] })
-      );
-    });
-    it("property with multipliers", () => {
-      expect(parseValueSyntax(`<'name'>!`)).to.eql(
-        property("name", undefined, { range: [1, 1] })
-      );
-      expect(parseValueSyntax(`<'name'>?`)).to.eql(
-        property("name", undefined, { range: [0, 1] })
-      );
-      expect(parseValueSyntax(`<'name'>+`)).to.eql(
-        property("name", undefined, { range: [1, Infinity] })
-      );
-      expect(parseValueSyntax(`<'name'>*`)).to.eql(
-        property("name", undefined, { range: [0, Infinity] })
-      );
-      expect(parseValueSyntax(`<'name'>{2}`)).to.eql(
-        property("name", undefined, { range: [2, 2] })
-      );
-      expect(parseValueSyntax(`<'name'>{2, 4}`)).to.eql(
-        property("name", undefined, { range: [2, 4] })
-      );
-    });
-    it("literal with multipliers", () => {
-      expect(parseValueSyntax(`'name'!`)).to.eql(
-        literal("name", true, { range: [1, 1] })
-      );
-      expect(parseValueSyntax(`'name'?`)).to.eql(
-        literal("name", true, { range: [0, 1] })
-      );
-      expect(parseValueSyntax(`'name'+`)).to.eql(
-        literal("name", true, { range: [1, Infinity] })
-      );
-      expect(parseValueSyntax(`'name'*`)).to.eql(
-        literal("name", true, { range: [0, Infinity] })
-      );
-      expect(parseValueSyntax(`'name'{2}`)).to.eql(
-        literal("name", true, { range: [2, 2] })
-      );
-      expect(parseValueSyntax(`'name'{2, 4}`)).to.eql(
-        literal("name", true, { range: [2, 4] })
-      );
-    });
-    it("keyword with multipliers", () => {
-      expect(parseValueSyntax(`name!`)).to.eql(
-        keyword("name", { range: [1, 1] })
-      );
-      expect(parseValueSyntax(`name?`)).to.eql(
-        keyword("name", { range: [0, 1] })
-      );
-      expect(parseValueSyntax(`name+`)).to.eql(
-        keyword("name", { range: [1, Infinity] })
-      );
-      expect(parseValueSyntax(`name*`)).to.eql(
-        keyword("name", { range: [0, Infinity] })
-      );
-      expect(parseValueSyntax(`name{2}`)).to.eql(
-        keyword("name", { range: [2, 2] })
-      );
-      expect(parseValueSyntax(`name{2, 4}`)).to.eql(
-        keyword("name", { range: [2, 4] })
-      );
-    });
-    it("group with multipliers", () => {
-      expect(parseValueSyntax(`[a]!`)).to.eql(
-        group([keyword("a")], { range: [1, 1] })
-      );
-      expect(parseValueSyntax(`[a]?`)).to.eql(
-        group([keyword("a")], { range: [0, 1] })
-      );
-      expect(parseValueSyntax(`[a]+`)).to.eql(
-        group([keyword("a")], { range: [1, Infinity] })
-      );
-      expect(parseValueSyntax(`[a]*`)).to.eql(
-        group([keyword("a")], { range: [0, Infinity] })
-      );
-      expect(parseValueSyntax(`[a]{2}`)).to.eql(
-        group([keyword("a")], { range: [2, 2] })
-      );
-      expect(parseValueSyntax(`[a]{2, 4}`)).to.eql(
-        group([keyword("a")], { range: [2, 4] })
-      );
+    describe('multipliers', () => {
+        it('data-type with multipliers', () => {
+            expect(parseValueSyntax(`<name>!`)).to.eql(
+                dataType('name', undefined, { range: [1, 1] })
+            );
+            expect(parseValueSyntax(`<name>?`)).to.eql(
+                dataType('name', undefined, { range: [0, 1] })
+            );
+            expect(parseValueSyntax(`<name>+`)).to.eql(
+                dataType('name', undefined, { range: [1, Infinity] })
+            );
+            expect(parseValueSyntax(`<name>*`)).to.eql(
+                dataType('name', undefined, { range: [0, Infinity] })
+            );
+            expect(parseValueSyntax(`<name>{2}`)).to.eql(
+                dataType('name', undefined, { range: [2, 2] })
+            );
+            expect(parseValueSyntax(`<name>{2, 4}`)).to.eql(
+                dataType('name', undefined, { range: [2, 4] })
+            );
+        });
+        it('property with multipliers', () => {
+            expect(parseValueSyntax(`<'name'>!`)).to.eql(
+                property('name', undefined, { range: [1, 1] })
+            );
+            expect(parseValueSyntax(`<'name'>?`)).to.eql(
+                property('name', undefined, { range: [0, 1] })
+            );
+            expect(parseValueSyntax(`<'name'>+`)).to.eql(
+                property('name', undefined, { range: [1, Infinity] })
+            );
+            expect(parseValueSyntax(`<'name'>*`)).to.eql(
+                property('name', undefined, { range: [0, Infinity] })
+            );
+            expect(parseValueSyntax(`<'name'>{2}`)).to.eql(
+                property('name', undefined, { range: [2, 2] })
+            );
+            expect(parseValueSyntax(`<'name'>{2, 4}`)).to.eql(
+                property('name', undefined, { range: [2, 4] })
+            );
+        });
+        it('literal with multipliers', () => {
+            expect(parseValueSyntax(`'name'!`)).to.eql(literal('name', true, { range: [1, 1] }));
+            expect(parseValueSyntax(`'name'?`)).to.eql(literal('name', true, { range: [0, 1] }));
+            expect(parseValueSyntax(`'name'+`)).to.eql(
+                literal('name', true, { range: [1, Infinity] })
+            );
+            expect(parseValueSyntax(`'name'*`)).to.eql(
+                literal('name', true, { range: [0, Infinity] })
+            );
+            expect(parseValueSyntax(`'name'{2}`)).to.eql(literal('name', true, { range: [2, 2] }));
+            expect(parseValueSyntax(`'name'{2, 4}`)).to.eql(
+                literal('name', true, { range: [2, 4] })
+            );
+        });
+        it('keyword with multipliers', () => {
+            expect(parseValueSyntax(`name!`)).to.eql(keyword('name', { range: [1, 1] }));
+            expect(parseValueSyntax(`name?`)).to.eql(keyword('name', { range: [0, 1] }));
+            expect(parseValueSyntax(`name+`)).to.eql(keyword('name', { range: [1, Infinity] }));
+            expect(parseValueSyntax(`name*`)).to.eql(keyword('name', { range: [0, Infinity] }));
+            expect(parseValueSyntax(`name{2}`)).to.eql(keyword('name', { range: [2, 2] }));
+            expect(parseValueSyntax(`name{2, 4}`)).to.eql(keyword('name', { range: [2, 4] }));
+        });
+        it('group with multipliers', () => {
+            expect(parseValueSyntax(`[a]!`)).to.eql(group([keyword('a')], { range: [1, 1] }));
+            expect(parseValueSyntax(`[a]?`)).to.eql(group([keyword('a')], { range: [0, 1] }));
+            expect(parseValueSyntax(`[a]+`)).to.eql(
+                group([keyword('a')], { range: [1, Infinity] })
+            );
+            expect(parseValueSyntax(`[a]*`)).to.eql(
+                group([keyword('a')], { range: [0, Infinity] })
+            );
+            expect(parseValueSyntax(`[a]{2}`)).to.eql(group([keyword('a')], { range: [2, 2] }));
+            expect(parseValueSyntax(`[a]{2, 4}`)).to.eql(group([keyword('a')], { range: [2, 4] }));
+        });
     });
-  });
 
-  describe("combinators", () => {
-    describe("group", () => {
-      it("should parse group combinator", () => {
-        expect(parseValueSyntax(`[a]`)).to.eql(group([keyword("a")]));
-      });
-      it("should parse nested group combinator", () => {
-        expect(parseValueSyntax(`[[a]]`)).to.eql(
-          group([group([keyword("a")])])
-        );
-      });
-    });
-    describe("juxtaposition", () => {
-      it("should parse juxtaposition combinator (with two nodes)", () => {
-        expect(parseValueSyntax(`a b`)).to.eql(
-          juxtaposing([keyword("a"), keyword("b")])
-        );
-      });
-      it("should parse juxtaposition combinator (with three nodes)", () => {
-        expect(parseValueSyntax(`a b c`)).to.eql(
-          juxtaposing([keyword("a"), keyword("b"), keyword("c")])
-        );
-      });
-    });
-    describe("double-ampersand", () => {
-      it("should parse double-ampersand combinator", () => {
-        expect(parseValueSyntax(`a && b`)).to.eql(
-          doubleAmpersand([keyword("a"), keyword("b")])
-        );
-      });
-      it("should parse double-ampersand combinator with more then two items", () => {
-        expect(parseValueSyntax(`a && b && c`)).to.eql(
-          doubleAmpersand([keyword("a"), keyword("b"), keyword("c")])
-        );
-      });
-    });
-    describe("double-bar", () => {
-      it("should parse double-bar combinator", () => {
-        expect(parseValueSyntax(`a || b`)).to.eql(
-          doubleBar([keyword("a"), keyword("b")])
-        );
-      });
-      it("should parse double-bar combinator with more then two items", () => {
-        expect(parseValueSyntax(`a || b || c`)).to.eql(
-          doubleBar([keyword("a"), keyword("b"), keyword("c")])
-        );
-      });
-    });
-    describe("bar", () => {
-      it("should parse bar combinator", () => {
-        expect(parseValueSyntax(`a | b`)).to.eql(
-          bar([keyword("a"), keyword("b")])
-        );
-      });
-      it("should parse bar combinator", () => {
-        expect(parseValueSyntax(`a | b | c`)).to.eql(
-          bar([keyword("a"), keyword("b"), keyword("c")])
-        );
-      });
+    describe('combinators', () => {
+        describe('group', () => {
+            it('should parse group combinator', () => {
+                expect(parseValueSyntax(`[a]`)).to.eql(group([keyword('a')]));
+            });
+            it('should parse nested group combinator', () => {
+                expect(parseValueSyntax(`[[a]]`)).to.eql(group([group([keyword('a')])]));
+            });
+        });
+        describe('juxtaposition', () => {
+            it('should parse juxtaposition combinator (with two nodes)', () => {
+                expect(parseValueSyntax(`a b`)).to.eql(juxtaposing([keyword('a'), keyword('b')]));
+            });
+            it('should parse juxtaposition combinator (with three nodes)', () => {
+                expect(parseValueSyntax(`a b c`)).to.eql(
+                    juxtaposing([keyword('a'), keyword('b'), keyword('c')])
+                );
+            });
+        });
+        describe('double-ampersand', () => {
+            it('should parse double-ampersand combinator', () => {
+                expect(parseValueSyntax(`a && b`)).to.eql(
+                    doubleAmpersand([keyword('a'), keyword('b')])
+                );
+            });
+            it('should parse double-ampersand combinator with more then two items', () => {
+                expect(parseValueSyntax(`a && b && c`)).to.eql(
+                    doubleAmpersand([keyword('a'), keyword('b'), keyword('c')])
+                );
+            });
+        });
+        describe('double-bar', () => {
+            it('should parse double-bar combinator', () => {
+                expect(parseValueSyntax(`a || b`)).to.eql(doubleBar([keyword('a'), keyword('b')]));
+            });
+            it('should parse double-bar combinator with more then two items', () => {
+                expect(parseValueSyntax(`a || b || c`)).to.eql(
+                    doubleBar([keyword('a'), keyword('b'), keyword('c')])
+                );
+            });
+        });
+        describe('bar', () => {
+            it('should parse bar combinator', () => {
+                expect(parseValueSyntax(`a | b`)).to.eql(bar([keyword('a'), keyword('b')]));
+            });
+            it('should parse bar combinator', () => {
+                expect(parseValueSyntax(`a | b | c`)).to.eql(
+                    bar([keyword('a'), keyword('b'), keyword('c')])
+                );
+            });
+        });
     });
-  });
 
-  describe("grouping order", () => {
-    it("no grouping ordering", () => {
-      expect(parseValueSyntax(`a b | c || d && e f`)).to.eql(
-        bar([
-          juxtaposing([keyword("a"), keyword("b")]),
-          doubleBar([
-            keyword("c"),
-            doubleAmpersand([
-              keyword("d"),
-              juxtaposing([keyword("e"), keyword("f")]),
-            ]),
-          ]),
-        ])
-      );
+    describe('grouping order', () => {
+        it('no grouping ordering', () => {
+            expect(parseValueSyntax(`a b | c || d && e f`)).to.eql(
+                bar([
+                    juxtaposing([keyword('a'), keyword('b')]),
+                    doubleBar([
+                        keyword('c'),
+                        doubleAmpersand([keyword('d'), juxtaposing([keyword('e'), keyword('f')])]),
+                    ]),
+                ])
+            );
+        });
     });
-  });
 });
diff --git a/packages/css-value-parser/test/define-property.spec.ts b/packages/css-value-parser/test/define-property.spec.ts
index ddb9527c..3bf5bf69 100644
--- a/packages/css-value-parser/test/define-property.spec.ts
+++ b/packages/css-value-parser/test/define-property.spec.ts
@@ -1,403 +1,403 @@
-import { defineProperty, parseCSSValue } from "@tokey/css-value-parser";
-import { expect } from "chai";
+import { defineProperty, parseCSSValue } from '@tokey/css-value-parser';
+import { expect } from 'chai';
 
 describe(`value-parser/define-property`, () => {
-  describe(`validation`, () => {
-    it(`should approve valid syntax`, () => {
-      const p = defineProperty({
-        name: `my-prop`,
-        syntax: `<number>`,
-      });
+    describe(`validation`, () => {
+        it(`should approve valid syntax`, () => {
+            const p = defineProperty({
+                name: `my-prop`,
+                syntax: `<number>`,
+            });
 
-      expect(p.validate(parseCSSValue(`55`))).to.equal([]);
-    });
-    it(`should warn on unexpected type`, () => {
-      const p = defineProperty({
-        name: `my-prop`,
-        syntax: `<number>`,
-      });
+            expect(p.validate(parseCSSValue(`55`))).to.equal([]);
+        });
+        it(`should warn on unexpected type`, () => {
+            const p = defineProperty({
+                name: `my-prop`,
+                syntax: `<number>`,
+            });
 
-      const ast = parseCSSValue(`abc`);
-      const errors = p.validate(ast);
+            const ast = parseCSSValue(`abc`);
+            const errors = p.validate(ast);
 
-      expect(errors).to.equal([
-        {
-          msg: defineProperty.errors.unexpectedType(ast[0], `<number>`),
-          ref: ast[0],
-        },
-      ]);
-    });
-    it(`should warn on top level comma`, () => {
-      const p = defineProperty({
-        name: `my-prop`,
-        syntax: `<number>`,
-      });
+            expect(errors).to.equal([
+                {
+                    msg: defineProperty.errors.unexpectedType(ast[0], `<number>`),
+                    ref: ast[0],
+                },
+            ]);
+        });
+        it(`should warn on top level comma`, () => {
+            const p = defineProperty({
+                name: `my-prop`,
+                syntax: `<number>`,
+            });
 
-      const ast = parseCSSValue(`44,55`);
-      const errors = p.validate(ast);
+            const ast = parseCSSValue(`44,55`);
+            const errors = p.validate(ast);
 
-      expect(errors).to.equal([
-        {
-          msg: defineProperty.errors.unexpectedComma(),
-          ref: ast[1],
-        },
-      ]);
-    });
-    it(`should NOT warn on expected top level comma`, () => {
-      const p = defineProperty({
-        name: `my-prop`,
-        syntax: `<number>#`,
-        topLevelCommaSeparation: true,
-      });
+            expect(errors).to.equal([
+                {
+                    msg: defineProperty.errors.unexpectedComma(),
+                    ref: ast[1],
+                },
+            ]);
+        });
+        it(`should NOT warn on expected top level comma`, () => {
+            const p = defineProperty({
+                name: `my-prop`,
+                syntax: `<number>#`,
+                topLevelCommaSeparation: true,
+            });
 
-      const ast = parseCSSValue(`44,55`);
-      const errors = p.validate(ast);
+            const ast = parseCSSValue(`44,55`);
+            const errors = p.validate(ast);
 
-      expect(errors).to.equal([]);
+            expect(errors).to.equal([]);
+        });
     });
-  });
-  describe(`format`, () => {
-    it(`should match a defined format`, () => {
-      const p = defineProperty({
-        name: `my-prop`,
-        syntax: `<number> | <string> | <boolean>`,
-        formats: {
-          number: `<number>`,
-          string: `<string>`,
-          boolean: `<boolean>`,
-        },
-      });
+    describe(`format`, () => {
+        it(`should match a defined format`, () => {
+            const p = defineProperty({
+                name: `my-prop`,
+                syntax: `<number> | <string> | <boolean>`,
+                formats: {
+                    number: `<number>`,
+                    string: `<string>`,
+                    boolean: `<boolean>`,
+                },
+            });
 
-      expect(p.getFormat(parseCSSValue(`55`)), `number`).to.eql(`number`);
-      expect(p.getFormat(parseCSSValue(`xy`)), `string`).to.eql(`string`);
-      expect(p.getFormat(parseCSSValue(`true`)), `boolean`).to.eql(`boolean`);
-      expect(p.getFormat(parseCSSValue(`5px`)), `unknown`).to.eql(undefined);
+            expect(p.getFormat(parseCSSValue(`55`)), `number`).to.eql(`number`);
+            expect(p.getFormat(parseCSSValue(`xy`)), `string`).to.eql(`string`);
+            expect(p.getFormat(parseCSSValue(`true`)), `boolean`).to.eql(`boolean`);
+            expect(p.getFormat(parseCSSValue(`5px`)), `unknown`).to.eql(undefined);
+        });
     });
-  });
-  describe(`classification`, () => {
-    it(`should classify inner parts`, () => {
-      const p = defineProperty({
-        name: `my-prop`,
-        syntax: `<number> <string>`,
-        classifications: {
-          amount: (node) => node.type === `<number>`,
-          name: (node) => node.type === `<string>`,
-        },
-      });
+    describe(`classification`, () => {
+        it(`should classify inner parts`, () => {
+            const p = defineProperty({
+                name: `my-prop`,
+                syntax: `<number> <string>`,
+                classifications: {
+                    amount: (node) => node.type === `<number>`,
+                    name: (node) => node.type === `<string>`,
+                },
+            });
 
-      const ast = parseCSSValue(`50 abc`);
-      const classification = p.classify(ast);
+            const ast = parseCSSValue(`50 abc`);
+            const classification = p.classify(ast);
 
-      expect(classification.amount.value).to.equal(ast[0]);
-      expect(classification.name.value).to.equal(ast[2]);
-    });
-  });
-  describe(`vars`, () => {
-    // ToDo: handle unknown var
-    describe(`css properties`, () => {
-      it(`should resolve origin`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<number>`,
-          classifications: {
-            amount: (node) => node.type === `<number>`,
-          },
+            expect(classification.amount.value).to.equal(ast[0]);
+            expect(classification.name.value).to.equal(ast[2]);
         });
+    });
+    describe(`vars`, () => {
+        // ToDo: handle unknown var
+        describe(`css properties`, () => {
+            it(`should resolve origin`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<number>`,
+                    classifications: {
+                        amount: (node) => node.type === `<number>`,
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x)`);
-        const cssVars = {
-          x: parseCSSValue(`123`),
-        };
+                const ast = parseCSSValue(`var(--x)`);
+                const cssVars = {
+                    x: parseCSSValue(`123`),
+                };
 
-        expect(p.classify(ast, { cssVars })).deep.include({
-          amount: {
-            value: [cssVars.x[0]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [0] }],
-              },
-            ],
-          },
-        });
-      });
-      it(`should resolve origin deep`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<number>`,
-          classifications: {
-            amount: (node) => node.type === `<number>`,
-          },
-        });
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    amount: {
+                        value: [cssVars.x[0]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [0] }],
+                            },
+                        ],
+                    },
+                });
+            });
+            it(`should resolve origin deep`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<number>`,
+                    classifications: {
+                        amount: (node) => node.type === `<number>`,
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x)`);
-        const cssVars = {
-          x: parseCSSValue(`var(--y)`),
-          y: parseCSSValue(`123`),
-        };
+                const ast = parseCSSValue(`var(--x)`);
+                const cssVars = {
+                    x: parseCSSValue(`var(--y)`),
+                    y: parseCSSValue(`123`),
+                };
 
-        expect(p.classify(ast, { cssVars })).deep.include({
-          amount: {
-            value: [cssVars.y[0]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [
-                  {
-                    origin: cssVars.x,
-                    nodes: [0],
-                    resolved: [{ origin: cssVars.y, nodes: [0] }],
-                  },
-                ],
-              },
-            ],
-          },
-        });
-      });
-      it(`should resolve multiple parts from single origin`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<number> <number>`,
-          classifications: {
-            amountA: (node, { indexOfType }) =>
-              node.type === `<number>` && indexOfType === 0,
-            amountB: (node, { indexOfType }) =>
-              node.type === `<number>` && indexOfType === 1,
-          },
-        });
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    amount: {
+                        value: [cssVars.y[0]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [
+                                    {
+                                        origin: cssVars.x,
+                                        nodes: [0],
+                                        resolved: [{ origin: cssVars.y, nodes: [0] }],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                });
+            });
+            it(`should resolve multiple parts from single origin`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<number> <number>`,
+                    classifications: {
+                        amountA: (node, { indexOfType }) =>
+                            node.type === `<number>` && indexOfType === 0,
+                        amountB: (node, { indexOfType }) =>
+                            node.type === `<number>` && indexOfType === 1,
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x)`);
-        const cssVars = {
-          x: parseCSSValue(`123 789`),
-        };
+                const ast = parseCSSValue(`var(--x)`);
+                const cssVars = {
+                    x: parseCSSValue(`123 789`),
+                };
 
-        expect(p.classify(ast, { cssVars })).deep.include({
-          amountA: {
-            value: [cssVars.x[0]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [0] }],
-              },
-            ],
-          },
-          amountB: {
-            value: [cssVars.x[2]],
-            resolved: [
-              [
-                {
-                  origin: ast,
-                  nodes: [0],
-                  resolved: [{ origin: cssVars.x, nodes: [2] }],
-                },
-              ],
-            ],
-          },
-        });
-      });
-      it(`should resolve multiple parts from multiple origins`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<number> <number>`,
-          classifications: {
-            amountA: (node, { indexOfType }) =>
-              node.type === `<number>` && indexOfType === 0,
-            amountB: (node, { indexOfType }) =>
-              node.type === `<number>` && indexOfType === 1,
-          },
-        });
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    amountA: {
+                        value: [cssVars.x[0]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [0] }],
+                            },
+                        ],
+                    },
+                    amountB: {
+                        value: [cssVars.x[2]],
+                        resolved: [
+                            [
+                                {
+                                    origin: ast,
+                                    nodes: [0],
+                                    resolved: [{ origin: cssVars.x, nodes: [2] }],
+                                },
+                            ],
+                        ],
+                    },
+                });
+            });
+            it(`should resolve multiple parts from multiple origins`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<number> <number>`,
+                    classifications: {
+                        amountA: (node, { indexOfType }) =>
+                            node.type === `<number>` && indexOfType === 0,
+                        amountB: (node, { indexOfType }) =>
+                            node.type === `<number>` && indexOfType === 1,
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x) var(--y)`);
-        const cssVars = {
-          x: parseCSSValue(`123`),
-          y: parseCSSValue(`789`),
-        };
+                const ast = parseCSSValue(`var(--x) var(--y)`);
+                const cssVars = {
+                    x: parseCSSValue(`123`),
+                    y: parseCSSValue(`789`),
+                };
 
-        expect(p.classify(ast, { cssVars })).deep.include({
-          amountA: {
-            value: [cssVars.x[0]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [0] }],
-              },
-            ],
-          },
-          amountB: {
-            value: [cssVars.y[0]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [2],
-                resolved: [{ origin: cssVars.y, nodes: [0] }],
-              },
-            ],
-          },
-        });
-      });
-      it(`should resolve complex part from single origin`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<length> <length>`,
-          classifications: {
-            position: {
-              syntax: `<length> <length>`,
-            },
-          },
-        });
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    amountA: {
+                        value: [cssVars.x[0]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [0] }],
+                            },
+                        ],
+                    },
+                    amountB: {
+                        value: [cssVars.y[0]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [2],
+                                resolved: [{ origin: cssVars.y, nodes: [0] }],
+                            },
+                        ],
+                    },
+                });
+            });
+            it(`should resolve complex part from single origin`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<length> <length>`,
+                    classifications: {
+                        position: {
+                            syntax: `<length> <length>`,
+                        },
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x)`);
-        const cssVars = {
-          x: parseCSSValue(`1px 2px`),
-        };
+                const ast = parseCSSValue(`var(--x)`);
+                const cssVars = {
+                    x: parseCSSValue(`1px 2px`),
+                };
 
-        expect(p.classify(ast, { cssVars })).deep.include({
-          position: {
-            value: [cssVars.x[0], cssVars.x[1], cssVars.x[2]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [0] }],
-              },
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [1] }],
-              },
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [2] }],
-              },
-            ],
-          },
-        });
-      });
-      it(`should resolve complex part from multiple origins`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<length> <length>`,
-          classifications: {
-            position: {
-              syntax: `<length> <length>`,
-            },
-          },
-        });
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    position: {
+                        value: [cssVars.x[0], cssVars.x[1], cssVars.x[2]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [0] }],
+                            },
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [1] }],
+                            },
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [2] }],
+                            },
+                        ],
+                    },
+                });
+            });
+            it(`should resolve complex part from multiple origins`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<length> <length>`,
+                    classifications: {
+                        position: {
+                            syntax: `<length> <length>`,
+                        },
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x) var(--y)`);
-        const cssVars = {
-          x: parseCSSValue(`1px`),
-          y: parseCSSValue(`2px`),
-        };
+                const ast = parseCSSValue(`var(--x) var(--y)`);
+                const cssVars = {
+                    x: parseCSSValue(`1px`),
+                    y: parseCSSValue(`2px`),
+                };
 
-        expect(p.classify(ast, { cssVars })).deep.include({
-          position: {
-            value: [cssVars.x[0], ast[1], cssVars.y[0]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [0] }],
-              },
-              { origin: ast, nodes: [1] },
-              {
-                origin: ast,
-                nodes: [2],
-                resolved: [{ origin: cssVars.y, nodes: [0] }],
-              },
-            ],
-          },
-        });
-      });
-      it(`should NOT resolve concatenated values`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<length>`,
-          classifications: {
-            size: (node) => node.type === `<length>`,
-          },
-        });
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    position: {
+                        value: [cssVars.x[0], ast[1], cssVars.y[0]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [0] }],
+                            },
+                            { origin: ast, nodes: [1] },
+                            {
+                                origin: ast,
+                                nodes: [2],
+                                resolved: [{ origin: cssVars.y, nodes: [0] }],
+                            },
+                        ],
+                    },
+                });
+            });
+            it(`should NOT resolve concatenated values`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<length>`,
+                    classifications: {
+                        size: (node) => node.type === `<length>`,
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x)px`);
-        const cssVars = {
-          x: parseCSSValue(`5`),
-        };
+                const ast = parseCSSValue(`var(--x)px`);
+                const cssVars = {
+                    x: parseCSSValue(`5`),
+                };
 
-        // ToDo: maybe all methods should always output errors
-        expect(p.classify(ast, { cssVars })).deep.include({
-          amount: {
-            ref: undefined,
-            resolved: [],
-          },
-        });
-      });
-    });
-    describe(`build vars`, () => {
-      const $varParser = {} as any;
-      it(`should resolve origin`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<number>`,
-          classifications: {
-            amount: (node) => node.type === `<number>`,
-          },
+                // ToDo: maybe all methods should always output errors
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    amount: {
+                        ref: undefined,
+                        resolved: [],
+                    },
+                });
+            });
         });
+        describe(`build vars`, () => {
+            const $varParser = {} as any;
+            it(`should resolve origin`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<number>`,
+                    classifications: {
+                        amount: (node) => node.type === `<number>`,
+                    },
+                });
 
-        const ast = parseCSSValue(`$x`, { parseBuildVar: $varParser });
-        const buildVars: Record<string, ReturnType<typeof parseCSSValue>> = {
-          $x: parseCSSValue(`123`),
-        };
+                const ast = parseCSSValue(`$x`, { parseBuildVar: $varParser });
+                const buildVars: Record<string, ReturnType<typeof parseCSSValue>> = {
+                    $x: parseCSSValue(`123`),
+                };
 
-        expect(
-          p.classify(ast, { resolveBuildVar: ({ id }) => buildVars[id] })
-        ).deep.include({
-          amount: {
-            value: [buildVars.$x[0]],
-            resolved: [
-              {
-                origin: ast[0],
-                nodes: [0],
-                resolved: [{ origin: buildVars.$x, nodes: [0] }],
-              },
-            ],
-          },
-        });
-      });
-      it(`should resolve concatenated origin`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<length>`,
-          classifications: {
-            amount: (node) => node.type === `<length>`,
-          },
-        });
+                expect(
+                    p.classify(ast, { resolveBuildVar: ({ id }) => buildVars[id] })
+                ).deep.include({
+                    amount: {
+                        value: [buildVars.$x[0]],
+                        resolved: [
+                            {
+                                origin: ast[0],
+                                nodes: [0],
+                                resolved: [{ origin: buildVars.$x, nodes: [0] }],
+                            },
+                        ],
+                    },
+                });
+            });
+            it(`should resolve concatenated origin`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<length>`,
+                    classifications: {
+                        amount: (node) => node.type === `<length>`,
+                    },
+                });
 
-        const ast = parseCSSValue(`#($x)px`, { parseBuildVar: $varParser });
-        const buildVars: Record<string, ReturnType<typeof parseCSSValue>> = {
-          $x: parseCSSValue(`123`),
-        };
+                const ast = parseCSSValue(`#($x)px`, { parseBuildVar: $varParser });
+                const buildVars: Record<string, ReturnType<typeof parseCSSValue>> = {
+                    $x: parseCSSValue(`123`),
+                };
 
-        expect(
-          p.classify(ast, { resolveBuildVar: ({ id }) => buildVars[id] })
-        ).deep.include({
-          amount: {
-            value: [buildVars.$x[0], ast[1]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: buildVars.$x, nodes: [0] }],
-              },
-              { origin: ast, nodes: [ast[1]] },
-            ],
-          },
+                expect(
+                    p.classify(ast, { resolveBuildVar: ({ id }) => buildVars[id] })
+                ).deep.include({
+                    amount: {
+                        value: [buildVars.$x[0], ast[1]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: buildVars.$x, nodes: [0] }],
+                            },
+                            { origin: ast, nodes: [ast[1]] },
+                        ],
+                    },
+                });
+            });
         });
-      });
     });
-  });
 });
diff --git a/packages/css-value-parser/test/properties/background.spec.ts b/packages/css-value-parser/test/properties/background.spec.ts
index 9dffd101..7a23323d 100644
--- a/packages/css-value-parser/test/properties/background.spec.ts
+++ b/packages/css-value-parser/test/properties/background.spec.ts
@@ -1,29 +1,29 @@
-import { parseCSSValue, background } from "@tokey/css-value-parser";
-import { expect } from "chai";
+import { parseCSSValue, background } from '@tokey/css-value-parser';
+import { expect } from 'chai';
 
 describe(`value-parser/properties/background`, () => {
-  it(`should resolve classification`, () => {
-    const ast = parseCSSValue(
-      //0  1                                       2   3  4  5      6         7      8          9
-      `red linear-gradient(green 0%, yellow 100%) 40% 30% / auto border-box fixed padding-box repeat-x`
-    );
+    it(`should resolve classification`, () => {
+        const ast = parseCSSValue(
+            //0  1                                       2   3  4  5      6         7      8          9
+            `red linear-gradient(green 0%, yellow 100%) 40% 30% / auto border-box fixed padding-box repeat-x`
+        );
 
-    const classification = background.classify(ast);
+        const classification = background.classify(ast);
 
-    expect(classification).to.eql([
-      {
-        "background-color": { ref: [ast[0]], isProperty: true }, // red
-        "background-image": { ref: [ast[1]], isProperty: true }, // linear-gradient
-        "background-position": {
-          ref: [ast[2], ast[3]],
-          isProperty: true,
-        }, // 40% 30%
-        "background-size": { ref: [ast[5]], isProperty: true }, // auto
-        "background-origin": { ref: [ast[6]], isProperty: true }, // border-box
-        "background-attachment": { ref: [ast[7]], isProperty: true }, // fixed
-        "background-clip": { ref: [ast[8]], isProperty: true }, // padding-box
-        "background-repeat": { ref: [ast[9]], isProperty: true }, // repeat-x
-      },
-    ]);
-  });
+        expect(classification).to.eql([
+            {
+                'background-color': { ref: [ast[0]], isProperty: true }, // red
+                'background-image': { ref: [ast[1]], isProperty: true }, // linear-gradient
+                'background-position': {
+                    ref: [ast[2], ast[3]],
+                    isProperty: true,
+                }, // 40% 30%
+                'background-size': { ref: [ast[5]], isProperty: true }, // auto
+                'background-origin': { ref: [ast[6]], isProperty: true }, // border-box
+                'background-attachment': { ref: [ast[7]], isProperty: true }, // fixed
+                'background-clip': { ref: [ast[8]], isProperty: true }, // padding-box
+                'background-repeat': { ref: [ast[9]], isProperty: true }, // repeat-x
+            },
+        ]);
+    });
 });
diff --git a/packages/css-value-parser/test/properties/margin.spec.ts b/packages/css-value-parser/test/properties/margin.spec.ts
index dbde9408..cd54c16d 100644
--- a/packages/css-value-parser/test/properties/margin.spec.ts
+++ b/packages/css-value-parser/test/properties/margin.spec.ts
@@ -1,5 +1,5 @@
-import { parseCSSValue, margin } from "@tokey/css-value-parser";
-import { expect } from "chai";
+import { parseCSSValue, margin } from '@tokey/css-value-parser';
+import { expect } from 'chai';
 /*
 - parse unknown syntax (property)
 - toShorthand
@@ -9,118 +9,118 @@ import { expect } from "chai";
 - vars - handle runtime vars
 */
 describe(`value-parser/properties/margin`, () => {
-  it(`should parse unknown syntax`, () => {
-    const twoValues = parseCSSValue(`1px`);
-    expect(twoValues).to.eql([
-      {
-        type: `<length>`,
-        value: `1px`,
-      },
-      {
-        type: `<SEP>`,
-        value: ` `,
-      },
-      {
-        type: `<length>`,
-        value: `2px`,
-      },
-    ]);
-  });
-  it(`should resolve format`, () => {
-    const oneValue = parseCSSValue(`1px`);
-    expect(margin.getFormat(oneValue)).to.eql(`all`);
+    it(`should parse unknown syntax`, () => {
+        const twoValues = parseCSSValue(`1px`);
+        expect(twoValues).to.eql([
+            {
+                type: `<length>`,
+                value: `1px`,
+            },
+            {
+                type: `<SEP>`,
+                value: ` `,
+            },
+            {
+                type: `<length>`,
+                value: `2px`,
+            },
+        ]);
+    });
+    it(`should resolve format`, () => {
+        const oneValue = parseCSSValue(`1px`);
+        expect(margin.getFormat(oneValue)).to.eql(`all`);
 
-    const twoValues = parseCSSValue(`1px 2px`);
-    expect(margin.getFormat(twoValues)).to.eql(`horizontal-vertical`);
+        const twoValues = parseCSSValue(`1px 2px`);
+        expect(margin.getFormat(twoValues)).to.eql(`horizontal-vertical`);
 
-    const threeValues = parseCSSValue(`1px 2px 3px`);
-    expect(margin.getFormat(threeValues)).to.eql(`top-horizontal-bottom`);
+        const threeValues = parseCSSValue(`1px 2px 3px`);
+        expect(margin.getFormat(threeValues)).to.eql(`top-horizontal-bottom`);
 
-    const fourValues = parseCSSValue(`1px 2px 3px 4px`);
-    expect(margin.getFormat(fourValues)).to.eql(`top-right-bottom-left`);
+        const fourValues = parseCSSValue(`1px 2px 3px 4px`);
+        expect(margin.getFormat(fourValues)).to.eql(`top-right-bottom-left`);
 
-    const invalid = parseCSSValue(`1px 2px 3px 4px 5px`);
-    expect(margin.getFormat(invalid)).to.eql(`invalid`);
-  });
-  describe(`classification`, () => {
-    it(`should resolve all formats`, () => {
-      const singleValue = parseCSSValue(`1px`);
-      expect(margin.classify(singleValue), `single value`).to.eql({
-        "margin-top": { value: [singleValue[0]] },
-        "margin-right": { value: [singleValue[0]] },
-        "margin-bottom": { value: [singleValue[0]] },
-        "margin-left": { value: [singleValue[0]] },
-      });
+        const invalid = parseCSSValue(`1px 2px 3px 4px 5px`);
+        expect(margin.getFormat(invalid)).to.eql(`invalid`);
+    });
+    describe(`classification`, () => {
+        it(`should resolve all formats`, () => {
+            const singleValue = parseCSSValue(`1px`);
+            expect(margin.classify(singleValue), `single value`).to.eql({
+                'margin-top': { value: [singleValue[0]] },
+                'margin-right': { value: [singleValue[0]] },
+                'margin-bottom': { value: [singleValue[0]] },
+                'margin-left': { value: [singleValue[0]] },
+            });
 
-      const twoValues = parseCSSValue(`1px 2px`);
-      expect(margin.classify(twoValues), `two values`).to.eql({
-        "margin-top": { value: [twoValues[2]] },
-        "margin-right": { value: [twoValues[0]] },
-        "margin-bottom": { value: [twoValues[2]] },
-        "margin-left": { value: [twoValues[0]] },
-      });
+            const twoValues = parseCSSValue(`1px 2px`);
+            expect(margin.classify(twoValues), `two values`).to.eql({
+                'margin-top': { value: [twoValues[2]] },
+                'margin-right': { value: [twoValues[0]] },
+                'margin-bottom': { value: [twoValues[2]] },
+                'margin-left': { value: [twoValues[0]] },
+            });
 
-      const threeValues = parseCSSValue(`1px 2px 3px`);
-      expect(margin.classify(threeValues), `three values`).to.eql({
-        "margin-top": { value: [threeValues[0]] },
-        "margin-right": { value: [threeValues[2]] },
-        "margin-bottom": { value: [threeValues[4]] },
-        "margin-left": { value: [threeValues[2]] },
-      });
+            const threeValues = parseCSSValue(`1px 2px 3px`);
+            expect(margin.classify(threeValues), `three values`).to.eql({
+                'margin-top': { value: [threeValues[0]] },
+                'margin-right': { value: [threeValues[2]] },
+                'margin-bottom': { value: [threeValues[4]] },
+                'margin-left': { value: [threeValues[2]] },
+            });
 
-      const fourValues = parseCSSValue(`1px 2px 3px 4px`);
-      expect(margin.classify(threeValues), `four values`).to.eql({
-        "margin-top": { value: [fourValues[0]] },
-        "margin-right": { value: [fourValues[2]] },
-        "margin-bottom": { value: [fourValues[4]] },
-        "margin-left": { value: [fourValues[2]] },
-      });
-    });
-    it(`should resolve params`, () => {
-      const ast = parseCSSValue(`var(--size)`);
-      const sizeParam = parseCSSValue(`5px`);
-      const cssVars = {
-        size: sizeParam,
-      };
+            const fourValues = parseCSSValue(`1px 2px 3px 4px`);
+            expect(margin.classify(threeValues), `four values`).to.eql({
+                'margin-top': { value: [fourValues[0]] },
+                'margin-right': { value: [fourValues[2]] },
+                'margin-bottom': { value: [fourValues[4]] },
+                'margin-left': { value: [fourValues[2]] },
+            });
+        });
+        it(`should resolve params`, () => {
+            const ast = parseCSSValue(`var(--size)`);
+            const sizeParam = parseCSSValue(`5px`);
+            const cssVars = {
+                size: sizeParam,
+            };
 
-      expect(margin.classify(ast, { cssVars }), `single value`).to.eql({
-        "margin-top": {
-          value: [cssVars.size[0]],
-          resolved: [
-            [
-              { origin: ast, nodes: [ast[0]] },
-              { origin: cssVars.size, nodes: [cssVars.size[0]] },
-            ],
-          ],
-        },
-        "margin-right": {
-          value: [cssVars.size[0]],
-          resolved: [
-            [
-              { origin: ast, nodes: [ast[0]] },
-              { origin: cssVars.size, nodes: [cssVars.size[0]] },
-            ],
-          ],
-        },
-        "margin-bottom": {
-          value: [cssVars.size[0]],
-          resolved: [
-            [
-              { origin: ast, nodes: [ast[0]] },
-              { origin: cssVars.size, nodes: [cssVars.size[0]] },
-            ],
-          ],
-        },
-        "margin-left": {
-          value: [cssVars.size[0]],
-          resolved: [
-            [
-              { origin: ast, nodes: [ast[0]] },
-              { origin: cssVars.size, nodes: [cssVars.size[0]] },
-            ],
-          ],
-        },
-      });
+            expect(margin.classify(ast, { cssVars }), `single value`).to.eql({
+                'margin-top': {
+                    value: [cssVars.size[0]],
+                    resolved: [
+                        [
+                            { origin: ast, nodes: [ast[0]] },
+                            { origin: cssVars.size, nodes: [cssVars.size[0]] },
+                        ],
+                    ],
+                },
+                'margin-right': {
+                    value: [cssVars.size[0]],
+                    resolved: [
+                        [
+                            { origin: ast, nodes: [ast[0]] },
+                            { origin: cssVars.size, nodes: [cssVars.size[0]] },
+                        ],
+                    ],
+                },
+                'margin-bottom': {
+                    value: [cssVars.size[0]],
+                    resolved: [
+                        [
+                            { origin: ast, nodes: [ast[0]] },
+                            { origin: cssVars.size, nodes: [cssVars.size[0]] },
+                        ],
+                    ],
+                },
+                'margin-left': {
+                    value: [cssVars.size[0]],
+                    resolved: [
+                        [
+                            { origin: ast, nodes: [ast[0]] },
+                            { origin: cssVars.size, nodes: [cssVars.size[0]] },
+                        ],
+                    ],
+                },
+            });
+        });
     });
-  });
 });
diff --git a/packages/css-value-parser/test/types.d.ts b/packages/css-value-parser/test/types.d.ts
index bd9ea6e6..bda91a1f 100644
--- a/packages/css-value-parser/test/types.d.ts
+++ b/packages/css-value-parser/test/types.d.ts
@@ -1,19 +1,19 @@
-declare module "@webref/css" {
-  interface SpecData {
-    properties: Record<
-      string,
-      {
-        name: string;
-        value?: string;
-        initial: string;
-      }
-    >;
-    valuespaces: Record<
-      string,
-      {
-        value?: string;
-      }
-    >;
-  }
-  export function listAll(): Promise<Record<string, SpecData>>;
+declare module '@webref/css' {
+    interface SpecData {
+        properties: Record<
+            string,
+            {
+                name: string;
+                value?: string;
+                initial: string;
+            }
+        >;
+        valuespaces: Record<
+            string,
+            {
+                value?: string;
+            }
+        >;
+    }
+    export function listAll(): Promise<Record<string, SpecData>>;
 }
diff --git a/packages/css-value-parser/test/value-parser.spec.ts b/packages/css-value-parser/test/value-parser.spec.ts
index 90ada88e..c5a85a3e 100644
--- a/packages/css-value-parser/test/value-parser.spec.ts
+++ b/packages/css-value-parser/test/value-parser.spec.ts
@@ -1,643 +1,643 @@
 import {
-  parseCSSValue,
-  stringifyCSSValue,
-  customIdent,
-  dashedIdent,
-  literal,
-  cssWideKeyword,
-  space,
-  invalid,
-  comment,
-  string,
-  integer,
-  number,
-  length,
-  percentage,
-  angle,
-  time,
-  flex,
-  call,
-  unknownUnit,
-  frequency,
-  resolution,
-  color,
-} from "@tokey/css-value-parser";
-import { expect } from "chai";
+    parseCSSValue,
+    stringifyCSSValue,
+    customIdent,
+    dashedIdent,
+    literal,
+    cssWideKeyword,
+    space,
+    invalid,
+    comment,
+    string,
+    integer,
+    number,
+    length,
+    percentage,
+    angle,
+    time,
+    flex,
+    call,
+    unknownUnit,
+    frequency,
+    resolution,
+    color,
+} from '@tokey/css-value-parser';
+import { expect } from 'chai';
 
 describe(`value-parser`, () => {
-  interface TestDef {
-    type: string;
-    desc?: string;
-    source: string;
-    expected: ReturnType<typeof parseCSSValue>;
-  }
-  const test = ({ source, expected }: Pick<TestDef, `source` | `expected`>) => {
-    const ast = parseCSSValue(source);
-    expect(ast, `parse`).to.eql(expected);
-    expect(stringifyCSSValue(ast), `stringify`).to.equal(source);
-  };
-  const createTest = ({ type, source, expected, desc }: TestDef) => {
-    desc = desc ? ` (${desc})` : ``;
-    it(`should parse "${type}" type${desc}`, () => {
-      test({ source, expected });
+    interface TestDef {
+        type: string;
+        desc?: string;
+        source: string;
+        expected: ReturnType<typeof parseCSSValue>;
+    }
+    const test = ({ source, expected }: Pick<TestDef, `source` | `expected`>) => {
+        const ast = parseCSSValue(source);
+        expect(ast, `parse`).to.eql(expected);
+        expect(stringifyCSSValue(ast), `stringify`).to.equal(source);
+    };
+    const createTest = ({ type, source, expected, desc }: TestDef) => {
+        desc = desc ? ` (${desc})` : ``;
+        it(`should parse "${type}" type${desc}`, () => {
+            test({ source, expected });
+        });
+    };
+    describe(`space`, () => {
+        [
+            {
+                type: `space`,
+                source: ` `,
+                expected: [space({ value: ` `, start: 0, end: 1 })],
+            },
+            {
+                type: `space`,
+                desc: `with before&after`,
+                source: `\t   \n`,
+                expected: [
+                    space({
+                        value: ` `,
+                        before: `\t`,
+                        after: `  \n`,
+                        start: 0,
+                        end: 5,
+                    }),
+                ],
+            },
+        ].forEach(createTest);
     });
-  };
-  describe(`space`, () => {
-    [
-      {
-        type: `space`,
-        source: ` `,
-        expected: [space({ value: ` `, start: 0, end: 1 })],
-      },
-      {
-        type: `space`,
-        desc: `with before&after`,
-        source: `\t   \n`,
-        expected: [
-          space({
-            value: ` `,
-            before: `\t`,
-            after: `  \n`,
-            start: 0,
-            end: 5,
-          }),
-        ],
-      },
-    ].forEach(createTest);
-  });
-  describe(`literals`, () => {
-    [
-      {
-        type: `comma`,
-        source: `,`,
-        expected: [literal({ value: `,`, start: 0, end: 1 })],
-      },
-      {
-        type: `slash`,
-        source: `/`,
-        expected: [literal({ value: `/`, start: 0, end: 1 })],
-      },
-      {
-        type: `+`,
-        source: `+`,
-        expected: [literal({ value: `+`, start: 0, end: 1 })],
-      },
-      {
-        type: `-`,
-        source: `-`,
-        expected: [literal({ value: `-`, start: 0, end: 1 })],
-      },
-    ].forEach(createTest);
-  });
-  describe(`css-wide-keyword`, () => {
-    [
-      {
-        type: `inherit`,
-        source: `inherit`,
-        expected: [cssWideKeyword({ value: `inherit`, start: 0, end: 7 })],
-      },
-      {
-        type: `unset`,
-        source: `unset`,
-        expected: [cssWideKeyword({ value: `unset`, start: 0, end: 5 })],
-      },
-      {
-        type: `initial`,
-        source: `initial`,
-        expected: [cssWideKeyword({ value: `initial`, start: 0, end: 7 })],
-      },
-      {
-        type: `inherit`,
-        desc: `case-insensitive`,
-        source: `iNhErIt`,
-        expected: [cssWideKeyword({ value: `iNhErIt`, start: 0, end: 7 })],
-      },
-      {
-        type: `unset`,
-        desc: `case-insensitive`,
-        source: `uNsEt`,
-        expected: [cssWideKeyword({ value: `uNsEt`, start: 0, end: 5 })],
-      },
-      {
-        type: `initial`,
-        desc: `case-insensitive`,
-        source: `InItIaL`,
-        expected: [cssWideKeyword({ value: `InItIaL`, start: 0, end: 7 })],
-      },
-    ].forEach(createTest);
-  });
-  describe(`ident`, () => {
-    describe(`custom-ident`, () => {
-      [
-        {
-          type: `<custom-ident>`,
-          source: `abc`,
-          expected: [
-            customIdent({
-              value: `abc`,
-              start: 0,
-              end: 3,
-            }),
-          ],
-        },
-        {
-          type: `<custom-ident>`,
-          desc: `with dashes`,
-          source: `-a-b-c-`,
-          expected: [
-            customIdent({
-              value: `-a-b-c-`,
-              start: 0,
-              end: 7,
-            }),
-          ],
-        },
-      ].forEach(createTest);
+    describe(`literals`, () => {
+        [
+            {
+                type: `comma`,
+                source: `,`,
+                expected: [literal({ value: `,`, start: 0, end: 1 })],
+            },
+            {
+                type: `slash`,
+                source: `/`,
+                expected: [literal({ value: `/`, start: 0, end: 1 })],
+            },
+            {
+                type: `+`,
+                source: `+`,
+                expected: [literal({ value: `+`, start: 0, end: 1 })],
+            },
+            {
+                type: `-`,
+                source: `-`,
+                expected: [literal({ value: `-`, start: 0, end: 1 })],
+            },
+        ].forEach(createTest);
     });
-    describe(`dashed-ident`, () => {
-      [
-        {
-          type: `<dashed-ident>`,
-          source: `--abc`,
-          expected: [
-            dashedIdent({
-              value: `--abc`,
-              start: 0,
-              end: 5,
-            }),
-          ],
-        },
-      ].forEach(createTest);
+    describe(`css-wide-keyword`, () => {
+        [
+            {
+                type: `inherit`,
+                source: `inherit`,
+                expected: [cssWideKeyword({ value: `inherit`, start: 0, end: 7 })],
+            },
+            {
+                type: `unset`,
+                source: `unset`,
+                expected: [cssWideKeyword({ value: `unset`, start: 0, end: 5 })],
+            },
+            {
+                type: `initial`,
+                source: `initial`,
+                expected: [cssWideKeyword({ value: `initial`, start: 0, end: 7 })],
+            },
+            {
+                type: `inherit`,
+                desc: `case-insensitive`,
+                source: `iNhErIt`,
+                expected: [cssWideKeyword({ value: `iNhErIt`, start: 0, end: 7 })],
+            },
+            {
+                type: `unset`,
+                desc: `case-insensitive`,
+                source: `uNsEt`,
+                expected: [cssWideKeyword({ value: `uNsEt`, start: 0, end: 5 })],
+            },
+            {
+                type: `initial`,
+                desc: `case-insensitive`,
+                source: `InItIaL`,
+                expected: [cssWideKeyword({ value: `InItIaL`, start: 0, end: 7 })],
+            },
+        ].forEach(createTest);
     });
-  });
-  describe(`textual`, () => {
-    [
-      {
-        type: `<string>`,
-        desc: `double quotes`,
-        source: `"abc"`,
-        expected: [string({ value: `"abc"`, start: 0, end: 5 })],
-      },
-      {
-        type: `<string>`,
-        desc: `single quotes`,
-        source: `'abc'`,
-        expected: [string({ value: `'abc'`, start: 0, end: 5 })],
-      },
-      {
-        type: `<string>`,
-        desc: `escaped in double quotes`,
-        source: `"ab\\"c'd'"`,
-        expected: [string({ value: `"ab\\"c'd'"`, start: 0, end: 10 })],
-      },
-      {
-        type: `<string>`,
-        desc: `escaped in single quotes`,
-        source: `'ab\\'c"d"'`,
-        expected: [string({ value: `'ab\\'c"d"'`, start: 0, end: 10 })],
-      },
-      {
-        type: `<string>`,
-        desc: `escaped newline`,
-        source: `"abc\\\n"`,
-        expected: [string({ value: `"abc\\\n"`, start: 0, end: 7 })],
-      },
-    ].forEach(createTest);
-  });
-  describe(`functions`, () => {
-    [
-      {
-        type: `call`,
-        source: `custom-call()`,
-        expected: [
-          call({
-            value: `custom-call`,
-            args: [],
-            start: 0,
-            end: 13,
-          }),
-        ],
-      },
-      {
-        type: `call`,
-        desc: `with argument`,
-        source: `custom-call(abc)`,
-        expected: [
-          call({
-            value: `custom-call`,
-            args: [customIdent({ value: `abc`, start: 12, end: 15 })],
-            start: 0,
-            end: 16,
-          }),
-        ],
-      },
-      {
-        type: `call`,
-        desc: `space before & after args`,
-        source: `custom-call(   abc  )`,
-        expected: [
-          call({
-            value: `custom-call`,
-            args: [customIdent({ value: `abc`, start: 15, end: 18 })],
-            before: `   `,
-            after: `  `,
-            start: 0,
-            end: 21,
-          }),
-        ],
-      },
-      {
-        type: `call`,
-        desc: `url`,
-        source: `url()`,
-        expected: [
-          call({
-            value: `url`,
-            args: [],
-            start: 0,
-            end: 5,
-          }),
-        ],
-      },
-      // ToDo: figure out how to provide build-in/custom function parser or maybe just validators
-      // {type: `<url>`, source: `url("http://www.site.com")`, expected: [{type: `<url>`, value: `"http://www.site.com"`}]},
-      // // ToDo: add url/src cases: https://www.w3.org/TR/css-values-4/#urls
-    ].forEach(createTest);
-  });
-  describe(`numeric`, () => {
-    describe(`integer`, () => {
-      [
-        {
-          type: `<integer>`,
-          source: `123`,
-          expected: [integer({ value: `123`, start: 0, end: 3 })],
-        },
-        {
-          /*note: type <zero> is parsed as an integer: https://www.w3.org/TR/css-values-4/#zero-value */
-          type: `<integer>`,
-          desc: `zero`,
-          source: `0`,
-          expected: [integer({ value: `0`, start: 0, end: 1 })],
-        },
-        {
-          type: `<integer>`,
-          desc: `sign +`,
-          source: `+5`,
-          expected: [integer({ value: `+5`, start: 0, end: 2 })],
-        },
-        {
-          type: `<integer>`,
-          desc: `sign -`,
-          source: `-5`,
-          expected: [integer({ value: `-5`, start: 0, end: 2 })],
-        },
-      ].forEach(createTest);
+    describe(`ident`, () => {
+        describe(`custom-ident`, () => {
+            [
+                {
+                    type: `<custom-ident>`,
+                    source: `abc`,
+                    expected: [
+                        customIdent({
+                            value: `abc`,
+                            start: 0,
+                            end: 3,
+                        }),
+                    ],
+                },
+                {
+                    type: `<custom-ident>`,
+                    desc: `with dashes`,
+                    source: `-a-b-c-`,
+                    expected: [
+                        customIdent({
+                            value: `-a-b-c-`,
+                            start: 0,
+                            end: 7,
+                        }),
+                    ],
+                },
+            ].forEach(createTest);
+        });
+        describe(`dashed-ident`, () => {
+            [
+                {
+                    type: `<dashed-ident>`,
+                    source: `--abc`,
+                    expected: [
+                        dashedIdent({
+                            value: `--abc`,
+                            start: 0,
+                            end: 5,
+                        }),
+                    ],
+                },
+            ].forEach(createTest);
+        });
     });
-    describe(`number`, () => {
-      [
-        {
-          type: `<number>`,
-          desc: `fractions`,
-          source: `1.5`,
-          expected: [number({ value: `1.5`, start: 0, end: 3 })],
-        },
-        {
-          type: `<number>`,
-          desc: `sign +`,
-          source: `+5.5`,
-          expected: [number({ value: `+5.5`, start: 0, end: 4 })],
-        },
-        {
-          type: `<number>`,
-          desc: `sign -`,
-          source: `-5.5`,
-          expected: [number({ value: `-5.5`, start: 0, end: 4 })],
-        },
-        {
-          type: `<number>`,
-          desc: `exponential`,
-          source: `1.5e55`,
-          expected: [number({ value: `1.5e55`, start: 0, end: 6 })],
-        },
-        {
-          // ToDo: make sure +- exponential works in CSS
-          type: `<number>`,
-          desc: `sign,`,
-          source: `-55.55E-55`,
-          expected: [number({ value: `-55.55E-55`, start: 0, end: 10 })],
-        },
-      ].forEach(createTest);
+    describe(`textual`, () => {
+        [
+            {
+                type: `<string>`,
+                desc: `double quotes`,
+                source: `"abc"`,
+                expected: [string({ value: `"abc"`, start: 0, end: 5 })],
+            },
+            {
+                type: `<string>`,
+                desc: `single quotes`,
+                source: `'abc'`,
+                expected: [string({ value: `'abc'`, start: 0, end: 5 })],
+            },
+            {
+                type: `<string>`,
+                desc: `escaped in double quotes`,
+                source: `"ab\\"c'd'"`,
+                expected: [string({ value: `"ab\\"c'd'"`, start: 0, end: 10 })],
+            },
+            {
+                type: `<string>`,
+                desc: `escaped in single quotes`,
+                source: `'ab\\'c"d"'`,
+                expected: [string({ value: `'ab\\'c"d"'`, start: 0, end: 10 })],
+            },
+            {
+                type: `<string>`,
+                desc: `escaped newline`,
+                source: `"abc\\\n"`,
+                expected: [string({ value: `"abc\\\n"`, start: 0, end: 7 })],
+            },
+        ].forEach(createTest);
     });
-  });
-  describe(`units`, () => {
-    describe(`length`, () => {
-      [
-        ...[
-          `em`,
-          `ex`,
-          `cap`,
-          `ch`,
-          `ic`,
-          `rem`,
-          `lh`,
-          `rlh`,
-          `vw`,
-          `vh`,
-          `vi`,
-          `vb`,
-          `vmin`,
-          `vmax`,
-          `cm`,
-          `mm`,
-          `Q`,
-          `in`,
-          `pt`,
-          `pc`,
-        ].map((unit: any) => ({
-          type: `<length>`,
-          desc: unit + ` integer`,
-          source: `5` + unit,
-          expected: [
-            length({
-              value: `5`,
-              unit,
-              integer: true,
-              start: 0,
-              end: 1 + unit.length,
-            }),
-          ],
-        })),
-      ].forEach(createTest);
+    describe(`functions`, () => {
+        [
+            {
+                type: `call`,
+                source: `custom-call()`,
+                expected: [
+                    call({
+                        value: `custom-call`,
+                        args: [],
+                        start: 0,
+                        end: 13,
+                    }),
+                ],
+            },
+            {
+                type: `call`,
+                desc: `with argument`,
+                source: `custom-call(abc)`,
+                expected: [
+                    call({
+                        value: `custom-call`,
+                        args: [customIdent({ value: `abc`, start: 12, end: 15 })],
+                        start: 0,
+                        end: 16,
+                    }),
+                ],
+            },
+            {
+                type: `call`,
+                desc: `space before & after args`,
+                source: `custom-call(   abc  )`,
+                expected: [
+                    call({
+                        value: `custom-call`,
+                        args: [customIdent({ value: `abc`, start: 15, end: 18 })],
+                        before: `   `,
+                        after: `  `,
+                        start: 0,
+                        end: 21,
+                    }),
+                ],
+            },
+            {
+                type: `call`,
+                desc: `url`,
+                source: `url()`,
+                expected: [
+                    call({
+                        value: `url`,
+                        args: [],
+                        start: 0,
+                        end: 5,
+                    }),
+                ],
+            },
+            // ToDo: figure out how to provide build-in/custom function parser or maybe just validators
+            // {type: `<url>`, source: `url("http://www.site.com")`, expected: [{type: `<url>`, value: `"http://www.site.com"`}]},
+            // // ToDo: add url/src cases: https://www.w3.org/TR/css-values-4/#urls
+        ].forEach(createTest);
     });
-    describe(`percentage`, () => {
-      [
-        {
-          type: `<percentage>`,
-          source: `5%`,
-          expected: [
-            percentage({
-              value: `5`,
-              unit: `%`,
-              integer: true,
-              start: 0,
-              end: 2,
-            }),
-          ],
-        },
-      ].forEach(createTest);
+    describe(`numeric`, () => {
+        describe(`integer`, () => {
+            [
+                {
+                    type: `<integer>`,
+                    source: `123`,
+                    expected: [integer({ value: `123`, start: 0, end: 3 })],
+                },
+                {
+                    /*note: type <zero> is parsed as an integer: https://www.w3.org/TR/css-values-4/#zero-value */
+                    type: `<integer>`,
+                    desc: `zero`,
+                    source: `0`,
+                    expected: [integer({ value: `0`, start: 0, end: 1 })],
+                },
+                {
+                    type: `<integer>`,
+                    desc: `sign +`,
+                    source: `+5`,
+                    expected: [integer({ value: `+5`, start: 0, end: 2 })],
+                },
+                {
+                    type: `<integer>`,
+                    desc: `sign -`,
+                    source: `-5`,
+                    expected: [integer({ value: `-5`, start: 0, end: 2 })],
+                },
+            ].forEach(createTest);
+        });
+        describe(`number`, () => {
+            [
+                {
+                    type: `<number>`,
+                    desc: `fractions`,
+                    source: `1.5`,
+                    expected: [number({ value: `1.5`, start: 0, end: 3 })],
+                },
+                {
+                    type: `<number>`,
+                    desc: `sign +`,
+                    source: `+5.5`,
+                    expected: [number({ value: `+5.5`, start: 0, end: 4 })],
+                },
+                {
+                    type: `<number>`,
+                    desc: `sign -`,
+                    source: `-5.5`,
+                    expected: [number({ value: `-5.5`, start: 0, end: 4 })],
+                },
+                {
+                    type: `<number>`,
+                    desc: `exponential`,
+                    source: `1.5e55`,
+                    expected: [number({ value: `1.5e55`, start: 0, end: 6 })],
+                },
+                {
+                    // ToDo: make sure +- exponential works in CSS
+                    type: `<number>`,
+                    desc: `sign,`,
+                    source: `-55.55E-55`,
+                    expected: [number({ value: `-55.55E-55`, start: 0, end: 10 })],
+                },
+            ].forEach(createTest);
+        });
     });
-    describe(`angle`, () => {
-      [
-        ...[`deg`, `grad`, `rad`, `turn`].map((unit: any) => ({
-          type: `<angle>`,
-          desc: unit,
-          source: `5` + unit,
-          expected: [
-            angle({
-              value: `5`,
-              unit,
-              integer: true,
-              start: 0,
-              end: 1 + unit.length,
-            }),
-          ],
-        })),
-      ].forEach(createTest);
+    describe(`units`, () => {
+        describe(`length`, () => {
+            [
+                ...[
+                    `em`,
+                    `ex`,
+                    `cap`,
+                    `ch`,
+                    `ic`,
+                    `rem`,
+                    `lh`,
+                    `rlh`,
+                    `vw`,
+                    `vh`,
+                    `vi`,
+                    `vb`,
+                    `vmin`,
+                    `vmax`,
+                    `cm`,
+                    `mm`,
+                    `Q`,
+                    `in`,
+                    `pt`,
+                    `pc`,
+                ].map((unit: any) => ({
+                    type: `<length>`,
+                    desc: unit + ` integer`,
+                    source: `5` + unit,
+                    expected: [
+                        length({
+                            value: `5`,
+                            unit,
+                            integer: true,
+                            start: 0,
+                            end: 1 + unit.length,
+                        }),
+                    ],
+                })),
+            ].forEach(createTest);
+        });
+        describe(`percentage`, () => {
+            [
+                {
+                    type: `<percentage>`,
+                    source: `5%`,
+                    expected: [
+                        percentage({
+                            value: `5`,
+                            unit: `%`,
+                            integer: true,
+                            start: 0,
+                            end: 2,
+                        }),
+                    ],
+                },
+            ].forEach(createTest);
+        });
+        describe(`angle`, () => {
+            [
+                ...[`deg`, `grad`, `rad`, `turn`].map((unit: any) => ({
+                    type: `<angle>`,
+                    desc: unit,
+                    source: `5` + unit,
+                    expected: [
+                        angle({
+                            value: `5`,
+                            unit,
+                            integer: true,
+                            start: 0,
+                            end: 1 + unit.length,
+                        }),
+                    ],
+                })),
+            ].forEach(createTest);
+        });
+        describe(`time`, () => {
+            [
+                ...[`s`, `ms`].map((unit: any) => ({
+                    type: `<time>`,
+                    desc: unit,
+                    source: `5` + unit,
+                    expected: [
+                        time({
+                            value: `5`,
+                            unit,
+                            integer: true,
+                            start: 0,
+                            end: 1 + unit.length,
+                        }),
+                    ],
+                })),
+            ].forEach(createTest);
+        });
+        describe(`frequency`, () => {
+            [
+                ...[`Hz`, `KHz`].map((unit: any) => ({
+                    type: `<frequency>`,
+                    desc: unit,
+                    source: `5` + unit,
+                    expected: [
+                        frequency({
+                            value: `5`,
+                            unit,
+                            integer: true,
+                            start: 0,
+                            end: 1 + unit.length,
+                        }),
+                    ],
+                })),
+            ].forEach(createTest);
+        });
+        describe(`resolution`, () => {
+            [
+                ...[`dpi`, `dpcm`, `dppx`].map((unit: any) => ({
+                    type: `<resolution>`,
+                    desc: unit,
+                    source: `5` + unit,
+                    expected: [
+                        resolution({
+                            value: `5`,
+                            unit,
+                            integer: true,
+                            start: 0,
+                            end: 1 + unit.length,
+                        }),
+                    ],
+                })),
+            ].forEach(createTest);
+        });
+        describe(`flex`, () => {
+            [
+                {
+                    type: `<flex>`,
+                    source: `5fr`,
+                    expected: [
+                        flex({
+                            value: `5`,
+                            unit: `fr`,
+                            integer: true,
+                            start: 0,
+                            end: 3,
+                        }),
+                    ],
+                },
+            ].forEach(createTest);
+        });
+        describe(`unknown`, () => {
+            [
+                {
+                    type: `unknown-unit`,
+                    source: `5unknown`,
+                    expected: [
+                        unknownUnit({
+                            value: `5`,
+                            unit: `unknown`,
+                            integer: true,
+                            start: 0,
+                            end: 8,
+                        }),
+                    ],
+                },
+            ].forEach(createTest);
+        });
+        it(`should flag non integer amount`, () => {
+            test({
+                source: `5.5em`,
+                expected: [
+                    length({
+                        value: `5.5`,
+                        unit: `em`,
+                        integer: false,
+                        start: 0,
+                        end: 5,
+                    }),
+                ],
+            });
+        });
     });
-    describe(`time`, () => {
-      [
-        ...[`s`, `ms`].map((unit: any) => ({
-          type: `<time>`,
-          desc: unit,
-          source: `5` + unit,
-          expected: [
-            time({
-              value: `5`,
-              unit,
-              integer: true,
-              start: 0,
-              end: 1 + unit.length,
-            }),
-          ],
-        })),
-      ].forEach(createTest);
+    describe(`color`, () => {
+        describe(`RGB hexadecimal`, () => {
+            [
+                {
+                    type: `<color>`,
+                    desc: `6 digits hex`,
+                    source: `#0F1e3D`,
+                    expected: [color({ value: `#0F1e3D`, start: 0, end: 7 })],
+                },
+                {
+                    type: `<color>`,
+                    desc: `3 digits hex`,
+                    source: `#012`,
+                    expected: [color({ value: `#012`, start: 0, end: 4 })],
+                },
+                {
+                    type: `<color>`,
+                    desc: `4 digits hex`,
+                    source: `#0123`,
+                    expected: [color({ value: `#0123`, start: 0, end: 5 })],
+                },
+                {
+                    type: `<color>`,
+                    desc: `8 digits hex`,
+                    source: `#01234567`,
+                    expected: [color({ value: `#01234567`, start: 0, end: 9 })],
+                },
+            ].forEach(createTest);
+        });
     });
-    describe(`frequency`, () => {
-      [
-        ...[`Hz`, `KHz`].map((unit: any) => ({
-          type: `<frequency>`,
-          desc: unit,
-          source: `5` + unit,
-          expected: [
-            frequency({
-              value: `5`,
-              unit,
-              integer: true,
-              start: 0,
-              end: 1 + unit.length,
-            }),
-          ],
-        })),
-      ].forEach(createTest);
+    describe(`comment`, () => {
+        [
+            {
+                type: `comment`,
+                source: `/*123*/`,
+                expected: [comment({ value: `/*123*/`, start: 0, end: 7 })],
+            },
+            {
+                type: `comment`,
+                desc: `special chars`,
+                source: `/*'"/ +-#,\n\t\r\f()[]{}\\*\\/*/`,
+                expected: [
+                    comment({
+                        value: `/*'"/ +-#,\n\t\r\f()[]{}\\*\\/*/`,
+                        start: 0,
+                        end: 26,
+                    }),
+                ],
+            },
+        ].forEach(createTest);
     });
-    describe(`resolution`, () => {
-      [
-        ...[`dpi`, `dpcm`, `dppx`].map((unit: any) => ({
-          type: `<resolution>`,
-          desc: unit,
-          source: `5` + unit,
-          expected: [
-            resolution({
-              value: `5`,
-              unit,
-              integer: true,
-              start: 0,
-              end: 1 + unit.length,
-            }),
-          ],
-        })),
-      ].forEach(createTest);
+    describe(`invalid`, () => {
+        [
+            {
+                type: `invalid`,
+                desc: `un-opened parentheses`,
+                source: `)`,
+                expected: [invalid({ value: `)`, start: 0, end: 1 })],
+            },
+            {
+                type: `invalid`,
+                desc: `standalone hash`,
+                source: `#`,
+                expected: [invalid({ value: `#`, start: 0, end: 1 })],
+            },
+            {
+                type: `invalid`,
+                desc: `unknown hex length`,
+                source: `#1 #12 #12345 #1234567 #123456789`,
+                expected: [
+                    invalid({ value: `#`, start: 0, end: 1 }),
+                    integer({ value: `1`, start: 1, end: 2 }),
+                    space({ value: ` `, start: 2, end: 3 }),
+                    invalid({ value: `#`, start: 3, end: 4 }),
+                    integer({ value: `12`, start: 4, end: 6 }),
+                    space({ value: ` `, start: 6, end: 7 }),
+                    invalid({ value: `#`, start: 7, end: 8 }),
+                    integer({ value: `12345`, start: 8, end: 13 }),
+                    space({ value: ` `, start: 13, end: 14 }),
+                    invalid({ value: `#`, start: 14, end: 15 }),
+                    integer({ value: `1234567`, start: 15, end: 22 }),
+                    space({ value: ` `, start: 22, end: 23 }),
+                    invalid({ value: `#`, start: 23, end: 24 }),
+                    integer({ value: `123456789`, start: 24, end: 33 }),
+                ],
+            },
+        ].forEach(createTest);
     });
-    describe(`flex`, () => {
-      [
-        {
-          type: `<flex>`,
-          source: `5fr`,
-          expected: [
-            flex({
-              value: `5`,
-              unit: `fr`,
-              integer: true,
-              start: 0,
-              end: 3,
-            }),
-          ],
-        },
-      ].forEach(createTest);
-    });
-    describe(`unknown`, () => {
-      [
-        {
-          type: `unknown-unit`,
-          source: `5unknown`,
-          expected: [
-            unknownUnit({
-              value: `5`,
-              unit: `unknown`,
-              integer: true,
-              start: 0,
-              end: 8,
-            }),
-          ],
-        },
-      ].forEach(createTest);
-    });
-    it(`should flag non integer amount`, () => {
-      test({
-        source: `5.5em`,
-        expected: [
-          length({
-            value: `5.5`,
-            unit: `em`,
-            integer: false,
-            start: 0,
-            end: 5,
-          }),
-        ],
-      });
-    });
-  });
-  describe(`color`, () => {
-    describe(`RGB hexadecimal`, () => {
-      [
-        {
-          type: `<color>`,
-          desc: `6 digits hex`,
-          source: `#0F1e3D`,
-          expected: [color({ value: `#0F1e3D`, start: 0, end: 7 })],
-        },
-        {
-          type: `<color>`,
-          desc: `3 digits hex`,
-          source: `#012`,
-          expected: [color({ value: `#012`, start: 0, end: 4 })],
-        },
-        {
-          type: `<color>`,
-          desc: `4 digits hex`,
-          source: `#0123`,
-          expected: [color({ value: `#0123`, start: 0, end: 5 })],
-        },
-        {
-          type: `<color>`,
-          desc: `8 digits hex`,
-          source: `#01234567`,
-          expected: [color({ value: `#01234567`, start: 0, end: 9 })],
-        },
-      ].forEach(createTest);
-    });
-  });
-  describe(`comment`, () => {
-    [
-      {
-        type: `comment`,
-        source: `/*123*/`,
-        expected: [comment({ value: `/*123*/`, start: 0, end: 7 })],
-      },
-      {
-        type: `comment`,
-        desc: `special chars`,
-        source: `/*'"/ +-#,\n\t\r\f()[]{}\\*\\/*/`,
-        expected: [
-          comment({
-            value: `/*'"/ +-#,\n\t\r\f()[]{}\\*\\/*/`,
-            start: 0,
-            end: 26,
-          }),
-        ],
-      },
-    ].forEach(createTest);
-  });
-  describe(`invalid`, () => {
-    [
-      {
-        type: `invalid`,
-        desc: `un-opened parentheses`,
-        source: `)`,
-        expected: [invalid({ value: `)`, start: 0, end: 1 })],
-      },
-      {
-        type: `invalid`,
-        desc: `standalone hash`,
-        source: `#`,
-        expected: [invalid({ value: `#`, start: 0, end: 1 })],
-      },
-      {
-        type: `invalid`,
-        desc: `unknown hex length`,
-        source: `#1 #12 #12345 #1234567 #123456789`,
-        expected: [
-          invalid({ value: `#`, start: 0, end: 1 }),
-          integer({ value: `1`, start: 1, end: 2 }),
-          space({ value: ` `, start: 2, end: 3 }),
-          invalid({ value: `#`, start: 3, end: 4 }),
-          integer({ value: `12`, start: 4, end: 6 }),
-          space({ value: ` `, start: 6, end: 7 }),
-          invalid({ value: `#`, start: 7, end: 8 }),
-          integer({ value: `12345`, start: 8, end: 13 }),
-          space({ value: ` `, start: 13, end: 14 }),
-          invalid({ value: `#`, start: 14, end: 15 }),
-          integer({ value: `1234567`, start: 15, end: 22 }),
-          space({ value: ` `, start: 22, end: 23 }),
-          invalid({ value: `#`, start: 23, end: 24 }),
-          integer({ value: `123456789`, start: 24, end: 33 }),
-        ],
-      },
-    ].forEach(createTest);
-  });
-  // ToDo: add case insensitive tests
-  /**
+    // ToDo: add case insensitive tests
+    /**
    some components cannot be parsed directly without a syntax context
    - <ratio>: https://www.w3.org/TR/css-values-4/#ratios
    - <image>: https://www.w3.org/TR/css-values-4/#images
    - <position>: https://www.w3.org/TR/css-values-4/#position
    */
-  it(`should parse flat ast nodes`, () => {
-    test({
-      source: `1px 2px,3px`,
-      expected: [
-        length({
-          value: `1`,
-          unit: `px`,
-          integer: true,
-          start: 0,
-          end: 3,
-        }),
-        space({
-          value: ` `,
-          start: 3,
-          end: 4,
-        }),
-        length({
-          value: `2`,
-          unit: `px`,
-          integer: true,
-          start: 4,
-          end: 7,
-        }),
-        literal({
-          value: `,`,
-          start: 7,
-          end: 8,
-        }),
-        length({
-          value: `3`,
-          unit: `px`,
-          integer: true,
-          start: 8,
-          end: 11,
-        }),
-      ],
+    it(`should parse flat ast nodes`, () => {
+        test({
+            source: `1px 2px,3px`,
+            expected: [
+                length({
+                    value: `1`,
+                    unit: `px`,
+                    integer: true,
+                    start: 0,
+                    end: 3,
+                }),
+                space({
+                    value: ` `,
+                    start: 3,
+                    end: 4,
+                }),
+                length({
+                    value: `2`,
+                    unit: `px`,
+                    integer: true,
+                    start: 4,
+                    end: 7,
+                }),
+                literal({
+                    value: `,`,
+                    start: 7,
+                    end: 8,
+                }),
+                length({
+                    value: `3`,
+                    unit: `px`,
+                    integer: true,
+                    start: 8,
+                    end: 11,
+                }),
+            ],
+        });
     });
-  });
 });
diff --git a/packages/experiments/package.json b/packages/experiments/package.json
index 089ce3fb..5b42b37b 100644
--- a/packages/experiments/package.json
+++ b/packages/experiments/package.json
@@ -26,6 +26,5 @@
   },
   "author": "Wix.com",
   "license": "MIT",
-  "repository": "https://github.com/wixplosives/tokey/packages/experiments",
-  "prettier": {}
+  "repository": "https://github.com/wixplosives/tokey/packages/experiments"
 }
diff --git a/packages/experiments/src/css-value-tokenizer.ts b/packages/experiments/src/css-value-tokenizer.ts
index f0c00802..51af24e6 100644
--- a/packages/experiments/src/css-value-tokenizer.ts
+++ b/packages/experiments/src/css-value-tokenizer.ts
@@ -1,125 +1,117 @@
 import {
-  tokenize,
-  Token,
-  Descriptors,
-  isStringDelimiter,
-  isWhitespace,
-  getJSCommentStartType,
-  getMultilineCommentStartType,
-  isCommentEnd,
-  createToken,
-  getText,
-  getUnclosedComment,
-} from "@tokey/core";
+    tokenize,
+    Token,
+    Descriptors,
+    isStringDelimiter,
+    isWhitespace,
+    getJSCommentStartType,
+    getMultilineCommentStartType,
+    isCommentEnd,
+    createToken,
+    getText,
+    getUnclosedComment,
+} from '@tokey/core';
 
-type Delimiters = "(" | ")" | ",";
-export type SeparatorTokens = "line-comment" | "multi-comment" | "space";
+type Delimiters = '(' | ')' | ',';
+export type SeparatorTokens = 'line-comment' | 'multi-comment' | 'space';
 export type CSSValueCodeToken = Token<Descriptors | Delimiters>;
 export type CSSSeparatorTokens = Token<SeparatorTokens>;
 export type CSSCodeAst = StringNode | MethodCall | TextNode | CommaNode;
 export interface ASTNode<Types = Descriptors> {
-  type: Types;
-  text: string;
-  start: number;
-  end: number;
-  before: CSSSeparatorTokens[];
-  after: CSSSeparatorTokens[];
+    type: Types;
+    text: string;
+    start: number;
+    end: number;
+    before: CSSSeparatorTokens[];
+    after: CSSSeparatorTokens[];
 }
 
-export interface MethodCall extends ASTNode<"call"> {
-  name: string;
-  args: CSSCodeAst[];
+export interface MethodCall extends ASTNode<'call'> {
+    name: string;
+    args: CSSCodeAst[];
 }
-export type StringNode = ASTNode<"string">;
-export type TextNode = ASTNode<"text">;
-export type CommaNode = ASTNode<",">;
+export type StringNode = ASTNode<'string'>;
+export type TextNode = ASTNode<'text'>;
+export type CommaNode = ASTNode<','>;
 
-export const isSeparatorToken = (
-  token: CSSValueCodeToken
-): token is CSSSeparatorTokens => {
-  const { type } = token;
-  return (
-    type === "line-comment" || type === "multi-comment" || type === "space"
-  );
+export const isSeparatorToken = (token: CSSValueCodeToken): token is CSSSeparatorTokens => {
+    const { type } = token;
+    return type === 'line-comment' || type === 'multi-comment' || type === 'space';
 };
 
-export function createCssValueAST(
-  source: string,
-  parseLineComments = false
-): CSSCodeAst[] {
-  return parseDeclValueTokens(
-    source,
-    tokenize<CSSValueCodeToken>(source, {
-      isDelimiter,
-      isStringDelimiter,
-      isWhitespace,
-      shouldAddToken,
-      createToken,
-      getCommentStartType: parseLineComments
-        ? getJSCommentStartType
-        : getMultilineCommentStartType,
-      isCommentEnd,
-      getUnclosedComment,
-    })
-  ).ast;
+export function createCssValueAST(source: string, parseLineComments = false): CSSCodeAst[] {
+    return parseDeclValueTokens(
+        source,
+        tokenize<CSSValueCodeToken>(source, {
+            isDelimiter,
+            isStringDelimiter,
+            isWhitespace,
+            shouldAddToken,
+            createToken,
+            getCommentStartType: parseLineComments
+                ? getJSCommentStartType
+                : getMultilineCommentStartType,
+            isCommentEnd,
+            getUnclosedComment,
+        })
+    ).ast;
 }
 
-const isDelimiter = (char: string) =>
-  char === "(" || char === ")" || char === ",";
+const isDelimiter = (char: string) => char === '(' || char === ')' || char === ',';
 
 const shouldAddToken = () => true;
 
 function parseDeclValueTokens(
-  source: string,
-  tokens: CSSValueCodeToken[],
-  startAtIdx = 0
+    source: string,
+    tokens: CSSValueCodeToken[],
+    startAtIdx = 0
 ): { ast: CSSCodeAst[]; stoppedAtIdx: number } {
-  const ast: CSSCodeAst[] = [];
-  let before: CSSSeparatorTokens[] = [];
-  for (let i = startAtIdx; i < tokens.length; i++) {
-    const token = tokens[i];
-    if (token.type === ")") {
-      const lastAst = ast[ast.length - 1];
-      if (lastAst && before.length) {
-        lastAst.after = before;
-        before = [];
-      }
-      return {
-        ast,
-        stoppedAtIdx: i,
-      };
-    } else if (isSeparatorToken(token)) {
-      before.push(token);
-    } else if (token.type === "text" && tokens[i + 1]?.type === "(") {
-      const res = parseDeclValueTokens(source, tokens, i + 2);
-      const methodText = getText(tokens, i, res.stoppedAtIdx + 1, source);
-      i = res.stoppedAtIdx;
-      ast.push({
-        type: "call",
-        text: methodText,
-        start: token.start,
-        end: token.start + methodText.length,
-        before,
-        after: [],
-        name: token.value,
-        args: res.ast,
-      });
-      before = [];
-    } else {
-      ast.push({
-        type: token.type as any,
-        text: token.value,
-        start: token.start,
-        end: token.end,
-        before,
-        after: [],
-      });
-      before = [];
+    const ast: CSSCodeAst[] = [];
+    let before: CSSSeparatorTokens[] = [];
+    for (let i = startAtIdx; i < tokens.length; i++) {
+        const token = tokens[i];
+        if (token.type === ')') {
+            const lastAst = ast[ast.length - 1];
+            if (lastAst && before.length) {
+                lastAst.after = before;
+                before = [];
+            }
+            return {
+                ast,
+                stoppedAtIdx: i,
+            };
+        } else if (isSeparatorToken(token)) {
+            before.push(token);
+        } else if (token.type === 'text' && tokens[i + 1]?.type === '(') {
+            const res = parseDeclValueTokens(source, tokens, i + 2);
+            const methodText = getText(tokens, i, res.stoppedAtIdx + 1, source);
+            i = res.stoppedAtIdx;
+            ast.push({
+                type: 'call',
+                text: methodText,
+                start: token.start,
+                end: token.start + methodText.length,
+                before,
+                after: [],
+                name: token.value,
+                args: res.ast,
+            });
+            before = [];
+        } else {
+            ast.push({
+                type: token.type as any,
+                text: token.value,
+                start: token.start,
+                end: token.end,
+                before,
+                after: [],
+            });
+            before = [];
+        }
     }
-  }
 
-  return {
-    ast,
-    stoppedAtIdx: tokens.length,
-  };
+    return {
+        ast,
+        stoppedAtIdx: tokens.length,
+    };
 }
diff --git a/packages/experiments/src/index.ts b/packages/experiments/src/index.ts
index 82a92e8d..a51812e3 100644
--- a/packages/experiments/src/index.ts
+++ b/packages/experiments/src/index.ts
@@ -1,3 +1,3 @@
-export * from "./css-value-tokenizer";
-export * from "./separated-shallow-list";
-export * from "./strips-comments";
+export * from './css-value-tokenizer';
+export * from './separated-shallow-list';
+export * from './strips-comments';
diff --git a/packages/experiments/src/separated-shallow-list.ts b/packages/experiments/src/separated-shallow-list.ts
index 2f97a7d4..a7c4dcab 100644
--- a/packages/experiments/src/separated-shallow-list.ts
+++ b/packages/experiments/src/separated-shallow-list.ts
@@ -1,71 +1,71 @@
 import {
-  tokenize,
-  isStringDelimiter,
-  isWhitespace,
-  createToken,
-  groupTokens,
-  trimTokens,
-  isComment,
-  getJSCommentStartType,
-  getMultilineCommentStartType,
-  isCommentEnd,
-  getUnclosedComment,
-  Token,
-  Descriptors,
-  TokenGroup,
-} from "@tokey/core";
+    tokenize,
+    isStringDelimiter,
+    isWhitespace,
+    createToken,
+    groupTokens,
+    trimTokens,
+    isComment,
+    getJSCommentStartType,
+    getMultilineCommentStartType,
+    isCommentEnd,
+    getUnclosedComment,
+    Token,
+    Descriptors,
+    TokenGroup,
+} from '@tokey/core';
 
 const shouldAddToken = () => true;
 
 export function getListItems<T extends string>(
-  source: string,
-  isDelimiter: (char: string) => char is T,
-  parseLineComments = true
+    source: string,
+    isDelimiter: (char: string) => char is T,
+    parseLineComments = true
 ) {
-  return createListItems(
-    tokenize<Token<Descriptors>>(source, {
-      isDelimiter,
-      isStringDelimiter,
-      isWhitespace,
-      shouldAddToken,
-      createToken,
-      getCommentStartType: parseLineComments
-        ? getJSCommentStartType
-        : getMultilineCommentStartType,
-      isCommentEnd,
-      getUnclosedComment,
-    }),
-    isDelimiter
-  );
+    return createListItems(
+        tokenize<Token<Descriptors>>(source, {
+            isDelimiter,
+            isStringDelimiter,
+            isWhitespace,
+            shouldAddToken,
+            createToken,
+            getCommentStartType: parseLineComments
+                ? getJSCommentStartType
+                : getMultilineCommentStartType,
+            isCommentEnd,
+            getUnclosedComment,
+        }),
+        isDelimiter
+    );
 }
 
 function createListItems(
-  tokens: Token[],
-  isDelimiter: (char: string) => boolean,
-  processGroup: (tokens: Token[]) => Token[] = (tokens) =>
-    trimTokens(
-      tokens.filter(({ type }) => !isComment(type)),
-      ({ type }) => type === "space"
-    )
+    tokens: Token[],
+    isDelimiter: (char: string) => boolean,
+    processGroup: (tokens: Token[]) => Token[] = (tokens) =>
+        trimTokens(
+            tokens.filter(({ type }) => !isComment(type)),
+            ({ type }) => type === 'space'
+        )
 ) {
-  const groups: TokenGroup<"list-item">[] = [];
-  let group: Token[] = [];
-  for (const token of tokens) {
-    if (isDelimiter(token.type)) {
-      handleGroup();
-      group = [];
-    } else {
-      group.push(token);
+    const groups: TokenGroup<'list-item'>[] = [];
+    let group: Token[] = [];
+    for (const token of tokens) {
+        if (isDelimiter(token.type)) {
+            handleGroup();
+            group = [];
+        } else {
+            group.push(token);
+        }
     }
-  }
-  handleGroup();
+    handleGroup();
 
-  return groups;
+    return groups;
 
-  function handleGroup() {
-    group = processGroup(group);
-    if (group.length) {
-      groups.push(groupTokens(group, "list-item"));
+    function handleGroup() {
+        group = processGroup(group);
+        if (group.length) {
+            groups.push(groupTokens(group, 'list-item'));
+        }
     }
-  }
 }
diff --git a/packages/experiments/src/strips-comments.ts b/packages/experiments/src/strips-comments.ts
index 8a05ef88..dc5d5a9d 100644
--- a/packages/experiments/src/strips-comments.ts
+++ b/packages/experiments/src/strips-comments.ts
@@ -1,34 +1,34 @@
 import {
-  tokenize,
-  isStringDelimiter,
-  isWhitespace,
-  createToken,
-  getText,
-  isComment,
-  getJSCommentStartType,
-  getMultilineCommentStartType,
-  isCommentEnd,
-  getUnclosedComment,
-  Token,
-  Descriptors,
-} from "@tokey/core";
-
-const isDelimiter = () => false;
-const shouldAddToken = (type: Descriptors) => !isComment(type);
-
-export function stripComments(source: string, parseLineComments = true) {
-  const tokens = tokenize<Token<Descriptors>>(source, {
-    isDelimiter,
+    tokenize,
     isStringDelimiter,
     isWhitespace,
-    shouldAddToken,
     createToken,
-    getCommentStartType: parseLineComments
-      ? getJSCommentStartType
-      : getMultilineCommentStartType,
+    getText,
+    isComment,
+    getJSCommentStartType,
+    getMultilineCommentStartType,
     isCommentEnd,
     getUnclosedComment,
-  });
+    Token,
+    Descriptors,
+} from '@tokey/core';
+
+const isDelimiter = () => false;
+const shouldAddToken = (type: Descriptors) => !isComment(type);
+
+export function stripComments(source: string, parseLineComments = true) {
+    const tokens = tokenize<Token<Descriptors>>(source, {
+        isDelimiter,
+        isStringDelimiter,
+        isWhitespace,
+        shouldAddToken,
+        createToken,
+        getCommentStartType: parseLineComments
+            ? getJSCommentStartType
+            : getMultilineCommentStartType,
+        isCommentEnd,
+        getUnclosedComment,
+    });
 
-  return getText(tokens);
+    return getText(tokens);
 }
diff --git a/packages/experiments/test/css-value-tokenizer.spec.ts b/packages/experiments/test/css-value-tokenizer.spec.ts
index 9b68a2a0..41d94544 100644
--- a/packages/experiments/test/css-value-tokenizer.spec.ts
+++ b/packages/experiments/test/css-value-tokenizer.spec.ts
@@ -1,410 +1,410 @@
-import { createParseTester } from "@tokey/test-kit";
-import { createCssValueAST } from "@tokey/experiments";
+import { createParseTester } from '@tokey/test-kit';
+import { createCssValueAST } from '@tokey/experiments';
 
 const test = createParseTester({
-  parse: createCssValueAST,
+    parse: createCssValueAST,
 });
 const testWithSingleLineComments = createParseTester({
-  parse: (source: string) => createCssValueAST(source, true),
+    parse: (source: string) => createCssValueAST(source, true),
 });
 
 describe(`demos/css-value-parser`, () => {
-  it(`red url(http://localhost/x.png)`, () => {
-    test(`red url(http://localhost/x.png)`, {
-      expectedAst: [
-        {
-          type: "text",
-          text: "red",
-          start: 0,
-          end: 3,
-          before: [],
-          after: [],
-        },
-        {
-          type: "call",
-          text: "url(http://localhost/x.png)",
-          start: 4,
-          end: 31,
-          before: [
-            {
-              value: " ",
-              type: "space",
-              start: 3,
-              end: 4,
-            },
-          ],
-          after: [],
-          name: "url",
-          args: [
-            {
-              type: "text",
-              text: "http://localhost/x.png",
-              start: 8,
-              end: 30,
-              before: [],
-              after: [],
-            },
-          ],
-        },
-      ],
-    });
-  });
-  it.skip(`red url(http://localhost/x.png)`, () => {
-    testWithSingleLineComments(`red url(http://localhost/x.png)`, {
-      expectedAst: [
-        {
-          type: "text",
-          text: "red",
-          start: 0,
-          end: 3,
-          before: [],
-          after: [],
-        },
-        {
-          type: "call",
-          text: "url(http://localhost/x.png)",
-          start: 4,
-          end: 31,
-          before: [
-            {
-              value: " ",
-              type: "space",
-              start: 3,
-              end: 4,
-            },
-          ],
-          after: [],
-          name: "url",
-          args: [
-            {
-              type: "text",
-              text: "http://localhost/x.png",
-              start: 8,
-              end: 30,
-              before: [],
-              after: [],
-            },
-          ],
-        },
-      ],
-    });
-  });
-  it(`10px 10px 10px`, () => {
-    test("10px 10px 10px", {
-      expectedAst: [
-        { text: "10px", type: "text", start: 0, end: 4, before: [], after: [] },
-        {
-          text: "10px",
-          type: "text",
-          start: 5,
-          end: 9,
-          before: [
-            {
-              type: "space",
-              value: " ",
-              start: 4,
-              end: 5,
-            },
-          ],
-          after: [],
-        },
-        {
-          text: "10px",
-          type: "text",
-          start: 10,
-          end: 14,
-          before: [
-            {
-              type: "space",
-              value: " ",
-              start: 9,
-              end: 10,
-            },
-          ],
-          after: [],
-        },
-      ],
-    });
-  });
-  it(`10px var( myColor ) 10px`, () => {
-    test("10px var( myColor ) 10px", {
-      expectedAst: [
-        { type: "text", text: "10px", start: 0, end: 4, before: [], after: [] },
-        {
-          type: "call",
-          text: "var( myColor )",
-          start: 5,
-          end: 19,
-          before: [
-            {
-              type: "space",
-              value: " ",
-              start: 4,
-              end: 5,
-            },
-          ],
-          after: [],
-          name: "var",
-          args: [
-            {
-              type: "text",
-              text: "myColor",
-              start: 10,
-              end: 17,
-              before: [
+    it(`red url(http://localhost/x.png)`, () => {
+        test(`red url(http://localhost/x.png)`, {
+            expectedAst: [
                 {
-                  type: "space",
-                  value: " ",
-                  start: 9,
-                  end: 10,
+                    type: 'text',
+                    text: 'red',
+                    start: 0,
+                    end: 3,
+                    before: [],
+                    after: [],
                 },
-              ],
-              after: [
                 {
-                  type: "space",
-                  value: " ",
-                  start: 17,
-                  end: 18,
+                    type: 'call',
+                    text: 'url(http://localhost/x.png)',
+                    start: 4,
+                    end: 31,
+                    before: [
+                        {
+                            value: ' ',
+                            type: 'space',
+                            start: 3,
+                            end: 4,
+                        },
+                    ],
+                    after: [],
+                    name: 'url',
+                    args: [
+                        {
+                            type: 'text',
+                            text: 'http://localhost/x.png',
+                            start: 8,
+                            end: 30,
+                            before: [],
+                            after: [],
+                        },
+                    ],
                 },
-              ],
-            },
-          ],
-        },
-        {
-          type: "text",
-          text: "10px",
-          start: 20,
-          end: 24,
-          before: [
-            {
-              type: "space",
-              value: " ",
-              start: 19,
-              end: 20,
-            },
-          ],
-          after: [],
-        },
-      ],
+            ],
+        });
     });
-  });
-  it(`10px var( var( myColor ) )`, () => {
-    test("10px var( var( myColor ) )", {
-      expectedAst: [
-        { type: "text", text: "10px", start: 0, end: 4, before: [], after: [] },
-        {
-          type: "call",
-          text: "var( var( myColor ) )",
-          start: 5,
-          end: 26,
-          before: [
-            {
-              type: "space",
-              value: " ",
-              start: 4,
-              end: 5,
-            },
-          ],
-          after: [],
-          name: "var",
-          args: [
-            {
-              type: "call",
-              text: "var( myColor )",
-              start: 10,
-              end: 24,
-              before: [
-                {
-                  type: "space",
-                  value: " ",
-                  start: 9,
-                  end: 10,
-                },
-              ],
-              after: [
+    it.skip(`red url(http://localhost/x.png)`, () => {
+        testWithSingleLineComments(`red url(http://localhost/x.png)`, {
+            expectedAst: [
                 {
-                  type: "space",
-                  value: " ",
-                  start: 24,
-                  end: 25,
+                    type: 'text',
+                    text: 'red',
+                    start: 0,
+                    end: 3,
+                    before: [],
+                    after: [],
                 },
-              ],
-              name: "var",
-              args: [
                 {
-                  type: "text",
-                  text: "myColor",
-                  start: 15,
-                  end: 22,
-                  before: [
-                    {
-                      type: "space",
-                      value: " ",
-                      start: 14,
-                      end: 15,
-                    },
-                  ],
-                  after: [
-                    {
-                      type: "space",
-                      value: " ",
-                      start: 22,
-                      end: 23,
-                    },
-                  ],
+                    type: 'call',
+                    text: 'url(http://localhost/x.png)',
+                    start: 4,
+                    end: 31,
+                    before: [
+                        {
+                            value: ' ',
+                            type: 'space',
+                            start: 3,
+                            end: 4,
+                        },
+                    ],
+                    after: [],
+                    name: 'url',
+                    args: [
+                        {
+                            type: 'text',
+                            text: 'http://localhost/x.png',
+                            start: 8,
+                            end: 30,
+                            before: [],
+                            after: [],
+                        },
+                    ],
                 },
-              ],
-            },
-          ],
-        },
-      ],
+            ],
+        });
     });
-  });
-  it(`var( a, b, c )`, () => {
-    test("var( a, b, c )", {
-      expectedAst: [
-        {
-          type: "call",
-          text: "var( a, b, c )",
-          start: 0,
-          end: 14,
-          before: [],
-          name: "var",
-          args: [
-            {
-              type: "text",
-              text: "a",
-              start: 5,
-              end: 6,
-              before: [
+    it(`10px 10px 10px`, () => {
+        test('10px 10px 10px', {
+            expectedAst: [
+                { text: '10px', type: 'text', start: 0, end: 4, before: [], after: [] },
                 {
-                  type: "space",
-                  value: " ",
-                  start: 4,
-                  end: 5,
+                    text: '10px',
+                    type: 'text',
+                    start: 5,
+                    end: 9,
+                    before: [
+                        {
+                            type: 'space',
+                            value: ' ',
+                            start: 4,
+                            end: 5,
+                        },
+                    ],
+                    after: [],
                 },
-              ],
-              after: [],
-            },
-            {
-              type: ",",
-              text: ",",
-              start: 6,
-              end: 7,
-              after: [],
-              before: [],
-            },
-            {
-              type: "text",
-              text: "b",
-              start: 8,
-              end: 9,
-              before: [
                 {
-                  type: "space",
-                  value: " ",
-                  start: 7,
-                  end: 8,
+                    text: '10px',
+                    type: 'text',
+                    start: 10,
+                    end: 14,
+                    before: [
+                        {
+                            type: 'space',
+                            value: ' ',
+                            start: 9,
+                            end: 10,
+                        },
+                    ],
+                    after: [],
                 },
-              ],
-              after: [],
-            },
-            {
-              type: ",",
-              text: ",",
-              start: 9,
-              end: 10,
-              after: [],
-              before: [],
-            },
-            {
-              type: "text",
-              text: "c",
-              start: 11,
-              end: 12,
-              before: [
+            ],
+        });
+    });
+    it(`10px var( myColor ) 10px`, () => {
+        test('10px var( myColor ) 10px', {
+            expectedAst: [
+                { type: 'text', text: '10px', start: 0, end: 4, before: [], after: [] },
                 {
-                  type: "space",
-                  value: " ",
-                  start: 10,
-                  end: 11,
+                    type: 'call',
+                    text: 'var( myColor )',
+                    start: 5,
+                    end: 19,
+                    before: [
+                        {
+                            type: 'space',
+                            value: ' ',
+                            start: 4,
+                            end: 5,
+                        },
+                    ],
+                    after: [],
+                    name: 'var',
+                    args: [
+                        {
+                            type: 'text',
+                            text: 'myColor',
+                            start: 10,
+                            end: 17,
+                            before: [
+                                {
+                                    type: 'space',
+                                    value: ' ',
+                                    start: 9,
+                                    end: 10,
+                                },
+                            ],
+                            after: [
+                                {
+                                    type: 'space',
+                                    value: ' ',
+                                    start: 17,
+                                    end: 18,
+                                },
+                            ],
+                        },
+                    ],
                 },
-              ],
-              after: [
                 {
-                  type: "space",
-                  value: " ",
-                  start: 12,
-                  end: 13,
+                    type: 'text',
+                    text: '10px',
+                    start: 20,
+                    end: 24,
+                    before: [
+                        {
+                            type: 'space',
+                            value: ' ',
+                            start: 19,
+                            end: 20,
+                        },
+                    ],
+                    after: [],
                 },
-              ],
-            },
-          ],
-          after: [],
-        },
-      ],
+            ],
+        });
     });
-  });
-  it(`var( a,/*a comment*/ b)`, () => {
-    test("var( a,/*a comment*/ b)", {
-      expectedAst: [
-        {
-          type: "call",
-          text: "var( a,/*a comment*/ b)",
-          start: 0,
-          end: 23,
-          before: [],
-          name: "var",
-          args: [
-            {
-              type: "text",
-              text: "a",
-              start: 5,
-              end: 6,
-              before: [
+    it(`10px var( var( myColor ) )`, () => {
+        test('10px var( var( myColor ) )', {
+            expectedAst: [
+                { type: 'text', text: '10px', start: 0, end: 4, before: [], after: [] },
                 {
-                  type: "space",
-                  value: " ",
-                  start: 4,
-                  end: 5,
+                    type: 'call',
+                    text: 'var( var( myColor ) )',
+                    start: 5,
+                    end: 26,
+                    before: [
+                        {
+                            type: 'space',
+                            value: ' ',
+                            start: 4,
+                            end: 5,
+                        },
+                    ],
+                    after: [],
+                    name: 'var',
+                    args: [
+                        {
+                            type: 'call',
+                            text: 'var( myColor )',
+                            start: 10,
+                            end: 24,
+                            before: [
+                                {
+                                    type: 'space',
+                                    value: ' ',
+                                    start: 9,
+                                    end: 10,
+                                },
+                            ],
+                            after: [
+                                {
+                                    type: 'space',
+                                    value: ' ',
+                                    start: 24,
+                                    end: 25,
+                                },
+                            ],
+                            name: 'var',
+                            args: [
+                                {
+                                    type: 'text',
+                                    text: 'myColor',
+                                    start: 15,
+                                    end: 22,
+                                    before: [
+                                        {
+                                            type: 'space',
+                                            value: ' ',
+                                            start: 14,
+                                            end: 15,
+                                        },
+                                    ],
+                                    after: [
+                                        {
+                                            type: 'space',
+                                            value: ' ',
+                                            start: 22,
+                                            end: 23,
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                    ],
                 },
-              ],
-              after: [],
-            },
-            {
-              type: ",",
-              text: ",",
-              start: 6,
-              end: 7,
-              after: [],
-              before: [],
-            },
-            {
-              type: "text",
-              text: "b",
-              start: 21,
-              end: 22,
-              before: [
+            ],
+        });
+    });
+    it(`var( a, b, c )`, () => {
+        test('var( a, b, c )', {
+            expectedAst: [
                 {
-                  type: "multi-comment",
-                  value: "/*a comment*/",
-                  start: 7,
-                  end: 20,
+                    type: 'call',
+                    text: 'var( a, b, c )',
+                    start: 0,
+                    end: 14,
+                    before: [],
+                    name: 'var',
+                    args: [
+                        {
+                            type: 'text',
+                            text: 'a',
+                            start: 5,
+                            end: 6,
+                            before: [
+                                {
+                                    type: 'space',
+                                    value: ' ',
+                                    start: 4,
+                                    end: 5,
+                                },
+                            ],
+                            after: [],
+                        },
+                        {
+                            type: ',',
+                            text: ',',
+                            start: 6,
+                            end: 7,
+                            after: [],
+                            before: [],
+                        },
+                        {
+                            type: 'text',
+                            text: 'b',
+                            start: 8,
+                            end: 9,
+                            before: [
+                                {
+                                    type: 'space',
+                                    value: ' ',
+                                    start: 7,
+                                    end: 8,
+                                },
+                            ],
+                            after: [],
+                        },
+                        {
+                            type: ',',
+                            text: ',',
+                            start: 9,
+                            end: 10,
+                            after: [],
+                            before: [],
+                        },
+                        {
+                            type: 'text',
+                            text: 'c',
+                            start: 11,
+                            end: 12,
+                            before: [
+                                {
+                                    type: 'space',
+                                    value: ' ',
+                                    start: 10,
+                                    end: 11,
+                                },
+                            ],
+                            after: [
+                                {
+                                    type: 'space',
+                                    value: ' ',
+                                    start: 12,
+                                    end: 13,
+                                },
+                            ],
+                        },
+                    ],
+                    after: [],
                 },
-
+            ],
+        });
+    });
+    it(`var( a,/*a comment*/ b)`, () => {
+        test('var( a,/*a comment*/ b)', {
+            expectedAst: [
                 {
-                  type: "space",
-                  value: " ",
-                  start: 20,
-                  end: 21,
+                    type: 'call',
+                    text: 'var( a,/*a comment*/ b)',
+                    start: 0,
+                    end: 23,
+                    before: [],
+                    name: 'var',
+                    args: [
+                        {
+                            type: 'text',
+                            text: 'a',
+                            start: 5,
+                            end: 6,
+                            before: [
+                                {
+                                    type: 'space',
+                                    value: ' ',
+                                    start: 4,
+                                    end: 5,
+                                },
+                            ],
+                            after: [],
+                        },
+                        {
+                            type: ',',
+                            text: ',',
+                            start: 6,
+                            end: 7,
+                            after: [],
+                            before: [],
+                        },
+                        {
+                            type: 'text',
+                            text: 'b',
+                            start: 21,
+                            end: 22,
+                            before: [
+                                {
+                                    type: 'multi-comment',
+                                    value: '/*a comment*/',
+                                    start: 7,
+                                    end: 20,
+                                },
+
+                                {
+                                    type: 'space',
+                                    value: ' ',
+                                    start: 20,
+                                    end: 21,
+                                },
+                            ],
+                            after: [],
+                        },
+                    ],
+                    after: [],
                 },
-              ],
-              after: [],
-            },
-          ],
-          after: [],
-        },
-      ],
+            ],
+        });
     });
-  });
 });
diff --git a/packages/experiments/test/separated-shallow-list.spec.ts b/packages/experiments/test/separated-shallow-list.spec.ts
index 4e082b86..3b6786fe 100644
--- a/packages/experiments/test/separated-shallow-list.spec.ts
+++ b/packages/experiments/test/separated-shallow-list.spec.ts
@@ -1,145 +1,145 @@
-import { createParseTester } from "@tokey/test-kit";
-import { getListItems } from "@tokey/experiments";
+import { createParseTester } from '@tokey/test-kit';
+import { getListItems } from '@tokey/experiments';
 
-const commaSeparated = (char: string): char is "," => char === ",";
+const commaSeparated = (char: string): char is ',' => char === ',';
 const testCommaSeparated = createParseTester({
-  parse: (source: string) => getListItems(source, commaSeparated),
+    parse: (source: string) => getListItems(source, commaSeparated),
 });
 
 describe(`demos/separated-shallow-list`, () => {
-  it("a,b,c", () => {
-    testCommaSeparated("a,b,c", {
-      expectedAst: [
-        {
-          type: "list-item",
-          value: "a",
-          start: 0,
-          end: 1,
-          tokens: [{ type: "text", value: "a", start: 0, end: 1 }],
-        },
-        {
-          type: "list-item",
-          value: "b",
-          start: 2,
-          end: 3,
-          tokens: [{ type: "text", value: "b", start: 2, end: 3 }],
-        },
-        {
-          type: "list-item",
-          value: "c",
-          start: 4,
-          end: 5,
-          tokens: [{ type: "text", value: "c", start: 4, end: 5 }],
-        },
-      ],
+    it('a,b,c', () => {
+        testCommaSeparated('a,b,c', {
+            expectedAst: [
+                {
+                    type: 'list-item',
+                    value: 'a',
+                    start: 0,
+                    end: 1,
+                    tokens: [{ type: 'text', value: 'a', start: 0, end: 1 }],
+                },
+                {
+                    type: 'list-item',
+                    value: 'b',
+                    start: 2,
+                    end: 3,
+                    tokens: [{ type: 'text', value: 'b', start: 2, end: 3 }],
+                },
+                {
+                    type: 'list-item',
+                    value: 'c',
+                    start: 4,
+                    end: 5,
+                    tokens: [{ type: 'text', value: 'c', start: 4, end: 5 }],
+                },
+            ],
+        });
     });
-  });
 
-  it("a, b , /*comment*/c//comment", () => {
-    testCommaSeparated("a, b , /*comment*/c//comment", {
-      expectedAst: [
-        {
-          type: "list-item",
-          start: 0,
-          end: 1,
-          value: "a",
-          tokens: [
-            {
-              value: "a",
-              type: "text",
-              start: 0,
-              end: 1,
-            },
-          ],
-        },
-        {
-          type: "list-item",
-          start: 3,
-          end: 4,
-          value: "b",
-          tokens: [
-            {
-              value: "b",
-              type: "text",
-              start: 3,
-              end: 4,
-            },
-          ],
-        },
-        {
-          type: "list-item",
-          start: 18,
-          end: 19,
-          value: "c",
-          tokens: [
-            {
-              value: "c",
-              type: "text",
-              start: 18,
-              end: 19,
-            },
-          ],
-        },
-      ],
+    it('a, b , /*comment*/c//comment', () => {
+        testCommaSeparated('a, b , /*comment*/c//comment', {
+            expectedAst: [
+                {
+                    type: 'list-item',
+                    start: 0,
+                    end: 1,
+                    value: 'a',
+                    tokens: [
+                        {
+                            value: 'a',
+                            type: 'text',
+                            start: 0,
+                            end: 1,
+                        },
+                    ],
+                },
+                {
+                    type: 'list-item',
+                    start: 3,
+                    end: 4,
+                    value: 'b',
+                    tokens: [
+                        {
+                            value: 'b',
+                            type: 'text',
+                            start: 3,
+                            end: 4,
+                        },
+                    ],
+                },
+                {
+                    type: 'list-item',
+                    start: 18,
+                    end: 19,
+                    value: 'c',
+                    tokens: [
+                        {
+                            value: 'c',
+                            type: 'text',
+                            start: 18,
+                            end: 19,
+                        },
+                    ],
+                },
+            ],
+        });
     });
-  });
 
-  it(`a 10, b "10px"`, () => {
-    testCommaSeparated('a 10, b "10px"', {
-      expectedAst: [
-        {
-          type: "list-item",
-          start: 0,
-          end: 4,
-          value: "a 10",
-          tokens: [
-            {
-              value: "a",
-              type: "text",
-              start: 0,
-              end: 1,
-            },
-            {
-              value: " ",
-              type: "space",
-              start: 1,
-              end: 2,
-            },
-            {
-              value: "10",
-              type: "text",
-              start: 2,
-              end: 4,
-            },
-          ],
-        },
-        {
-          type: "list-item",
-          start: 6,
-          end: 14,
-          value: 'b "10px"',
-          tokens: [
-            {
-              value: "b",
-              type: "text",
-              start: 6,
-              end: 7,
-            },
-            {
-              value: " ",
-              type: "space",
-              start: 7,
-              end: 8,
-            },
-            {
-              value: '"10px"',
-              type: "string",
-              start: 8,
-              end: 14,
-            },
-          ],
-        },
-      ],
+    it(`a 10, b "10px"`, () => {
+        testCommaSeparated('a 10, b "10px"', {
+            expectedAst: [
+                {
+                    type: 'list-item',
+                    start: 0,
+                    end: 4,
+                    value: 'a 10',
+                    tokens: [
+                        {
+                            value: 'a',
+                            type: 'text',
+                            start: 0,
+                            end: 1,
+                        },
+                        {
+                            value: ' ',
+                            type: 'space',
+                            start: 1,
+                            end: 2,
+                        },
+                        {
+                            value: '10',
+                            type: 'text',
+                            start: 2,
+                            end: 4,
+                        },
+                    ],
+                },
+                {
+                    type: 'list-item',
+                    start: 6,
+                    end: 14,
+                    value: 'b "10px"',
+                    tokens: [
+                        {
+                            value: 'b',
+                            type: 'text',
+                            start: 6,
+                            end: 7,
+                        },
+                        {
+                            value: ' ',
+                            type: 'space',
+                            start: 7,
+                            end: 8,
+                        },
+                        {
+                            value: '"10px"',
+                            type: 'string',
+                            start: 8,
+                            end: 14,
+                        },
+                    ],
+                },
+            ],
+        });
     });
-  });
 });
diff --git a/packages/experiments/test/strip-comments.spec.ts b/packages/experiments/test/strip-comments.spec.ts
index 7f6dba1e..7d9f3f8d 100644
--- a/packages/experiments/test/strip-comments.spec.ts
+++ b/packages/experiments/test/strip-comments.spec.ts
@@ -1,17 +1,17 @@
-import { testTokenizer as test } from "@tokey/test-kit";
-import { stripComments } from "@tokey/experiments";
+import { testTokenizer as test } from '@tokey/test-kit';
+import { stripComments } from '@tokey/experiments';
 
 describe(`demos/strip-comments`, () => {
-  it("a/*comment*/b", () => {
-    test("a/*comment*/b", stripComments, "ab");
-  });
-  it("a//comment\nb", () => {
-    test("a//comment\nb", stripComments, "ab");
-  });
-  it("a/*comment\nb", () => {
-    test("a/*comment\nb", stripComments, "a");
-  });
-  it("a/*comment*/b/*comment*/c", () => {
-    test("a/*comment*/b/*comment*/c", stripComments, "abc");
-  });
+    it('a/*comment*/b', () => {
+        test('a/*comment*/b', stripComments, 'ab');
+    });
+    it('a//comment\nb', () => {
+        test('a//comment\nb', stripComments, 'ab');
+    });
+    it('a/*comment\nb', () => {
+        test('a/*comment\nb', stripComments, 'a');
+    });
+    it('a/*comment*/b/*comment*/c', () => {
+        test('a/*comment*/b/*comment*/c', stripComments, 'abc');
+    });
 });
diff --git a/packages/experiments/test/tsconfig.json b/packages/experiments/test/tsconfig.json
index e042a3bb..bf308c46 100644
--- a/packages/experiments/test/tsconfig.json
+++ b/packages/experiments/test/tsconfig.json
@@ -4,8 +4,5 @@
     "outDir": "../dist/test",
     "types": ["mocha"]
   },
-  "references": [
-    { "path": "../src" },
-    { "path": "../../test-kit/src" }
-  ]
+  "references": [{ "path": "../src" }, { "path": "../../test-kit/src" }]
 }
diff --git a/packages/imports-parser/package.json b/packages/imports-parser/package.json
index e481ae19..8bce5d33 100644
--- a/packages/imports-parser/package.json
+++ b/packages/imports-parser/package.json
@@ -26,6 +26,5 @@
   },
   "author": "Wix.com",
   "license": "MIT",
-  "repository": "https://github.com/wixplosives/tokey/packages/imports-parser",
-  "prettier": {}
+  "repository": "https://github.com/wixplosives/tokey/packages/imports-parser"
 }
diff --git a/packages/imports-parser/src/imports-parser.ts b/packages/imports-parser/src/imports-parser.ts
index 2791836f..8d5af3e6 100644
--- a/packages/imports-parser/src/imports-parser.ts
+++ b/packages/imports-parser/src/imports-parser.ts
@@ -1,259 +1,246 @@
 import {
-  Seeker,
-  tokenize,
-  isComment,
-  isStringDelimiter,
-  isWhitespace,
-  createToken,
-  getJSCommentStartType,
-  isCommentEnd,
-  getUnclosedComment,
-  Token,
-  Descriptors,
-} from "@tokey/core";
-
-type Delimiters = "," | ";" | ":" | "{" | "}" | "[" | "]" | "(" | ")" | "*";
+    Seeker,
+    tokenize,
+    isComment,
+    isStringDelimiter,
+    isWhitespace,
+    createToken,
+    getJSCommentStartType,
+    isCommentEnd,
+    getUnclosedComment,
+    Token,
+    Descriptors,
+} from '@tokey/core';
+
+type Delimiters = ',' | ';' | ':' | '{' | '}' | '[' | ']' | '(' | ')' | '*';
 
 export type CodeToken = Token<Descriptors | Delimiters>;
 
 export function parseImports(
-  source: string,
-  blockStart = "{",
-  blockEnd = "}",
-  taggedImportSupport = false
+    source: string,
+    blockStart = '{',
+    blockEnd = '}',
+    taggedImportSupport = false
 ) {
-  return findImports(
-    tokenize<CodeToken>(source, {
-      isDelimiter,
-      isStringDelimiter,
-      isWhitespace,
-      shouldAddToken,
-      createToken,
-      getCommentStartType: getJSCommentStartType,
-      isCommentEnd,
-      getUnclosedComment,
-    }),
-    blockStart,
-    blockEnd,
-    taggedImportSupport
-  );
+    return findImports(
+        tokenize<CodeToken>(source, {
+            isDelimiter,
+            isStringDelimiter,
+            isWhitespace,
+            shouldAddToken,
+            createToken,
+            getCommentStartType: getJSCommentStartType,
+            isCommentEnd,
+            getUnclosedComment,
+        }),
+        blockStart,
+        blockEnd,
+        taggedImportSupport
+    );
 }
 
 const isDelimiter = (char: string) =>
-  char === ";" ||
-  char === "(" ||
-  char === ")" ||
-  char === "," ||
-  char === "{" ||
-  char === "}" ||
-  char === ":" ||
-  char === "*" ||
-  char === "[" ||
-  char === "]";
-
-const shouldAddToken = (type: CodeToken["type"]) =>
-  type === "space" || isComment(type) ? false : true;
+    char === ';' ||
+    char === '(' ||
+    char === ')' ||
+    char === ',' ||
+    char === '{' ||
+    char === '}' ||
+    char === ':' ||
+    char === '*' ||
+    char === '[' ||
+    char === ']';
+
+const shouldAddToken = (type: CodeToken['type']) =>
+    type === 'space' || isComment(type) ? false : true;
 
 export interface ImportValue {
-  star: boolean;
-  defaultName: string | undefined;
-  named: Record<string, string> | undefined;
-  tagged: Record<string, Record<string, string>> | undefined;
-  from: string | undefined;
-  errors: string[];
-  start: number;
-  end: number;
+    star: boolean;
+    defaultName: string | undefined;
+    named: Record<string, string> | undefined;
+    tagged: Record<string, Record<string, string>> | undefined;
+    from: string | undefined;
+    errors: string[];
+    start: number;
+    end: number;
 }
 
-const isImportBlockEndError = (token: CodeToken) =>
-  token.value === "from" || token.type === ";";
+const isImportBlockEndError = (token: CodeToken) => token.value === 'from' || token.type === ';';
 
 function findImports(
-  tokens: CodeToken[],
-  blockStart: string,
-  blockEnd: string,
-  taggedImportSupport = false
+    tokens: CodeToken[],
+    blockStart: string,
+    blockEnd: string,
+    taggedImportSupport = false
 ) {
-  const imports: ImportValue[] = [];
-  const s = new Seeker<CodeToken>(tokens);
-  let token;
-  let t;
-  while ((token = s.next())) {
-    if (!token.type) {
-      break;
-    }
-    if (token.value === "import") {
-      const startTokenIndex = s.index;
-      const errors = [];
-      let defaultName;
-      let star = false;
-      let named = undefined;
-      let tagged = undefined;
-      let from;
-      t = s.next();
-      if (t.type === "string") {
-        from = t.value.slice(1, -1);
-      } else {
-        if (t.type === "text") {
-          if (t.value === "from") {
-            s.back();
-            errors.push("missing name");
-          } else {
-            defaultName = t.value;
-          }
-        } else if (t.type === "*") {
-          star = true;
-          const as = s.peek();
-          if (as.value === "as") {
-            s.next();
-            t = s.peek();
-            if (t.type === "text" && t.value !== "from") {
-              s.next();
-              defaultName = t.value;
+    const imports: ImportValue[] = [];
+    const s = new Seeker<CodeToken>(tokens);
+    let token;
+    let t;
+    while ((token = s.next())) {
+        if (!token.type) {
+            break;
+        }
+        if (token.value === 'import') {
+            const startTokenIndex = s.index;
+            const errors = [];
+            let defaultName;
+            let star = false;
+            let named = undefined;
+            let tagged = undefined;
+            let from;
+            t = s.next();
+            if (t.type === 'string') {
+                from = t.value.slice(1, -1);
             } else {
-              errors.push("missing as name");
+                if (t.type === 'text') {
+                    if (t.value === 'from') {
+                        s.back();
+                        errors.push('missing name');
+                    } else {
+                        defaultName = t.value;
+                    }
+                } else if (t.type === '*') {
+                    star = true;
+                    const as = s.peek();
+                    if (as.value === 'as') {
+                        s.next();
+                        t = s.peek();
+                        if (t.type === 'text' && t.value !== 'from') {
+                            s.next();
+                            defaultName = t.value;
+                        } else {
+                            errors.push('missing as name');
+                        }
+                    } else {
+                        errors.push('expected as after *');
+                    }
+                } else if (t.type === ',') {
+                    errors.push('missing default name');
+                }
+
+                if (t.type === blockStart) {
+                    if (star) {
+                        errors.push('Invalid named after *');
+                    }
+                    s.back();
+                    const block = s.flatBlock(blockStart, blockEnd, isImportBlockEndError);
+                    if (block) {
+                        const res = processNamedBlock(block, errors, taggedImportSupport);
+                        named = res.named;
+                        tagged = res.tagged;
+                    } else {
+                        errors.push('unclosed block');
+                    }
+                } else {
+                    t = s.peek();
+                    let hasComma = false;
+                    if (t.type === ',') {
+                        hasComma = true;
+                        s.next();
+                        t = s.peek();
+                    }
+                    if (t.type === blockStart) {
+                        if (defaultName && !hasComma) {
+                            errors.push('missing comma after name');
+                        }
+                        if (star) {
+                            errors.push('Invalid named after *');
+                        }
+                        const block = s.flatBlock(blockStart, blockEnd, isImportBlockEndError);
+                        if (block) {
+                            const res = processNamedBlock(block, errors, taggedImportSupport);
+                            named = res.named;
+                            tagged = res.tagged;
+                        } else {
+                            errors.push('unclosed block');
+                        }
+                    } else if (hasComma) {
+                        errors.push('missing named block');
+                    }
+                }
+
+                t = s.next();
+                if (t.value !== 'from') {
+                    s.back();
+                    errors.push('invalid missing from');
+                }
+                t = s.next();
+                if (t.type === 'string') {
+                    from = t.value.slice(1, -1);
+                } else {
+                    errors.push('invalid missing source');
+                }
             }
-          } else {
-            errors.push("expected as after *");
-          }
-        } else if (t.type === ",") {
-          errors.push("missing default name");
-        }
 
-        if (t.type === blockStart) {
-          if (star) {
-            errors.push("Invalid named after *");
-          }
-          s.back();
-          const block = s.flatBlock(
-            blockStart,
-            blockEnd,
-            isImportBlockEndError
-          );
-          if (block) {
-            const res = processNamedBlock(block, errors, taggedImportSupport);
-            named = res.named;
-            tagged = res.tagged;
-          } else {
-            errors.push("unclosed block");
-          }
-        } else {
-          t = s.peek();
-          let hasComma = false;
-          if (t.type === ",") {
-            hasComma = true;
-            s.next();
-            t = s.peek();
-          }
-          if (t.type === blockStart) {
-            if (defaultName && !hasComma) {
-              errors.push("missing comma after name");
+            if (s.peek().type === ';') {
+                s.next();
             }
-            if (star) {
-              errors.push("Invalid named after *");
-            }
-            const block = s.flatBlock(
-              blockStart,
-              blockEnd,
-              isImportBlockEndError
-            );
-            if (block) {
-              const res = processNamedBlock(block, errors, taggedImportSupport);
-              named = res.named;
-              tagged = res.tagged;
-            } else {
-              errors.push("unclosed block");
-            }
-          } else if (hasComma) {
-            errors.push("missing named block");
-          }
-        }
 
-        t = s.next();
-        if (t.value !== "from") {
-          s.back();
-          errors.push("invalid missing from");
-        }
-        t = s.next();
-        if (t.type === "string") {
-          from = t.value.slice(1, -1);
-        } else {
-          errors.push("invalid missing source");
+            imports.push({
+                star,
+                defaultName,
+                named,
+                tagged: tagged,
+                from,
+                errors,
+                start: s.tokens[startTokenIndex].start,
+                end: s.tokens[s.index].end,
+            });
         }
-      }
-
-      if (s.peek().type === ";") {
-        s.next();
-      }
-
-      imports.push({
-        star,
-        defaultName,
-        named,
-        tagged: tagged,
-        from,
-        errors,
-        start: s.tokens[startTokenIndex].start,
-        end: s.tokens[s.index].end,
-      });
     }
-  }
-  return imports;
+    return imports;
 }
 
-function processNamedBlock(
-  block: CodeToken[],
-  errors: string[],
-  taggedImportSupport: boolean
-) {
-  const named: Record<string, string> = {};
-  const tagged: Record<string, Record<string, string>> = {};
-  const tokens: CodeToken[] = [];
-
-  for (let i = 0; i < block.length; i++) {
-    const token = block[i];
-    if (block[i + 1]?.type === "(" && taggedImportSupport) {
-      const tagTokens = [];
-      const tagName = block[i];
-      let hasEnded;
-      for (let j = i + 2; j < block.length; j++) {
-        i = j;
-        if (block[j].type === ")") {
-          hasEnded = true;
-          break;
+function processNamedBlock(block: CodeToken[], errors: string[], taggedImportSupport: boolean) {
+    const named: Record<string, string> = {};
+    const tagged: Record<string, Record<string, string>> = {};
+    const tokens: CodeToken[] = [];
+
+    for (let i = 0; i < block.length; i++) {
+        const token = block[i];
+        if (block[i + 1]?.type === '(' && taggedImportSupport) {
+            const tagTokens = [];
+            const tagName = block[i];
+            let hasEnded;
+            for (let j = i + 2; j < block.length; j++) {
+                i = j;
+                if (block[j].type === ')') {
+                    hasEnded = true;
+                    break;
+                }
+                tagTokens.push(block[j]);
+            }
+            tagged[tagName.value] = processNamedBlock(tagTokens, errors, false).named;
+            if (tagName.type !== 'text') {
+                errors.push(`invalid tag name: ${tagName.value}`);
+            }
+            if (!hasEnded) {
+                errors.push(`unclosed tagged import "${tagName.value}"`);
+            }
+        } else if (token.type === ',') {
+            pushToken();
+        } else {
+            tokens.push(token);
         }
-        tagTokens.push(block[j]);
-      }
-      tagged[tagName.value] = processNamedBlock(tagTokens, errors, false).named;
-      if (tagName.type !== "text") {
-        errors.push(`invalid tag name: ${tagName.value}`);
-      }
-      if (!hasEnded) {
-        errors.push(`unclosed tagged import "${tagName.value}"`);
-      }
-    } else if (token.type === ",") {
-      pushToken();
-    } else {
-      tokens.push(token);
     }
-  }
-  if (tokens.length) {
-    pushToken();
-  }
+    if (tokens.length) {
+        pushToken();
+    }
 
-  return { named, tagged };
+    return { named, tagged };
 
-  function pushToken() {
-    if (tokens.length === 1) {
-      const name = tokens[0].value;
-      named[name] = name;
-    } else if (tokens.length === 3) {
-      if (tokens[1].value === "as") {
-        named[tokens[0].value] = tokens[2].value;
-      }
+    function pushToken() {
+        if (tokens.length === 1) {
+            const name = tokens[0].value;
+            named[name] = name;
+        } else if (tokens.length === 3) {
+            if (tokens[1].value === 'as') {
+                named[tokens[0].value] = tokens[2].value;
+            }
+        }
+        tokens.length = 0;
     }
-    tokens.length = 0;
-  }
 }
 
 // REGEXP for import parsing import\s+(.*?)\s*,?\s*(\{.*?\})?\s*(from)?\s*(['"].*?['"]);?
diff --git a/packages/imports-parser/test/import-tokenizer.spec.ts b/packages/imports-parser/test/import-tokenizer.spec.ts
index f4120a05..af161639 100644
--- a/packages/imports-parser/test/import-tokenizer.spec.ts
+++ b/packages/imports-parser/test/import-tokenizer.spec.ts
@@ -1,358 +1,358 @@
-import { createParseTester } from "@tokey/test-kit";
-import { parseImports, ImportValue } from "@tokey/imports-parser";
+import { createParseTester } from '@tokey/test-kit';
+import { parseImports, ImportValue } from '@tokey/imports-parser';
 
 const test = createParseTester({
-  parse: (source: string) => parseImports(source, "{", "}"),
+    parse: (source: string) => parseImports(source, '{', '}'),
 });
 
 const testTagged = createParseTester({
-  parse: (source: string) => parseImports(source, "{", "}", true),
+    parse: (source: string) => parseImports(source, '{', '}', true),
 });
 
 const createImportValue = (value: ImportValue) => value;
 
 describe(`demos/import-tokenizer`, () => {
-  it(`import "x"`, () => {
-    test(`import "x"`, {
-      expectedAst: [
-        createImportValue({
-          star: false,
-          named: undefined,
-          tagged: undefined,
-          from: "x",
-          defaultName: undefined,
-          errors: [],
-          start: 0,
-          end: 10,
-        }),
-      ],
+    it(`import "x"`, () => {
+        test(`import "x"`, {
+            expectedAst: [
+                createImportValue({
+                    star: false,
+                    named: undefined,
+                    tagged: undefined,
+                    from: 'x',
+                    defaultName: undefined,
+                    errors: [],
+                    start: 0,
+                    end: 10,
+                }),
+            ],
+        });
     });
-  });
 
-  it(`import "x";`, () => {
-    test(`import "x";`, {
-      expectedAst: [
-        createImportValue({
-          star: false,
-          named: undefined,
-          tagged: undefined,
-          from: "x",
-          defaultName: undefined,
-          errors: [],
-          start: 0,
-          end: 11,
-        }),
-      ],
-    });
-  });
-  it(`import name from "x"`, () => {
-    test(`import name from "x"`, {
-      expectedAst: [
-        createImportValue({
-          star: false,
-          named: undefined,
-          tagged: undefined,
-          from: "x",
-          defaultName: "name",
-          errors: [],
-          start: 0,
-          end: 20,
-        }),
-      ],
-    });
-  });
-  it(`import {named} from "x"`, () => {
-    test(`import {named} from "x"`, {
-      expectedAst: [
-        createImportValue({
-          star: false,
-          named: { named: "named" },
-          tagged: {},
-          from: "x",
-          defaultName: undefined,
-          errors: [],
-          start: 0,
-          end: 23,
-        }),
-      ],
-    });
-  });
-  it(`import {named as renamed} from "x"`, () => {
-    test(`import {named as renamed} from "x"`, {
-      expectedAst: [
-        createImportValue({
-          star: false,
-          named: { named: "renamed" },
-          tagged: {},
-          from: "x",
-          defaultName: undefined,
-          errors: [],
-          start: 0,
-          end: 34,
-        }),
-      ],
-    });
-  });
-  it(`import name, {named} from "x"`, () => {
-    test(`import name, {named} from "x"`, {
-      expectedAst: [
-        createImportValue({
-          star: false,
-          named: { named: "named" },
-          tagged: {},
-          from: "x",
-          defaultName: "name",
-          errors: [],
-          start: 0,
-          end: 29,
-        }),
-      ],
-    });
-  });
-  it(`import * as name from "x"`, () => {
-    test(`import * as name from "x"`, {
-      expectedAst: [
-        createImportValue({
-          star: true,
-          named: undefined,
-          tagged: undefined,
-          from: "x",
-          defaultName: "name",
-          errors: [],
-          start: 0,
-          end: 25,
-        }),
-      ],
-    });
-  });
-  it(`import {named1, named2} from "x"`, () => {
-    test(`import {named1, named2} from "x"`, {
-      expectedAst: [
-        createImportValue({
-          star: false,
-          named: { named1: "named1", named2: "named2" },
-          tagged: {},
-          from: "x",
-          defaultName: undefined,
-          errors: [],
-          start: 0,
-          end: 32,
-        }),
-      ],
-    });
-  });
-  it(`import {named}from"x"`, () => {
-    test(`import {named}from"x"`, {
-      expectedAst: [
-        createImportValue({
-          star: false,
-          named: { named: "named" },
-          tagged: {},
-          from: "x",
-          defaultName: undefined,
-          errors: [],
-          start: 0,
-          end: 21,
-        }),
-      ],
-    });
-  });
-  describe(`broken inputs`, () => {
-    it(`import * from "x"`, () => {
-      test(`import * from "x"`, {
-        expectedAst: [
-          createImportValue({
-            star: true,
-            named: undefined,
-            tagged: undefined,
-            from: "x",
-            defaultName: undefined,
-            errors: ["expected as after *"],
-            start: 0,
-            end: 17,
-          }),
-        ],
-      });
-    });
-    it(`import * "x"`, () => {
-      test(`import * "x"`, {
-        expectedAst: [
-          createImportValue({
-            star: true,
-            named: undefined,
-            tagged: undefined,
-            from: "x",
-            defaultName: undefined,
-            errors: ["expected as after *", "invalid missing from"],
-            start: 0,
-            end: 12,
-          }),
-        ],
-      });
+    it(`import "x";`, () => {
+        test(`import "x";`, {
+            expectedAst: [
+                createImportValue({
+                    star: false,
+                    named: undefined,
+                    tagged: undefined,
+                    from: 'x',
+                    defaultName: undefined,
+                    errors: [],
+                    start: 0,
+                    end: 11,
+                }),
+            ],
+        });
     });
-    it(`import {a as, b} "x"`, () => {
-      // this case can be better by reporting missing name after as
-      test(`import {a as, b} "x"`, {
-        expectedAst: [
-          createImportValue({
-            star: false,
-            named: { b: "b" },
-            tagged: {},
-            from: "x",
-            defaultName: undefined,
-            errors: ["invalid missing from"],
-            start: 0,
-            end: 20,
-          }),
-        ],
-      });
+    it(`import name from "x"`, () => {
+        test(`import name from "x"`, {
+            expectedAst: [
+                createImportValue({
+                    star: false,
+                    named: undefined,
+                    tagged: undefined,
+                    from: 'x',
+                    defaultName: 'name',
+                    errors: [],
+                    start: 0,
+                    end: 20,
+                }),
+            ],
+        });
     });
-    it(`import {a from "x"`, () => {
-      // this can be better by adding the `a` as named
-      test(`import {a from "x"`, {
-        expectedAst: [
-          createImportValue({
-            star: false,
-            named: undefined,
-            tagged: undefined,
-            from: "x",
-            defaultName: undefined,
-            errors: ["unclosed block"],
-            start: 0,
-            end: 18,
-          }),
-        ],
-      });
+    it(`import {named} from "x"`, () => {
+        test(`import {named} from "x"`, {
+            expectedAst: [
+                createImportValue({
+                    star: false,
+                    named: { named: 'named' },
+                    tagged: {},
+                    from: 'x',
+                    defaultName: undefined,
+                    errors: [],
+                    start: 0,
+                    end: 23,
+                }),
+            ],
+        });
     });
-    it(`import {a ; import "y"`, () => {
-      test(`import {a ; import "y"`, {
-        expectedAst: [
-          createImportValue({
-            star: false,
-            named: undefined,
-            tagged: undefined,
-            from: undefined,
-            defaultName: undefined,
-            errors: [
-              "unclosed block",
-              "invalid missing from",
-              "invalid missing source",
+    it(`import {named as renamed} from "x"`, () => {
+        test(`import {named as renamed} from "x"`, {
+            expectedAst: [
+                createImportValue({
+                    star: false,
+                    named: { named: 'renamed' },
+                    tagged: {},
+                    from: 'x',
+                    defaultName: undefined,
+                    errors: [],
+                    start: 0,
+                    end: 34,
+                }),
             ],
-            start: 0,
-            end: 11,
-          }),
-          createImportValue({
-            star: false,
-            named: undefined,
-            tagged: undefined,
-            from: "y",
-            defaultName: undefined,
-            errors: [],
-            start: 12,
-            end: 22,
-          }),
-        ],
-      });
+        });
     });
-    it(`import from "x"`, () => {
-      test(`import from "x"`, {
-        expectedAst: [
-          createImportValue({
-            star: false,
-            named: undefined,
-            tagged: undefined,
-            from: "x",
-            defaultName: undefined,
-            errors: ["missing name"],
-            start: 0,
-            end: 15,
-          }),
-        ],
-      });
+    it(`import name, {named} from "x"`, () => {
+        test(`import name, {named} from "x"`, {
+            expectedAst: [
+                createImportValue({
+                    star: false,
+                    named: { named: 'named' },
+                    tagged: {},
+                    from: 'x',
+                    defaultName: 'name',
+                    errors: [],
+                    start: 0,
+                    end: 29,
+                }),
+            ],
+        });
     });
-    it(`import * as x, {a} from "x"`, () => {
-      test(`import * as x, {a} from "x"`, {
-        expectedAst: [
-          createImportValue({
-            star: true,
-            named: { a: "a" },
-            tagged: {},
-            from: "x",
-            defaultName: "x",
-            errors: ["Invalid named after *"],
-            start: 0,
-            end: 27,
-          }),
-        ],
-      });
+    it(`import * as name from "x"`, () => {
+        test(`import * as name from "x"`, {
+            expectedAst: [
+                createImportValue({
+                    star: true,
+                    named: undefined,
+                    tagged: undefined,
+                    from: 'x',
+                    defaultName: 'name',
+                    errors: [],
+                    start: 0,
+                    end: 25,
+                }),
+            ],
+        });
     });
-  });
-  describe(`tagged imports Extensions`, () => {
-    it(`import {named(a as b, c)} from "x"`, () => {
-      testTagged(`import {named(a as b, c)} from "x"`, {
-        expectedAst: [
-          createImportValue({
-            star: false,
-            named: {},
-            tagged: { named: { a: "b", c: "c" } },
-            from: "x",
-            defaultName: undefined,
-            errors: [],
-            start: 0,
-            end: 34,
-          }),
-        ],
-      });
+    it(`import {named1, named2} from "x"`, () => {
+        test(`import {named1, named2} from "x"`, {
+            expectedAst: [
+                createImportValue({
+                    star: false,
+                    named: { named1: 'named1', named2: 'named2' },
+                    tagged: {},
+                    from: 'x',
+                    defaultName: undefined,
+                    errors: [],
+                    start: 0,
+                    end: 32,
+                }),
+            ],
+        });
     });
-    it(`import {,(a as b, c)} from "x"`, () => {
-      testTagged(`import {,(a as b, c)} from "x"`, {
-        expectedAst: [
-          createImportValue({
-            star: false,
-            named: {},
-            tagged: { ",": { a: "b", c: "c" } },
-            from: "x",
-            defaultName: undefined,
-            errors: ["invalid tag name: ,"],
-            start: 0,
-            end: 30,
-          }),
-        ],
-      });
+    it(`import {named}from"x"`, () => {
+        test(`import {named}from"x"`, {
+            expectedAst: [
+                createImportValue({
+                    star: false,
+                    named: { named: 'named' },
+                    tagged: {},
+                    from: 'x',
+                    defaultName: undefined,
+                    errors: [],
+                    start: 0,
+                    end: 21,
+                }),
+            ],
+        });
     });
-    it(`import {named(a as b, c} from "x"`, () => {
-      testTagged(`import {named(a as b, c} from "x"`, {
-        expectedAst: [
-          createImportValue({
-            star: false,
-            named: {},
-            tagged: { named: { a: "b", c: "c" } },
-            from: "x",
-            defaultName: undefined,
-            errors: ['unclosed tagged import "named"'],
-            start: 0,
-            end: 33,
-          }),
-        ],
-      });
+    describe(`broken inputs`, () => {
+        it(`import * from "x"`, () => {
+            test(`import * from "x"`, {
+                expectedAst: [
+                    createImportValue({
+                        star: true,
+                        named: undefined,
+                        tagged: undefined,
+                        from: 'x',
+                        defaultName: undefined,
+                        errors: ['expected as after *'],
+                        start: 0,
+                        end: 17,
+                    }),
+                ],
+            });
+        });
+        it(`import * "x"`, () => {
+            test(`import * "x"`, {
+                expectedAst: [
+                    createImportValue({
+                        star: true,
+                        named: undefined,
+                        tagged: undefined,
+                        from: 'x',
+                        defaultName: undefined,
+                        errors: ['expected as after *', 'invalid missing from'],
+                        start: 0,
+                        end: 12,
+                    }),
+                ],
+            });
+        });
+        it(`import {a as, b} "x"`, () => {
+            // this case can be better by reporting missing name after as
+            test(`import {a as, b} "x"`, {
+                expectedAst: [
+                    createImportValue({
+                        star: false,
+                        named: { b: 'b' },
+                        tagged: {},
+                        from: 'x',
+                        defaultName: undefined,
+                        errors: ['invalid missing from'],
+                        start: 0,
+                        end: 20,
+                    }),
+                ],
+            });
+        });
+        it(`import {a from "x"`, () => {
+            // this can be better by adding the `a` as named
+            test(`import {a from "x"`, {
+                expectedAst: [
+                    createImportValue({
+                        star: false,
+                        named: undefined,
+                        tagged: undefined,
+                        from: 'x',
+                        defaultName: undefined,
+                        errors: ['unclosed block'],
+                        start: 0,
+                        end: 18,
+                    }),
+                ],
+            });
+        });
+        it(`import {a ; import "y"`, () => {
+            test(`import {a ; import "y"`, {
+                expectedAst: [
+                    createImportValue({
+                        star: false,
+                        named: undefined,
+                        tagged: undefined,
+                        from: undefined,
+                        defaultName: undefined,
+                        errors: [
+                            'unclosed block',
+                            'invalid missing from',
+                            'invalid missing source',
+                        ],
+                        start: 0,
+                        end: 11,
+                    }),
+                    createImportValue({
+                        star: false,
+                        named: undefined,
+                        tagged: undefined,
+                        from: 'y',
+                        defaultName: undefined,
+                        errors: [],
+                        start: 12,
+                        end: 22,
+                    }),
+                ],
+            });
+        });
+        it(`import from "x"`, () => {
+            test(`import from "x"`, {
+                expectedAst: [
+                    createImportValue({
+                        star: false,
+                        named: undefined,
+                        tagged: undefined,
+                        from: 'x',
+                        defaultName: undefined,
+                        errors: ['missing name'],
+                        start: 0,
+                        end: 15,
+                    }),
+                ],
+            });
+        });
+        it(`import * as x, {a} from "x"`, () => {
+            test(`import * as x, {a} from "x"`, {
+                expectedAst: [
+                    createImportValue({
+                        star: true,
+                        named: { a: 'a' },
+                        tagged: {},
+                        from: 'x',
+                        defaultName: 'x',
+                        errors: ['Invalid named after *'],
+                        start: 0,
+                        end: 27,
+                    }),
+                ],
+            });
+        });
     });
-    it(`import {tag1(a), tag2(b), c} from "x"`, () => {
-      testTagged(`import {tag1(a), tag2(b), c} from "x"`, {
-        expectedAst: [
-          createImportValue({
-            star: false,
-            named: {
-              c: "c",
-            },
-            tagged: { tag1: { a: "a" }, tag2: { b: "b" } },
-            from: "x",
-            defaultName: undefined,
-            errors: [],
-            start: 0,
-            end: 37,
-          }),
-        ],
-      });
+    describe(`tagged imports Extensions`, () => {
+        it(`import {named(a as b, c)} from "x"`, () => {
+            testTagged(`import {named(a as b, c)} from "x"`, {
+                expectedAst: [
+                    createImportValue({
+                        star: false,
+                        named: {},
+                        tagged: { named: { a: 'b', c: 'c' } },
+                        from: 'x',
+                        defaultName: undefined,
+                        errors: [],
+                        start: 0,
+                        end: 34,
+                    }),
+                ],
+            });
+        });
+        it(`import {,(a as b, c)} from "x"`, () => {
+            testTagged(`import {,(a as b, c)} from "x"`, {
+                expectedAst: [
+                    createImportValue({
+                        star: false,
+                        named: {},
+                        tagged: { ',': { a: 'b', c: 'c' } },
+                        from: 'x',
+                        defaultName: undefined,
+                        errors: ['invalid tag name: ,'],
+                        start: 0,
+                        end: 30,
+                    }),
+                ],
+            });
+        });
+        it(`import {named(a as b, c} from "x"`, () => {
+            testTagged(`import {named(a as b, c} from "x"`, {
+                expectedAst: [
+                    createImportValue({
+                        star: false,
+                        named: {},
+                        tagged: { named: { a: 'b', c: 'c' } },
+                        from: 'x',
+                        defaultName: undefined,
+                        errors: ['unclosed tagged import "named"'],
+                        start: 0,
+                        end: 33,
+                    }),
+                ],
+            });
+        });
+        it(`import {tag1(a), tag2(b), c} from "x"`, () => {
+            testTagged(`import {tag1(a), tag2(b), c} from "x"`, {
+                expectedAst: [
+                    createImportValue({
+                        star: false,
+                        named: {
+                            c: 'c',
+                        },
+                        tagged: { tag1: { a: 'a' }, tag2: { b: 'b' } },
+                        from: 'x',
+                        defaultName: undefined,
+                        errors: [],
+                        start: 0,
+                        end: 37,
+                    }),
+                ],
+            });
+        });
     });
-  });
 });
diff --git a/packages/imports-parser/test/tsconfig.json b/packages/imports-parser/test/tsconfig.json
index e042a3bb..bf308c46 100644
--- a/packages/imports-parser/test/tsconfig.json
+++ b/packages/imports-parser/test/tsconfig.json
@@ -4,8 +4,5 @@
     "outDir": "../dist/test",
     "types": ["mocha"]
   },
-  "references": [
-    { "path": "../src" },
-    { "path": "../../test-kit/src" }
-  ]
+  "references": [{ "path": "../src" }, { "path": "../../test-kit/src" }]
 }
diff --git a/packages/test-kit/package.json b/packages/test-kit/package.json
index 509757af..e7e7f235 100644
--- a/packages/test-kit/package.json
+++ b/packages/test-kit/package.json
@@ -14,6 +14,5 @@
   ],
   "author": "Wix.com",
   "license": "MIT",
-  "repository": "https://github.com/wixplosives/tokey/packages/test-kit",
-  "prettier": {}
+  "repository": "https://github.com/wixplosives/tokey/packages/test-kit"
 }
diff --git a/packages/test-kit/src/index.ts b/packages/test-kit/src/index.ts
index 26217ef3..2669bc90 100644
--- a/packages/test-kit/src/index.ts
+++ b/packages/test-kit/src/index.ts
@@ -1,3 +1,3 @@
-export { createParseTester } from "./parse-tester";
-export { testTokenizer } from "./test-tokenizer";
-export { isMatch } from "./is-match";
+export { createParseTester } from './parse-tester';
+export { testTokenizer } from './test-tokenizer';
+export { isMatch } from './is-match';
diff --git a/packages/test-kit/src/is-match.ts b/packages/test-kit/src/is-match.ts
index 881958ef..e2824993 100644
--- a/packages/test-kit/src/is-match.ts
+++ b/packages/test-kit/src/is-match.ts
@@ -1,24 +1,24 @@
 export function isMatch(a: any, b: any): boolean {
-  if (a === b) {
-    return true;
-  }
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) {
-      return false;
+    if (a === b) {
+        return true;
     }
-    return a.every((v, i) => {
-      return isMatch(v, b[i]);
-    });
-  }
-  if (typeof a === "object" && typeof b === "object") {
-    const ak = Object.keys(a);
-    const bk = Object.keys(b);
-    if (ak.length !== bk.length) {
-      return false;
+    if (Array.isArray(a) && Array.isArray(b)) {
+        if (a.length !== b.length) {
+            return false;
+        }
+        return a.every((v, i) => {
+            return isMatch(v, b[i]);
+        });
     }
-    return ak.every((k) => {
-      return isMatch(a[k], b[k]);
-    });
-  }
-  return false;
+    if (typeof a === 'object' && typeof b === 'object') {
+        const ak = Object.keys(a);
+        const bk = Object.keys(b);
+        if (ak.length !== bk.length) {
+            return false;
+        }
+        return ak.every((k) => {
+            return isMatch(a[k], b[k]);
+        });
+    }
+    return false;
 }
diff --git a/packages/test-kit/src/parse-tester.ts b/packages/test-kit/src/parse-tester.ts
index 3393e7c8..d2446aa9 100644
--- a/packages/test-kit/src/parse-tester.ts
+++ b/packages/test-kit/src/parse-tester.ts
@@ -1,70 +1,59 @@
-import { isMatch } from "./is-match";
+import { isMatch } from './is-match';
 
 export interface TesterConfig<AST, INPUT extends string, CONFIG> {
-  parse: (input: INPUT, options?: CONFIG) => AST;
-  stringify?: (ast: AST) => string;
-  log?: (...msgs: string[]) => void;
+    parse: (input: INPUT, options?: CONFIG) => AST;
+    stringify?: (ast: AST) => string;
+    log?: (...msgs: string[]) => void;
 }
 
 export interface TestOptions<AST, CONFIG> {
-  expectedAst: AST;
-  expectedString?: string;
-  label?: string;
-  config?: CONFIG;
+    expectedAst: AST;
+    expectedString?: string;
+    label?: string;
+    config?: CONFIG;
 }
 
 export function createParseTester<AST, INPUT extends string, CONFIG>({
-  parse,
-  stringify,
+    parse,
+    stringify,
 }: TesterConfig<AST, INPUT, CONFIG>) {
-  const safeParse = (
-    source: INPUT,
-    config?: CONFIG
-  ): [AST, null] | [null, Error] => {
-    try {
-      return [parse(source, config), null];
-    } catch (error) {
-      return [null, error as Error];
-    }
-  };
-  return (
-    source: INPUT,
-    { expectedAst, expectedString, label, config }: TestOptions<AST, CONFIG>
-  ) => {
-    const [actualAst, parseError] = safeParse(source, config);
-    if (parseError) {
-      throw parseError;
-    }
-    if (!isMatch(actualAst, expectedAst)) {
-      const e = JSON.stringify(expectedAst, null, 2);
-      const a = JSON.stringify(actualAst, null, 2);
-      throw new Error(createParseTester.errors.mismatchAst(a, e, label));
-    }
-    if (stringify) {
-      const actualString = stringify(actualAst!);
-      expectedString = expectedString ?? source;
-      if (actualString !== expectedString) {
-        throw new Error(
-          createParseTester.errors.mismatchStringify(
-            actualString,
-            expectedString,
-            label
-          )
-        );
-      }
-    }
-  };
+    const safeParse = (source: INPUT, config?: CONFIG): [AST, null] | [null, Error] => {
+        try {
+            return [parse(source, config), null];
+        } catch (error) {
+            return [null, error as Error];
+        }
+    };
+    return (
+        source: INPUT,
+        { expectedAst, expectedString, label, config }: TestOptions<AST, CONFIG>
+    ) => {
+        const [actualAst, parseError] = safeParse(source, config);
+        if (parseError) {
+            throw parseError;
+        }
+        if (!isMatch(actualAst, expectedAst)) {
+            const e = JSON.stringify(expectedAst, null, 2);
+            const a = JSON.stringify(actualAst, null, 2);
+            throw new Error(createParseTester.errors.mismatchAst(a, e, label));
+        }
+        if (stringify) {
+            const actualString = stringify(actualAst!);
+            expectedString = expectedString ?? source;
+            if (actualString !== expectedString) {
+                throw new Error(
+                    createParseTester.errors.mismatchStringify(actualString, expectedString, label)
+                );
+            }
+        }
+    };
 }
 createParseTester.errors = {
-  mismatchAst(actual: string, expected: string, label = ``) {
-    return `${getPrefix(
-      label
-    )}expected parsed value:\n${actual}\nto equal:\n${expected}`;
-  },
-  mismatchStringify(actual: string, expected: string, label = ``) {
-    return `${getPrefix(
-      label
-    )}expected stringify value:\n${actual}\nto equal:\n${expected}`;
-  },
+    mismatchAst(actual: string, expected: string, label = ``) {
+        return `${getPrefix(label)}expected parsed value:\n${actual}\nto equal:\n${expected}`;
+    },
+    mismatchStringify(actual: string, expected: string, label = ``) {
+        return `${getPrefix(label)}expected stringify value:\n${actual}\nto equal:\n${expected}`;
+    },
 };
 const getPrefix = (label?: string) => (label ? `[${label}] ` : ``);
diff --git a/packages/test-kit/src/test-tokenizer.ts b/packages/test-kit/src/test-tokenizer.ts
index eacbd2c1..032016c1 100644
--- a/packages/test-kit/src/test-tokenizer.ts
+++ b/packages/test-kit/src/test-tokenizer.ts
@@ -1,15 +1,11 @@
-import { isMatch } from "./is-match";
-export function testTokenizer<T, U>(
-  input: T,
-  aFn: (input: T) => U,
-  expected: U
-) {
-  const actual = aFn(input);
-  const normInput = JSON.stringify(input);
-  if (!isMatch(actual, expected)) {
-    const e = JSON.stringify(expected, null, 2);
-    const a = JSON.stringify(actual, null, 2);
-    throw new Error(`Fail Input: ${normInput}\n${a}\nTo\n${e}`);
-  }
-  return actual;
+import { isMatch } from './is-match';
+export function testTokenizer<T, U>(input: T, aFn: (input: T) => U, expected: U) {
+    const actual = aFn(input);
+    const normInput = JSON.stringify(input);
+    if (!isMatch(actual, expected)) {
+        const e = JSON.stringify(expected, null, 2);
+        const a = JSON.stringify(actual, null, 2);
+        throw new Error(`Fail Input: ${normInput}\n${a}\nTo\n${e}`);
+    }
+    return actual;
 }
diff --git a/packages/test-kit/test/parse-tester.spec.ts b/packages/test-kit/test/parse-tester.spec.ts
index 14c90461..eb97721b 100644
--- a/packages/test-kit/test/parse-tester.spec.ts
+++ b/packages/test-kit/test/parse-tester.spec.ts
@@ -1,105 +1,99 @@
-import { createParseTester } from "@tokey/test-kit";
-import { expect } from "chai";
+import { createParseTester } from '@tokey/test-kit';
+import { expect } from 'chai';
 
 describe(`createParseTester`, () => {
-  it(`should create a tester function that test parsed input against expectation`, () => {
-    const testReverser = createParseTester({
-      parse: (value: string) => value.split(``).reverse().join(``),
-    });
+    it(`should create a tester function that test parsed input against expectation`, () => {
+        const testReverser = createParseTester({
+            parse: (value: string) => value.split(``).reverse().join(``),
+        });
 
-    expect(() => {
-      testReverser(`123`, {
-        expectedAst: `321`,
-      });
-    }, `valid expectation`).to.not.throw();
-    expect(() => {
-      testReverser(`123`, {
-        expectedAst: `abc`,
-      });
-    }, `invalid expectation`).to.throw(
-      createParseTester.errors.mismatchAst(`"321"`, `"abc"`)
-    );
-  });
-  it(`should throw error that take place during parse `, () => {
-    const testReverser = createParseTester({
-      parse: (_value: string): string => {
-        throw new Error(`parse error`);
-      },
+        expect(() => {
+            testReverser(`123`, {
+                expectedAst: `321`,
+            });
+        }, `valid expectation`).to.not.throw();
+        expect(() => {
+            testReverser(`123`, {
+                expectedAst: `abc`,
+            });
+        }, `invalid expectation`).to.throw(createParseTester.errors.mismatchAst(`"321"`, `"abc"`));
     });
+    it(`should throw error that take place during parse `, () => {
+        const testReverser = createParseTester({
+            parse: (_value: string): string => {
+                throw new Error(`parse error`);
+            },
+        });
 
-    expect(() => {
-      testReverser(`123`, { expectedAst: `` });
-    }, `invalid expectation`).to.throw(`parse error`);
-  });
-  it(`should test stringify when supplied (test against initial input)`, () => {
-    const testReverser = createParseTester({
-      parse: (value: string) => value.split(``).reverse().join(``),
-      stringify: (value: string) => value.split(``).reverse().join(``),
-    });
-    const testReverserWithBrokenStringifier = createParseTester({
-      parse: (value: string) => value.split(``).reverse().join(``),
-      stringify: (_value: string) => `wrong value`,
+        expect(() => {
+            testReverser(`123`, { expectedAst: `` });
+        }, `invalid expectation`).to.throw(`parse error`);
     });
+    it(`should test stringify when supplied (test against initial input)`, () => {
+        const testReverser = createParseTester({
+            parse: (value: string) => value.split(``).reverse().join(``),
+            stringify: (value: string) => value.split(``).reverse().join(``),
+        });
+        const testReverserWithBrokenStringifier = createParseTester({
+            parse: (value: string) => value.split(``).reverse().join(``),
+            stringify: (_value: string) => `wrong value`,
+        });
 
-    expect(() => {
-      testReverser(`123`, {
-        expectedAst: `321`,
-      });
-    }, `valid expectation`).to.not.throw();
-    expect(() => {
-      testReverserWithBrokenStringifier(`123`, {
-        expectedAst: `321`,
-      });
-    }, `invalid stringify`).to.throw(
-      createParseTester.errors.mismatchStringify(`wrong value`, `123`)
-    );
-  });
-  it(`should test stringify when supplied (test against custom value)`, () => {
-    const testReverser = createParseTester({
-      parse: (value: string) => value.split(``).reverse().join(``),
-      stringify: (_value: string) => `stringified`,
+        expect(() => {
+            testReverser(`123`, {
+                expectedAst: `321`,
+            });
+        }, `valid expectation`).to.not.throw();
+        expect(() => {
+            testReverserWithBrokenStringifier(`123`, {
+                expectedAst: `321`,
+            });
+        }, `invalid stringify`).to.throw(
+            createParseTester.errors.mismatchStringify(`wrong value`, `123`)
+        );
     });
+    it(`should test stringify when supplied (test against custom value)`, () => {
+        const testReverser = createParseTester({
+            parse: (value: string) => value.split(``).reverse().join(``),
+            stringify: (_value: string) => `stringified`,
+        });
 
-    expect(() => {
-      testReverser(`123`, {
-        expectedAst: `321`,
-        expectedString: `stringified`,
-      });
-    }, `match custom`).to.not.throw();
-    expect(() => {
-      testReverser(`123`, {
-        expectedAst: `321`,
-        expectedString: `custom`,
-      });
-    }, `mismatch stringify`).to.throw(
-      createParseTester.errors.mismatchStringify(`stringified`, `custom`)
-    );
-  });
-  it(`should add label prefix to failed error`, () => {
-    const testReverser = createParseTester({
-      parse: (value: string) => value.split(``).reverse().join(``),
-      stringify: (_value: string) => `stringified`,
+        expect(() => {
+            testReverser(`123`, {
+                expectedAst: `321`,
+                expectedString: `stringified`,
+            });
+        }, `match custom`).to.not.throw();
+        expect(() => {
+            testReverser(`123`, {
+                expectedAst: `321`,
+                expectedString: `custom`,
+            });
+        }, `mismatch stringify`).to.throw(
+            createParseTester.errors.mismatchStringify(`stringified`, `custom`)
+        );
     });
+    it(`should add label prefix to failed error`, () => {
+        const testReverser = createParseTester({
+            parse: (value: string) => value.split(``).reverse().join(``),
+            stringify: (_value: string) => `stringified`,
+        });
 
-    expect(() => {
-      testReverser(`123`, {
-        expectedAst: `xxx`,
-        label: `test message`,
-      });
-    }, `ast check`).to.throw(
-      createParseTester.errors.mismatchAst(`"321"`, `"xxx"`, `test message`)
-    );
-    expect(() => {
-      testReverser(`123`, {
-        expectedAst: `321`,
-        label: `test message`,
-      });
-    }, `stringify check`).to.throw(
-      createParseTester.errors.mismatchStringify(
-        `stringified`,
-        `123`,
-        `test message`
-      )
-    );
-  });
+        expect(() => {
+            testReverser(`123`, {
+                expectedAst: `xxx`,
+                label: `test message`,
+            });
+        }, `ast check`).to.throw(
+            createParseTester.errors.mismatchAst(`"321"`, `"xxx"`, `test message`)
+        );
+        expect(() => {
+            testReverser(`123`, {
+                expectedAst: `321`,
+                label: `test message`,
+            });
+        }, `stringify check`).to.throw(
+            createParseTester.errors.mismatchStringify(`stringified`, `123`, `test message`)
+        );
+    });
 });
diff --git a/packages/url-tokenizer/package.json b/packages/url-tokenizer/package.json
index 405bd469..6913c720 100644
--- a/packages/url-tokenizer/package.json
+++ b/packages/url-tokenizer/package.json
@@ -26,6 +26,5 @@
   },
   "author": "Wix.com",
   "license": "MIT",
-  "repository": "https://github.com/wixplosives/tokey/packages/url-tokenizer",
-  "prettier": {}
+  "repository": "https://github.com/wixplosives/tokey/packages/url-tokenizer"
 }
diff --git a/packages/url-tokenizer/src/url-tokenizer.ts b/packages/url-tokenizer/src/url-tokenizer.ts
index b0121400..11472bd4 100644
--- a/packages/url-tokenizer/src/url-tokenizer.ts
+++ b/packages/url-tokenizer/src/url-tokenizer.ts
@@ -1,67 +1,63 @@
 import {
-  tokenize,
-  Token,
-  Descriptors,
-  isStringDelimiter,
-  isWhitespace,
-  createToken,
-  getJSCommentStartType,
-  getMultilineCommentStartType,
-  isCommentEnd,
-  getUnclosedComment,
-} from "@tokey/core";
+    tokenize,
+    Token,
+    Descriptors,
+    isStringDelimiter,
+    isWhitespace,
+    createToken,
+    getJSCommentStartType,
+    getMultilineCommentStartType,
+    isCommentEnd,
+    getUnclosedComment,
+} from '@tokey/core';
 
-type Delimiters = "(" | ")" | "," | ";" | ":";
+type Delimiters = '(' | ')' | ',' | ';' | ':';
 
 export type CSSCodeToken = Token<Descriptors | Delimiters>;
 
 export type CSSCodeTokenGroup = {
-  tokens: CSSCodeToken[];
-  start: number;
-  end: number;
+    tokens: CSSCodeToken[];
+    start: number;
+    end: number;
 };
 
 export function tokenizeCSSUrls(source: string, parseLineComments = false) {
-  return getUrlTokens(
-    tokenize<CSSCodeToken>(source, {
-      isDelimiter,
-      isStringDelimiter,
-      isWhitespace,
-      shouldAddToken,
-      createToken,
-      getCommentStartType: parseLineComments
-        ? getJSCommentStartType
-        : getMultilineCommentStartType,
-      isCommentEnd,
-      getUnclosedComment,
-    })
-  );
+    return getUrlTokens(
+        tokenize<CSSCodeToken>(source, {
+            isDelimiter,
+            isStringDelimiter,
+            isWhitespace,
+            shouldAddToken,
+            createToken,
+            getCommentStartType: parseLineComments
+                ? getJSCommentStartType
+                : getMultilineCommentStartType,
+            isCommentEnd,
+            getUnclosedComment,
+        })
+    );
 }
 
 const isDelimiter = (char: string) =>
-  char === "(" || char === ")" || char === "," || char === ";" || char === ":";
+    char === '(' || char === ')' || char === ',' || char === ';' || char === ':';
 
 const shouldAddToken = () => true;
 
 function getUrlTokens(tokens: CSSCodeToken[]): CSSCodeTokenGroup[] {
-  const urls: CSSCodeTokenGroup[] = [];
-  let inUrl;
-  for (let i = 0; i < tokens.length; i++) {
-    const token = tokens[i];
-    if (inUrl) {
-      inUrl.tokens.push(token);
-      inUrl.end = token.end;
-      if (token.type === ")") {
-        urls.push(inUrl);
-        inUrl = undefined;
-      }
-    } else if (
-      token.type === "text" &&
-      token.value === "url" &&
-      tokens[i + 1]?.type === "("
-    ) {
-      inUrl = { tokens: [token], start: token.start, end: token.end };
+    const urls: CSSCodeTokenGroup[] = [];
+    let inUrl;
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+        if (inUrl) {
+            inUrl.tokens.push(token);
+            inUrl.end = token.end;
+            if (token.type === ')') {
+                urls.push(inUrl);
+                inUrl = undefined;
+            }
+        } else if (token.type === 'text' && token.value === 'url' && tokens[i + 1]?.type === '(') {
+            inUrl = { tokens: [token], start: token.start, end: token.end };
+        }
     }
-  }
-  return urls;
+    return urls;
 }
diff --git a/packages/url-tokenizer/test/tsconfig.json b/packages/url-tokenizer/test/tsconfig.json
index e042a3bb..bf308c46 100644
--- a/packages/url-tokenizer/test/tsconfig.json
+++ b/packages/url-tokenizer/test/tsconfig.json
@@ -4,8 +4,5 @@
     "outDir": "../dist/test",
     "types": ["mocha"]
   },
-  "references": [
-    { "path": "../src" },
-    { "path": "../../test-kit/src" }
-  ]
+  "references": [{ "path": "../src" }, { "path": "../../test-kit/src" }]
 }
diff --git a/packages/url-tokenizer/test/url-tokenizer.spec.ts b/packages/url-tokenizer/test/url-tokenizer.spec.ts
index 0e58f07a..5098e0ad 100644
--- a/packages/url-tokenizer/test/url-tokenizer.spec.ts
+++ b/packages/url-tokenizer/test/url-tokenizer.spec.ts
@@ -1,123 +1,119 @@
-import { createParseTester } from "@tokey/test-kit";
-import {
-  CSSCodeToken,
-  CSSCodeTokenGroup,
-  tokenizeCSSUrls,
-} from "@tokey/url-tokenizer";
+import { createParseTester } from '@tokey/test-kit';
+import { CSSCodeToken, CSSCodeTokenGroup, tokenizeCSSUrls } from '@tokey/url-tokenizer';
 
 function createGroup(tokens: CSSCodeToken[]): CSSCodeTokenGroup {
-  return {
-    tokens: tokens,
-    start: tokens[0].start,
-    end: tokens[tokens.length - 1].end,
-  };
+    return {
+        tokens: tokens,
+        start: tokens[0].start,
+        end: tokens[tokens.length - 1].end,
+    };
 }
 
 const test = createParseTester({
-  parse: tokenizeCSSUrls,
+    parse: tokenizeCSSUrls,
 });
 
 describe(`demos/url-tokenizer`, () => {
-  it("url('x')", () => {
-    test("url('x')", {
-      expectedAst: [
-        createGroup([
-          { value: "url", type: "text", start: 0, end: 3 },
-          { value: "(", type: "(", start: 3, end: 4 },
-          { value: "'x'", type: "string", start: 4, end: 7 },
-          { value: ")", type: ")", start: 7, end: 8 },
-        ]),
-      ],
+    it("url('x')", () => {
+        test("url('x')", {
+            expectedAst: [
+                createGroup([
+                    { value: 'url', type: 'text', start: 0, end: 3 },
+                    { value: '(', type: '(', start: 3, end: 4 },
+                    { value: "'x'", type: 'string', start: 4, end: 7 },
+                    { value: ')', type: ')', start: 7, end: 8 },
+                ]),
+            ],
+        });
     });
-  });
-  it(`url("x")`, () => {
-    test(`url("x")`, {
-      expectedAst: [
-        createGroup([
-          { value: "url", type: "text", start: 0, end: 3 },
-          { value: "(", type: "(", start: 3, end: 4 },
-          { value: `"x"`, type: "string", start: 4, end: 7 },
-          { value: ")", type: ")", start: 7, end: 8 },
-        ]),
-      ],
+    it(`url("x")`, () => {
+        test(`url("x")`, {
+            expectedAst: [
+                createGroup([
+                    { value: 'url', type: 'text', start: 0, end: 3 },
+                    { value: '(', type: '(', start: 3, end: 4 },
+                    { value: `"x"`, type: 'string', start: 4, end: 7 },
+                    { value: ')', type: ')', start: 7, end: 8 },
+                ]),
+            ],
+        });
     });
-  });
-  it(`url("x")url("y")url("z")`, () => {
-    test(`url("x")url("y")url("z")`, {
-      expectedAst: [
-        createGroup([
-          { value: "url", type: "text", start: 0, end: 3 },
-          { value: "(", type: "(", start: 3, end: 4 },
-          { value: '"x"', type: "string", start: 4, end: 7 },
-          { value: ")", type: ")", start: 7, end: 8 },
-        ]),
-        createGroup([
-          { value: "url", type: "text", start: 8, end: 11 },
-          { value: "(", type: "(", start: 11, end: 12 },
-          { value: '"y"', type: "string", start: 12, end: 15 },
-          { value: ")", type: ")", start: 15, end: 16 },
-        ]),
-        createGroup([
-          { value: "url", type: "text", start: 16, end: 19 },
-          { value: "(", type: "(", start: 19, end: 20 },
-          { value: '"z"', type: "string", start: 20, end: 23 },
-          { value: ")", type: ")", start: 23, end: 24 },
-        ]),
-      ],
+    it(`url("x")url("y")url("z")`, () => {
+        test(`url("x")url("y")url("z")`, {
+            expectedAst: [
+                createGroup([
+                    { value: 'url', type: 'text', start: 0, end: 3 },
+                    { value: '(', type: '(', start: 3, end: 4 },
+                    { value: '"x"', type: 'string', start: 4, end: 7 },
+                    { value: ')', type: ')', start: 7, end: 8 },
+                ]),
+                createGroup([
+                    { value: 'url', type: 'text', start: 8, end: 11 },
+                    { value: '(', type: '(', start: 11, end: 12 },
+                    { value: '"y"', type: 'string', start: 12, end: 15 },
+                    { value: ')', type: ')', start: 15, end: 16 },
+                ]),
+                createGroup([
+                    { value: 'url', type: 'text', start: 16, end: 19 },
+                    { value: '(', type: '(', start: 19, end: 20 },
+                    { value: '"z"', type: 'string', start: 20, end: 23 },
+                    { value: ')', type: ')', start: 23, end: 24 },
+                ]),
+            ],
+        });
     });
-  });
-  it("url('x' + $var)", () => {
-    test("url('x' + $var)", {
-      expectedAst: [
-        createGroup([
-          { value: "url", type: "text", start: 0, end: 3 },
-          { value: "(", type: "(", start: 3, end: 4 },
-          { value: "'x'", type: "string", start: 4, end: 7 },
-          { value: " ", type: "space", start: 7, end: 8 },
-          { value: "+", type: "text", start: 8, end: 9 },
-          { value: " ", type: "space", start: 9, end: 10 },
-          { value: "$var", type: "text", start: 10, end: 14 },
-          { value: ")", type: ")", start: 14, end: 15 },
-        ]),
-      ],
+    it("url('x' + $var)", () => {
+        test("url('x' + $var)", {
+            expectedAst: [
+                createGroup([
+                    { value: 'url', type: 'text', start: 0, end: 3 },
+                    { value: '(', type: '(', start: 3, end: 4 },
+                    { value: "'x'", type: 'string', start: 4, end: 7 },
+                    { value: ' ', type: 'space', start: 7, end: 8 },
+                    { value: '+', type: 'text', start: 8, end: 9 },
+                    { value: ' ', type: 'space', start: 9, end: 10 },
+                    { value: '$var', type: 'text', start: 10, end: 14 },
+                    { value: ')', type: ')', start: 14, end: 15 },
+                ]),
+            ],
+        });
     });
-  });
-  it("url('x' + $var/*comment*/)", () => {
-    test("url('x' + $var/*comment*/)", {
-      expectedAst: [
-        createGroup([
-          { value: "url", type: "text", start: 0, end: 3 },
-          { value: "(", type: "(", start: 3, end: 4 },
-          { value: "'x'", type: "string", start: 4, end: 7 },
-          { value: " ", type: "space", start: 7, end: 8 },
-          { value: "+", type: "text", start: 8, end: 9 },
-          { value: " ", type: "space", start: 9, end: 10 },
-          { value: "$var", type: "text", start: 10, end: 14 },
-          { value: "/*comment*/", type: "multi-comment", start: 14, end: 25 },
-          { value: ")", type: ")", start: 25, end: 26 },
-        ]),
-      ],
+    it("url('x' + $var/*comment*/)", () => {
+        test("url('x' + $var/*comment*/)", {
+            expectedAst: [
+                createGroup([
+                    { value: 'url', type: 'text', start: 0, end: 3 },
+                    { value: '(', type: '(', start: 3, end: 4 },
+                    { value: "'x'", type: 'string', start: 4, end: 7 },
+                    { value: ' ', type: 'space', start: 7, end: 8 },
+                    { value: '+', type: 'text', start: 8, end: 9 },
+                    { value: ' ', type: 'space', start: 9, end: 10 },
+                    { value: '$var', type: 'text', start: 10, end: 14 },
+                    { value: '/*comment*/', type: 'multi-comment', start: 14, end: 25 },
+                    { value: ')', type: ')', start: 25, end: 26 },
+                ]),
+            ],
+        });
     });
-  });
-  it("invalid comment", () => {
-    test("url(/*comment*/'x' + $var)", {
-      expectedAst: [
-        createGroup([
-          { value: "url", type: "text", start: 0, end: 3 },
-          { value: "(", type: "(", start: 3, end: 4 },
-          { value: "/*comment*/", type: "multi-comment", start: 4, end: 15 },
-          { value: "'x'", type: "string", start: 15, end: 18 },
-          { value: " ", type: "space", start: 18, end: 19 },
-          { value: "+", type: "text", start: 19, end: 20 },
-          { value: " ", type: "space", start: 20, end: 21 },
-          { value: "$var", type: "text", start: 21, end: 25 },
-          { value: ")", type: ")", start: 25, end: 26 },
-        ]),
-      ],
+    it('invalid comment', () => {
+        test("url(/*comment*/'x' + $var)", {
+            expectedAst: [
+                createGroup([
+                    { value: 'url', type: 'text', start: 0, end: 3 },
+                    { value: '(', type: '(', start: 3, end: 4 },
+                    { value: '/*comment*/', type: 'multi-comment', start: 4, end: 15 },
+                    { value: "'x'", type: 'string', start: 15, end: 18 },
+                    { value: ' ', type: 'space', start: 18, end: 19 },
+                    { value: '+', type: 'text', start: 19, end: 20 },
+                    { value: ' ', type: 'space', start: 20, end: 21 },
+                    { value: '$var', type: 'text', start: 21, end: 25 },
+                    { value: ')', type: ')', start: 25, end: 26 },
+                ]),
+            ],
+        });
     });
-  });
-  it("invalid url", () => {
-    test("url/*comment*/('x' + $var)", { expectedAst: [] });
-  });
-  // TODO: add test with more complex inputs (real world css)
+    it('invalid url', () => {
+        test("url/*comment*/('x' + $var)", { expectedAst: [] });
+    });
+    // TODO: add test with more complex inputs (real world css)
 });
diff --git a/tsconfig.json b/tsconfig.json
index 3471a16f..75b6f62a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,6 @@
     { "path": "./packages/url-tokenizer/src" },
     { "path": "./packages/url-tokenizer/test" },
     { "path": "./packages/experiments/src" },
-    { "path": "./packages/experiments/test" },
+    { "path": "./packages/experiments/test" }
   ]
 }

From 177c70f4b7367b83c99fb3b9b94a98f904c5c7db Mon Sep 17 00:00:00 2001
From: Ido Rosenthal <idoros@gmail.com>
Date: Sun, 2 Jan 2022 11:55:23 +0200
Subject: [PATCH 12/16] feat: catch unclosed `(` as literal

- and also any uncatched single charachter tokens
---
 packages/css-value-parser/src/value-parser.ts | 22 +++++++++++--------
 .../test/value-parser.spec.ts                 | 11 +++++-----
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/css-value-parser/src/value-parser.ts b/packages/css-value-parser/src/value-parser.ts
index 9f1714a8..fe36ad25 100644
--- a/packages/css-value-parser/src/value-parser.ts
+++ b/packages/css-value-parser/src/value-parser.ts
@@ -49,15 +49,7 @@ function handleToken(
   s: Seeker<CSSValueToken>
 ): void {
   const { type, value, start, end } = token;
-  if (type === `,` || type === `/`) {
-    ast.push(
-      literal({
-        start,
-        end,
-        value,
-      })
-    );
-  } else if (type === `space`) {
+  if (type === `space`) {
     const firstSpace = value.indexOf(` `);
     const before = firstSpace !== -1 ? value.substring(0, firstSpace) : ``;
     const after =
@@ -197,6 +189,18 @@ function handleToken(
         end,
       })
     );
+  } else if (value.length === 1) {
+    /* catches: , / or any other single char value.
+    not sure about this, might be better to break down 
+    any multi value token into single literal nodes.
+    */
+    ast.push(
+      literal({
+        start,
+        end,
+        value,
+      })
+    );
   } else {
     ast.push(
       invalid({
diff --git a/packages/css-value-parser/test/value-parser.spec.ts b/packages/css-value-parser/test/value-parser.spec.ts
index 90ada88e..c0f0b90b 100644
--- a/packages/css-value-parser/test/value-parser.spec.ts
+++ b/packages/css-value-parser/test/value-parser.spec.ts
@@ -87,6 +87,11 @@ describe(`value-parser`, () => {
         source: `-`,
         expected: [literal({ value: `-`, start: 0, end: 1 })],
       },
+      {
+        type: `(`,
+        source: `(`,
+        expected: [literal({ value: `(`, start: 0, end: 1 })],
+      },
     ].forEach(createTest);
   });
   describe(`css-wide-keyword`, () => {
@@ -560,12 +565,6 @@ describe(`value-parser`, () => {
   });
   describe(`invalid`, () => {
     [
-      {
-        type: `invalid`,
-        desc: `un-opened parentheses`,
-        source: `)`,
-        expected: [invalid({ value: `)`, start: 0, end: 1 })],
-      },
       {
         type: `invalid`,
         desc: `standalone hash`,

From 42f62b13d6863c15e8245580543895c3f0c60f21 Mon Sep 17 00:00:00 2001
From: Ido Rosenthal <idoros@gmail.com>
Date: Sun, 2 Jan 2022 11:58:37 +0200
Subject: [PATCH 13/16] test: value of number with starting dot: `.2`

---
 packages/css-value-parser/test/value-parser.spec.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/css-value-parser/test/value-parser.spec.ts b/packages/css-value-parser/test/value-parser.spec.ts
index c0f0b90b..0e6f0174 100644
--- a/packages/css-value-parser/test/value-parser.spec.ts
+++ b/packages/css-value-parser/test/value-parser.spec.ts
@@ -306,6 +306,12 @@ describe(`value-parser`, () => {
           source: `1.5`,
           expected: [number({ value: `1.5`, start: 0, end: 3 })],
         },
+        {
+          type: `<number>`,
+          desc: `start with dot`,
+          source: `.5`,
+          expected: [number({ value: `.5`, start: 0, end: 2 })],
+        },
         {
           type: `<number>`,
           desc: `sign +`,

From 50cede4da52e998bf4dc450f438a02657ef7a142 Mon Sep 17 00:00:00 2001
From: Ido Rosenthal <idoros@gmail.com>
Date: Sun, 2 Jan 2022 12:21:37 +0200
Subject: [PATCH 14/16] chore: prettify and pass tests

- fix prettify to run on packages
- skip unimplemented tests
---
 demos/tokey-tokenizer.html                    |    2 +-
 packages/core/package.json                    |    1 -
 packages/core/src/core.ts                     |  194 +-
 packages/core/src/helpers.ts                  |  197 +-
 packages/core/src/index.ts                    |    8 +-
 packages/core/src/seeker.ts                   |  147 +-
 packages/core/src/types.ts                    |   32 +-
 packages/core/test/core.spec.ts               |  379 +-
 .../core/test/helpers/trim-tokens.spec.ts     |  209 +-
 packages/css-selector-parser/package.json     |    1 -
 .../src/ast-tools/compound.ts                 |  287 +-
 .../src/ast-tools/specificity.ts              |  152 +-
 .../css-selector-parser/src/ast-tools/walk.ts |  235 +-
 packages/css-selector-parser/src/ast-types.ts |  191 +-
 packages/css-selector-parser/src/helpers.ts   |  210 +-
 packages/css-selector-parser/src/index.ts     |   21 +-
 .../css-selector-parser/src/nth-parser.ts     |  475 +-
 .../src/selector-parser.ts                    |  792 +-
 packages/css-selector-parser/src/stringify.ts |  193 +-
 packages/css-selector-parser/src/tokenizer.ts |  123 +-
 packages/css-selector-parser/src/types.ts     |    9 +-
 .../test/ast-tools/compound.spec.ts           | 1747 +++--
 .../test/ast-tools/specificity.spec.ts        |  360 +-
 .../test/ast-tools/walk.spec.ts               |  922 ++-
 .../test/selector-parser.spec.ts              | 6863 ++++++++---------
 .../test/stringify.spec.ts                    |    1 -
 .../test/test-kit/parsing.ts                  |  220 +-
 packages/css-value-parser/package.json        |    1 -
 packages/css-value-parser/src/ast-types.ts    |  374 +-
 .../css-value-parser/src/define-property.ts   |  103 +-
 packages/css-value-parser/src/index.ts        |   14 +-
 .../src/properties/background.ts              |   84 +-
 .../css-value-parser/src/properties/margin.ts |   54 +-
 packages/css-value-parser/src/tokenizer.ts    |   77 +-
 packages/css-value-parser/src/units.ts        |   42 +-
 packages/css-value-parser/src/value-parser.ts |  674 +-
 .../css-value-parser/src/value-stringify.ts   |  106 +-
 .../src/value-syntax-parser.ts                |  767 +-
 .../test/css-value-syntax.spec.ts             |  500 +-
 .../test/define-property.spec.ts              |  735 +-
 .../test/properties/background.spec.ts        |   51 +-
 .../test/properties/margin.spec.ts            |  217 +-
 packages/css-value-parser/test/types.d.ts     |   36 +-
 .../test/value-parser.spec.ts                 | 1254 +--
 packages/experiments/test/tsconfig.json       |    5 +-
 packages/imports-parser/test/tsconfig.json    |    5 +-
 packages/url-tokenizer/test/tsconfig.json     |    5 +-
 tsconfig.json                                 |    2 +-
 48 files changed, 9364 insertions(+), 9713 deletions(-)

diff --git a/demos/tokey-tokenizer.html b/demos/tokey-tokenizer.html
index 772b9a15..b8749be3 100644
--- a/demos/tokey-tokenizer.html
+++ b/demos/tokey-tokenizer.html
@@ -34,7 +34,7 @@
         return false;
       }
       function isStringDelimiter(ch) {
-        return ch === '"' || ch === "'" || ch === "`"
+        return ch === '"' || ch === "'" || ch === '`';
       }
       function shouldAddToken() {
         return true;
diff --git a/packages/core/package.json b/packages/core/package.json
index e3b6f3ce..119fc4cd 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -26,6 +26,5 @@
   "author": "Wix.com",
   "license": "MIT",
   "repository": "https://github.com/wixplosives/tokey/packages/core",
-  "prettier": {},
   "sideEffects": false
 }
diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
index c4581bc6..6a6dcf4d 100644
--- a/packages/core/src/core.ts
+++ b/packages/core/src/core.ts
@@ -1,114 +1,100 @@
-import type { Token } from "./types";
+import type { Token } from './types';
 
 export interface TokyOptions<T extends Token<unknown>> {
-  shouldAddToken(type: T["type"], value: string): boolean;
-  isStringDelimiter(char: string, previousChar: string): boolean;
-  isDelimiter(char: string, previousChar: string): boolean;
-  isWhitespace(char: string): boolean;
-  getCommentStartType(
-    ch: string,
-    source: string,
-    nextCharIndex: number
-  ): string;
-  isCommentEnd(
-    inComment: string,
-    ch: string,
-    source: string,
-    nextCharIndex: number,
-    previousChar: string
-  ): boolean;
-  getUnclosedComment(inComment: string): string;
-  createToken(value: string, type: T["type"], start: number, end: number): T;
-  offset?: number;
+    shouldAddToken(type: T['type'], value: string): boolean;
+    isStringDelimiter(char: string, previousChar: string): boolean;
+    isDelimiter(char: string, previousChar: string): boolean;
+    isWhitespace(char: string): boolean;
+    getCommentStartType(ch: string, source: string, nextCharIndex: number): string;
+    isCommentEnd(
+        inComment: string,
+        ch: string,
+        source: string,
+        nextCharIndex: number,
+        previousChar: string
+    ): boolean;
+    getUnclosedComment(inComment: string): string;
+    createToken(value: string, type: T['type'], start: number, end: number): T;
+    offset?: number;
 }
 
 export function tokenize<T extends Token<unknown>>(
-  source: string,
-  {
-    isDelimiter,
-    isStringDelimiter,
-    isWhitespace,
-    shouldAddToken,
-    createToken,
-    getCommentStartType,
-    isCommentEnd,
-    getUnclosedComment,
-    offset = 0,
-  }: TokyOptions<T>
+    source: string,
+    {
+        isDelimiter,
+        isStringDelimiter,
+        isWhitespace,
+        shouldAddToken,
+        createToken,
+        getCommentStartType,
+        isCommentEnd,
+        getUnclosedComment,
+        offset = 0,
+    }: TokyOptions<T>
 ): T[] {
-  const tokens: T[] = [];
-  let previousChar = "";
-  let buffer = "";
-  let inComment = "";
-  let inString = "";
-  let start = offset;
-  let nextCharIndex = 0;
-  for (const ch of source) {
-    nextCharIndex += ch.length;
-    if (inString) {
-      buffer += ch;
-      if (ch === inString && previousChar !== "\\") {
-        pushBuffer("string");
-        inString = "";
-      }
-    } else if (inComment) {
-      buffer += ch;
-      if (
-        isCommentEnd(
-          inComment,
-          ch,
-          source,
-          nextCharIndex,
-          previousChar
-        )
-      ) {
-        pushBuffer(inComment);
-        inComment = "";
-      }
-    } else if (
-      (inComment = getCommentStartType(ch, source, nextCharIndex))
-    ) {
-      pushBuffer();
-      buffer += ch;
-    } else if (isStringDelimiter(ch, previousChar)) {
-      pushBuffer();
-      buffer += ch;
-      inString = ch;
-    } else if (isDelimiter(ch, previousChar)) {
-      pushBuffer();
-      buffer += ch;
-      pushBuffer(ch);
-    } else if (isWhitespace(ch) && !isWhitespace(previousChar)) {
-      pushBuffer();
-      buffer += ch;
-    } else if (!isWhitespace(ch) && isWhitespace(previousChar)) {
-      pushBuffer();
-      buffer += ch;
-    } else {
-      buffer += ch;
-    }
-    previousChar = ch;
-  }
-  if (buffer.length) {
-    if (inComment) {
-      pushBuffer(getUnclosedComment(inComment));
-    } else if (inString) {
-      pushBuffer("unclosed-string");
-    } else {
-      pushBuffer();
+    const tokens: T[] = [];
+    let previousChar = '';
+    let buffer = '';
+    let inComment = '';
+    let inString = '';
+    let start = offset;
+    let nextCharIndex = 0;
+    for (const ch of source) {
+        nextCharIndex += ch.length;
+        if (inString) {
+            buffer += ch;
+            if (ch === inString && previousChar !== '\\') {
+                pushBuffer('string');
+                inString = '';
+            }
+        } else if (inComment) {
+            buffer += ch;
+            if (isCommentEnd(inComment, ch, source, nextCharIndex, previousChar)) {
+                pushBuffer(inComment);
+                inComment = '';
+            }
+        } else if ((inComment = getCommentStartType(ch, source, nextCharIndex))) {
+            pushBuffer();
+            buffer += ch;
+        } else if (isStringDelimiter(ch, previousChar)) {
+            pushBuffer();
+            buffer += ch;
+            inString = ch;
+        } else if (isDelimiter(ch, previousChar)) {
+            pushBuffer();
+            buffer += ch;
+            pushBuffer(ch);
+        } else if (isWhitespace(ch) && !isWhitespace(previousChar)) {
+            pushBuffer();
+            buffer += ch;
+        } else if (!isWhitespace(ch) && isWhitespace(previousChar)) {
+            pushBuffer();
+            buffer += ch;
+        } else {
+            buffer += ch;
+        }
+        previousChar = ch;
     }
-  }
-  function pushBuffer(type?: T["type"]) {
-    if (buffer.length === 0) {
-      return;
+    if (buffer.length) {
+        if (inComment) {
+            pushBuffer(getUnclosedComment(inComment));
+        } else if (inString) {
+            pushBuffer('unclosed-string');
+        } else {
+            pushBuffer();
+        }
     }
-    const end = start + buffer.length;
-    type = type ?? (buffer.trim().length ? "text" : "space");
-    if (shouldAddToken(type, buffer)) {
-      tokens[tokens.length] = createToken(buffer, type, start, end);
+    function pushBuffer(type?: T['type']) {
+        if (buffer.length === 0) {
+            return;
+        }
+        const end = start + buffer.length;
+        type = type ?? (buffer.trim().length ? 'text' : 'space');
+        if (shouldAddToken(type, buffer)) {
+            tokens[tokens.length] = createToken(buffer, type, start, end);
+        }
+        start = end;
+        buffer = '';
     }
-    start = end;
-    buffer = "";
-  }
-  return tokens;
+    return tokens;
 }
diff --git a/packages/core/src/helpers.ts b/packages/core/src/helpers.ts
index 8f708bb5..99b95917 100644
--- a/packages/core/src/helpers.ts
+++ b/packages/core/src/helpers.ts
@@ -1,139 +1,123 @@
-import type { Token } from "./types";
+import type { Token } from './types';
 
 /**
  * Checks if a token type is comment
  */
 export function isComment(type: string) {
-  return (
-    type === "line-comment" ||
-    type === "multi-comment" ||
-    type === "unclosed-comment"
-  );
+    return type === 'line-comment' || type === 'multi-comment' || type === 'unclosed-comment';
 }
 
 /**
  * Checks if a token type is string
  */
 export function isString(type: string) {
-  return type === "string" || type === "unclosed-string";
+    return type === 'string' || type === 'unclosed-string';
 }
 
 /**
  * Checks for a set of JS strings
  */
-export const isStringDelimiter = (char: string) =>
-  char === `'` || char === `"` || char === "`";
+export const isStringDelimiter = (char: string) => char === `'` || char === `"` || char === '`';
 
 /**
  * Checks for a set of Whitespace
  */
 export const isWhitespace = (char: string) =>
-  char === " " || char === `\t` || char === `\r` || char === "\n";
+    char === ' ' || char === `\t` || char === `\r` || char === '\n';
 
 /**
  * Creates a basic token
  */
 export const createToken = <Type extends string>(
-  value: string,
-  type: Type,
-  start: number,
-  end: number
+    value: string,
+    type: Type,
+    start: number,
+    end: number
 ) => {
-  return {
-    value,
-    type,
-    start,
-    end,
-  };
+    return {
+        value,
+        type,
+        start,
+        end,
+    };
 };
 
 /**
  * Get JS type of comments for a specific set of start chars when no comment is detected empty string is used
  */
 export function getJSCommentStartType(
-  ch: string,
-  source: string,
-  nextCharIndex: number
-): "" | "line-comment" | "multi-comment" {
-  if (ch === "/" && source[nextCharIndex] === "/") {
-    return "line-comment";
-  } else {
-    return ch === "/" && source[nextCharIndex] === "*" ? "multi-comment" : "";
-  }
+    ch: string,
+    source: string,
+    nextCharIndex: number
+): '' | 'line-comment' | 'multi-comment' {
+    if (ch === '/' && source[nextCharIndex] === '/') {
+        return 'line-comment';
+    } else {
+        return ch === '/' && source[nextCharIndex] === '*' ? 'multi-comment' : '';
+    }
 }
 
 /**
  * Get CSS type of comments for a specific set of start chars when no comment is detected empty string is used
  */
 export function getMultilineCommentStartType(
-  ch: string,
-  source: string,
-  nextCharIndex: number
-): "" | "multi-comment" {
-  return ch === "/" && source[nextCharIndex] === "*" ? "multi-comment" : "";
+    ch: string,
+    source: string,
+    nextCharIndex: number
+): '' | 'multi-comment' {
+    return ch === '/' && source[nextCharIndex] === '*' ? 'multi-comment' : '';
 }
 
 /**
  * Given a JS comment type determine if this is the end of the comment
  */
 export function isCommentEnd(
-  commentType: string,
-  ch: string,
-  _source: string,
-  _nextCharIndex: number,
-  previousChar: string
+    commentType: string,
+    ch: string,
+    _source: string,
+    _nextCharIndex: number,
+    previousChar: string
 ): boolean {
-  if (commentType === "line-comment" && ch === "\n") {
-    return true;
-  } else if (
-    commentType === "multi-comment" &&
-    ch === "/" &&
-    previousChar === "*"
-  ) {
-    return true;
-  }
-  return false;
+    if (commentType === 'line-comment' && ch === '\n') {
+        return true;
+    } else if (commentType === 'multi-comment' && ch === '/' && previousChar === '*') {
+        return true;
+    }
+    return false;
 }
 
 /**
  * Get the type of unclosed comment
  */
-export function getUnclosedComment(
-  commentType: string
-): "line-comment" | "unclosed-comment" {
-  if (commentType === "line-comment") {
-    return commentType;
-  } else {
-    return "unclosed-comment";
-  }
+export function getUnclosedComment(commentType: string): 'line-comment' | 'unclosed-comment' {
+    if (commentType === 'line-comment') {
+        return commentType;
+    } else {
+        return 'unclosed-comment';
+    }
 }
 /**
  * Get the text between two token indexes
  * if source is provided it will slice the text from original source
  * otherwise the value of the tokens will be concatenated
  */
-export function getText(
-  tokens: Token<any>[],
-  startIndex = 0,
-  upToIndex = -1,
-  source?: string
-) {
-  if (tokens.length === 0) {
-    return "";
-  }
-  if (upToIndex === -1) {
-    upToIndex = tokens.length;
-  }
+export function getText(tokens: Token<any>[], startIndex = 0, upToIndex = -1, source?: string) {
+    if (tokens.length === 0) {
+        return '';
+    }
+    if (upToIndex === -1) {
+        upToIndex = tokens.length;
+    }
 
-  if (source) {
-    return source.slice(tokens[startIndex].start, tokens[upToIndex - 1].end);
-  } else {
-    let res = "";
-    for (let i = startIndex; i < upToIndex; i++) {
-      res += tokens[i].value;
+    if (source) {
+        return source.slice(tokens[startIndex].start, tokens[upToIndex - 1].end);
+    } else {
+        let res = '';
+        for (let i = startIndex; i < upToIndex; i++) {
+            res += tokens[i].value;
+        }
+        return res;
     }
-    return res;
-  }
 }
 
 /**
@@ -141,48 +125,49 @@ export function getText(
  * If source is provided the value will contain the text between the tokens,
  * instead of the tokens concatenated text.
  */
-export function groupTokens<
-  Tokens extends Token<any>[],
-  T extends string = "tokens"
->(tokens: Tokens, type: T = "tokens" as T, source?: string) {
-  return {
-    type,
-    start: tokens[0].start,
-    end: tokens[tokens.length - 1].end,
-    value: getText(tokens, undefined, undefined, source),
-    tokens,
-  };
+export function groupTokens<Tokens extends Token<any>[], T extends string = 'tokens'>(
+    tokens: Tokens,
+    type: T = 'tokens' as T,
+    source?: string
+) {
+    return {
+        type,
+        start: tokens[0].start,
+        end: tokens[tokens.length - 1].end,
+        value: getText(tokens, undefined, undefined, source),
+        tokens,
+    };
 }
 
 /**
  * Trim tokens from both ends with a matcher function
  */
 export function trimTokens<Tokens extends Token<any>[]>(
-  tokens: Tokens,
-  shouldTrimToken: (token: Token<any>) => boolean
+    tokens: Tokens,
+    shouldTrimToken: (token: Token<any>) => boolean
 ) {
-  let start = 0;
-  let end = tokens.length;
-  for (let i = 0; i < tokens.length; i++) {
-    if (shouldTrimToken(tokens[i])) {
-      start = i + 1;
-    } else {
-      break;
+    let start = 0;
+    let end = tokens.length;
+    for (let i = 0; i < tokens.length; i++) {
+        if (shouldTrimToken(tokens[i])) {
+            start = i + 1;
+        } else {
+            break;
+        }
     }
-  }
-  for (let i = tokens.length - 1; i > start; i--) {
-    if (shouldTrimToken(tokens[i])) {
-      end = i;
-    } else {
-      break;
+    for (let i = tokens.length - 1; i > start; i--) {
+        if (shouldTrimToken(tokens[i])) {
+            end = i;
+        } else {
+            break;
+        }
     }
-  }
-  return tokens.slice(start, end);
+    return tokens.slice(start, end);
 }
 
 /**
  * get last item in array
  */
 export function last<T>(arr: T[]): T | undefined {
-  return arr[arr.length - 1];
+    return arr[arr.length - 1];
 }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index f4b9752d..6322ac9d 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,4 +1,4 @@
-export * from "./types";
-export * from "./core";
-export * from "./helpers";
-export * from "./seeker";
+export * from './types';
+export * from './core';
+export * from './helpers';
+export * from './seeker';
diff --git a/packages/core/src/seeker.ts b/packages/core/src/seeker.ts
index 360adf04..cc61947f 100644
--- a/packages/core/src/seeker.ts
+++ b/packages/core/src/seeker.ts
@@ -1,91 +1,82 @@
-import type { Token } from "./types";
+import type { Token } from './types';
 
 /**
  * Minimal token traverse helper used to create structure from tokens
  */
 export class Seeker<T extends Token<unknown>> {
-  index = -1;
-  constructor(public tokens: T[]) {}
-  next() {
-    this.index++;
-    return this.tokens[this.index] || { type: "" };
-  }
-  back() {
-    this.index--;
-  }
-  peekBack() {
-    return this.tokens[this.index - 1] || { type: "" };
-  }
-  peek(num = 1) {
-    return this.tokens[this.index + num] || { type: "" };
-  }
-  take(type: T["type"]) {
-    if (this.peek().type === type) {
-      return this.next();
+    index = -1;
+    constructor(public tokens: T[]) {}
+    next() {
+        this.index++;
+        return this.tokens[this.index] || { type: '' };
     }
-    return undefined;
-  }
-  eat(type: T["type"]) {
-    while (this.peek().type === type) {
-      this.index++;
+    back() {
+        this.index--;
     }
-    return this;
-  }
-  takeMany(type: T["type"]) {
-    const tokens = [];
-    while (this.peek().type === type) {
-      tokens.push(this.next());
+    peekBack() {
+        return this.tokens[this.index - 1] || { type: '' };
     }
-    return tokens;
-  }
-  flatBlock(
-    start: string,
-    end: string,
-    isEndError?: (token: Token<any>) => boolean
-  ) {
-    let token = this.next();
-    if (token.type !== start) {
-      return [];
+    peek(num = 1) {
+        return this.tokens[this.index + num] || { type: '' };
     }
-    const block = [];
-    let endIndex;
-    while ((token = this.next())) {
-      if (!token.type) {
-        if (endIndex !== undefined) {
-          this.index = endIndex - 1;
+    take(type: T['type']) {
+        if (this.peek().type === type) {
+            return this.next();
         }
-        return;
-      }
-      if (isEndError && isEndError(token)) {
-        endIndex = this.index;
-      }
-      if (token.type === end) {
-        return block;
-      } else {
-        block.push(token);
-      }
+        return undefined;
     }
-    return [];
-  }
-  done() {
-    return this.index >= this.tokens.length - 1;
-  }
-  run<A>(
-    handleToken: (
-      token: T,
-      ast: A,
-      source: string,
-      seeker: this
-    ) => void | boolean,
-    ast: A,
-    source: string
-  ) {
-    let token;
-    while ((token = this.next()) && token.type) {
-      if (handleToken(token, ast, source, this) === false) {
-        break;
-      }
+    eat(type: T['type']) {
+        while (this.peek().type === type) {
+            this.index++;
+        }
+        return this;
+    }
+    takeMany(type: T['type']) {
+        const tokens = [];
+        while (this.peek().type === type) {
+            tokens.push(this.next());
+        }
+        return tokens;
+    }
+    flatBlock(start: string, end: string, isEndError?: (token: Token<any>) => boolean) {
+        let token = this.next();
+        if (token.type !== start) {
+            return [];
+        }
+        const block = [];
+        let endIndex;
+        while ((token = this.next())) {
+            if (!token.type) {
+                if (endIndex !== undefined) {
+                    this.index = endIndex - 1;
+                }
+                return;
+            }
+            if (isEndError && isEndError(token)) {
+                endIndex = this.index;
+            }
+            if (token.type === end) {
+                return block;
+            } else {
+                block.push(token);
+            }
+        }
+        return [];
+    }
+    done() {
+        return this.index >= this.tokens.length - 1;
+    }
+    run<A>(
+        handleToken: (token: T, ast: A, source: string, seeker: this) => void | boolean,
+        ast: A,
+        source: string
+    ) {
+        let token;
+        while ((token = this.next()) && token.type) {
+            if (handleToken(token, ast, source, this) === false) {
+                break;
+            }
+        }
+        return ast;
     }
-    return ast;
-  }
 }
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index ae746ec4..c4c3e0c4 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1,23 +1,23 @@
 export type Descriptors =
-  | "string"
-  | "text"
-  | "line-comment"
-  | "multi-comment"
-  | "unclosed-string"
-  | "unclosed-comment"
-  | "space";
+    | 'string'
+    | 'text'
+    | 'line-comment'
+    | 'multi-comment'
+    | 'unclosed-string'
+    | 'unclosed-comment'
+    | 'space';
 
 export interface Token<Type = Descriptors> {
-  type: Type;
-  start: number;
-  end: number;
-  value: string;
+    type: Type;
+    start: number;
+    end: number;
+    value: string;
 }
 
 export interface TokenGroup<GroupType, Type = Descriptors> {
-  type: GroupType;
-  start: number;
-  end: number;
-  value: string;
-  tokens: Token<Type>[];
+    type: GroupType;
+    start: number;
+    end: number;
+    value: string;
+    tokens: Token<Type>[];
 }
diff --git a/packages/core/test/core.spec.ts b/packages/core/test/core.spec.ts
index d8d45fd4..bbc6c21a 100644
--- a/packages/core/test/core.spec.ts
+++ b/packages/core/test/core.spec.ts
@@ -1,206 +1,193 @@
-import { testTokenizer as test } from "@tokey/test-kit";
-import { tokenize, TokyOptions } from "@tokey/core";
+import { testTokenizer as test } from '@tokey/test-kit';
+import { tokenize, TokyOptions } from '@tokey/core';
 import {
-  createToken,
-  isWhitespace,
-  isStringDelimiter,
-  getJSCommentStartType,
-  isCommentEnd,
-  getUnclosedComment,
-} from "@tokey/core/dist/helpers";
-import type { Token } from "@tokey/core";
+    createToken,
+    isWhitespace,
+    isStringDelimiter,
+    getJSCommentStartType,
+    isCommentEnd,
+    getUnclosedComment,
+} from '@tokey/core/dist/helpers';
+import type { Token } from '@tokey/core';
 
 const options: TokyOptions<Token> = {
-  isDelimiter(char: string) {
-    return (
-      char === "(" ||
-      char === ")" ||
-      char === "{" ||
-      char === "}" ||
-      char === "[" ||
-      char === "]"
-    );
-  },
-  shouldAddToken() {
-    return true;
-  },
-  isStringDelimiter: isStringDelimiter,
-  isWhitespace: isWhitespace,
-  createToken: createToken,
-  getCommentStartType: getJSCommentStartType,
-  isCommentEnd: isCommentEnd,
-  getUnclosedComment: getUnclosedComment,
+    isDelimiter(char: string) {
+        return (
+            char === '(' ||
+            char === ')' ||
+            char === '{' ||
+            char === '}' ||
+            char === '[' ||
+            char === ']'
+        );
+    },
+    shouldAddToken() {
+        return true;
+    },
+    isStringDelimiter: isStringDelimiter,
+    isWhitespace: isWhitespace,
+    createToken: createToken,
+    getCommentStartType: getJSCommentStartType,
+    isCommentEnd: isCommentEnd,
+    getUnclosedComment: getUnclosedComment,
 };
 
-const defaultTokenizer = <T extends string>(input: T) =>
-  tokenize(input, options);
+const defaultTokenizer = <T extends string>(input: T) => tokenize(input, options);
 
 const ignoreSpaceTokenizer = <T extends string>(input: T) =>
-  tokenize(input, {
-    ...options,
-    shouldAddToken(type) {
-      return type !== "space";
-    },
-  });
+    tokenize(input, {
+        ...options,
+        shouldAddToken(type) {
+            return type !== 'space';
+        },
+    });
 
 const escapeTokenizer = <T extends string>(input: T) =>
-  tokenize(input, {
-    ...options,
-    isDelimiter(char: string, previousChar: string) {
-      return (
-        previousChar !== `\\` &&
-        (char === "(" ||
-          char === ")" ||
-          char === "{" ||
-          char === "}" ||
-          char === "[" ||
-          char === "]")
-      );
-    },
-    isStringDelimiter(char: string, previousChar: string) {
-      return previousChar !== `\\` && isStringDelimiter(char);
-    },
-  });
-
-describe("core - tokenize", () => {
-  it("1", () => {
-    test("1", defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-    ]);
-  });
-
-  it("1'23'", () => {
-    test("1'23'", defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: "'23'", type: "string", start: 1, end: 5 },
-    ]);
-  });
-
-  it("1`23`", () => {
-    test("1`23`", defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: "`23`", type: "string", start: 1, end: 5 },
-    ]);
-  });
-
-  it(`1"23"`, () => {
-    test(`1"23"`, defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: '"23"', type: "string", start: 1, end: 5 },
-    ]);
-  });
-
-  it(`1/*"23"*/`, () => {
-    test(`1/*"23"*/`, defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: '/*"23"*/', type: "multi-comment", start: 1, end: 9 },
-    ]);
-  });
-
-  it(`1/*"23"`, () => {
-    test(`1/*"23"`, defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: '/*"23"', type: "unclosed-comment", start: 1, end: 7 },
-    ]);
-  });
-
-  it(`1//"23"`, () => {
-    test(`1//"23"`, defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: '//"23"', type: "line-comment", start: 1, end: 7 },
-    ]);
-  });
-
-  it(`1//"23"\n4`, () => {
-    test(`1//"23"\n4`, defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: '//"23"\n', type: "line-comment", start: 1, end: 8 },
-      { value: "4", type: "text", start: 8, end: 9 },
-    ]);
-  });
-
-  it(`(1)`, () => {
-    test(`(1)`, defaultTokenizer, [
-      { value: "(", type: "(", start: 0, end: 1 },
-      { value: "1", type: "text", start: 1, end: 2 },
-      { value: ")", type: ")", start: 2, end: 3 },
-    ]);
-  });
-
-  it(`{1}`, () => {
-    test(`{1}`, defaultTokenizer, [
-      { value: "{", type: "{", start: 0, end: 1 },
-      { value: "1", type: "text", start: 1, end: 2 },
-      { value: "}", type: "}", start: 2, end: 3 },
-    ]);
-  });
-
-  it(`[1]`, () => {
-    test(`[1]`, defaultTokenizer, [
-      { value: "[", type: "[", start: 0, end: 1 },
-      { value: "1", type: "text", start: 1, end: 2 },
-      { value: "]", type: "]", start: 2, end: 3 },
-    ]);
-  });
-
-  it(` `, () => {
-    test(` `, defaultTokenizer, [
-      { value: " ", type: "space", start: 0, end: 1 },
-    ]);
-  });
-
-  it(`  `, () => {
-    test(`  `, defaultTokenizer, [
-      { value: "  ", type: "space", start: 0, end: 2 },
-    ]);
-  });
-
-  it(`\t`, () => {
-    test(`\t`, defaultTokenizer, [
-      { value: "\t", type: "space", start: 0, end: 1 },
-    ]);
-  });
-
-  it(`1 2`, () => {
-    test(`1 2`, defaultTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: " ", type: "space", start: 1, end: 2 },
-      { value: "2", type: "text", start: 2, end: 3 },
-    ]);
-  });
-
-  it(`1 2`, () => {
-    test(`1 2`, ignoreSpaceTokenizer, [
-      { value: "1", type: "text", start: 0, end: 1 },
-      { value: "2", type: "text", start: 2, end: 3 },
-    ]);
-  });
-
-  describe(`escape`, () => {
-    it(`should ignore delimiter when previous char is escape string`, () => {
-      test(`tex\\(t`, escapeTokenizer, [
-        { value: "tex\\(t", type: "text", start: 0, end: 6 },
-      ]);
-    });
-    it(`should ignore string starter when previous char is escape string`, () => {
-      test(`tex\\"\\'t`, escapeTokenizer, [
-        { value: `tex\\"\\'t`, type: "text", start: 0, end: 8 },
-      ]);
-      test("tex\\`t", escapeTokenizer, [
-        { value: "tex\\`t", type: "text", start: 0, end: 6 },
-      ]);
-    });
-  });
-  describe(`offset`, () => {
-    it(`should start from a given offset`, () => {
-      test(
-        `1/*"23"*/`,
-        (source: string) => tokenize(source, { ...options, offset: 10 }),
-        [
-          { value: "1", type: "text", start: 10, end: 11 },
-          { value: '/*"23"*/', type: "multi-comment", start: 11, end: 19 },
-        ]
-      );
-    });
-  });
+    tokenize(input, {
+        ...options,
+        isDelimiter(char: string, previousChar: string) {
+            return (
+                previousChar !== `\\` &&
+                (char === '(' ||
+                    char === ')' ||
+                    char === '{' ||
+                    char === '}' ||
+                    char === '[' ||
+                    char === ']')
+            );
+        },
+        isStringDelimiter(char: string, previousChar: string) {
+            return previousChar !== `\\` && isStringDelimiter(char);
+        },
+    });
+
+describe('core - tokenize', () => {
+    it('1', () => {
+        test('1', defaultTokenizer, [{ value: '1', type: 'text', start: 0, end: 1 }]);
+    });
+
+    it("1'23'", () => {
+        test("1'23'", defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: "'23'", type: 'string', start: 1, end: 5 },
+        ]);
+    });
+
+    it('1`23`', () => {
+        test('1`23`', defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '`23`', type: 'string', start: 1, end: 5 },
+        ]);
+    });
+
+    it(`1"23"`, () => {
+        test(`1"23"`, defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '"23"', type: 'string', start: 1, end: 5 },
+        ]);
+    });
+
+    it(`1/*"23"*/`, () => {
+        test(`1/*"23"*/`, defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '/*"23"*/', type: 'multi-comment', start: 1, end: 9 },
+        ]);
+    });
+
+    it(`1/*"23"`, () => {
+        test(`1/*"23"`, defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '/*"23"', type: 'unclosed-comment', start: 1, end: 7 },
+        ]);
+    });
+
+    it(`1//"23"`, () => {
+        test(`1//"23"`, defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '//"23"', type: 'line-comment', start: 1, end: 7 },
+        ]);
+    });
+
+    it(`1//"23"\n4`, () => {
+        test(`1//"23"\n4`, defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '//"23"\n', type: 'line-comment', start: 1, end: 8 },
+            { value: '4', type: 'text', start: 8, end: 9 },
+        ]);
+    });
+
+    it(`(1)`, () => {
+        test(`(1)`, defaultTokenizer, [
+            { value: '(', type: '(', start: 0, end: 1 },
+            { value: '1', type: 'text', start: 1, end: 2 },
+            { value: ')', type: ')', start: 2, end: 3 },
+        ]);
+    });
+
+    it(`{1}`, () => {
+        test(`{1}`, defaultTokenizer, [
+            { value: '{', type: '{', start: 0, end: 1 },
+            { value: '1', type: 'text', start: 1, end: 2 },
+            { value: '}', type: '}', start: 2, end: 3 },
+        ]);
+    });
+
+    it(`[1]`, () => {
+        test(`[1]`, defaultTokenizer, [
+            { value: '[', type: '[', start: 0, end: 1 },
+            { value: '1', type: 'text', start: 1, end: 2 },
+            { value: ']', type: ']', start: 2, end: 3 },
+        ]);
+    });
+
+    it(` `, () => {
+        test(` `, defaultTokenizer, [{ value: ' ', type: 'space', start: 0, end: 1 }]);
+    });
+
+    it(`  `, () => {
+        test(`  `, defaultTokenizer, [{ value: '  ', type: 'space', start: 0, end: 2 }]);
+    });
+
+    it(`\t`, () => {
+        test(`\t`, defaultTokenizer, [{ value: '\t', type: 'space', start: 0, end: 1 }]);
+    });
+
+    it(`1 2`, () => {
+        test(`1 2`, defaultTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: ' ', type: 'space', start: 1, end: 2 },
+            { value: '2', type: 'text', start: 2, end: 3 },
+        ]);
+    });
+
+    it(`1 2`, () => {
+        test(`1 2`, ignoreSpaceTokenizer, [
+            { value: '1', type: 'text', start: 0, end: 1 },
+            { value: '2', type: 'text', start: 2, end: 3 },
+        ]);
+    });
+
+    describe(`escape`, () => {
+        it(`should ignore delimiter when previous char is escape string`, () => {
+            test(`tex\\(t`, escapeTokenizer, [
+                { value: 'tex\\(t', type: 'text', start: 0, end: 6 },
+            ]);
+        });
+        it(`should ignore string starter when previous char is escape string`, () => {
+            test(`tex\\"\\'t`, escapeTokenizer, [
+                { value: `tex\\"\\'t`, type: 'text', start: 0, end: 8 },
+            ]);
+            test('tex\\`t', escapeTokenizer, [
+                { value: 'tex\\`t', type: 'text', start: 0, end: 6 },
+            ]);
+        });
+    });
+    describe(`offset`, () => {
+        it(`should start from a given offset`, () => {
+            test(`1/*"23"*/`, (source: string) => tokenize(source, { ...options, offset: 10 }), [
+                { value: '1', type: 'text', start: 10, end: 11 },
+                { value: '/*"23"*/', type: 'multi-comment', start: 11, end: 19 },
+            ]);
+        });
+    });
 });
diff --git a/packages/core/test/helpers/trim-tokens.spec.ts b/packages/core/test/helpers/trim-tokens.spec.ts
index 2a97c25e..e6eaef22 100644
--- a/packages/core/test/helpers/trim-tokens.spec.ts
+++ b/packages/core/test/helpers/trim-tokens.spec.ts
@@ -1,115 +1,108 @@
-import { testTokenizer as test } from "@tokey/test-kit";
-import { trimTokens } from "@tokey/core/dist/helpers";
-import type { Token } from "@tokey/core";
+import { testTokenizer as test } from '@tokey/test-kit';
+import { trimTokens } from '@tokey/core/dist/helpers';
+import type { Token } from '@tokey/core';
 
-const trimSpace = (tokens: Token[]) =>
-  trimTokens(tokens, (token) => token.type === "space");
+const trimSpace = (tokens: Token[]) => trimTokens(tokens, (token) => token.type === 'space');
 
 function prettyPrint(items: Token[]) {
-  (items as any).toJSON = function () {
-    return items.map(({ type }) => type).join(" ");
-  };
-  return items;
+    (items as any).toJSON = function () {
+        return items.map(({ type }) => type).join(' ');
+    };
+    return items;
 }
 
 describe(`helpers/trim-tokens`, () => {
-  it(`empty`, () => {
-    test([], trimSpace, []);
-  });
-  it(`should remove multiple before & after`, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "text", value: "value" },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-      ]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
-  it(`should remove single before & after`, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "text", value: "value" },
-        { end: 0, start: 0, type: "space", value: " " },
-      ]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
-  it(`should remove single after`, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "text", value: "value" },
-        { end: 0, start: 0, type: "space", value: " " },
-      ]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
-  it(`should remove single before `, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "text", value: "value" },
-      ]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
-  it(`should not trim when there is nothing to trim`, () => {
-    test(
-      prettyPrint([{ end: 0, start: 0, type: "text", value: "value" }]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
-  it(`should trim all when all is "trimmable" (multiple)`, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-      ]),
-      trimSpace,
-      []
-    );
-  });
-  it(`should trim all when all is "trimmable" (single)`, () => {
-    test(
-      prettyPrint([{ end: 0, start: 0, type: "space", value: " " }]),
-      trimSpace,
-      []
-    );
-  });
-  it(`should remove multiple after`, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "text", value: "value" },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-      ]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
-  it(`should remove multiple before`, () => {
-    test(
-      prettyPrint([
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "space", value: " " },
-        { end: 0, start: 0, type: "text", value: "value" },
-      ]),
-      trimSpace,
-      [{ end: 0, start: 0, type: "text", value: "value" }]
-    );
-  });
+    it(`empty`, () => {
+        test([], trimSpace, []);
+    });
+    it(`should remove multiple before & after`, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'text', value: 'value' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+            ]),
+            trimSpace,
+            [{ end: 0, start: 0, type: 'text', value: 'value' }]
+        );
+    });
+    it(`should remove single before & after`, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'text', value: 'value' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+            ]),
+            trimSpace,
+            [{ end: 0, start: 0, type: 'text', value: 'value' }]
+        );
+    });
+    it(`should remove single after`, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'text', value: 'value' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+            ]),
+            trimSpace,
+            [{ end: 0, start: 0, type: 'text', value: 'value' }]
+        );
+    });
+    it(`should remove single before `, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'text', value: 'value' },
+            ]),
+            trimSpace,
+            [{ end: 0, start: 0, type: 'text', value: 'value' }]
+        );
+    });
+    it(`should not trim when there is nothing to trim`, () => {
+        test(prettyPrint([{ end: 0, start: 0, type: 'text', value: 'value' }]), trimSpace, [
+            { end: 0, start: 0, type: 'text', value: 'value' },
+        ]);
+    });
+    it(`should trim all when all is "trimmable" (multiple)`, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+            ]),
+            trimSpace,
+            []
+        );
+    });
+    it(`should trim all when all is "trimmable" (single)`, () => {
+        test(prettyPrint([{ end: 0, start: 0, type: 'space', value: ' ' }]), trimSpace, []);
+    });
+    it(`should remove multiple after`, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'text', value: 'value' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+            ]),
+            trimSpace,
+            [{ end: 0, start: 0, type: 'text', value: 'value' }]
+        );
+    });
+    it(`should remove multiple before`, () => {
+        test(
+            prettyPrint([
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'space', value: ' ' },
+                { end: 0, start: 0, type: 'text', value: 'value' },
+            ]),
+            trimSpace,
+            [{ end: 0, start: 0, type: 'text', value: 'value' }]
+        );
+    });
 });
diff --git a/packages/css-selector-parser/package.json b/packages/css-selector-parser/package.json
index a261d5ae..94cbb9b0 100644
--- a/packages/css-selector-parser/package.json
+++ b/packages/css-selector-parser/package.json
@@ -27,6 +27,5 @@
   "author": "Wix.com",
   "license": "MIT",
   "repository": "https://github.com/wixplosives/tokey/packages/css-selector-parser",
-  "prettier": {},
   "sideEffects": false
 }
diff --git a/packages/css-selector-parser/src/ast-tools/compound.ts b/packages/css-selector-parser/src/ast-tools/compound.ts
index fd27aa0d..2058b355 100644
--- a/packages/css-selector-parser/src/ast-tools/compound.ts
+++ b/packages/css-selector-parser/src/ast-tools/compound.ts
@@ -1,180 +1,169 @@
 import type {
-  SelectorNode,
-  SelectorList,
-  Selector,
-  CompoundSelector,
-  Comment,
-  CommentWithNoSpacing,
-  ImmutableSelector,
-  ImmutableSelectorList,
-  ImmutableSelectorNode,
-} from "../ast-types";
-import { walk } from "./walk";
+    SelectorNode,
+    SelectorList,
+    Selector,
+    CompoundSelector,
+    Comment,
+    CommentWithNoSpacing,
+    ImmutableSelector,
+    ImmutableSelectorList,
+    ImmutableSelectorNode,
+} from '../ast-types';
+import { walk } from './walk';
 
 export interface GroupCompoundOptions {
-  splitPseudoElements?: boolean;
+    splitPseudoElements?: boolean;
 }
 export function groupCompoundSelectors<AST extends Selector>(
-  input: AST,
-  options?: GroupCompoundOptions
+    input: AST,
+    options?: GroupCompoundOptions
 ): Selector;
 export function groupCompoundSelectors<AST extends ImmutableSelector>(
-  input: AST,
-  options?: GroupCompoundOptions
+    input: AST,
+    options?: GroupCompoundOptions
 ): ImmutableSelector;
 export function groupCompoundSelectors<AST extends SelectorList>(
-  input: AST,
-  options?: GroupCompoundOptions
+    input: AST,
+    options?: GroupCompoundOptions
 ): SelectorList;
 export function groupCompoundSelectors<AST extends ImmutableSelectorList>(
-  input: AST,
-  options?: GroupCompoundOptions
+    input: AST,
+    options?: GroupCompoundOptions
 ): ImmutableSelectorList;
 export function groupCompoundSelectors<
-  AST extends
-    | Selector
-    | ImmutableSelector
-    | SelectorList
-    | ImmutableSelectorList
+    AST extends Selector | ImmutableSelector | SelectorList | ImmutableSelectorList
 >(
-  input: AST,
-  options?: GroupCompoundOptions
+    input: AST,
+    options?: GroupCompoundOptions
 ): Selector | ImmutableSelector | SelectorList | ImmutableSelectorList {
-  const context = createCompoundContext(options);
-  walk(input, (node, _index, _nodes, parents) => {
-    if (parents.length === 0 && node.type === `selector`) {
-      // first level: create top level selector
-      context.addSelector(node);
-    } else {
-      // second level: (parents.length === 1)
-      context.handleNode(node);
-      // don't go deeper - shallow group
-      return walk.skipNested;
-    }
-    return;
-  });
-  return `length` in input ? context.output : context.output[0];
+    const context = createCompoundContext(options);
+    walk(input, (node, _index, _nodes, parents) => {
+        if (parents.length === 0 && node.type === `selector`) {
+            // first level: create top level selector
+            context.addSelector(node);
+        } else {
+            // second level: (parents.length === 1)
+            context.handleNode(node);
+            // don't go deeper - shallow group
+            return walk.skipNested;
+        }
+        return;
+    });
+    return `length` in input ? context.output : context.output[0];
 }
 
-type CompoundSelectorPart = CompoundSelector["nodes"][number];
-function createCompoundContext({
-  splitPseudoElements = true,
-}: GroupCompoundOptions = {}) {
-  const output: SelectorList = [];
-  let lastSelector: Selector;
-  let lastCompound: CompoundSelector | undefined;
-  let lastCompoundInitialPart: CompoundSelectorPart | undefined;
-  const handleNode = (node: SelectorNode | ImmutableSelectorNode) => {
-    if (node.type === `pseudo_element` && splitPseudoElements === true) {
-      lastCompound = undefined;
-    }
-    if (node.type === `combinator`) {
-      lastSelector.nodes.push(node);
-      lastCompound = undefined;
-    } else if (node.type === `comment` && !isCommentWithNoSpacing(node)) {
-      // comment that breaks compound
-      lastSelector.nodes.push(node);
-      lastCompound = undefined;
-    } else if (
-      node.type === `type` ||
-      node.type === `universal` ||
-      node.type === `class` ||
-      node.type === `id` ||
-      node.type === `attribute` ||
-      node.type === `nesting` ||
-      node.type === `pseudo_class` ||
-      node.type === `pseudo_element` ||
-      node.type === `invalid` ||
-      node.type === `comment` /*no spacing*/
-    ) {
-      // part of compound
-      if (!lastCompound) {
-        // add new compound selector
-        lastCompoundInitialPart = undefined;
-        lastCompound = {
-          type: `compound_selector`,
-          start: node.start,
-          end: node.end,
-          before: ``,
-          after: ``,
-          nodes: [],
-          invalid: false,
-        };
-        lastSelector.nodes.push(lastCompound);
-      }
-      if (!lastCompound.invalid && node.type !== `comment`) {
-        // validate compound parts after initial
-        if (lastCompoundInitialPart) {
-          lastCompound.invalid =
-            node.type === `universal` || node.type === `type`;
+type CompoundSelectorPart = CompoundSelector['nodes'][number];
+function createCompoundContext({ splitPseudoElements = true }: GroupCompoundOptions = {}) {
+    const output: SelectorList = [];
+    let lastSelector: Selector;
+    let lastCompound: CompoundSelector | undefined;
+    let lastCompoundInitialPart: CompoundSelectorPart | undefined;
+    const handleNode = (node: SelectorNode | ImmutableSelectorNode) => {
+        if (node.type === `pseudo_element` && splitPseudoElements === true) {
+            lastCompound = undefined;
         }
-        lastCompoundInitialPart = node as CompoundSelectorPart;
-      }
-      lastCompound.nodes.push(node as CompoundSelectorPart);
-      lastCompound.end = node.end;
-    } else if (node.type === `selector` || node.type === `compound_selector`) {
-      // spread
-      for (const innerNode of node.nodes) {
-        handleNode(innerNode);
-      }
-    } else {
-      // handle out of context nodes
-      lastSelector.nodes.push(node as SelectorNode);
-      lastCompound = undefined;
-    }
-  };
-  return {
-    addSelector(node: Selector | ImmutableSelector) {
-      lastSelector = {
-        type: `selector`,
-        start: node.start,
-        end: node.end,
-        before: `before` in node ? node.before : ``,
-        after: `after` in node ? node.after : ``,
-        nodes: [],
-      };
-      output.push(lastSelector);
-      lastCompound = undefined;
-    },
-    handleNode,
-    output,
-  };
+        if (node.type === `combinator`) {
+            lastSelector.nodes.push(node);
+            lastCompound = undefined;
+        } else if (node.type === `comment` && !isCommentWithNoSpacing(node)) {
+            // comment that breaks compound
+            lastSelector.nodes.push(node);
+            lastCompound = undefined;
+        } else if (
+            node.type === `type` ||
+            node.type === `universal` ||
+            node.type === `class` ||
+            node.type === `id` ||
+            node.type === `attribute` ||
+            node.type === `nesting` ||
+            node.type === `pseudo_class` ||
+            node.type === `pseudo_element` ||
+            node.type === `invalid` ||
+            node.type === `comment` /*no spacing*/
+        ) {
+            // part of compound
+            if (!lastCompound) {
+                // add new compound selector
+                lastCompoundInitialPart = undefined;
+                lastCompound = {
+                    type: `compound_selector`,
+                    start: node.start,
+                    end: node.end,
+                    before: ``,
+                    after: ``,
+                    nodes: [],
+                    invalid: false,
+                };
+                lastSelector.nodes.push(lastCompound);
+            }
+            if (!lastCompound.invalid && node.type !== `comment`) {
+                // validate compound parts after initial
+                if (lastCompoundInitialPart) {
+                    lastCompound.invalid = node.type === `universal` || node.type === `type`;
+                }
+                lastCompoundInitialPart = node as CompoundSelectorPart;
+            }
+            lastCompound.nodes.push(node as CompoundSelectorPart);
+            lastCompound.end = node.end;
+        } else if (node.type === `selector` || node.type === `compound_selector`) {
+            // spread
+            for (const innerNode of node.nodes) {
+                handleNode(innerNode);
+            }
+        } else {
+            // handle out of context nodes
+            lastSelector.nodes.push(node as SelectorNode);
+            lastCompound = undefined;
+        }
+    };
+    return {
+        addSelector(node: Selector | ImmutableSelector) {
+            lastSelector = {
+                type: `selector`,
+                start: node.start,
+                end: node.end,
+                before: `before` in node ? node.before : ``,
+                after: `after` in node ? node.after : ``,
+                nodes: [],
+            };
+            output.push(lastSelector);
+            lastCompound = undefined;
+        },
+        handleNode,
+        output,
+    };
 }
 
-export function splitCompoundSelectors<AST extends Selector>(
-  input: AST
-): Selector;
+export function splitCompoundSelectors<AST extends Selector>(input: AST): Selector;
 export function splitCompoundSelectors<AST extends ImmutableSelector>(
-  input: AST
+    input: AST
 ): ImmutableSelector;
-export function splitCompoundSelectors<AST extends SelectorList>(
-  input: AST
-): SelectorList;
+export function splitCompoundSelectors<AST extends SelectorList>(input: AST): SelectorList;
 export function splitCompoundSelectors<AST extends ImmutableSelectorList>(
-  input: AST
+    input: AST
 ): ImmutableSelectorList;
 export function splitCompoundSelectors<AST extends SelectorList | Selector>(
-  input: AST
+    input: AST
 ): SelectorList | Selector | ImmutableSelector | ImmutableSelectorList {
-  const inputSelectors: SelectorList = Array.isArray(input) ? input : [input];
-  const output: SelectorList = [];
-  for (const inputSelector of inputSelectors) {
-    const outputSelector: Selector = {
-      ...inputSelector,
-      nodes: [],
-    };
-    for (const node of inputSelector.nodes) {
-      if (node.type === `compound_selector`) {
-        outputSelector.nodes.push(...node.nodes);
-      } else {
-        outputSelector.nodes.push(node);
-      }
+    const inputSelectors: SelectorList = Array.isArray(input) ? input : [input];
+    const output: SelectorList = [];
+    for (const inputSelector of inputSelectors) {
+        const outputSelector: Selector = {
+            ...inputSelector,
+            nodes: [],
+        };
+        for (const node of inputSelector.nodes) {
+            if (node.type === `compound_selector`) {
+                outputSelector.nodes.push(...node.nodes);
+            } else {
+                outputSelector.nodes.push(node);
+            }
+        }
+        output.push(outputSelector);
     }
-    output.push(outputSelector);
-  }
-  return `length` in input ? output : output[0];
+    return `length` in input ? output : output[0];
 }
 
 function isCommentWithNoSpacing(node: Comment): node is CommentWithNoSpacing {
-  return node.type === `comment` && node.before === `` && node.after === ``;
+    return node.type === `comment` && node.before === `` && node.after === ``;
 }
diff --git a/packages/css-selector-parser/src/ast-tools/specificity.ts b/packages/css-selector-parser/src/ast-tools/specificity.ts
index 6975e5ed..96a307fc 100644
--- a/packages/css-selector-parser/src/ast-tools/specificity.ts
+++ b/packages/css-selector-parser/src/ast-tools/specificity.ts
@@ -1,84 +1,72 @@
-import type {
-  ImmutableSelectorNode,
-  ImmutablePseudoClass,
-  SelectorNode,
-} from "../ast-types";
-import { walk } from "./walk";
+import type { ImmutableSelectorNode, ImmutablePseudoClass, SelectorNode } from '../ast-types';
+import { walk } from './walk';
 
 export type Specificity = [
-  inlineLevel: number,
-  idLevel: number,
-  classOrAttributeLevel: number,
-  typeOrElementLevel: number
+    inlineLevel: number,
+    idLevel: number,
+    classOrAttributeLevel: number,
+    typeOrElementLevel: number
 ];
 export function calcSpecificity(ast: ImmutableSelectorNode): Specificity {
-  const result: Specificity = [0, 0, 0, 0];
-  // ToDo: remove casting once immutable walk is supported
-  walk(ast as SelectorNode, (node) => {
-    switch (node.type) {
-      case `type`:
-      case `pseudo_element`:
-        result[3]++;
-        break;
-      case `class`:
-      case `attribute`:
-        result[2]++;
-        break;
-      case `pseudo_class`:
-        if (customPseudoClass[node.value]) {
-          customPseudoClass[node.value](node, result);
-          return walk.skipNested;
+    const result: Specificity = [0, 0, 0, 0];
+    // ToDo: remove casting once immutable walk is supported
+    walk(ast as SelectorNode, (node) => {
+        switch (node.type) {
+            case `type`:
+            case `pseudo_element`:
+                result[3]++;
+                break;
+            case `class`:
+            case `attribute`:
+                result[2]++;
+                break;
+            case `pseudo_class`:
+                if (customPseudoClass[node.value]) {
+                    customPseudoClass[node.value](node, result);
+                    return walk.skipNested;
+                }
+                result[2]++;
+                break;
+            case `id`:
+                result[1]++;
+                break;
         }
-        result[2]++;
-        break;
-      case `id`:
-        result[1]++;
-        break;
-    }
-    return node.type !== `selector` && node.type !== `compound_selector`
-      ? walk.skipNested
-      : undefined;
-  });
-  return result;
+        return node.type !== `selector` && node.type !== `compound_selector`
+            ? walk.skipNested
+            : undefined;
+    });
+    return result;
 }
 
-const customPseudoClass: Record<
-  string,
-  (node: ImmutablePseudoClass, result: Specificity) => void
-> = {
-  not: mostSpecificInnerSelector,
-  is: mostSpecificInnerSelector,
-  has: mostSpecificInnerSelector,
-  where: () => {
-    /* no specificity*/
-  },
-  "nth-child": pseudoClassPlusMostSpecificInnerSelector,
-  "nth-last-child": pseudoClassPlusMostSpecificInnerSelector,
-  "nth-of-type": pseudoClassPlusMostSpecificInnerSelector,
-  "nth-last-of-type": pseudoClassPlusMostSpecificInnerSelector,
-};
+const customPseudoClass: Record<string, (node: ImmutablePseudoClass, result: Specificity) => void> =
+    {
+        not: mostSpecificInnerSelector,
+        is: mostSpecificInnerSelector,
+        has: mostSpecificInnerSelector,
+        where: () => {
+            /* no specificity*/
+        },
+        'nth-child': pseudoClassPlusMostSpecificInnerSelector,
+        'nth-last-child': pseudoClassPlusMostSpecificInnerSelector,
+        'nth-of-type': pseudoClassPlusMostSpecificInnerSelector,
+        'nth-last-of-type': pseudoClassPlusMostSpecificInnerSelector,
+    };
 
-function pseudoClassPlusMostSpecificInnerSelector(
-  node: ImmutablePseudoClass,
-  result: Specificity
-) {
-  result[2]++;
-  mostSpecificInnerSelector(node, result);
+function pseudoClassPlusMostSpecificInnerSelector(node: ImmutablePseudoClass, result: Specificity) {
+    result[2]++;
+    mostSpecificInnerSelector(node, result);
 }
-function mostSpecificInnerSelector(
-  node: ImmutablePseudoClass,
-  result: Specificity
-) {
-  if (node.nodes?.length) {
-    let highest: Specificity = [0, 0, 0, 0];
-    for (const selector of node.nodes) {
-      const currentSpecificity = calcSpecificity(selector);
-      if (!highest || compareSpecificity(currentSpecificity, highest) === 1) {
-        highest = currentSpecificity;
-      }
+function mostSpecificInnerSelector(node: ImmutablePseudoClass, result: Specificity) {
+    if (node.nodes?.length) {
+        let highest: Specificity = [0, 0, 0, 0];
+        for (const selector of node.nodes) {
+            const currentSpecificity = calcSpecificity(selector);
+            if (!highest || compareSpecificity(currentSpecificity, highest) === 1) {
+                highest = currentSpecificity;
+            }
+        }
+        addSpecificity(result, highest);
     }
-    addSpecificity(result, highest);
-  }
 }
 /**
  * compare 2 specificities
@@ -87,15 +75,15 @@ function mostSpecificInnerSelector(
  * @returns 0 if equal, 1 when a is more specific, -1 when b is more specific
  */
 export function compareSpecificity(a: Specificity, b: Specificity): -1 | 0 | 1 {
-  for (let i = 0; i < 4; ++i) {
-    const specificityDiff = a[i] - b[i];
-    if (specificityDiff > 0) {
-      return 1;
-    } else if (specificityDiff < 0) {
-      return -1;
+    for (let i = 0; i < 4; ++i) {
+        const specificityDiff = a[i] - b[i];
+        if (specificityDiff > 0) {
+            return 1;
+        } else if (specificityDiff < 0) {
+            return -1;
+        }
     }
-  }
-  return 0;
+    return 0;
 }
 
 /**
@@ -104,7 +92,7 @@ export function compareSpecificity(a: Specificity, b: Specificity): -1 | 0 | 1 {
  * @param from specificity amount to add
  */
 function addSpecificity(to: Specificity, from: Specificity) {
-  for (let i = 0; i < 4; ++i) {
-    to[i] += from[i];
-  }
+    for (let i = 0; i < 4; ++i) {
+        to[i] += from[i];
+    }
 }
diff --git a/packages/css-selector-parser/src/ast-tools/walk.ts b/packages/css-selector-parser/src/ast-tools/walk.ts
index 1dcb6be1..cb171dbf 100644
--- a/packages/css-selector-parser/src/ast-tools/walk.ts
+++ b/packages/css-selector-parser/src/ast-tools/walk.ts
@@ -1,20 +1,20 @@
 import type {
-  SelectorNode,
-  SelectorList,
-  FunctionalSelector,
-  ImmutableSelectorNode,
-  ImmutableSelectorList,
-} from "../ast-types";
+    SelectorNode,
+    SelectorList,
+    FunctionalSelector,
+    ImmutableSelectorNode,
+    ImmutableSelectorList,
+} from '../ast-types';
 
 export interface WalkOptions {
-  visitList?: SelectorNode["type"][];
-  ignoreList?: SelectorNode["type"][];
+    visitList?: SelectorNode['type'][];
+    ignoreList?: SelectorNode['type'][];
 }
 export type WalkVisitor<AST extends SelectorNode | ImmutableSelectorNode> = (
-  node: AST,
-  index: number,
-  nodes: AST[],
-  parents: AST[]
+    node: AST,
+    index: number,
+    nodes: AST[],
+    parents: AST[]
 ) => number | undefined | void;
 const nestEnd = Symbol(`nest-end`);
 
@@ -30,132 +30,123 @@ const nestEnd = Symbol(`nest-end`);
  * @param options provide visitList/ignoreList for traversal
  */
 export function walk<AST extends SelectorNode | SelectorList>(
-  topNode: AST,
-  visit: WalkVisitor<SelectorNode>,
-  options?: WalkOptions
+    topNode: AST,
+    visit: WalkVisitor<SelectorNode>,
+    options?: WalkOptions
 ): void;
 export function walk<AST extends ImmutableSelectorNode | ImmutableSelectorList>(
-  topNode: AST,
-  visit: WalkVisitor<ImmutableSelectorNode>,
-  options?: WalkOptions
+    topNode: AST,
+    visit: WalkVisitor<ImmutableSelectorNode>,
+    options?: WalkOptions
 ): void;
 export function walk<
-  AST extends
-    | SelectorNode
-    | SelectorList
-    | ImmutableSelectorNode
-    | ImmutableSelectorList
+    AST extends SelectorNode | SelectorList | ImmutableSelectorNode | ImmutableSelectorList
 >(
-  topNode: AST,
-  visit: WalkVisitor<SelectorNode> | WalkVisitor<ImmutableSelectorNode>,
-  options: WalkOptions = {}
+    topNode: AST,
+    visit: WalkVisitor<SelectorNode> | WalkVisitor<ImmutableSelectorNode>,
+    options: WalkOptions = {}
 ): void {
-  // set initial top nodes to traverse
-  const toVisit: Array<SelectorNode | ImmutableSelectorNode | typeof nestEnd> =
-    Array.isArray(topNode) ? [...topNode] : [topNode];
-  // initiate context
-  const context = createWalkContext(topNode);
-  // iterate nodes
-  while (toVisit.length) {
-    const current = toVisit.shift()!;
-    if (current === nestEnd) {
-      // end of nested level
-      context.up();
-      continue;
-    } else if (
-      (!options.ignoreList || !options.ignoreList.includes(current.type)) &&
-      (!options.visitList || options.visitList.includes(current.type))
-    ) {
-      // visit node
-      let skipAmount =
-        (visit(
-          current as SelectorNode,
-          context.indexInSelector,
-          context.nodesInSelector as SelectorNode[],
-          context.parents as SelectorNode[]
-        ) as number) ?? -1;
-      // point to next selector node
-      context.next();
-
-      // check if to skip nested or current/following selectors
-      if (skipAmount === Infinity) {
-        // stop all: fast bail out
-        return;
-      } else if (skipAmount >= 0) {
-        // skip levels
-        while (skipAmount > 0 && toVisit.length) {
-          const next = toVisit.shift()!;
-          if (next === nestEnd) {
-            skipAmount--;
+    // set initial top nodes to traverse
+    const toVisit: Array<SelectorNode | ImmutableSelectorNode | typeof nestEnd> = Array.isArray(
+        topNode
+    )
+        ? [...topNode]
+        : [topNode];
+    // initiate context
+    const context = createWalkContext(topNode);
+    // iterate nodes
+    while (toVisit.length) {
+        const current = toVisit.shift()!;
+        if (current === nestEnd) {
+            // end of nested level
             context.up();
-          }
+            continue;
+        } else if (
+            (!options.ignoreList || !options.ignoreList.includes(current.type)) &&
+            (!options.visitList || options.visitList.includes(current.type))
+        ) {
+            // visit node
+            let skipAmount =
+                (visit(
+                    current as SelectorNode,
+                    context.indexInSelector,
+                    context.nodesInSelector as SelectorNode[],
+                    context.parents as SelectorNode[]
+                ) as number) ?? -1;
+            // point to next selector node
+            context.next();
+
+            // check if to skip nested or current/following selectors
+            if (skipAmount === Infinity) {
+                // stop all: fast bail out
+                return;
+            } else if (skipAmount >= 0) {
+                // skip levels
+                while (skipAmount > 0 && toVisit.length) {
+                    const next = toVisit.shift()!;
+                    if (next === nestEnd) {
+                        skipAmount--;
+                        context.up();
+                    }
+                }
+                continue;
+            }
+        } else {
+            // point to next selector node
+            context.next();
+        }
+        // add nested nodes
+        if (isWithNodes(current)) {
+            context.insertNested(current);
+            toVisit.unshift(...current.nodes, nestEnd);
         }
-        continue;
-      }
-    } else {
-      // point to next selector node
-      context.next();
-    }
-    // add nested nodes
-    if (isWithNodes(current)) {
-      context.insertNested(current);
-      toVisit.unshift(...current.nodes, nestEnd);
     }
-  }
 }
 
 interface WalkContext<AST> {
-  parents: AST[];
-  indexInSelector: number;
-  nodesInSelector: ReadonlyArray<AST>;
-  up(): void;
-  next(): void;
-  insertNested(node: ContainerWithNodes): void;
+    parents: AST[];
+    indexInSelector: number;
+    nodesInSelector: ReadonlyArray<AST>;
+    up(): void;
+    next(): void;
+    insertNested(node: ContainerWithNodes): void;
 }
+function createWalkContext(topNode: SelectorNode | SelectorList): WalkContext<SelectorNode>;
 function createWalkContext(
-  topNode: SelectorNode | SelectorList
-): WalkContext<SelectorNode>;
-function createWalkContext(
-  topNode: ImmutableSelectorNode | ImmutableSelectorList
+    topNode: ImmutableSelectorNode | ImmutableSelectorList
 ): WalkContext<ImmutableSelectorNode>;
 function createWalkContext(
-  topNode:
-    | SelectorNode
-    | SelectorList
-    | ImmutableSelectorNode
-    | ImmutableSelectorList
+    topNode: SelectorNode | SelectorList | ImmutableSelectorNode | ImmutableSelectorList
 ) {
-  const prevIndex: number[] = [];
-  const prevParents: ImmutableSelectorNode[][] = [[]];
-  const context: WalkContext<SelectorNode | ImmutableSelectorNode> = {
-    parents: [],
-    indexInSelector: 0,
-    nodesInSelector: Array.isArray(topNode)
-      ? topNode
-      : `nodes` in topNode
-      ? topNode.nodes!
-      : ([topNode] as SelectorNode[]),
-    up() {
-      context.parents.pop();
-      context.indexInSelector = prevIndex.shift()!;
-      const currentParents = context.parents;
-      const currentParent = currentParents[currentParents.length - 1];
-      context.nodesInSelector = currentParent
-        ? (currentParent as any).nodes
-        : topNode;
-    },
-    next() {
-      context.indexInSelector++;
-    },
-    insertNested(node) {
-      context.parents = [...context.parents, node];
-      prevParents.push(context.parents);
-      prevIndex.unshift(context.indexInSelector);
-      context.indexInSelector = 0;
-      context.nodesInSelector = node.nodes;
-    },
-  };
-  return context;
+    const prevIndex: number[] = [];
+    const prevParents: ImmutableSelectorNode[][] = [[]];
+    const context: WalkContext<SelectorNode | ImmutableSelectorNode> = {
+        parents: [],
+        indexInSelector: 0,
+        nodesInSelector: Array.isArray(topNode)
+            ? topNode
+            : `nodes` in topNode
+            ? topNode.nodes!
+            : ([topNode] as SelectorNode[]),
+        up() {
+            context.parents.pop();
+            context.indexInSelector = prevIndex.shift()!;
+            const currentParents = context.parents;
+            const currentParent = currentParents[currentParents.length - 1];
+            context.nodesInSelector = currentParent ? (currentParent as any).nodes : topNode;
+        },
+        next() {
+            context.indexInSelector++;
+        },
+        insertNested(node) {
+            context.parents = [...context.parents, node];
+            prevParents.push(context.parents);
+            prevIndex.unshift(context.indexInSelector);
+            context.indexInSelector = 0;
+            context.nodesInSelector = node.nodes;
+        },
+    };
+    return context;
 }
 
 walk.skipNested = 0 as const;
@@ -164,5 +155,5 @@ walk.stopAll = Infinity;
 
 type ContainerWithNodes = FunctionalSelector & { nodes: SelectorNode[] };
 function isWithNodes(node: any): node is ContainerWithNodes {
-  return node && `nodes` in node;
+    return node && `nodes` in node;
 }
diff --git a/packages/css-selector-parser/src/ast-types.ts b/packages/css-selector-parser/src/ast-types.ts
index ebfe652c..e32b2e08 100644
--- a/packages/css-selector-parser/src/ast-types.ts
+++ b/packages/css-selector-parser/src/ast-types.ts
@@ -1,143 +1,136 @@
-import type { Immutable } from "./types";
-import type { Token } from "@tokey/core";
+import type { Immutable } from './types';
+import type { Token } from '@tokey/core';
 
-export interface Selector extends Omit<Token<"selector">, "value"> {
-  nodes: SelectorNodes;
-  before: string;
-  after: string;
+export interface Selector extends Omit<Token<'selector'>, 'value'> {
+    nodes: SelectorNodes;
+    before: string;
+    after: string;
 }
 
 export type NthSelectorList = [Nth, ...SelectorList];
 
 // ToDo: try type NthSelectorList only for the specific set of types
-export interface PseudoClass extends Token<"pseudo_class"> {
-  nodes?: SelectorList | NthSelectorList;
-  colonComments: Comment[];
+export interface PseudoClass extends Token<'pseudo_class'> {
+    nodes?: SelectorList | NthSelectorList;
+    colonComments: Comment[];
 }
 
-export interface PseudoElement extends Token<"pseudo_element"> {
-  nodes?: SelectorList;
-  colonComments: { first: Comment[]; second: Comment[] };
+export interface PseudoElement extends Token<'pseudo_element'> {
+    nodes?: SelectorList;
+    colonComments: { first: Comment[]; second: Comment[] };
 }
 
-export interface Class extends Token<"class"> {
-  nodes?: SelectorList;
-  dotComments: SelectorNodes;
+export interface Class extends Token<'class'> {
+    nodes?: SelectorList;
+    dotComments: SelectorNodes;
 }
 
-export interface Id extends Token<"id"> {
-  nodes?: SelectorList;
+export interface Id extends Token<'id'> {
+    nodes?: SelectorList;
 }
 
-export interface Attribute extends Token<"attribute"> {
-  // left: string;
-  // right: string;
-  // op: "" | "=" | "~=" | "|=" | "^=" | "$=" | "*=";
-  // quotes: "'" | '"' | "";
-  nodes?: SelectorList;
+export interface Attribute extends Token<'attribute'> {
+    // left: string;
+    // right: string;
+    // op: "" | "=" | "~=" | "|=" | "^=" | "$=" | "*=";
+    // quotes: "'" | '"' | "";
+    nodes?: SelectorList;
 }
 
 export interface Namespace {
-  value: string;
-  beforeComments: Comment[];
-  afterComments: Comment[];
-  invalid?: "namespace" | "target" | "namespace,target" | "";
+    value: string;
+    beforeComments: Comment[];
+    afterComments: Comment[];
+    invalid?: 'namespace' | 'target' | 'namespace,target' | '';
 }
 
-export interface Type extends Token<"type"> {
-  namespace?: Namespace;
-  nodes?: SelectorList;
+export interface Type extends Token<'type'> {
+    namespace?: Namespace;
+    nodes?: SelectorList;
 }
 
-export interface Universal extends Token<"universal"> {
-  namespace?: Namespace;
-  nodes?: SelectorList;
+export interface Universal extends Token<'universal'> {
+    namespace?: Namespace;
+    nodes?: SelectorList;
 }
 
-export interface Combinator extends Token<"combinator"> {
-  combinator: "space" | "+" | "~" | ">";
-  before: string;
-  after: string;
-  invalid: boolean;
+export interface Combinator extends Token<'combinator'> {
+    combinator: 'space' | '+' | '~' | '>';
+    before: string;
+    after: string;
+    invalid: boolean;
 }
 
-export interface Nesting extends Token<"nesting"> {
-  value: "&";
-  nodes?: SelectorList;
+export interface Nesting extends Token<'nesting'> {
+    value: '&';
+    nodes?: SelectorList;
 }
 
-export type Invalid = Token<"invalid">;
-export interface Comment extends Token<"comment"> {
-  before: string;
-  after: string;
+export type Invalid = Token<'invalid'>;
+export interface Comment extends Token<'comment'> {
+    before: string;
+    after: string;
 }
-export type CommentWithNoSpacing = Comment & { before: ""; after: "" };
+export type CommentWithNoSpacing = Comment & { before: ''; after: '' };
 
 export interface NthBase<PART extends string> extends Token<PART> {
-  before: string;
-  after: string;
-  invalid?: boolean;
+    before: string;
+    after: string;
+    invalid?: boolean;
 }
-export type NthStep = NthBase<"nth_step">;
-export type NthOffset = NthBase<"nth_offset">;
-export type NthDash = NthBase<"nth_dash">;
-export type NthOf = NthBase<"nth_of">;
+export type NthStep = NthBase<'nth_step'>;
+export type NthOffset = NthBase<'nth_offset'>;
+export type NthDash = NthBase<'nth_dash'>;
+export type NthOf = NthBase<'nth_of'>;
 export type NthNode = NthStep | NthOffset | NthDash | NthOf | Comment;
-export interface Nth extends Omit<Token<"nth">, "value"> {
-  nodes: Array<NthNode>;
-  before: string;
-  after: string;
-  // invalid?: boolean;
+export interface Nth extends Omit<Token<'nth'>, 'value'> {
+    nodes: Array<NthNode>;
+    before: string;
+    after: string;
+    // invalid?: boolean;
 }
 
 export type NamespacedNode = Type | Universal;
 
-export type SimpleSelector =
-  | Type
-  | Universal
-  | Attribute
-  | Class
-  | Id
-  | PseudoClass;
-
-export interface CompoundSelector
-  extends Omit<Token<"compound_selector">, "value"> {
-  nodes: Array<
-    | SimpleSelector
-    // non standard
-    | Nesting
-    | CommentWithNoSpacing
-    | Invalid
-    | PseudoElement
-    | CompoundSelector
-    | Selector
-  >;
-  before: string;
-  after: string;
-  invalid: boolean;
+export type SimpleSelector = Type | Universal | Attribute | Class | Id | PseudoClass;
+
+export interface CompoundSelector extends Omit<Token<'compound_selector'>, 'value'> {
+    nodes: Array<
+        | SimpleSelector
+        // non standard
+        | Nesting
+        | CommentWithNoSpacing
+        | Invalid
+        | PseudoElement
+        | CompoundSelector
+        | Selector
+    >;
+    before: string;
+    after: string;
+    invalid: boolean;
 }
 
 export type FunctionalSelector =
-  | NamespacedNode
-  | Attribute
-  | Id
-  | Class
-  | PseudoClass
-  | PseudoElement
-  | Nesting;
+    | NamespacedNode
+    | Attribute
+    | Id
+    | Class
+    | PseudoClass
+    | PseudoElement
+    | Nesting;
 
 export type SelectorNode =
-  | FunctionalSelector
-  | Selector
-  | CompoundSelector
-  | Combinator
-  | Comment
-  | Invalid
-  | Nth
-  | NthStep
-  | NthDash
-  | NthOffset
-  | NthOf;
+    | FunctionalSelector
+    | Selector
+    | CompoundSelector
+    | Combinator
+    | Comment
+    | Invalid
+    | Nth
+    | NthStep
+    | NthDash
+    | NthOffset
+    | NthOf;
 export type SelectorNodes = SelectorNode[];
 export type SelectorList = Selector[];
 
diff --git a/packages/css-selector-parser/src/helpers.ts b/packages/css-selector-parser/src/helpers.ts
index d68bf675..37b34eef 100644
--- a/packages/css-selector-parser/src/helpers.ts
+++ b/packages/css-selector-parser/src/helpers.ts
@@ -1,146 +1,132 @@
-import type { CSSSelectorToken } from "./tokenizer";
+import type { CSSSelectorToken } from './tokenizer';
 import type {
-  Combinator,
-  Comment,
-  Selector,
-  Nth,
-  NamespacedNode,
-  SelectorList,
-  SelectorNode,
-} from "./ast-types";
-import { Token, last } from "@tokey/core";
+    Combinator,
+    Comment,
+    Selector,
+    Nth,
+    NamespacedNode,
+    SelectorList,
+    SelectorNode,
+} from './ast-types';
+import { Token, last } from '@tokey/core';
 
 // create ast nodes
 
 export function createEmptySelector(): Selector {
-  return {
-    type: "selector",
-    start: -1,
-    end: -1,
-    before: "",
-    after: "",
-    nodes: [],
-  };
+    return {
+        type: 'selector',
+        start: -1,
+        end: -1,
+        before: '',
+        after: '',
+        nodes: [],
+    };
 }
 
 export function createEmptyNth(): Nth {
-  return {
-    type: "nth",
-    start: -1,
-    end: -1,
-    before: "",
-    after: "",
-    nodes: [],
-  };
+    return {
+        type: 'nth',
+        start: -1,
+        end: -1,
+        before: '',
+        after: '',
+        nodes: [],
+    };
 }
 
 export function createCombinatorAst({
-  value,
-  type,
-  start,
-  end,
-}: CSSSelectorToken & Token<"space" | "+" | ">" | "~">): Combinator {
-  return {
-    type: `combinator`,
-    combinator: type,
-    value: type === `space` ? ` ` : value,
+    value,
+    type,
     start,
     end,
-    before: ``,
-    after: type === `space` ? value.slice(1) : ``,
-    invalid: false,
-  };
+}: CSSSelectorToken & Token<'space' | '+' | '>' | '~'>): Combinator {
+    return {
+        type: `combinator`,
+        combinator: type,
+        value: type === `space` ? ` ` : value,
+        start,
+        end,
+        before: ``,
+        after: type === `space` ? value.slice(1) : ``,
+        invalid: false,
+    };
 }
 
-export function createCommentAst({
-  value,
-  start,
-  end,
-}: CSSSelectorToken): Comment {
-  return {
-    type: `comment`,
-    value,
-    start,
-    end,
-    before: ``,
-    after: ``,
-  };
+export function createCommentAst({ value, start, end }: CSSSelectorToken): Comment {
+    return {
+        type: `comment`,
+        value,
+        start,
+        end,
+        before: ``,
+        after: ``,
+    };
 }
 
 // type guards
 
 export function isCombinatorToken(
-  token: CSSSelectorToken
-): token is Token<"space" | "+" | ">" | "~"> {
-  return (
-    token.type === "space" ||
-    token.type === "+" ||
-    token.type === ">" ||
-    token.type === "~"
-  );
+    token: CSSSelectorToken
+): token is Token<'space' | '+' | '>' | '~'> {
+    return token.type === 'space' || token.type === '+' || token.type === '>' || token.type === '~';
 }
 
-export function isNamespacedToken(
-  token: CSSSelectorToken
-): token is Token<"text" | "*"> {
-  return token.type === `*` || token.type === `text`;
+export function isNamespacedToken(token: CSSSelectorToken): token is Token<'text' | '*'> {
+    return token.type === `*` || token.type === `text`;
 }
 export function isNamespacedAst(token: SelectorNode): token is NamespacedNode {
-  return token.type === `universal` || token.type === `type`;
+    return token.type === `universal` || token.type === `type`;
 }
 
 // utils
 
-export function ensureSelector(
-  selectors: SelectorList,
-  startToken: CSSSelectorToken
-) {
-  let lastSelector = last(selectors);
-  if (!lastSelector) {
-    lastSelector = createEmptySelector();
-    lastSelector.start = startToken.start;
-    selectors.push(lastSelector);
-  }
-  return lastSelector;
+export function ensureSelector(selectors: SelectorList, startToken: CSSSelectorToken) {
+    let lastSelector = last(selectors);
+    if (!lastSelector) {
+        lastSelector = createEmptySelector();
+        lastSelector.start = startToken.start;
+        selectors.push(lastSelector);
+    }
+    return lastSelector;
 }
 
 export function trimCombinators(selector: Selector) {
-  // costly way to turn combinators to before and after.
-  // this can be inlined in the handle token process
-  const nodes = selector.nodes;
-  const firstNode = nodes[0];
-  const lastNode = last(nodes);
-  // remove first space combinator and add to selector before
-  // (going between comment is not required for the start because they are taken care
-  // of during parsing)
-  if (firstNode?.type === "combinator" && firstNode.combinator === "space") {
-    selector.nodes.shift();
-    selector.before += firstNode.before + firstNode.value + firstNode.after;
-  }
-  // remove any edge space combinators (last and between comments)
-  if (lastNode && lastNode !== firstNode) {
-    let index = nodes.length - 1;
-    let current = lastNode;
-    let lastComment: Comment | undefined;
-    while (
-      current.type === `comment` ||
-      (current.type === `combinator` && current.combinator === `space`)
-    ) {
-      if (current.type === `combinator`) {
-        if (!lastComment) {
-          // attach space to end of selector
-          selector.nodes.pop();
-          selector.after += current.before + current.value + current.after;
-        } else {
-          // attach space to start of comment
-          selector.nodes.splice(index, 1);
-          lastComment.before += current.before + current.value + current.after;
-          lastComment.start = current.start;
+    // costly way to turn combinators to before and after.
+    // this can be inlined in the handle token process
+    const nodes = selector.nodes;
+    const firstNode = nodes[0];
+    const lastNode = last(nodes);
+    // remove first space combinator and add to selector before
+    // (going between comment is not required for the start because they are taken care
+    // of during parsing)
+    if (firstNode?.type === 'combinator' && firstNode.combinator === 'space') {
+        selector.nodes.shift();
+        selector.before += firstNode.before + firstNode.value + firstNode.after;
+    }
+    // remove any edge space combinators (last and between comments)
+    if (lastNode && lastNode !== firstNode) {
+        let index = nodes.length - 1;
+        let current = lastNode;
+        let lastComment: Comment | undefined;
+        while (
+            current.type === `comment` ||
+            (current.type === `combinator` && current.combinator === `space`)
+        ) {
+            if (current.type === `combinator`) {
+                if (!lastComment) {
+                    // attach space to end of selector
+                    selector.nodes.pop();
+                    selector.after += current.before + current.value + current.after;
+                } else {
+                    // attach space to start of comment
+                    selector.nodes.splice(index, 1);
+                    lastComment.before += current.before + current.value + current.after;
+                    lastComment.start = current.start;
+                }
+            } else {
+                lastComment = current;
+            }
+            current = nodes[--index];
         }
-      } else {
-        lastComment = current;
-      }
-      current = nodes[--index];
     }
-  }
 }
diff --git a/packages/css-selector-parser/src/index.ts b/packages/css-selector-parser/src/index.ts
index 885ac817..4aa23f52 100644
--- a/packages/css-selector-parser/src/index.ts
+++ b/packages/css-selector-parser/src/index.ts
@@ -1,12 +1,9 @@
-export { parseCssSelector } from "./selector-parser";
-export type { ParseConfig } from "./selector-parser";
-export * from "./ast-types";
-export { stringifySelectorAst } from "./stringify";
-export { walk } from "./ast-tools/walk";
-export type { WalkOptions } from "./ast-tools/walk";
-export {
-  groupCompoundSelectors,
-  splitCompoundSelectors,
-} from "./ast-tools/compound";
-export { calcSpecificity, compareSpecificity } from "./ast-tools/specificity";
-export type { Specificity } from "./ast-tools/specificity";
+export { parseCssSelector } from './selector-parser';
+export type { ParseConfig } from './selector-parser';
+export * from './ast-types';
+export { stringifySelectorAst } from './stringify';
+export { walk } from './ast-tools/walk';
+export type { WalkOptions } from './ast-tools/walk';
+export { groupCompoundSelectors, splitCompoundSelectors } from './ast-tools/compound';
+export { calcSpecificity, compareSpecificity } from './ast-tools/specificity';
+export type { Specificity } from './ast-tools/specificity';
diff --git a/packages/css-selector-parser/src/nth-parser.ts b/packages/css-selector-parser/src/nth-parser.ts
index 37b03847..c2dc844a 100644
--- a/packages/css-selector-parser/src/nth-parser.ts
+++ b/packages/css-selector-parser/src/nth-parser.ts
@@ -1,257 +1,246 @@
-import type { CSSSelectorToken } from "./tokenizer";
-import type { Nth, NthOf, NthOffset, NthStep } from "./ast-types";
-import { createCommentAst } from "./helpers";
-import { isComment, Seeker, last } from "@tokey/core";
+import type { CSSSelectorToken } from './tokenizer';
+import type { Nth, NthOf, NthOffset, NthStep } from './ast-types';
+import { createCommentAst } from './helpers';
+import { isComment, Seeker, last } from '@tokey/core';
 
 export class NthParser {
-  static isNthPseudoClass(name: string): boolean {
-    return (
-      name === `nth-child` ||
-      name === `nth-last-child` ||
-      name === `nth-of-type` ||
-      name === `nth-last-of-type`
-    );
-  }
-  /**
-   * check (case insensitive) and returns 2 groups:
-   * 1. plus/minus sign (invalid step value)
-   * 2. odd/even string
-   * [
-   *  `+`|`-`|undefined,
-   *  `odd`|`even`
-   * ]
-   */
-  static oddEvenStep = /([-+]?)(odd|even)/i;
-  /**
-   * check for valid step
-   * starts with optional minus or plus,
-   * ends with 0 or more digits following a `n`/`N` character
-   */
-  static validStep = /^[-+]?\d*n$/i;
-  /**
-   * check for valid offset
-   * starts with optional minus or plus,
-   * ends with 1 or more digits
-   */
-  static validOffset = /^[-+]?\d+$/;
-  /**
-   * check for valid start of nth expression
-   * and returns 2 groups:
-   * 1. An: optional minus or plus, 0 or more digits, `n`/`N` character
-   * 2. anything after that
-   */
-  static nthStartExp = /([-+]?\d*[nN]?)(.*)/;
+    static isNthPseudoClass(name: string): boolean {
+        return (
+            name === `nth-child` ||
+            name === `nth-last-child` ||
+            name === `nth-of-type` ||
+            name === `nth-last-of-type`
+        );
+    }
+    /**
+     * check (case insensitive) and returns 2 groups:
+     * 1. plus/minus sign (invalid step value)
+     * 2. odd/even string
+     * [
+     *  `+`|`-`|undefined,
+     *  `odd`|`even`
+     * ]
+     */
+    static oddEvenStep = /([-+]?)(odd|even)/i;
+    /**
+     * check for valid step
+     * starts with optional minus or plus,
+     * ends with 0 or more digits following a `n`/`N` character
+     */
+    static validStep = /^[-+]?\d*n$/i;
+    /**
+     * check for valid offset
+     * starts with optional minus or plus,
+     * ends with 1 or more digits
+     */
+    static validOffset = /^[-+]?\d+$/;
+    /**
+     * check for valid start of nth expression
+     * and returns 2 groups:
+     * 1. An: optional minus or plus, 0 or more digits, `n`/`N` character
+     * 2. anything after that
+     */
+    static nthStartExp = /([-+]?\d*[nN]?)(.*)/;
 
-  public state: "step" | `dash` | `offset` | `of` | `selector` = `step`;
-  private standaloneDash = false;
-  private ast: Nth["nodes"];
-  constructor(private selectorNode: Nth, private s: Seeker<CSSSelectorToken>) {
-    this.ast = selectorNode.nodes;
-  }
-  public handleToken(token: CSSSelectorToken): boolean {
-    const type = token.type;
-    if (type === `text` || type === `+`) {
-      switch (this.state) {
-        case `step`: {
-          // pickup 1 or more tokens for `5n` / `+5n` / `+5n-4` / `5`
-          const nextToken =
-            type === `+` && this.s.peek().type === `text`
-              ? this.s.next()
-              : undefined;
-          this.breakFirstChunk({
-            type: `text`,
-            value: token.value + (nextToken?.value || ``),
-            start: token.start,
-            end: nextToken?.end || token.end,
-          });
-          return true;
-        }
-        case `dash`: {
-          const nextToken =
-            type === `+` && this.s.peek().type === `text`
-              ? this.s.next()
-              : undefined;
-          this.pushDash({
-            type: `text`,
-            value: token.value + (nextToken?.value || ``),
-            start: token.start,
-            end: nextToken?.end || token.end,
-          });
-          return true;
+    public state: 'step' | `dash` | `offset` | `of` | `selector` = `step`;
+    private standaloneDash = false;
+    private ast: Nth['nodes'];
+    constructor(private selectorNode: Nth, private s: Seeker<CSSSelectorToken>) {
+        this.ast = selectorNode.nodes;
+    }
+    public handleToken(token: CSSSelectorToken): boolean {
+        const type = token.type;
+        if (type === `text` || type === `+`) {
+            switch (this.state) {
+                case `step`: {
+                    // pickup 1 or more tokens for `5n` / `+5n` / `+5n-4` / `5`
+                    const nextToken =
+                        type === `+` && this.s.peek().type === `text` ? this.s.next() : undefined;
+                    this.breakFirstChunk({
+                        type: `text`,
+                        value: token.value + (nextToken?.value || ``),
+                        start: token.start,
+                        end: nextToken?.end || token.end,
+                    });
+                    return true;
+                }
+                case `dash`: {
+                    const nextToken =
+                        type === `+` && this.s.peek().type === `text` ? this.s.next() : undefined;
+                    this.pushDash({
+                        type: `text`,
+                        value: token.value + (nextToken?.value || ``),
+                        start: token.start,
+                        end: nextToken?.end || token.end,
+                    });
+                    return true;
+                }
+                case `offset`: {
+                    const nextToken =
+                        type === `+` && this.s.peek().type === `text` ? this.s.next() : undefined;
+                    this.pushOffset({
+                        type: `text`,
+                        value: token.value + (nextToken?.value || ``),
+                        start: token.start,
+                        end: nextToken?.end || token.end,
+                    });
+                    return true;
+                }
+                case `of`: {
+                    this.pushOf(token);
+                    return false;
+                }
+            }
+        } else if (type === `space`) {
+            // improve typing
+            const lastNode = last(this.ast);
+            if (lastNode) {
+                lastNode.after += token.value;
+                lastNode.end += token.value.length;
+            } else {
+                // add initial space to top selector
+                this.selectorNode.before += token.value;
+            }
+            return true;
+        } else if (isComment(type)) {
+            this.ast.push(createCommentAst(token));
+            return true;
         }
-        case `offset`: {
-          const nextToken =
-            type === `+` && this.s.peek().type === `text`
-              ? this.s.next()
-              : undefined;
-          this.pushOffset({
-            type: `text`,
-            value: token.value + (nextToken?.value || ``),
-            start: token.start,
-            end: nextToken?.end || token.end,
-          });
-          return true;
+        // not part of `An+b of`: bail out
+        this.s.back();
+        return false;
+    }
+    /**
+     * first token can only be (minus contained in text):
+     * step: `5n`/`+5n`/`-5n`
+     * step & offset: `5n`/`5n-5
+     */
+    private breakFirstChunk(token: CSSSelectorToken) {
+        const value = token.value;
+        // find odd/even
+        const oddEventMatch = value.match(NthParser.oddEvenStep);
+        if (oddEventMatch) {
+            const isInvalid = !!oddEventMatch[1];
+            this.pushStep(token, isInvalid);
+            return;
         }
-        case `of`: {
-          this.pushOf(token);
-          return false;
+        // separate valid step start from rest: `-5n-4` / `-5n` / `-4` / `5n-4`
+        const matchValidStart = value.match(NthParser.nthStartExp);
+        if (!matchValidStart) {
+            // invalid step
+            this.pushStep(token);
+        } else {
+            const step = matchValidStart[1];
+            const offset = matchValidStart[2];
+            if (!offset && !step.match(/[nN]+$/) && step.match(NthParser.validOffset)) {
+                // no `n` - just offset
+                this.pushOffset(token);
+            } else if (offset === `-`) {
+                // connected dash: `5n-`
+                this.pushStep({
+                    type: `text`,
+                    value: step,
+                    start: token.start,
+                    end: token.start + step.length,
+                });
+                this.pushDash({
+                    type: `text`,
+                    value: `-`,
+                    start: token.end - 1,
+                    end: token.end,
+                });
+            } else if (offset && !offset.match(/-\d+/)) {
+                // invalid step: `-3x`
+                this.pushStep(token);
+            } else {
+                // step with potential minus offset: `5n-4`
+                this.pushStep({
+                    type: `text`,
+                    value: step,
+                    start: token.start,
+                    end: token.start + step.length,
+                });
+                if (offset) {
+                    this.pushOffset({
+                        type: `text`,
+                        value: offset,
+                        start: token.end - offset.length,
+                        end: token.end,
+                    });
+                }
+            }
         }
-      }
-    } else if (type === `space`) {
-      // improve typing
-      const lastNode = last(this.ast);
-      if (lastNode) {
-        lastNode.after += token.value;
-        lastNode.end += token.value.length;
-      } else {
-        // add initial space to top selector
-        this.selectorNode.before += token.value;
-      }
-      return true;
-    } else if (isComment(type)) {
-      this.ast.push(createCommentAst(token));
-      return true;
-    }
-    // not part of `An+b of`: bail out
-    this.s.back();
-    return false;
-  }
-  /**
-   * first token can only be (minus contained in text):
-   * step: `5n`/`+5n`/`-5n`
-   * step & offset: `5n`/`5n-5
-   */
-  private breakFirstChunk(token: CSSSelectorToken) {
-    const value = token.value;
-    // find odd/even
-    const oddEventMatch = value.match(NthParser.oddEvenStep);
-    if (oddEventMatch) {
-      const isInvalid = !!oddEventMatch[1];
-      this.pushStep(token, isInvalid);
-      return;
     }
-    // separate valid step start from rest: `-5n-4` / `-5n` / `-4` / `5n-4`
-    const matchValidStart = value.match(NthParser.nthStartExp);
-    if (!matchValidStart) {
-      // invalid step
-      this.pushStep(token);
-    } else {
-      const step = matchValidStart[1];
-      const offset = matchValidStart[2];
-      if (
-        !offset &&
-        !step.match(/[nN]+$/) &&
-        step.match(NthParser.validOffset)
-      ) {
-        // no `n` - just offset
-        this.pushOffset(token);
-      } else if (offset === `-`) {
-        // connected dash: `5n-`
-        this.pushStep({
-          type: `text`,
-          value: step,
-          start: token.start,
-          end: token.start + step.length,
-        });
-        this.pushDash({
-          type: `text`,
-          value: `-`,
-          start: token.end - 1,
-          end: token.end,
-        });
-      } else if (offset && !offset.match(/-\d+/)) {
-        // invalid step: `-3x`
-        this.pushStep(token);
-      } else {
-        // step with potential minus offset: `5n-4`
-        this.pushStep({
-          type: `text`,
-          value: step,
-          start: token.start,
-          end: token.start + step.length,
-        });
-        if (offset) {
-          this.pushOffset({
-            type: `text`,
-            value: offset,
-            start: token.end - offset.length,
+    private pushStep(token: CSSSelectorToken, isInvalid?: boolean) {
+        const value = token.value;
+        const stepNode: NthStep = {
+            type: `nth_step`,
+            value,
+            before: ``,
+            after: ``,
+            start: token.start,
             end: token.end,
-          });
+        };
+        isInvalid = isInvalid !== undefined ? isInvalid : !value.match(NthParser.validStep);
+        if (isInvalid) {
+            stepNode.invalid = true;
         }
-      }
-    }
-  }
-  private pushStep(token: CSSSelectorToken, isInvalid?: boolean) {
-    const value = token.value;
-    const stepNode: NthStep = {
-      type: `nth_step`,
-      value,
-      before: ``,
-      after: ``,
-      start: token.start,
-      end: token.end,
-    };
-    isInvalid =
-      isInvalid !== undefined ? isInvalid : !value.match(NthParser.validStep);
-    if (isInvalid) {
-      stepNode.invalid = true;
+        this.state = `dash`;
+        this.ast.push(stepNode);
     }
-    this.state = `dash`;
-    this.ast.push(stepNode);
-  }
-  private pushDash(token: CSSSelectorToken) {
-    const value = token.value;
-    if (value === `+` || value === `-`) {
-      this.ast.push({
-        type: `nth_dash`,
-        value: token.value,
-        start: token.start,
-        end: token.end,
-        before: ``,
-        after: ``,
-      });
-      this.standaloneDash = true;
-      this.state = `offset`;
-    } else {
-      this.pushOffset(token);
+    private pushDash(token: CSSSelectorToken) {
+        const value = token.value;
+        if (value === `+` || value === `-`) {
+            this.ast.push({
+                type: `nth_dash`,
+                value: token.value,
+                start: token.start,
+                end: token.end,
+                before: ``,
+                after: ``,
+            });
+            this.standaloneDash = true;
+            this.state = `offset`;
+        } else {
+            this.pushOffset(token);
+        }
     }
-  }
-  private pushOffset(token: CSSSelectorToken) {
-    if (token.value === `of`) {
-      this.pushOf(token);
-    } else {
-      const value = token.value;
-      const offsetNode: NthOffset = {
-        type: `nth_offset`,
-        value,
-        before: ``,
-        after: ``,
-        start: token.start,
-        end: token.end,
-      };
-      if (
-        !value.match(NthParser.validOffset) ||
-        (this.standaloneDash && value.match(/^[-+]/))
-      ) {
-        offsetNode.invalid = true;
-      }
-      this.state = `of`;
-      this.ast.push(offsetNode);
+    private pushOffset(token: CSSSelectorToken) {
+        if (token.value === `of`) {
+            this.pushOf(token);
+        } else {
+            const value = token.value;
+            const offsetNode: NthOffset = {
+                type: `nth_offset`,
+                value,
+                before: ``,
+                after: ``,
+                start: token.start,
+                end: token.end,
+            };
+            if (
+                !value.match(NthParser.validOffset) ||
+                (this.standaloneDash && value.match(/^[-+]/))
+            ) {
+                offsetNode.invalid = true;
+            }
+            this.state = `of`;
+            this.ast.push(offsetNode);
+        }
     }
-  }
-  private pushOf(token: CSSSelectorToken) {
-    const ofNode: NthOf = {
-      type: `nth_of`,
-      value: token.value,
-      before: ``,
-      after: ``,
-      start: token.start,
-      end: token.end,
-    };
-    if (token.value !== `of`) {
-      ofNode.invalid = true;
+    private pushOf(token: CSSSelectorToken) {
+        const ofNode: NthOf = {
+            type: `nth_of`,
+            value: token.value,
+            before: ``,
+            after: ``,
+            start: token.start,
+            end: token.end,
+        };
+        if (token.value !== `of`) {
+            ofNode.invalid = true;
+        }
+        this.ast.push(ofNode);
+        this.state = `selector`;
     }
-    this.ast.push(ofNode);
-    this.state = `selector`;
-  }
 }
diff --git a/packages/css-selector-parser/src/selector-parser.ts b/packages/css-selector-parser/src/selector-parser.ts
index 749ef48e..4fe0633d 100644
--- a/packages/css-selector-parser/src/selector-parser.ts
+++ b/packages/css-selector-parser/src/selector-parser.ts
@@ -1,430 +1,418 @@
-import { tokenizeSelector, CSSSelectorToken } from "./tokenizer";
-import { NthParser } from "./nth-parser";
+import { tokenizeSelector, CSSSelectorToken } from './tokenizer';
+import { NthParser } from './nth-parser';
 import type {
-  Namespace,
-  Combinator,
-  Comment,
-  NamespacedNode,
-  Selector,
-  SelectorList,
-  SelectorNode,
-} from "./ast-types";
+    Namespace,
+    Combinator,
+    Comment,
+    NamespacedNode,
+    Selector,
+    SelectorList,
+    SelectorNode,
+} from './ast-types';
 import {
-  createCombinatorAst,
-  createCommentAst,
-  createEmptySelector,
-  createEmptyNth,
-  isCombinatorToken,
-  isNamespacedAst,
-  isNamespacedToken,
-  ensureSelector,
-  trimCombinators,
-} from "./helpers";
-import { isComment, getText, Seeker, last } from "@tokey/core";
+    createCombinatorAst,
+    createCommentAst,
+    createEmptySelector,
+    createEmptyNth,
+    isCombinatorToken,
+    isNamespacedAst,
+    isNamespacedToken,
+    ensureSelector,
+    trimCombinators,
+} from './helpers';
+import { isComment, getText, Seeker, last } from '@tokey/core';
 
 export interface ParseConfig {
-  offset: number;
+    offset: number;
 }
 
-export function parseCssSelector(
-  source: string,
-  options: Partial<ParseConfig> = {}
-) {
-  return parseTokens(source, tokenizeSelector(source, options));
+export function parseCssSelector(source: string, options: Partial<ParseConfig> = {}) {
+    return parseTokens(source, tokenizeSelector(source, options));
 }
 
 function parseTokens(source: string, tokens: CSSSelectorToken[]): SelectorList {
-  return new Seeker(tokens).run<SelectorList>(handleToken, [], source);
+    return new Seeker(tokens).run<SelectorList>(handleToken, [], source);
 }
 
 function handleToken(
-  token: CSSSelectorToken,
-  selectors: SelectorList,
-  source: string,
-  s: Seeker<CSSSelectorToken>
+    token: CSSSelectorToken,
+    selectors: SelectorList,
+    source: string,
+    s: Seeker<CSSSelectorToken>
 ): void {
-  let t;
-  const currentSelector = ensureSelector(selectors, token);
-  const ast = currentSelector.nodes;
-  if (token.type === ".") {
-    const comments = s.takeMany("multi-comment").map(createCommentAst);
-    const name = s.take("text");
-    ast.push({
-      type: "class",
-      value: name?.value ?? "",
-      start: token.start,
-      end: name?.end ?? last(comments)?.end ?? token.end,
-      dotComments: comments,
-    });
-  } else if (token.type === ":") {
-    const firstComments = s.takeMany("multi-comment").map(createCommentAst);
-    const type = s.take(":") || token;
-    const isClass = token === type;
+    let t;
+    const currentSelector = ensureSelector(selectors, token);
+    const ast = currentSelector.nodes;
+    if (token.type === '.') {
+        const comments = s.takeMany('multi-comment').map(createCommentAst);
+        const name = s.take('text');
+        ast.push({
+            type: 'class',
+            value: name?.value ?? '',
+            start: token.start,
+            end: name?.end ?? last(comments)?.end ?? token.end,
+            dotComments: comments,
+        });
+    } else if (token.type === ':') {
+        const firstComments = s.takeMany('multi-comment').map(createCommentAst);
+        const type = s.take(':') || token;
+        const isClass = token === type;
 
-    if (isClass) {
-      const name = s.take("text");
-      const endToken = name || last(firstComments) || type;
-      ast.push({
-        type: "pseudo_class",
-        value: name?.value ?? "",
-        start: token.start,
-        end: name?.end ?? endToken.end,
-        colonComments: firstComments,
-      });
-    } else {
-      const secondComments = s.takeMany("multi-comment").map(createCommentAst);
-      const name = s.take("text");
-      const endToken = name || last(secondComments) || type;
+        if (isClass) {
+            const name = s.take('text');
+            const endToken = name || last(firstComments) || type;
+            ast.push({
+                type: 'pseudo_class',
+                value: name?.value ?? '',
+                start: token.start,
+                end: name?.end ?? endToken.end,
+                colonComments: firstComments,
+            });
+        } else {
+            const secondComments = s.takeMany('multi-comment').map(createCommentAst);
+            const name = s.take('text');
+            const endToken = name || last(secondComments) || type;
 
-      ast.push({
-        type: "pseudo_element",
-        value: name?.value ?? "",
-        start: token.start,
-        end: name?.end ?? endToken.end,
-        colonComments: { first: firstComments, second: secondComments },
-      });
-    }
-  } else if (token.type === "[") {
-    const block = s.run(
-      (token, ast) => {
-        ast.push(token);
-        return token.type !== "]";
-      },
-      [token],
-      source
-    );
-    const closed = last(block)?.type === "]";
-    if (closed) {
-      ast.push({
-        type: "attribute",
-        value:
-          block.length > 2 ? getText(block, 1, block.length - 1, source) : "",
-        start: token.start,
-        end: last(block)?.end ?? token.end,
-      });
-    } else {
-      ast.push({
-        type: "invalid",
-        value: getText(block, undefined, undefined, source),
-        start: token.start,
-        end: last(block)?.end ?? token.end,
-      });
-    }
-  } else if (isCombinatorToken(token)) {
-    let lastCombinatorAst = createCombinatorAst(token);
-    let lastAst: Combinator | Comment = lastCombinatorAst;
-    // insert token as a combinator
-    ast.push(lastCombinatorAst);
-    // save the insertion point of the first combinator in case it's a space
-    // that might be considered a normal space later and will need to be changed.
-    let initialSpaceCombIndex: number =
-      lastCombinatorAst.combinator === `space` ? ast.length - 1 : -1;
-    /**
-     * take next spaces/combinators/comments:
-     * - combinator/space token:
-     *  - spaces: merge to previous ast node before them
-     *  - previous ast equal to space combinator
-     *    - turn previous ast to the next combinator type
-     *    - merge spaces between them
-     *    - cancel initial space tracking - must be merged with other non space combinator or already canceled
-     *  - initial ast is space (must be comments following it)
-     *    - initial space is first in selector: merge initial ast into the selector before
-     *    - otherwise merge initial ast the comment following it
-     *  - insert an invalid combinator
-     * - comment token: insert to ast
-     */
-    //
-    let next = s.next();
-    while (next) {
-      if (isCombinatorToken(next)) {
-        if (next.type === `space`) {
-          // add space to the last ast node
-          lastAst.after += next.value;
-          lastAst.end = next.end;
-        } else if (
-          lastAst === lastCombinatorAst &&
-          lastAst.combinator === "space"
-        ) {
-          // combine next combinator into previous (space)
-          const nextCombinator = createCombinatorAst(next);
-          lastCombinatorAst.combinator = nextCombinator.combinator;
-          lastCombinatorAst.before +=
-            lastCombinatorAst.after +
-            lastCombinatorAst.value +
-            nextCombinator.before;
-          lastCombinatorAst.after = nextCombinator.after;
-          lastCombinatorAst.value = nextCombinator.value;
-          lastCombinatorAst.end = nextCombinator.end;
-          // reset initial space
-          initialSpaceCombIndex = -1;
-        } else if (initialSpaceCombIndex !== -1) {
-          // merge initial space combinator (classified as combinator before a comment)
-          const initialSpace = ast[initialSpaceCombIndex] as Combinator;
-          const spaceValue =
-            initialSpace.before + initialSpace.value + initialSpace.after;
-          if (initialSpaceCombIndex === 0) {
-            // merge to beginning of selector
-            currentSelector.before += spaceValue;
-          } else {
-            // merge to the next comment
-            const nodeAfterInitial = ast[initialSpaceCombIndex + 1];
-            if (nodeAfterInitial?.type === `comment`) {
-              nodeAfterInitial.before += spaceValue;
-              nodeAfterInitial.start = initialSpace.start;
+            ast.push({
+                type: 'pseudo_element',
+                value: name?.value ?? '',
+                start: token.start,
+                end: name?.end ?? endToken.end,
+                colonComments: { first: firstComments, second: secondComments },
+            });
+        }
+    } else if (token.type === '[') {
+        const block = s.run(
+            (token, ast) => {
+                ast.push(token);
+                return token.type !== ']';
+            },
+            [token],
+            source
+        );
+        const closed = last(block)?.type === ']';
+        if (closed) {
+            ast.push({
+                type: 'attribute',
+                value: block.length > 2 ? getText(block, 1, block.length - 1, source) : '',
+                start: token.start,
+                end: last(block)?.end ?? token.end,
+            });
+        } else {
+            ast.push({
+                type: 'invalid',
+                value: getText(block, undefined, undefined, source),
+                start: token.start,
+                end: last(block)?.end ?? token.end,
+            });
+        }
+    } else if (isCombinatorToken(token)) {
+        let lastCombinatorAst = createCombinatorAst(token);
+        let lastAst: Combinator | Comment = lastCombinatorAst;
+        // insert token as a combinator
+        ast.push(lastCombinatorAst);
+        // save the insertion point of the first combinator in case it's a space
+        // that might be considered a normal space later and will need to be changed.
+        let initialSpaceCombIndex: number =
+            lastCombinatorAst.combinator === `space` ? ast.length - 1 : -1;
+        /**
+         * take next spaces/combinators/comments:
+         * - combinator/space token:
+         *  - spaces: merge to previous ast node before them
+         *  - previous ast equal to space combinator
+         *    - turn previous ast to the next combinator type
+         *    - merge spaces between them
+         *    - cancel initial space tracking - must be merged with other non space combinator or already canceled
+         *  - initial ast is space (must be comments following it)
+         *    - initial space is first in selector: merge initial ast into the selector before
+         *    - otherwise merge initial ast the comment following it
+         *  - insert an invalid combinator
+         * - comment token: insert to ast
+         */
+        //
+        let next = s.next();
+        while (next) {
+            if (isCombinatorToken(next)) {
+                if (next.type === `space`) {
+                    // add space to the last ast node
+                    lastAst.after += next.value;
+                    lastAst.end = next.end;
+                } else if (lastAst === lastCombinatorAst && lastAst.combinator === 'space') {
+                    // combine next combinator into previous (space)
+                    const nextCombinator = createCombinatorAst(next);
+                    lastCombinatorAst.combinator = nextCombinator.combinator;
+                    lastCombinatorAst.before +=
+                        lastCombinatorAst.after + lastCombinatorAst.value + nextCombinator.before;
+                    lastCombinatorAst.after = nextCombinator.after;
+                    lastCombinatorAst.value = nextCombinator.value;
+                    lastCombinatorAst.end = nextCombinator.end;
+                    // reset initial space
+                    initialSpaceCombIndex = -1;
+                } else if (initialSpaceCombIndex !== -1) {
+                    // merge initial space combinator (classified as combinator before a comment)
+                    const initialSpace = ast[initialSpaceCombIndex] as Combinator;
+                    const spaceValue =
+                        initialSpace.before + initialSpace.value + initialSpace.after;
+                    if (initialSpaceCombIndex === 0) {
+                        // merge to beginning of selector
+                        currentSelector.before += spaceValue;
+                    } else {
+                        // merge to the next comment
+                        const nodeAfterInitial = ast[initialSpaceCombIndex + 1];
+                        if (nodeAfterInitial?.type === `comment`) {
+                            nodeAfterInitial.before += spaceValue;
+                            nodeAfterInitial.start = initialSpace.start;
+                        } else {
+                            // shouldn't happen as initial space is considered as a combinator
+                            // only when a comment is following it and before
+                        }
+                    }
+                    ast.splice(initialSpaceCombIndex, 1);
+                    initialSpaceCombIndex = -1;
+                    // add combinator
+                    lastCombinatorAst = createCombinatorAst(next);
+                    lastAst = lastCombinatorAst;
+                    ast.push(lastCombinatorAst);
+                } else {
+                    // add invalid combinator
+                    lastCombinatorAst = createCombinatorAst(next);
+                    lastCombinatorAst.invalid = true;
+                    lastAst = lastCombinatorAst;
+                    ast.push(lastCombinatorAst);
+                }
+            } else if (isComment(next.type)) {
+                lastAst = createCommentAst(next);
+                ast.push(lastAst);
+            } else {
+                break;
+            }
+            next = s.next();
+        }
+        // put back any unrelated token
+        if (next && !isCombinatorToken(next)) {
+            s.back();
+        }
+    } else if (token.type === 'text') {
+        ast.push({
+            type: 'type',
+            value: token.value,
+            start: token.start,
+            end: token.end,
+        });
+    } else if (token.type === '#') {
+        t = s.take('text');
+        ast.push({
+            type: 'id',
+            value: t?.value ?? '',
+            start: token.start,
+            end: t?.end ?? token.end,
+        });
+    } else if (token.type === '*') {
+        ast.push({
+            type: 'universal',
+            value: '*',
+            start: token.start,
+            end: token.end,
+        });
+    } else if (token.type === '|') {
+        // search backwards compatible namespace in ast
+        let prevAst: NamespacedNode | undefined;
+        let prevInvalidAst: SelectorNode | undefined;
+        const beforeComments: Comment[] = [];
+        for (let i = ast.length - 1; i >= 0; --i) {
+            const current = ast[i];
+            if (isNamespacedAst(current)) {
+                if (current.namespace) {
+                    // already namespaced
+                    prevInvalidAst = current;
+                } else {
+                    // merge with previous
+                    prevAst = current;
+                }
+                break;
+            } else if (
+                current.type === `comment` &&
+                current.before === `` &&
+                current.after === ``
+            ) {
+                beforeComments.unshift(current);
+            } else {
+                prevInvalidAst = current;
+                break;
+            }
+        }
+        // search forward target token
+        let target: CSSSelectorToken | undefined;
+        let searchIndex = 1;
+        const potentialAfterComments: CSSSelectorToken[] = [];
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            const nextToken = s.peek(searchIndex);
+            if (isComment(nextToken.type)) {
+                potentialAfterComments.push(nextToken);
+            } else if (isNamespacedToken(nextToken)) {
+                target = nextToken;
+                break;
             } else {
-              // shouldn't happen as initial space is considered as a combinator
-              // only when a comment is following it and before
+                // space or end of tokens
+                break;
             }
-          }
-          ast.splice(initialSpaceCombIndex, 1);
-          initialSpaceCombIndex = -1;
-          // add combinator
-          lastCombinatorAst = createCombinatorAst(next);
-          lastAst = lastCombinatorAst;
-          ast.push(lastCombinatorAst);
+            searchIndex++;
+        }
+        // create/update ast
+        const validNamespace = !prevInvalidAst;
+        const validTarget = !!target;
+        const type = target?.type === `*` ? `universal` : `type`;
+        let invalid: NonNullable<Namespace['invalid']> = ``;
+        // remove before/after pipe comments
+        if (validNamespace) {
+            ast.splice(ast.length - beforeComments.length, beforeComments.length);
         } else {
-          // add invalid combinator
-          lastCombinatorAst = createCombinatorAst(next);
-          lastCombinatorAst.invalid = true;
-          lastAst = lastCombinatorAst;
-          ast.push(lastCombinatorAst);
+            invalid = `namespace`;
         }
-      } else if (isComment(next.type)) {
-        lastAst = createCommentAst(next);
-        ast.push(lastAst);
-      } else {
-        break;
-      }
-      next = s.next();
-    }
-    // put back any unrelated token
-    if (next && !isCombinatorToken(next)) {
-      s.back();
-    }
-  } else if (token.type === "text") {
-    ast.push({
-      type: "type",
-      value: token.value,
-      start: token.start,
-      end: token.end,
-    });
-  } else if (token.type === "#") {
-    t = s.take("text");
-    ast.push({
-      type: "id",
-      value: t?.value ?? "",
-      start: token.start,
-      end: t?.end ?? token.end,
-    });
-  } else if (token.type === "*") {
-    ast.push({
-      type: "universal",
-      value: "*",
-      start: token.start,
-      end: token.end,
-    });
-  } else if (token.type === "|") {
-    // search backwards compatible namespace in ast
-    let prevAst: NamespacedNode | undefined;
-    let prevInvalidAst: SelectorNode | undefined;
-    const beforeComments: Comment[] = [];
-    for (let i = ast.length - 1; i >= 0; --i) {
-      const current = ast[i];
-      if (isNamespacedAst(current)) {
-        if (current.namespace) {
-          // already namespaced
-          prevInvalidAst = current;
+        if (validTarget) {
+            potentialAfterComments.forEach(() => s.next());
+            s.next();
         } else {
-          // merge with previous
-          prevAst = current;
+            invalid = invalid ? `namespace,target` : `target`;
         }
-        break;
-      } else if (
-        current.type === `comment` &&
-        current.before === `` &&
-        current.after === ``
-      ) {
-        beforeComments.unshift(current);
-      } else {
-        prevInvalidAst = current;
-        break;
-      }
-    }
-    // search forward target token
-    let target: CSSSelectorToken | undefined;
-    let searchIndex = 1;
-    const potentialAfterComments: CSSSelectorToken[] = [];
-    // eslint-disable-next-line no-constant-condition
-    while (true) {
-      const nextToken = s.peek(searchIndex);
-      if (isComment(nextToken.type)) {
-        potentialAfterComments.push(nextToken);
-      } else if (isNamespacedToken(nextToken)) {
-        target = nextToken;
-        break;
-      } else {
-        // space or end of tokens
-        break;
-      }
-      searchIndex++;
-    }
-    // create/update ast
-    const validNamespace = !prevInvalidAst;
-    const validTarget = !!target;
-    const type = target?.type === `*` ? `universal` : `type`;
-    let invalid: NonNullable<Namespace["invalid"]> = ``;
-    // remove before/after pipe comments
-    if (validNamespace) {
-      ast.splice(ast.length - beforeComments.length, beforeComments.length);
-    } else {
-      invalid = `namespace`;
-    }
-    if (validTarget) {
-      potentialAfterComments.forEach(() => s.next());
-      s.next();
-    } else {
-      invalid = invalid ? `namespace,target` : `target`;
-    }
-    // create new ast or modify the prev
-    const nsAst: NamespacedNode =
-      prevAst ||
-      ({
-        type,
-        value: ``,
-        start: token.start,
-        end: target?.end || token.end,
-      } as NamespacedNode);
-    nsAst.type = type;
-    nsAst.namespace = {
-      value: prevAst?.value || ``,
-      beforeComments: validNamespace ? beforeComments : [],
-      afterComments: validTarget
-        ? potentialAfterComments.map(createCommentAst)
-        : [],
-    };
-    nsAst.value = target?.value || ``;
-    nsAst.end = target?.end || token.end;
-    // set invalid
-    if (invalid) {
-      nsAst.namespace.invalid = invalid;
-    }
-    // add ast if not modified
-    if (!prevAst) {
-      ast.push(nsAst);
-    }
-  } else if (token.type === "(") {
-    const prev = last(ast);
-    const res: SelectorList = [];
-    // handle nth selector
-    if (
-      prev &&
-      prev.type === `pseudo_class` &&
-      NthParser.isNthPseudoClass(prev.value) &&
-      s.peek().type !== `)`
-    ) {
-      // collect "An+B of" expression
-      const nthSelector = createEmptyNth();
-      nthSelector.start = s.peek().start;
-      res.push(nthSelector as unknown as Selector);
-      const nthParser = new NthParser(nthSelector, s);
-      s.run(
-        (token) => {
-          if (nthParser.state === `selector`) {
-            // got to selector, push back and stop
-            s.back();
-            return false;
-          }
-          return nthParser.handleToken(token);
-        },
-        nthSelector,
-        source
-      );
-      // setup next selector
-      if (s.peek().type !== `)`) {
-        nthSelector.end = last(nthSelector.nodes)?.end || nthSelector.start;
-        // add "of" selector
-        const newSelector = createEmptySelector();
-        newSelector.start = nthSelector.end;
-        res.push(newSelector);
-      }
-    }
-    // get all tokens until closed
-    s.run(
-      (token, selectors) => {
-        if (token.type === ")") {
-          const currentSelector = last(selectors);
-          if (currentSelector) {
-            currentSelector.end =
-              last(currentSelector.nodes)?.end ?? currentSelector.start;
-          }
-          return false;
+        // create new ast or modify the prev
+        const nsAst: NamespacedNode =
+            prevAst ||
+            ({
+                type,
+                value: ``,
+                start: token.start,
+                end: target?.end || token.end,
+            } as NamespacedNode);
+        nsAst.type = type;
+        nsAst.namespace = {
+            value: prevAst?.value || ``,
+            beforeComments: validNamespace ? beforeComments : [],
+            afterComments: validTarget ? potentialAfterComments.map(createCommentAst) : [],
+        };
+        nsAst.value = target?.value || ``;
+        nsAst.end = target?.end || token.end;
+        // set invalid
+        if (invalid) {
+            nsAst.namespace.invalid = invalid;
         }
-        return handleToken(token, selectors, source, s);
-      },
-      res,
-      source
-    );
+        // add ast if not modified
+        if (!prevAst) {
+            ast.push(nsAst);
+        }
+    } else if (token.type === '(') {
+        const prev = last(ast);
+        const res: SelectorList = [];
+        // handle nth selector
+        if (
+            prev &&
+            prev.type === `pseudo_class` &&
+            NthParser.isNthPseudoClass(prev.value) &&
+            s.peek().type !== `)`
+        ) {
+            // collect "An+B of" expression
+            const nthSelector = createEmptyNth();
+            nthSelector.start = s.peek().start;
+            res.push(nthSelector as unknown as Selector);
+            const nthParser = new NthParser(nthSelector, s);
+            s.run(
+                (token) => {
+                    if (nthParser.state === `selector`) {
+                        // got to selector, push back and stop
+                        s.back();
+                        return false;
+                    }
+                    return nthParser.handleToken(token);
+                },
+                nthSelector,
+                source
+            );
+            // setup next selector
+            if (s.peek().type !== `)`) {
+                nthSelector.end = last(nthSelector.nodes)?.end || nthSelector.start;
+                // add "of" selector
+                const newSelector = createEmptySelector();
+                newSelector.start = nthSelector.end;
+                res.push(newSelector);
+            }
+        }
+        // get all tokens until closed
+        s.run(
+            (token, selectors) => {
+                if (token.type === ')') {
+                    const currentSelector = last(selectors);
+                    if (currentSelector) {
+                        currentSelector.end =
+                            last(currentSelector.nodes)?.end ?? currentSelector.start;
+                    }
+                    return false;
+                }
+                return handleToken(token, selectors, source, s);
+            },
+            res,
+            source
+        );
 
-    const ended = s.peek(0);
-    if (
-      !prev ||
-      "nodes" in prev ||
-      prev.type === "invalid" ||
-      prev.type === "combinator" ||
-      prev.type === "comment" ||
-      prev.type === "nth_step" ||
-      prev.type === "nth_dash" ||
-      prev.type === "nth_offset" ||
-      prev.type === "nth_of" ||
-      ended.type !== ")"
-    ) {
-      ast.push({
-        type: "invalid",
-        value: getText([token, ended], undefined, undefined, source),
-        start: token.start,
-        end: ended?.end ?? s.peekBack().end,
-      });
+        const ended = s.peek(0);
+        if (
+            !prev ||
+            'nodes' in prev ||
+            prev.type === 'invalid' ||
+            prev.type === 'combinator' ||
+            prev.type === 'comment' ||
+            prev.type === 'nth_step' ||
+            prev.type === 'nth_dash' ||
+            prev.type === 'nth_offset' ||
+            prev.type === 'nth_of' ||
+            ended.type !== ')'
+        ) {
+            ast.push({
+                type: 'invalid',
+                value: getText([token, ended], undefined, undefined, source),
+                start: token.start,
+                end: ended?.end ?? s.peekBack().end,
+            });
+        } else {
+            const lastSelector = last(res);
+            if (lastSelector) {
+                trimCombinators(lastSelector);
+            }
+            prev.nodes = res;
+            prev.end = ended.end;
+        }
+    } else if (isComment(token.type)) {
+        ast.push(createCommentAst(token));
+    } else if (token.type === ',') {
+        // we ensure at least one selector present
+        const selector = last(selectors)!;
+        selector.end = token.start;
+        trimCombinators(selector);
+        const newSelector = createEmptySelector();
+        if (s.done()) {
+            newSelector.start = token.end;
+            newSelector.end = token.end;
+        } else {
+            newSelector.start = s.peek().start;
+        }
+        selectors.push(newSelector);
+    } else if (token.type === '&') {
+        ast.push({
+            type: 'nesting',
+            value: '&',
+            start: token.start,
+            end: token.end,
+        });
     } else {
-      const lastSelector = last(res);
-      if (lastSelector) {
-        trimCombinators(lastSelector);
-      }
-      prev.nodes = res;
-      prev.end = ended.end;
+        ast.push({
+            type: 'invalid',
+            value: token.value,
+            start: token.start,
+            end: token.end,
+        });
     }
-  } else if (isComment(token.type)) {
-    ast.push(createCommentAst(token));
-  } else if (token.type === ",") {
-    // we ensure at least one selector present
-    const selector = last(selectors)!;
-    selector.end = token.start;
-    trimCombinators(selector);
-    const newSelector = createEmptySelector();
     if (s.done()) {
-      newSelector.start = token.end;
-      newSelector.end = token.end;
-    } else {
-      newSelector.start = s.peek().start;
+        currentSelector.end = last(currentSelector.nodes)?.end ?? currentSelector.start;
+        trimCombinators(currentSelector);
     }
-    selectors.push(newSelector);
-  } else if (token.type === "&") {
-    ast.push({
-      type: "nesting",
-      value: "&",
-      start: token.start,
-      end: token.end,
-    });
-  } else {
-    ast.push({
-      type: "invalid",
-      value: token.value,
-      start: token.start,
-      end: token.end,
-    });
-  }
-  if (s.done()) {
-    currentSelector.end =
-      last(currentSelector.nodes)?.end ?? currentSelector.start;
-    trimCombinators(currentSelector);
-  }
 }
diff --git a/packages/css-selector-parser/src/stringify.ts b/packages/css-selector-parser/src/stringify.ts
index 18183419..86ec0532 100644
--- a/packages/css-selector-parser/src/stringify.ts
+++ b/packages/css-selector-parser/src/stringify.ts
@@ -1,131 +1,110 @@
-import { NthParser } from "./nth-parser";
+import { NthParser } from './nth-parser';
 import type {
-  ImmutableId,
-  ImmutableAttribute,
-  ImmutableClass,
-  ImmutableCombinator,
-  ImmutableComment,
-  ImmutableType,
-  ImmutableInvalid,
-  ImmutableNth,
-  ImmutableNthDash,
-  ImmutableNthOf,
-  ImmutableNthOffset,
-  ImmutableNthStep,
-  ImmutablePseudoClass,
-  ImmutablePseudoElement,
-  ImmutableSelector,
-  ImmutableCompoundSelector,
-  ImmutableUniversal,
-  ImmutableNesting,
-  ImmutableSelectorNode,
-  ImmutableSelectorList,
-  ImmutableNthSelectorList,
-  ImmutableFunctionalSelector,
-  ImmutableNamespacedNode,
-} from "./ast-types";
+    ImmutableId,
+    ImmutableAttribute,
+    ImmutableClass,
+    ImmutableCombinator,
+    ImmutableComment,
+    ImmutableType,
+    ImmutableInvalid,
+    ImmutableNth,
+    ImmutableNthDash,
+    ImmutableNthOf,
+    ImmutableNthOffset,
+    ImmutableNthStep,
+    ImmutablePseudoClass,
+    ImmutablePseudoElement,
+    ImmutableSelector,
+    ImmutableCompoundSelector,
+    ImmutableUniversal,
+    ImmutableNesting,
+    ImmutableSelectorNode,
+    ImmutableSelectorList,
+    ImmutableNthSelectorList,
+    ImmutableFunctionalSelector,
+    ImmutableNamespacedNode,
+} from './ast-types';
 
 export function stringifySelectorAst(
-  value:
-    | ImmutableSelectorNode
-    | ImmutableSelectorList
-    | ImmutableNthSelectorList
+    value: ImmutableSelectorNode | ImmutableSelectorList | ImmutableNthSelectorList
 ): string {
-  return "length" in value ? stringifySelectors(value) : stringifyNode(value);
+    return 'length' in value ? stringifySelectors(value) : stringifyNode(value);
 }
 
 type Printers = {
-  [K in ImmutableSelectorNode as K["type"]]: (node: K) => string;
+    [K in ImmutableSelectorNode as K['type']]: (node: K) => string;
 };
 
 const printers: Printers = {
-  id: (node: ImmutableId) => `#${node.value}${stringifyNested(node)}`,
-  class: (node: ImmutableClass) =>
-    `.${node.dotComments.map(stringifyNode).join("")}${
-      node.value
-    }${stringifyNested(node)}`,
-  type: (node: ImmutableType) =>
-    `${stringifyNamespace(node)}${node.value}${stringifyNested(node)}`,
-  combinator: (node: ImmutableCombinator) =>
-    `${node.before}${node.value}${node.after}`,
-  attribute: (node: ImmutableAttribute) =>
-    `[${node.value}]${stringifyNested(node)}`,
-  pseudo_class: (node: ImmutablePseudoClass) =>
-    `:${node.colonComments.map(stringifyNode).join("")}${
-      node.value
-    }${stringifyNested(node)}`,
-  pseudo_element: (node: ImmutablePseudoElement) =>
-    `:${node.colonComments.first
-      .map(stringifyNode)
-      .join("")}:${node.colonComments.second.map(stringifyNode).join("")}${
-      node.value
-    }${stringifyNested(node)}`,
-  comment: ({ before, value, after }: ImmutableComment) =>
-    `${before}${value}${after}`,
-  universal: (node: ImmutableUniversal) =>
-    `${stringifyNamespace(node)}${node.value}${stringifyNested(node)}`,
-  nesting: (node: ImmutableNesting) => `${node.value}${stringifyNested(node)}`,
-  selector: (node: ImmutableSelector) =>
-    `${node.before}${node.nodes.map(stringifyNode).join("")}${node.after}`,
-  compound_selector: (node: ImmutableCompoundSelector) =>
-    `${node.before}${node.nodes.map(stringifyNode).join("")}${node.after}`,
-  invalid: (node: ImmutableInvalid) => node.value,
-  nth: (node: ImmutableNth) =>
-    `${node.before}${node.nodes.map(stringifyNode).join("")}${node.after}`,
-  nth_step: ({ before, value, after }: ImmutableNthStep) =>
-    `${before}${value}${after}`,
-  nth_dash: ({ before, value, after }: ImmutableNthDash) =>
-    `${before}${value}${after}`,
-  nth_offset: ({ before, value, after }: ImmutableNthOffset) =>
-    `${before}${value}${after}`,
-  nth_of: ({ before, value, after }: ImmutableNthOf) =>
-    `${before}${value}${after}`,
+    id: (node: ImmutableId) => `#${node.value}${stringifyNested(node)}`,
+    class: (node: ImmutableClass) =>
+        `.${node.dotComments.map(stringifyNode).join('')}${node.value}${stringifyNested(node)}`,
+    type: (node: ImmutableType) =>
+        `${stringifyNamespace(node)}${node.value}${stringifyNested(node)}`,
+    combinator: (node: ImmutableCombinator) => `${node.before}${node.value}${node.after}`,
+    attribute: (node: ImmutableAttribute) => `[${node.value}]${stringifyNested(node)}`,
+    pseudo_class: (node: ImmutablePseudoClass) =>
+        `:${node.colonComments.map(stringifyNode).join('')}${node.value}${stringifyNested(node)}`,
+    pseudo_element: (node: ImmutablePseudoElement) =>
+        `:${node.colonComments.first.map(stringifyNode).join('')}:${node.colonComments.second
+            .map(stringifyNode)
+            .join('')}${node.value}${stringifyNested(node)}`,
+    comment: ({ before, value, after }: ImmutableComment) => `${before}${value}${after}`,
+    universal: (node: ImmutableUniversal) =>
+        `${stringifyNamespace(node)}${node.value}${stringifyNested(node)}`,
+    nesting: (node: ImmutableNesting) => `${node.value}${stringifyNested(node)}`,
+    selector: (node: ImmutableSelector) =>
+        `${node.before}${node.nodes.map(stringifyNode).join('')}${node.after}`,
+    compound_selector: (node: ImmutableCompoundSelector) =>
+        `${node.before}${node.nodes.map(stringifyNode).join('')}${node.after}`,
+    invalid: (node: ImmutableInvalid) => node.value,
+    nth: (node: ImmutableNth) =>
+        `${node.before}${node.nodes.map(stringifyNode).join('')}${node.after}`,
+    nth_step: ({ before, value, after }: ImmutableNthStep) => `${before}${value}${after}`,
+    nth_dash: ({ before, value, after }: ImmutableNthDash) => `${before}${value}${after}`,
+    nth_offset: ({ before, value, after }: ImmutableNthOffset) => `${before}${value}${after}`,
+    nth_of: ({ before, value, after }: ImmutableNthOf) => `${before}${value}${after}`,
 };
 
 function stringifyNode(node: ImmutableSelectorNode): string {
-  return printers[node.type]?.(node as never) ?? "";
+    return printers[node.type]?.(node as never) ?? '';
 }
 
-function stringifySelectors(
-  selectors: ReadonlyArray<ImmutableSelector | ImmutableNth>
-) {
-  const result: string[] = [];
-  for (const node of selectors) {
-    result.push(stringifyNode(node));
-  }
-  return result.join(`,`);
+function stringifySelectors(selectors: ReadonlyArray<ImmutableSelector | ImmutableNth>) {
+    const result: string[] = [];
+    for (const node of selectors) {
+        result.push(stringifyNode(node));
+    }
+    return result.join(`,`);
 }
 
 function stringifyNested(node: ImmutableFunctionalSelector): string {
-  if ("nodes" in node) {
-    if (node.nodes?.length) {
-      if (
-        node.type === `pseudo_class` &&
-        NthParser.isNthPseudoClass(node.value)
-      ) {
-        const [nthNode, ...selectors] = node.nodes;
-        return `(${stringifyNode(nthNode)}${stringifySelectors(selectors)})`;
-      } else {
-        return `(${stringifySelectors(node.nodes)})`;
-      }
-    } else {
-      return `()`;
+    if ('nodes' in node) {
+        if (node.nodes?.length) {
+            if (node.type === `pseudo_class` && NthParser.isNthPseudoClass(node.value)) {
+                const [nthNode, ...selectors] = node.nodes;
+                return `(${stringifyNode(nthNode)}${stringifySelectors(selectors)})`;
+            } else {
+                return `(${stringifySelectors(node.nodes)})`;
+            }
+        } else {
+            return `()`;
+        }
     }
-  }
-  return "";
+    return '';
 }
 
 function stringifyNamespace({ namespace }: ImmutableNamespacedNode): string {
-  let ns = ``;
-  if (namespace) {
-    ns += namespace.value;
-    for (const comment of namespace.beforeComments) {
-      ns += printers.comment(comment);
-    }
-    ns += `|`;
-    for (const comment of namespace.afterComments) {
-      ns += printers.comment(comment);
+    let ns = ``;
+    if (namespace) {
+        ns += namespace.value;
+        for (const comment of namespace.beforeComments) {
+            ns += printers.comment(comment);
+        }
+        ns += `|`;
+        for (const comment of namespace.afterComments) {
+            ns += printers.comment(comment);
+        }
     }
-  }
-  return ns;
+    return ns;
 }
diff --git a/packages/css-selector-parser/src/tokenizer.ts b/packages/css-selector-parser/src/tokenizer.ts
index d92c26e7..44d171d8 100644
--- a/packages/css-selector-parser/src/tokenizer.ts
+++ b/packages/css-selector-parser/src/tokenizer.ts
@@ -1,72 +1,69 @@
 import {
-  tokenize,
-  isStringDelimiter,
-  isWhitespace,
-  createToken,
-  getJSCommentStartType,
-  getMultilineCommentStartType,
-  isCommentEnd,
-  getUnclosedComment,
-} from "@tokey/core";
-import type { Token, Descriptors } from "@tokey/core";
+    tokenize,
+    isStringDelimiter,
+    isWhitespace,
+    createToken,
+    getJSCommentStartType,
+    getMultilineCommentStartType,
+    isCommentEnd,
+    getUnclosedComment,
+} from '@tokey/core';
+import type { Token, Descriptors } from '@tokey/core';
 
 type Delimiters =
-  | "["
-  | "]"
-  | "("
-  | ")"
-  | ","
-  | "*"
-  | "|"
-  | ":"
-  | "."
-  | "#"
-  | ">"
-  | "~"
-  | "+"
-  | "{"
-  | "}"
-  | "&";
+    | '['
+    | ']'
+    | '('
+    | ')'
+    | ','
+    | '*'
+    | '|'
+    | ':'
+    | '.'
+    | '#'
+    | '>'
+    | '~'
+    | '+'
+    | '{'
+    | '}'
+    | '&';
 
 export type CSSSelectorToken = Token<Descriptors | Delimiters>;
 
-export function tokenizeSelector(
-  source: string,
-  options: { offset?: number } = {}
-) {
-  const parseLineComments = false; // why would that be a choice?
-  return tokenize<CSSSelectorToken>(source, {
-    isDelimiter,
-    isStringDelimiter(char: string, previousChar: string) {
-      return previousChar !== `\\` && isStringDelimiter(char);
-    },
-    isWhitespace,
-    shouldAddToken: () => true,
-    createToken,
-    getCommentStartType: parseLineComments
-      ? getJSCommentStartType
-      : getMultilineCommentStartType,
-    isCommentEnd,
-    getUnclosedComment,
-    offset: options.offset,
-  });
+export function tokenizeSelector(source: string, options: { offset?: number } = {}) {
+    const parseLineComments = false; // why would that be a choice?
+    return tokenize<CSSSelectorToken>(source, {
+        isDelimiter,
+        isStringDelimiter(char: string, previousChar: string) {
+            return previousChar !== `\\` && isStringDelimiter(char);
+        },
+        isWhitespace,
+        shouldAddToken: () => true,
+        createToken,
+        getCommentStartType: parseLineComments
+            ? getJSCommentStartType
+            : getMultilineCommentStartType,
+        isCommentEnd,
+        getUnclosedComment,
+        offset: options.offset,
+    });
 }
 
 const isDelimiter = (char: string, previousChar: string) =>
-  previousChar !== "\\" &&
-  (char === "[" ||
-    char === "]" ||
-    char === "(" ||
-    char === ")" ||
-    char === "," ||
-    char === "*" ||
-    char === "|" ||
-    char === ":" ||
-    char === "." ||
-    char === "#" ||
-    char === ">" ||
-    char === "~" ||
-    char === "+" ||
-    char === "{" ||
-    char === "}" ||
-    char === "&");
+    previousChar !== '\\' &&
+    (char === '[' ||
+        char === ']' ||
+        char === '(' ||
+        char === ')' ||
+        char === ',' ||
+        char === '*' ||
+        char === '|' ||
+        char === ':' ||
+        char === '.' ||
+        char === '#' ||
+        char === '>' ||
+        char === '~' ||
+        char === '+' ||
+        char === '{' ||
+        char === '}' ||
+        char === '&');
diff --git a/packages/css-selector-parser/src/types.ts b/packages/css-selector-parser/src/types.ts
index f9b15333..5ff4ee7d 100644
--- a/packages/css-selector-parser/src/types.ts
+++ b/packages/css-selector-parser/src/types.ts
@@ -1,13 +1,8 @@
 /**
  * convert object|array into a replica deep readonly type
  */
-export type Immutable<T> = T extends Function
-  ? T
-  : T extends object
-  ? ImmutableMap<T>
-  : T;
+export type Immutable<T> = T extends Function ? T : T extends object ? ImmutableMap<T> : T;
 
 type ImmutableMap<T> = {
-  readonly [P in keyof T]: Immutable<T[P]>;
+    readonly [P in keyof T]: Immutable<T[P]>;
 };
-
diff --git a/packages/css-selector-parser/test/ast-tools/compound.spec.ts b/packages/css-selector-parser/test/ast-tools/compound.spec.ts
index f84ac96f..62c7fae7 100644
--- a/packages/css-selector-parser/test/ast-tools/compound.spec.ts
+++ b/packages/css-selector-parser/test/ast-tools/compound.spec.ts
@@ -1,918 +1,911 @@
 import {
-  parseCssSelector,
-  groupCompoundSelectors,
-  splitCompoundSelectors,
-  SelectorList,
-  CommentWithNoSpacing,
-  ImmutableSelectorList,
-  ImmutableSelector,
-  Selector,
-  PseudoClass,
-  Nth,
-} from "@tokey/css-selector-parser";
-import { createNode } from "../test-kit/parsing";
-import { expect } from "chai";
+    parseCssSelector,
+    groupCompoundSelectors,
+    splitCompoundSelectors,
+    SelectorList,
+    CommentWithNoSpacing,
+    ImmutableSelectorList,
+    ImmutableSelector,
+    Selector,
+    PseudoClass,
+    Nth,
+} from '@tokey/css-selector-parser';
+import { createNode } from '../test-kit/parsing';
+import { expect } from 'chai';
 
 describe(`ast-tools/compound`, () => {
-  it(`should split a given selector list according to dom targets (by combinators)`, () => {
-    const ast = parseCssSelector(`.a .b`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 5,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 2,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+    it(`should split a given selector list according to dom targets (by combinators)`, () => {
+        const ast = parseCssSelector(`.a .b`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 2,
-              }),
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `space`,
-            value: ` `,
-            start: 2,
-            end: 3,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 3,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 3,
                 end: 5,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should split multiple selectors`, () => {
-    const ast = parseCssSelector(`.a,.b .c`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 2,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 2,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 2,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `space`,
+                        value: ` `,
+                        start: 2,
+                        end: 3,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 3,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 3,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should split multiple selectors`, () => {
+        const ast = parseCssSelector(`.a,.b .c`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
                 end: 2,
-              }),
-            ],
-          }),
-        ],
-      }),
-      createNode({
-        type: `selector`,
-        start: 3,
-        end: 8,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 3,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `b`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 2,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+            createNode({
+                type: `selector`,
                 start: 3,
-                end: 5,
-              }),
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `space`,
-            value: ` `,
-            start: 5,
-            end: 6,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 6,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `c`,
-                start: 6,
-                end: 8,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should keep track of selector spaces`, () => {
-    const ast = parseCssSelector(` .a , .b `);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 4,
-        before: ` `,
-        after: ` `,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 1,
-            end: 3,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 1,
-                end: 3,
-              }),
-            ],
-          }),
-        ],
-      }),
-      createNode({
-        type: `selector`,
-        start: 5,
-        end: 9,
-        before: ` `,
-        after: ` `,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 6,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 6,
                 end: 8,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should split on nesting selectors`, () => {
-    const ast = parseCssSelector(`&>&`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 3,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 1,
-            nodes: [
-              createNode({
-                type: `nesting`,
-                value: `&`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 3,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 3,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `space`,
+                        value: ` `,
+                        start: 5,
+                        end: 6,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 6,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `c`,
+                                start: 6,
+                                end: 8,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should keep track of selector spaces`, () => {
+        const ast = parseCssSelector(` .a , .b `);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
+                start: 0,
+                end: 4,
+                before: ` `,
+                after: ` `,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 1,
+                        end: 3,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 1,
+                                end: 3,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+            createNode({
+                type: `selector`,
+                start: 5,
+                end: 9,
+                before: ` `,
+                after: ` `,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 6,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 6,
+                                end: 8,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should split on nesting selectors`, () => {
+        const ast = parseCssSelector(`&>&`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 1,
-              }),
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `>`,
-            value: `>`,
-            start: 1,
-            end: 2,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 2,
-            end: 3,
-            nodes: [
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 2,
                 end: 3,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should split pseudo-elements by default`, () => {
-    const ast = parseCssSelector(`.a::b::c`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 8,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 2,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 1,
+                        nodes: [
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 0,
+                                end: 1,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `>`,
+                        value: `>`,
+                        start: 1,
+                        end: 2,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 2,
+                        end: 3,
+                        nodes: [
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 2,
+                                end: 3,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should split pseudo-elements by default`, () => {
+        const ast = parseCssSelector(`.a::b::c`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 2,
-              }),
-            ],
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 2,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `b`,
-                start: 2,
-                end: 5,
-              }),
-            ],
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 5,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `c`,
-                start: 5,
                 end: 8,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should configure no split for pseudo-elements (combined into target)`, () => {
-    const ast = parseCssSelector(`.a::b::c`);
-
-    const groupedSelectors = groupCompoundSelectors(ast, {
-      splitPseudoElements: false,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 2,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 2,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `b`,
+                                start: 2,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 5,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `c`,
+                                start: 5,
+                                end: 8,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
     });
+    it(`should configure no split for pseudo-elements (combined into target)`, () => {
+        const ast = parseCssSelector(`.a::b::c`);
+
+        const groupedSelectors = groupCompoundSelectors(ast, {
+            splitPseudoElements: false,
+        });
 
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 8,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 2,
-              }),
-              createNode({
-                type: `pseudo_element`,
-                value: `b`,
-                start: 2,
-                end: 5,
-              }),
-              createNode({
-                type: `pseudo_element`,
-                value: `c`,
-                start: 5,
                 end: 8,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should not split any other selectors`, () => {
-    const ast = parseCssSelector(`.a:hover[attr]+el.b#id`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 22,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 14,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `b`,
+                                start: 2,
+                                end: 5,
+                            }),
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `c`,
+                                start: 5,
+                                end: 8,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should not split any other selectors`, () => {
+        const ast = parseCssSelector(`.a:hover[attr]+el.b#id`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 2,
-              }),
-              createNode({
-                type: `pseudo_class`,
-                value: `hover`,
-                start: 2,
-                end: 8,
-              }),
-              createNode({
-                type: `attribute`,
-                value: `attr`,
-                start: 8,
-                end: 14,
-              }),
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `+`,
-            value: `+`,
-            start: 14,
-            end: 15,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 15,
-            end: 22,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `el`,
-                start: 15,
-                end: 17,
-              }),
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 17,
-                end: 19,
-              }),
-              createNode({
-                type: `id`,
-                value: `id`,
-                start: 19,
                 end: 22,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should return zero selectors for empty selector`, () => {
-    const ast = parseCssSelector(``);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should combine non breaking comments into the compound nodes`, () => {
-    const ast = parseCssSelector(`/*c1*/.a/*c2*/ /*c3*/.b/*c4*/`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 29,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 14,
-            nodes: [
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 14,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `hover`,
+                                start: 2,
+                                end: 8,
+                            }),
+                            createNode({
+                                type: `attribute`,
+                                value: `attr`,
+                                start: 8,
+                                end: 14,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `+`,
+                        value: `+`,
+                        start: 14,
+                        end: 15,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 15,
+                        end: 22,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `el`,
+                                start: 15,
+                                end: 17,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 17,
+                                end: 19,
+                            }),
+                            createNode({
+                                type: `id`,
+                                value: `id`,
+                                start: 19,
+                                end: 22,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should return zero selectors for empty selector`, () => {
+        const ast = parseCssSelector(``);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should combine non breaking comments into the compound nodes`, () => {
+        const ast = parseCssSelector(`/*c1*/.a/*c2*/ /*c3*/.b/*c4*/`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 6,
-              }) as CommentWithNoSpacing,
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 6,
-                end: 8,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c2*/`,
-                start: 8,
-                end: 14,
-              }) as CommentWithNoSpacing,
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `space`,
-            value: ` `,
-            start: 14,
-            end: 15,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 15,
-            end: 29,
-            nodes: [
-              createNode({
-                type: `comment`,
-                value: `/*c3*/`,
-                start: 15,
-                end: 21,
-              }) as CommentWithNoSpacing,
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 21,
-                end: 23,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c4*/`,
-                start: 23,
                 end: 29,
-              }) as CommentWithNoSpacing,
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should not split nested selectors`, () => {
-    const ast = parseCssSelector(`:has(.a .b)`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 11,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 11,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `has`,
-                start: 0,
-                end: 11,
                 nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 5,
-                    end: 10,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 5,
-                        end: 7,
-                      }),
-                      createNode({
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 14,
+                        nodes: [
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 0,
+                                end: 6,
+                            }) as CommentWithNoSpacing,
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 6,
+                                end: 8,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c2*/`,
+                                start: 8,
+                                end: 14,
+                            }) as CommentWithNoSpacing,
+                        ],
+                    }),
+                    createNode({
                         type: `combinator`,
                         combinator: `space`,
                         value: ` `,
+                        start: 14,
+                        end: 15,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 15,
+                        end: 29,
+                        nodes: [
+                            createNode({
+                                type: `comment`,
+                                value: `/*c3*/`,
+                                start: 15,
+                                end: 21,
+                            }) as CommentWithNoSpacing,
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 21,
+                                end: 23,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c4*/`,
+                                start: 23,
+                                end: 29,
+                            }) as CommentWithNoSpacing,
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should not split nested selectors`, () => {
+        const ast = parseCssSelector(`:has(.a .b)`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
+                start: 0,
+                end: 11,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 11,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `has`,
+                                start: 0,
+                                end: 11,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 5,
+                                        end: 10,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 5,
+                                                end: 7,
+                                            }),
+                                            createNode({
+                                                type: `combinator`,
+                                                combinator: `space`,
+                                                value: ` `,
+                                                start: 7,
+                                                end: 8,
+                                            }),
+                                            createNode({
+                                                type: `class`,
+                                                value: `b`,
+                                                start: 8,
+                                                end: 10,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should accept a single selector`, () => {
+        const ast = parseCssSelector(`.a .b, .c~.d`);
+
+        const groupedSelector = groupCompoundSelectors(ast[1]);
+
+        expect(groupedSelector, `group`).to.eql(
+            createNode({
+                type: `selector`,
+                start: 6,
+                end: 12,
+                before: ` `,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
                         start: 7,
-                        end: 8,
-                      }),
-                      createNode({
-                        type: `class`,
-                        value: `b`,
-                        start: 8,
+                        end: 9,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `c`,
+                                start: 7,
+                                end: 9,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `~`,
+                        value: `~`,
+                        start: 9,
                         end: 10,
-                      }),
-                    ],
-                  }),
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 10,
+                        end: 12,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `d`,
+                                start: 10,
+                                end: 12,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should accept a single selector`, () => {
-    const ast = parseCssSelector(`.a .b, .c~.d`);
-
-    const groupedSelector = groupCompoundSelectors(ast[1]);
-
-    expect(groupedSelector, `group`).to.eql(
-      createNode({
-        type: `selector`,
-        start: 6,
-        end: 12,
-        before: ` `,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 7,
-            end: 9,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `c`,
-                start: 7,
-                end: 9,
-              }),
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `~`,
-            value: `~`,
-            start: 9,
-            end: 10,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 10,
-            end: 12,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `d`,
-                start: 10,
-                end: 12,
-              }),
-            ],
-          }),
-        ],
-      })
-    );
-    expect(splitCompoundSelectors(groupedSelector), `split`).to.eql(ast[1]);
-  });
-  it(`should accept readonly value and return readonly accordingly (type checks)`, () => {
-    function expectType<T>(_actual: T) {
-      /**/
-    }
-    const immutable = parseCssSelector(`.a .b`) as ImmutableSelectorList;
-    expectType<ImmutableSelector>(groupCompoundSelectors(immutable[0]));
-    expectType<ImmutableSelectorList>(groupCompoundSelectors(immutable));
-    expectType<ImmutableSelector>(splitCompoundSelectors(immutable[0]));
-    expectType<ImmutableSelectorList>(splitCompoundSelectors(immutable));
-
-    const mutable = parseCssSelector(`.a .b`);
-    expectType<Selector>(groupCompoundSelectors(mutable[0]));
-    expectType<SelectorList>(groupCompoundSelectors(mutable));
-    expectType<Selector>(splitCompoundSelectors(mutable[0]));
-    expectType<SelectorList>(splitCompoundSelectors(mutable));
-  });
-  it(`should set invalid flag on compound with universal or type not at the start`, () => {
-    const ast = parseCssSelector(`.a*`);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 3,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 3,
-            invalid: true,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+            })
+        );
+        expect(splitCompoundSelectors(groupedSelector), `split`).to.eql(ast[1]);
+    });
+    it(`should accept readonly value and return readonly accordingly (type checks)`, () => {
+        function expectType<T>(_actual: T) {
+            /**/
+        }
+        const immutable = parseCssSelector(`.a .b`) as ImmutableSelectorList;
+        expectType<ImmutableSelector>(groupCompoundSelectors(immutable[0]));
+        expectType<ImmutableSelectorList>(groupCompoundSelectors(immutable));
+        expectType<ImmutableSelector>(splitCompoundSelectors(immutable[0]));
+        expectType<ImmutableSelectorList>(splitCompoundSelectors(immutable));
+
+        const mutable = parseCssSelector(`.a .b`);
+        expectType<Selector>(groupCompoundSelectors(mutable[0]));
+        expectType<SelectorList>(groupCompoundSelectors(mutable));
+        expectType<Selector>(splitCompoundSelectors(mutable[0]));
+        expectType<SelectorList>(splitCompoundSelectors(mutable));
+    });
+    it(`should set invalid flag on compound with universal or type not at the start`, () => {
+        const ast = parseCssSelector(`.a*`);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 2,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 2,
                 end: 3,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
-  it(`should flat selectors and compound selectors into compound`, () => {
-    const selector = parseCssSelector(`.x.y`)[0];
-    const compound = groupCompoundSelectors(parseCssSelector(`.q.t`)[0])
-      .nodes[0];
-    const ast = parseCssSelector(`.a`);
-    ast[0].nodes.push(selector, compound);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 2,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 4,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 0,
-                end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `x`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 3,
+                        invalid: true,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 2,
+                                end: 3,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
+    it(`should flat selectors and compound selectors into compound`, () => {
+        const selector = parseCssSelector(`.x.y`)[0];
+        const compound = groupCompoundSelectors(parseCssSelector(`.q.t`)[0]).nodes[0];
+        const ast = parseCssSelector(`.a`);
+        ast[0].nodes.push(selector, compound);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
                 end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `y`,
-                start: 2,
-                end: 4,
-              }),
-              createNode({
-                type: `class`,
-                value: `q`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 4,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `x`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `y`,
+                                start: 2,
+                                end: 4,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `q`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `t`,
+                                start: 2,
+                                end: 4,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split cannot reconstruct`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
                 end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `t`,
-                start: 2,
-                end: 4,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(
-      splitCompoundSelectors(groupedSelectors),
-      `split cannot reconstruct`
-    ).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 2,
-        nodes: [
-          createNode({
-            type: `class`,
-            value: `a`,
-            start: 0,
-            end: 2,
-          }),
-          createNode({
-            type: `class`,
-            value: `x`,
-            start: 0,
-            end: 2,
-          }),
-          createNode({
-            type: `class`,
-            value: `y`,
-            start: 2,
-            end: 4,
-          }),
-          createNode({
-            type: `class`,
-            value: `q`,
-            start: 0,
-            end: 2,
-          }),
-          createNode({
-            type: `class`,
-            value: `t`,
-            start: 2,
-            end: 4,
-          }),
-        ],
-      }),
-    ]);
-  });
-  it(`should flat selectors multiple into compounds`, () => {
-    const selector = parseCssSelector(`.x .y`)[0];
-    const ast = parseCssSelector(`.a`);
-    ast[0].nodes.push(selector);
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 2,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 2,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+                nodes: [
+                    createNode({
+                        type: `class`,
+                        value: `a`,
+                        start: 0,
+                        end: 2,
+                    }),
+                    createNode({
+                        type: `class`,
+                        value: `x`,
+                        start: 0,
+                        end: 2,
+                    }),
+                    createNode({
+                        type: `class`,
+                        value: `y`,
+                        start: 2,
+                        end: 4,
+                    }),
+                    createNode({
+                        type: `class`,
+                        value: `q`,
+                        start: 0,
+                        end: 2,
+                    }),
+                    createNode({
+                        type: `class`,
+                        value: `t`,
+                        start: 2,
+                        end: 4,
+                    }),
+                ],
+            }),
+        ]);
+    });
+    it(`should flat selectors multiple into compounds`, () => {
+        const selector = parseCssSelector(`.x .y`)[0];
+        const ast = parseCssSelector(`.a`);
+        ast[0].nodes.push(selector);
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
                 end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `x`,
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 2,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `x`,
+                                start: 0,
+                                end: 2,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `space`,
+                        value: ` `,
+                        start: 2,
+                        end: 3,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 3,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `y`,
+                                start: 3,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split cannot reconstruct`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
                 end: 2,
-              }),
-            ],
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `space`,
-            value: ` `,
-            start: 2,
-            end: 3,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 3,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `y`,
-                start: 3,
-                end: 5,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(
-      splitCompoundSelectors(groupedSelectors),
-      `split cannot reconstruct`
-    ).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 2,
-        nodes: [
-          createNode({
-            type: `class`,
-            value: `a`,
-            start: 0,
-            end: 2,
-          }),
-          createNode({
-            type: `class`,
-            value: `x`,
-            start: 0,
-            end: 2,
-          }),
-          createNode({
-            type: `combinator`,
-            combinator: `space`,
-            value: ` `,
-            start: 2,
-            end: 3,
-          }),
-          createNode({
-            type: `class`,
-            value: `y`,
-            start: 3,
-            end: 5,
-          }),
-        ],
-      }),
-    ]);
-  });
-  it(`should keep out-of-context nodes out of compound selector`, () => {
-    const nthSelector = parseCssSelector(`:nth-child(5n- 4 of)`)[0];
-    const nth = (nthSelector.nodes[0] as PseudoClass).nodes![0] as Nth;
-    const ast = parseCssSelector(`.a.b`);
-    // create broken selector: ".a5n - 4 of.b"
-    ast[0].nodes.splice(1, 0, nth, ...nth.nodes);
-    nth.nodes.length = 0;
-
-    const groupedSelectors = groupCompoundSelectors(ast);
-
-    expect(groupedSelectors, `group`).to.eql([
-      createNode({
-        type: `selector`,
-        start: 0,
-        end: 4,
-        nodes: [
-          createNode({
-            type: `compound_selector`,
-            start: 0,
-            end: 2,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
+                nodes: [
+                    createNode({
+                        type: `class`,
+                        value: `a`,
+                        start: 0,
+                        end: 2,
+                    }),
+                    createNode({
+                        type: `class`,
+                        value: `x`,
+                        start: 0,
+                        end: 2,
+                    }),
+                    createNode({
+                        type: `combinator`,
+                        combinator: `space`,
+                        value: ` `,
+                        start: 2,
+                        end: 3,
+                    }),
+                    createNode({
+                        type: `class`,
+                        value: `y`,
+                        start: 3,
+                        end: 5,
+                    }),
+                ],
+            }),
+        ]);
+    });
+    it(`should keep out-of-context nodes out of compound selector`, () => {
+        const nthSelector = parseCssSelector(`:nth-child(5n- 4 of)`)[0];
+        const nth = (nthSelector.nodes[0] as PseudoClass).nodes![0] as Nth;
+        const ast = parseCssSelector(`.a.b`);
+        // create broken selector: ".a5n - 4 of.b"
+        ast[0].nodes.splice(1, 0, nth, ...nth.nodes);
+        nth.nodes.length = 0;
+
+        const groupedSelectors = groupCompoundSelectors(ast);
+
+        expect(groupedSelectors, `group`).to.eql([
+            createNode({
+                type: `selector`,
                 start: 0,
-                end: 2,
-              }),
-            ],
-          }),
-          createNode({
-            type: `nth`,
-            start: 11,
-            end: 19,
-            nodes: [],
-          }),
-          createNode({
-            type: `nth_step`,
-            value: `5n`,
-            start: 11,
-            end: 13,
-          }),
-          createNode({
-            type: `nth_dash`,
-            value: `-`,
-            start: 13,
-            end: 15,
-            after: ` `,
-          }),
-          createNode({
-            type: `nth_offset`,
-            value: `4`,
-            start: 15,
-            end: 17,
-            after: ` `,
-          }),
-          createNode({
-            type: `nth_of`,
-            value: `of`,
-            start: 17,
-            end: 19,
-          }),
-          createNode({
-            type: `compound_selector`,
-            start: 2,
-            end: 4,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 2,
                 end: 4,
-              }),
-            ],
-          }),
-        ],
-      }),
-    ]);
-    expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
-  });
+                nodes: [
+                    createNode({
+                        type: `compound_selector`,
+                        start: 0,
+                        end: 2,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 2,
+                            }),
+                        ],
+                    }),
+                    createNode({
+                        type: `nth`,
+                        start: 11,
+                        end: 19,
+                        nodes: [],
+                    }),
+                    createNode({
+                        type: `nth_step`,
+                        value: `5n`,
+                        start: 11,
+                        end: 13,
+                    }),
+                    createNode({
+                        type: `nth_dash`,
+                        value: `-`,
+                        start: 13,
+                        end: 15,
+                        after: ` `,
+                    }),
+                    createNode({
+                        type: `nth_offset`,
+                        value: `4`,
+                        start: 15,
+                        end: 17,
+                        after: ` `,
+                    }),
+                    createNode({
+                        type: `nth_of`,
+                        value: `of`,
+                        start: 17,
+                        end: 19,
+                    }),
+                    createNode({
+                        type: `compound_selector`,
+                        start: 2,
+                        end: 4,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 2,
+                                end: 4,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ]);
+        expect(splitCompoundSelectors(groupedSelectors), `split`).to.eql(ast);
+    });
 });
diff --git a/packages/css-selector-parser/test/ast-tools/specificity.spec.ts b/packages/css-selector-parser/test/ast-tools/specificity.spec.ts
index 15b918c6..3cfa56fb 100644
--- a/packages/css-selector-parser/test/ast-tools/specificity.spec.ts
+++ b/packages/css-selector-parser/test/ast-tools/specificity.spec.ts
@@ -1,203 +1,175 @@
 import {
-  calcSpecificity,
-  compareSpecificity,
-  groupCompoundSelectors,
-  parseCssSelector,
-  ImmutableSelectorNode,
-} from "@tokey/css-selector-parser";
-import { expect } from "chai";
+    calcSpecificity,
+    compareSpecificity,
+    groupCompoundSelectors,
+    parseCssSelector,
+    ImmutableSelectorNode,
+} from '@tokey/css-selector-parser';
+import { expect } from 'chai';
 
 describe(`ast-tools/specificity`, () => {
-  describe(`calcSpecificity`, () => {
-    const basicSelectors = [
-      {
-        selectorType: `universal`,
-        selector: `*`,
-        expected: [0, 0, 0, 0],
-      },
-      {
-        selectorType: `type`,
-        selector: `span`,
-        expected: [0, 0, 0, 1],
-      },
-      {
-        selectorType: `pseudo-element`,
-        selector: `::before`,
-        expected: [0, 0, 0, 1],
-      },
-      {
-        selectorType: `class`,
-        selector: `.a`,
-        expected: [0, 0, 1, 0],
-      },
-      {
-        selectorType: `attribute`,
-        selector: `[attr]`,
-        expected: [0, 0, 1, 0],
-      },
-      {
-        selectorType: `pseudo-class`,
-        selector: `:hover`,
-        expected: [0, 0, 1, 0],
-      },
-      {
-        selectorType: `id`,
-        selector: `#a`,
-        expected: [0, 1, 0, 0],
-      },
-      {
-        selectorType: `nested`,
-        selector: `&`,
-        expected: [0, 0, 0, 0],
-      },
-    ];
-    describe(`basic selectors`, () => {
-      basicSelectors.forEach(({ selectorType, selector, expected }) => {
-        it(`should return correct specificity for ${selectorType} selector`, () => {
-          const specificity = calcSpecificity(parseCssSelector(selector)[0]);
-          expect(specificity).to.eql(expected);
+    describe(`calcSpecificity`, () => {
+        const basicSelectors = [
+            {
+                selectorType: `universal`,
+                selector: `*`,
+                expected: [0, 0, 0, 0],
+            },
+            {
+                selectorType: `type`,
+                selector: `span`,
+                expected: [0, 0, 0, 1],
+            },
+            {
+                selectorType: `pseudo-element`,
+                selector: `::before`,
+                expected: [0, 0, 0, 1],
+            },
+            {
+                selectorType: `class`,
+                selector: `.a`,
+                expected: [0, 0, 1, 0],
+            },
+            {
+                selectorType: `attribute`,
+                selector: `[attr]`,
+                expected: [0, 0, 1, 0],
+            },
+            {
+                selectorType: `pseudo-class`,
+                selector: `:hover`,
+                expected: [0, 0, 1, 0],
+            },
+            {
+                selectorType: `id`,
+                selector: `#a`,
+                expected: [0, 1, 0, 0],
+            },
+            {
+                selectorType: `nested`,
+                selector: `&`,
+                expected: [0, 0, 0, 0],
+            },
+        ];
+        describe(`basic selectors`, () => {
+            basicSelectors.forEach(({ selectorType, selector, expected }) => {
+                it(`should return correct specificity for ${selectorType} selector`, () => {
+                    const specificity = calcSpecificity(parseCssSelector(selector)[0]);
+                    expect(specificity).to.eql(expected);
+                });
+            });
         });
-      });
-    });
-    describe(`special cases`, () => {
-      it(`should only add the most specific inner selector for :not()`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:not(.a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 0, 0]);
-      });
-      it(`should only add the most specific inner selector for :is()`, () => {
-        const specificity = calcSpecificity(parseCssSelector(`:is(.a, #b)`)[0]);
-        expect(specificity).to.eql([0, 1, 0, 0]);
-      });
-      it(`should only add the most specific inner selector for :has()`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:has(.a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 0, 0]);
-      });
-      it(`should add zero specificity for :where()`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:where(.a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 0, 0, 0]);
-      });
-      it(`should add :nth-child pseudo-class plus the most specific inner selectors`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:nth-child(5n - 4 of .a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 1, 0]);
-      });
-      it(`should add :nth-last-child pseudo-class plus the most specific inner selectors`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:nth-last-child(5n -4 of .a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 1, 0]);
-      });
-      it(`should add :nth-of-type pseudo-class plus the most specific inner selectors`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:nth-of-type(5n -4 of .a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 1, 0]);
-      });
-      it(`should add :nth-last-of-type pseudo-class plus the most specific inner selectors`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:nth-last-of-type(5n -4 of .a, #b)`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 1, 0]);
-      });
-    });
-    describe(`complex selectors`, () => {
-      it(`should not add specificity for combinators`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`.a + .b ~ .c > .d .e`)[0]
-        );
-        expect(specificity).to.eql([0, 0, 5, 0]);
-      });
-      it(`should handle nested pseudo classes`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`:is(:where(#zero), :has(:not(span, #a), .a))`)[0]
-        );
-        expect(specificity).to.eql([0, 1, 0, 0]);
-      });
-      it(`should not add specificity for comments`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(`/*c1*/./*c2*/a/*c3*/`)[0]
-        );
-        expect(specificity).to.eql([0, 0, 1, 0]);
-      });
-      it(`should not add specificity for invalid`, () => {
-        const specificity = calcSpecificity(parseCssSelector(`:a(`)[0]);
-        expect(specificity).to.eql([0, 0, 1, 0]);
-      });
-      it(`should not take non native functional selectors arguments into account`, () => {
-        const specificity = calcSpecificity(
-          parseCssSelector(
-            `div(#a).x(#b)::y(#c)[attr](#d)&(#e)*(#f)#id(#g):unknown(#h)`
-          )[0]
-        );
-        expect(specificity).to.eql([0, 1, 3, 2]);
-      });
-      it(`should handle compound selector AST`, () => {
-        const specificity = calcSpecificity(
-          groupCompoundSelectors(parseCssSelector(`.a .b`)[0])
-        );
-        expect(specificity).to.eql([0, 0, 2, 0]);
-      });
-      it(`should handle empty functional selector`, () => {
-        const specificity = calcSpecificity(
-          groupCompoundSelectors(parseCssSelector(`div:not()`)[0])
-        );
-        expect(specificity).to.eql([0, 0, 0, 1]);
-      });
-    });
-    describe(`accepted values`, () => {
-      basicSelectors.forEach(({ selectorType, selector, expected }) => {
-        it(`should accept ${selectorType} selector AST`, () => {
-          const basicNode = parseCssSelector(selector)[0].nodes[0];
-          const specificity = calcSpecificity(basicNode);
-          expect(specificity).to.eql(expected);
+        describe(`special cases`, () => {
+            it(`should only add the most specific inner selector for :not()`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`:not(.a, #b)`)[0]);
+                expect(specificity).to.eql([0, 1, 0, 0]);
+            });
+            it(`should only add the most specific inner selector for :is()`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`:is(.a, #b)`)[0]);
+                expect(specificity).to.eql([0, 1, 0, 0]);
+            });
+            it(`should only add the most specific inner selector for :has()`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`:has(.a, #b)`)[0]);
+                expect(specificity).to.eql([0, 1, 0, 0]);
+            });
+            it(`should add zero specificity for :where()`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`:where(.a, #b)`)[0]);
+                expect(specificity).to.eql([0, 0, 0, 0]);
+            });
+            it(`should add :nth-child pseudo-class plus the most specific inner selectors`, () => {
+                const specificity = calcSpecificity(
+                    parseCssSelector(`:nth-child(5n - 4 of .a, #b)`)[0]
+                );
+                expect(specificity).to.eql([0, 1, 1, 0]);
+            });
+            it(`should add :nth-last-child pseudo-class plus the most specific inner selectors`, () => {
+                const specificity = calcSpecificity(
+                    parseCssSelector(`:nth-last-child(5n -4 of .a, #b)`)[0]
+                );
+                expect(specificity).to.eql([0, 1, 1, 0]);
+            });
+            it(`should add :nth-of-type pseudo-class plus the most specific inner selectors`, () => {
+                const specificity = calcSpecificity(
+                    parseCssSelector(`:nth-of-type(5n -4 of .a, #b)`)[0]
+                );
+                expect(specificity).to.eql([0, 1, 1, 0]);
+            });
+            it(`should add :nth-last-of-type pseudo-class plus the most specific inner selectors`, () => {
+                const specificity = calcSpecificity(
+                    parseCssSelector(`:nth-last-of-type(5n -4 of .a, #b)`)[0]
+                );
+                expect(specificity).to.eql([0, 1, 1, 0]);
+            });
         });
-      });
-      it(`should accept readonly value (type checks)`, () => {
-        const immutable = parseCssSelector(`.a .b`)[0] as ImmutableSelectorNode;
-        calcSpecificity(immutable);
+        describe(`complex selectors`, () => {
+            it(`should not add specificity for combinators`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`.a + .b ~ .c > .d .e`)[0]);
+                expect(specificity).to.eql([0, 0, 5, 0]);
+            });
+            it(`should handle nested pseudo classes`, () => {
+                const specificity = calcSpecificity(
+                    parseCssSelector(`:is(:where(#zero), :has(:not(span, #a), .a))`)[0]
+                );
+                expect(specificity).to.eql([0, 1, 0, 0]);
+            });
+            it(`should not add specificity for comments`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`/*c1*/./*c2*/a/*c3*/`)[0]);
+                expect(specificity).to.eql([0, 0, 1, 0]);
+            });
+            it(`should not add specificity for invalid`, () => {
+                const specificity = calcSpecificity(parseCssSelector(`:a(`)[0]);
+                expect(specificity).to.eql([0, 0, 1, 0]);
+            });
+            it(`should not take non native functional selectors arguments into account`, () => {
+                const specificity = calcSpecificity(
+                    parseCssSelector(
+                        `div(#a).x(#b)::y(#c)[attr](#d)&(#e)*(#f)#id(#g):unknown(#h)`
+                    )[0]
+                );
+                expect(specificity).to.eql([0, 1, 3, 2]);
+            });
+            it(`should handle compound selector AST`, () => {
+                const specificity = calcSpecificity(
+                    groupCompoundSelectors(parseCssSelector(`.a .b`)[0])
+                );
+                expect(specificity).to.eql([0, 0, 2, 0]);
+            });
+            it(`should handle empty functional selector`, () => {
+                const specificity = calcSpecificity(
+                    groupCompoundSelectors(parseCssSelector(`div:not()`)[0])
+                );
+                expect(specificity).to.eql([0, 0, 0, 1]);
+            });
+        });
+        describe(`accepted values`, () => {
+            basicSelectors.forEach(({ selectorType, selector, expected }) => {
+                it(`should accept ${selectorType} selector AST`, () => {
+                    const basicNode = parseCssSelector(selector)[0].nodes[0];
+                    const specificity = calcSpecificity(basicNode);
+                    expect(specificity).to.eql(expected);
+                });
+            });
+            it(`should accept readonly value (type checks)`, () => {
+                const immutable = parseCssSelector(`.a .b`)[0] as ImmutableSelectorNode;
+                calcSpecificity(immutable);
 
-        const mutable = parseCssSelector(`.a .b`)[0];
-        calcSpecificity(mutable);
-      });
-    });
-  });
-  describe(`compareSpecificity`, () => {
-    it(`should return 0 when equal`, () => {
-      expect(
-        compareSpecificity([0, 0, 0, 0], [0, 0, 0, 0]),
-        `all zeros`
-      ).to.equal(0);
-      expect(
-        compareSpecificity([5, 4, 3, 2], [5, 4, 3, 2]),
-        `complex`
-      ).to.equal(0);
-    });
-    it(`should return 1 when first specificity is higher`, () => {
-      expect(
-        compareSpecificity([1, 0, 0, 0], [0, 9, 0, 0]),
-        `higher place`
-      ).to.equal(1);
-      expect(
-        compareSpecificity([0, 5, 0, 0], [0, 4, 0, 0]),
-        `higher value`
-      ).to.equal(1);
+                const mutable = parseCssSelector(`.a .b`)[0];
+                calcSpecificity(mutable);
+            });
+        });
     });
-    it(`should return -1 when second specificity is higher`, () => {
-      expect(
-        compareSpecificity([0, 9, 0, 0], [1, 0, 0, 0]),
-        `higher place`
-      ).to.equal(-1);
-      expect(
-        compareSpecificity([0, 4, 0, 0], [0, 5, 0, 0]),
-        `higher value`
-      ).to.equal(-1);
+    describe(`compareSpecificity`, () => {
+        it(`should return 0 when equal`, () => {
+            expect(compareSpecificity([0, 0, 0, 0], [0, 0, 0, 0]), `all zeros`).to.equal(0);
+            expect(compareSpecificity([5, 4, 3, 2], [5, 4, 3, 2]), `complex`).to.equal(0);
+        });
+        it(`should return 1 when first specificity is higher`, () => {
+            expect(compareSpecificity([1, 0, 0, 0], [0, 9, 0, 0]), `higher place`).to.equal(1);
+            expect(compareSpecificity([0, 5, 0, 0], [0, 4, 0, 0]), `higher value`).to.equal(1);
+        });
+        it(`should return -1 when second specificity is higher`, () => {
+            expect(compareSpecificity([0, 9, 0, 0], [1, 0, 0, 0]), `higher place`).to.equal(-1);
+            expect(compareSpecificity([0, 4, 0, 0], [0, 5, 0, 0]), `higher value`).to.equal(-1);
+        });
     });
-  });
 });
diff --git a/packages/css-selector-parser/test/ast-tools/walk.spec.ts b/packages/css-selector-parser/test/ast-tools/walk.spec.ts
index ab8d8089..2f65b314 100644
--- a/packages/css-selector-parser/test/ast-tools/walk.spec.ts
+++ b/packages/css-selector-parser/test/ast-tools/walk.spec.ts
@@ -1,491 +1,479 @@
 import {
-  parseCssSelector,
-  walk,
-  WalkOptions,
-  groupCompoundSelectors,
-  SelectorNode,
-  SelectorList,
-  ImmutableSelectorList,
-  ImmutableSelectorNode,
-} from "@tokey/css-selector-parser";
-import { isMatch } from "@tokey/test-kit";
+    parseCssSelector,
+    walk,
+    WalkOptions,
+    groupCompoundSelectors,
+    SelectorNode,
+    SelectorList,
+    ImmutableSelectorList,
+    ImmutableSelectorNode,
+} from '@tokey/css-selector-parser';
+import { isMatch } from '@tokey/test-kit';
 
 function testWalk(
-  topNode: SelectorNode | SelectorList,
-  {
-    walkOptions,
-    mapVisit,
-    resultVisit,
-    expectedMap,
-  }: {
-    walkOptions?: WalkOptions;
-    mapVisit: (
-      node: SelectorNode,
-      index: number,
-      nodes: SelectorNode[],
-      parents: SelectorNode[]
-    ) => any;
-    resultVisit?: (
-      node: SelectorNode,
-      index: number,
-      nodes: SelectorNode[],
-      parents: SelectorNode[]
-    ) => number | undefined;
-    expectedMap: any[];
-  }
+    topNode: SelectorNode | SelectorList,
+    {
+        walkOptions,
+        mapVisit,
+        resultVisit,
+        expectedMap,
+    }: {
+        walkOptions?: WalkOptions;
+        mapVisit: (
+            node: SelectorNode,
+            index: number,
+            nodes: SelectorNode[],
+            parents: SelectorNode[]
+        ) => any;
+        resultVisit?: (
+            node: SelectorNode,
+            index: number,
+            nodes: SelectorNode[],
+            parents: SelectorNode[]
+        ) => number | undefined;
+        expectedMap: any[];
+    }
 ) {
-  const actual: any[] = [];
-  try {
-    walk(
-      topNode,
-      (
-        current: SelectorNode,
-        index: number,
-        nodes: SelectorNode[],
-        parents: SelectorNode[]
-      ) => {
-        actual.push(
-          mapVisit ? mapVisit(current, index, nodes, parents) : current
+    const actual: any[] = [];
+    try {
+        walk(
+            topNode,
+            (
+                current: SelectorNode,
+                index: number,
+                nodes: SelectorNode[],
+                parents: SelectorNode[]
+            ) => {
+                actual.push(mapVisit ? mapVisit(current, index, nodes, parents) : current);
+                return resultVisit ? resultVisit(current, index, nodes, parents) : undefined;
+            },
+            walkOptions
         );
-        return resultVisit
-          ? resultVisit(current, index, nodes, parents)
-          : undefined;
-      },
-      walkOptions
-    );
-  } catch (e) {
-    throw new Error(`error in walk, ${e}`);
-  }
-  if (!isMatch(actual, expectedMap)) {
-    const e = JSON.stringify(expectedMap, null, 2);
-    const a = JSON.stringify(actual, null, 2);
-    throw new Error(`Fail walk: \n${a}\nTo\n${e}`);
-  }
+    } catch (e) {
+        throw new Error(`error in walk, ${e}`);
+    }
+    if (!isMatch(actual, expectedMap)) {
+        const e = JSON.stringify(expectedMap, null, 2);
+        const a = JSON.stringify(actual, null, 2);
+        throw new Error(`Fail walk: \n${a}\nTo\n${e}`);
+    }
 }
 
 describe(`ast-tools/walk`, () => {
-  it(`should visit nodes`, () => {
-    testWalk(parseCssSelector(`.a#b`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `a` },
-        { type: `id`, value: `b` },
-      ],
+    it(`should visit nodes`, () => {
+        testWalk(parseCssSelector(`.a#b`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `a` },
+                { type: `id`, value: `b` },
+            ],
+        });
     });
-  });
-  it(`should not visit specified types`, () => {
-    testWalk(parseCssSelector(`.a#b.c`), {
-      walkOptions: {
-        ignoreList: ["selector", `id`],
-      },
-      mapVisit: ({ type, value }: any, index) => ({ type, value, index }),
-      expectedMap: [
-        { type: `class`, value: `a`, index: 0 },
-        { type: `class`, value: `c`, index: 2 },
-      ],
+    it(`should not visit specified types`, () => {
+        testWalk(parseCssSelector(`.a#b.c`), {
+            walkOptions: {
+                ignoreList: ['selector', `id`],
+            },
+            mapVisit: ({ type, value }: any, index) => ({ type, value, index }),
+            expectedMap: [
+                { type: `class`, value: `a`, index: 0 },
+                { type: `class`, value: `c`, index: 2 },
+            ],
+        });
     });
-  });
-  it(`should visit only specified types`, () => {
-    testWalk(parseCssSelector(`.a#b.c #d`), {
-      walkOptions: {
-        visitList: [`id`],
-      },
-      mapVisit: ({ type, value }: any, index) => ({ type, value, index }),
-      expectedMap: [
-        { type: `id`, value: `b`, index: 1 },
-        { type: `id`, value: `d`, index: 4 },
-      ],
+    it(`should visit only specified types`, () => {
+        testWalk(parseCssSelector(`.a#b.c #d`), {
+            walkOptions: {
+                visitList: [`id`],
+            },
+            mapVisit: ({ type, value }: any, index) => ({ type, value, index }),
+            expectedMap: [
+                { type: `id`, value: `b`, index: 1 },
+                { type: `id`, value: `d`, index: 4 },
+            ],
+        });
     });
-  });
-  it(`should visit combinators`, () => {
-    testWalk(parseCssSelector(`.a + .b`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `a` },
-        { type: `combinator`, value: `+` },
-        { type: `class`, value: `b` },
-      ],
+    it(`should visit combinators`, () => {
+        testWalk(parseCssSelector(`.a + .b`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `a` },
+                { type: `combinator`, value: `+` },
+                { type: `class`, value: `b` },
+            ],
+        });
     });
-  });
-  it(`should visit all basic selector types`, () => {
-    testWalk(parseCssSelector(`*.a + :b > ::c ~ #d[e] /*f*/`), {
-      walkOptions: {
-        ignoreList: [`selector`],
-      },
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      expectedMap: [
-        { type: `universal`, value: `*` },
-        { type: `class`, value: `a` },
-        { type: `combinator`, value: `+` },
-        { type: `pseudo_class`, value: `b` },
-        { type: `combinator`, value: `>` },
-        { type: `pseudo_element`, value: `c` },
-        { type: `combinator`, value: `~` },
-        { type: `id`, value: `d` },
-        { type: `attribute`, value: `e` },
-        { type: `comment`, value: `/*f*/` },
-      ],
+    it(`should visit all basic selector types`, () => {
+        testWalk(parseCssSelector(`*.a + :b > ::c ~ #d[e] /*f*/`), {
+            walkOptions: {
+                ignoreList: [`selector`],
+            },
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            expectedMap: [
+                { type: `universal`, value: `*` },
+                { type: `class`, value: `a` },
+                { type: `combinator`, value: `+` },
+                { type: `pseudo_class`, value: `b` },
+                { type: `combinator`, value: `>` },
+                { type: `pseudo_element`, value: `c` },
+                { type: `combinator`, value: `~` },
+                { type: `id`, value: `d` },
+                { type: `attribute`, value: `e` },
+                { type: `comment`, value: `/*f*/` },
+            ],
+        });
     });
-  });
-  it(`should visit nested`, () => {
-    testWalk(parseCssSelector(`:a(::b(.c(d(x))), y) + z`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `a` },
-        { type: `selector`, value: undefined },
-        { type: `pseudo_element`, value: `b` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `c` },
-        { type: `selector`, value: undefined },
-        { type: `type`, value: `d` },
-        { type: `selector`, value: undefined },
-        { type: `type`, value: `x` },
-        { type: `selector`, value: undefined },
-        { type: `type`, value: `y` },
-        { type: `combinator`, value: `+` },
-        { type: `type`, value: `z` },
-      ],
+    it(`should visit nested`, () => {
+        testWalk(parseCssSelector(`:a(::b(.c(d(x))), y) + z`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `a` },
+                { type: `selector`, value: undefined },
+                { type: `pseudo_element`, value: `b` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `c` },
+                { type: `selector`, value: undefined },
+                { type: `type`, value: `d` },
+                { type: `selector`, value: undefined },
+                { type: `type`, value: `x` },
+                { type: `selector`, value: undefined },
+                { type: `type`, value: `y` },
+                { type: `combinator`, value: `+` },
+                { type: `type`, value: `z` },
+            ],
+        });
     });
-  });
-  it(`should visit compound selectors`, () => {
-    testWalk(groupCompoundSelectors(parseCssSelector(`.a.b .c.d`)), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `compound_selector`, value: undefined },
-        { type: `class`, value: `a` },
-        { type: `class`, value: `b` },
-        { type: `combinator`, value: ` ` },
-        { type: `compound_selector`, value: undefined },
-        { type: `class`, value: `c` },
-        { type: `class`, value: `d` },
-      ],
+    it(`should visit compound selectors`, () => {
+        testWalk(groupCompoundSelectors(parseCssSelector(`.a.b .c.d`)), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `compound_selector`, value: undefined },
+                { type: `class`, value: `a` },
+                { type: `class`, value: `b` },
+                { type: `combinator`, value: ` ` },
+                { type: `compound_selector`, value: undefined },
+                { type: `class`, value: `c` },
+                { type: `class`, value: `d` },
+            ],
+        });
     });
-  });
-  it(`should skip nested (return 0)`, () => {
-    testWalk(parseCssSelector(`:is(:skip-nested(.a).b, .c).d, .e`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      resultVisit: ({ value }: any) =>
-        value === `skip-nested` ? walk.skipNested : undefined,
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `is` },
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `skip-nested` },
-        { type: `class`, value: `b` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `c` },
-        { type: `class`, value: `d` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `e` },
-      ],
+    it(`should skip nested (return 0)`, () => {
+        testWalk(parseCssSelector(`:is(:skip-nested(.a).b, .c).d, .e`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            resultVisit: ({ value }: any) =>
+                value === `skip-nested` ? walk.skipNested : undefined,
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `is` },
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `skip-nested` },
+                { type: `class`, value: `b` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `c` },
+                { type: `class`, value: `d` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `e` },
+            ],
+        });
     });
-  });
-  it(`should skip current selector`, () => {
-    testWalk(parseCssSelector(`:is(:skip-selector(.a).b, .c).d, .e`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      resultVisit: ({ value }: any) =>
-        value === `skip-selector` ? walk.skipCurrentSelector : undefined,
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `is` },
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `skip-selector` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `c` },
-        { type: `class`, value: `d` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `e` },
-      ],
+    it(`should skip current selector`, () => {
+        testWalk(parseCssSelector(`:is(:skip-selector(.a).b, .c).d, .e`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            resultVisit: ({ value }: any) =>
+                value === `skip-selector` ? walk.skipCurrentSelector : undefined,
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `is` },
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `skip-selector` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `c` },
+                { type: `class`, value: `d` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `e` },
+            ],
+        });
     });
-  });
-  it(`should stop walk completely`, () => {
-    testWalk(parseCssSelector(`:is(:stop(.a).b, .c).d, .e`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      resultVisit: ({ value }: any) =>
-        value === `stop` ? walk.stopAll : undefined,
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `is` },
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `stop` },
-      ],
+    it(`should stop walk completely`, () => {
+        testWalk(parseCssSelector(`:is(:stop(.a).b, .c).d, .e`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            resultVisit: ({ value }: any) => (value === `stop` ? walk.stopAll : undefined),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `is` },
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `stop` },
+            ],
+        });
     });
-  });
-  it(`should skip X levels down (2)`, () => {
-    testWalk(parseCssSelector(`:is(:skip-2-levels(.a).b, .c).d, .e`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      resultVisit: ({ value }: any) =>
-        value === `skip-2-levels` ? 2 : undefined,
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `is` },
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `skip-2-levels` },
-        { type: `class`, value: `d` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `e` },
-      ],
+    it(`should skip X levels down (2)`, () => {
+        testWalk(parseCssSelector(`:is(:skip-2-levels(.a).b, .c).d, .e`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            resultVisit: ({ value }: any) => (value === `skip-2-levels` ? 2 : undefined),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `is` },
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `skip-2-levels` },
+                { type: `class`, value: `d` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `e` },
+            ],
+        });
     });
-  });
-  it(`should skip X levels down through selectors (3)`, () => {
-    testWalk(parseCssSelector(`:is(:skip-3-levels(.a).b, .c).d, .e`), {
-      mapVisit: ({ type, value }: any) => ({ type, value }),
-      resultVisit: ({ value }: any) =>
-        value === `skip-3-levels` ? 3 : undefined,
-      expectedMap: [
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `is` },
-        { type: `selector`, value: undefined },
-        { type: `pseudo_class`, value: `skip-3-levels` },
-        { type: `selector`, value: undefined },
-        { type: `class`, value: `e` },
-      ],
+    it(`should skip X levels down through selectors (3)`, () => {
+        testWalk(parseCssSelector(`:is(:skip-3-levels(.a).b, .c).d, .e`), {
+            mapVisit: ({ type, value }: any) => ({ type, value }),
+            resultVisit: ({ value }: any) => (value === `skip-3-levels` ? 3 : undefined),
+            expectedMap: [
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `is` },
+                { type: `selector`, value: undefined },
+                { type: `pseudo_class`, value: `skip-3-levels` },
+                { type: `selector`, value: undefined },
+                { type: `class`, value: `e` },
+            ],
+        });
     });
-  });
-  it(`should accept readonly value and iterate on readonly accordingly (type checks)`, () => {
-    function expectType<T>(_actual: T) {
-      /**/
-    }
+    it(`should accept readonly value and iterate on readonly accordingly (type checks)`, () => {
+        function expectType<T>(_actual: T) {
+            /**/
+        }
 
-    walk({} as ImmutableSelectorList, (node, _index, nodes, parents) => {
-      expectType<ImmutableSelectorNode>(node);
-      expectType<ImmutableSelectorNode[]>(nodes);
-      expectType<ImmutableSelectorNode[]>(parents);
-    });
-    walk({} as ImmutableSelectorNode, (node, _index, nodes, parents) => {
-      expectType<ImmutableSelectorNode>(node);
-      expectType<ImmutableSelectorNode[]>(nodes);
-      expectType<ImmutableSelectorNode[]>(parents);
-    });
-    walk({} as SelectorList, (node, _index, nodes, parents) => {
-      expectType<SelectorNode>(node);
-      expectType<SelectorNode[]>(nodes);
-      expectType<SelectorNode[]>(parents);
+        walk({} as ImmutableSelectorList, (node, _index, nodes, parents) => {
+            expectType<ImmutableSelectorNode>(node);
+            expectType<ImmutableSelectorNode[]>(nodes);
+            expectType<ImmutableSelectorNode[]>(parents);
+        });
+        walk({} as ImmutableSelectorNode, (node, _index, nodes, parents) => {
+            expectType<ImmutableSelectorNode>(node);
+            expectType<ImmutableSelectorNode[]>(nodes);
+            expectType<ImmutableSelectorNode[]>(parents);
+        });
+        walk({} as SelectorList, (node, _index, nodes, parents) => {
+            expectType<SelectorNode>(node);
+            expectType<SelectorNode[]>(nodes);
+            expectType<SelectorNode[]>(parents);
+        });
+        walk({} as SelectorNode, (node, _index, nodes, parents) => {
+            expectType<SelectorNode>(node);
+            expectType<SelectorNode[]>(nodes);
+            expectType<SelectorNode[]>(parents);
+        });
     });
-    walk({} as SelectorNode, (node, _index, nodes, parents) => {
-      expectType<SelectorNode>(node);
-      expectType<SelectorNode[]>(nodes);
-      expectType<SelectorNode[]>(parents);
-    });
-  });
-  describe(`context`, () => {
-    it(`should provide index and sibling nodes within selector`, () => {
-      testWalk(parseCssSelector(`:a(.a1.a2, .aX.aY), :b(.b1.b2)`), {
-        mapVisit: ({ type, value }: any, index: number, nodes: any[]) => ({
-          type,
-          value,
-          index,
-          nodes: nodes.map(({ value, type }) => value || type).join(`,`),
-        }),
-        expectedMap: [
-          {
-            type: `selector`,
-            value: undefined,
-            index: 0,
-            nodes: `selector,selector`,
-          },
-          { type: `pseudo_class`, value: `a`, index: 0, nodes: `a` },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 0,
-            nodes: `selector,selector`,
-          },
-          {
-            type: `class`,
-            value: `a1`,
-            index: 0,
-            nodes: `a1,a2`,
-          },
-          {
-            type: `class`,
-            value: `a2`,
-            index: 1,
-            nodes: `a1,a2`,
-          },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 1,
-            nodes: `selector,selector`,
-          },
-          {
-            type: `class`,
-            value: `aX`,
-            index: 0,
-            nodes: `aX,aY`,
-          },
-          {
-            type: `class`,
-            value: `aY`,
-            index: 1,
-            nodes: `aX,aY`,
-          },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 1,
-            nodes: `selector,selector`,
-          },
-          { type: `pseudo_class`, value: `b`, index: 0, nodes: `b` },
-          { type: `selector`, value: undefined, index: 0, nodes: `selector` },
-          {
-            type: `class`,
-            value: `b1`,
-            index: 0,
-            nodes: `b1,b2`,
-          },
-          {
-            type: `class`,
-            value: `b2`,
-            index: 1,
-            nodes: `b1,b2`,
-          },
-        ],
-      });
-    });
-    it(`should provide index and sibling nodes within selector (skip nodes)`, () => {
-      testWalk(parseCssSelector(`:a(.a1.a2, .aX.aY), :b(.b1.b2):c`), {
-        mapVisit: ({ type, value }: any, index: number, nodes: any[]) => ({
-          type,
-          value,
-          index,
-          nodes: nodes.map(({ value, type }) => value || type).join(`,`),
-        }),
-        resultVisit: ({ value }: any) => {
-          if (value === `a1`) {
-            return walk.skipCurrentSelector;
-          } else if (value === `b`) {
-            return walk.skipNested;
-          }
-          return;
-        },
-        expectedMap: [
-          {
-            type: `selector`,
-            value: undefined,
-            index: 0,
-            nodes: `selector,selector`,
-          },
-          { type: `pseudo_class`, value: `a`, index: 0, nodes: `a` },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 0,
-            nodes: `selector,selector`,
-          },
-          {
-            type: `class`,
-            value: `a1`,
-            index: 0,
-            nodes: `a1,a2`,
-          },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 1,
-            nodes: `selector,selector`,
-          },
-          {
-            type: `class`,
-            value: `aX`,
-            index: 0,
-            nodes: `aX,aY`,
-          },
-          {
-            type: `class`,
-            value: `aY`,
-            index: 1,
-            nodes: `aX,aY`,
-          },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 1,
-            nodes: `selector,selector`,
-          },
-          { type: `pseudo_class`, value: `b`, index: 0, nodes: `b,c` },
-          { type: `pseudo_class`, value: `c`, index: 1, nodes: `b,c` },
-        ],
-      });
-    });
-    it(`should provide parent list to visit`, () => {
-      testWalk(parseCssSelector(`:a(:b(:c))`), {
-        mapVisit: (
-          { type, value }: any,
-          index: number,
-          _nodes: any[],
-          parents: any[]
-        ) => ({
-          type,
-          value,
-          index,
-          parents: parents.map(({ value, type }) => value || type).join(`,`),
-        }),
-        expectedMap: [
-          { type: `selector`, value: undefined, index: 0, parents: `` },
-          { type: `pseudo_class`, value: `a`, index: 0, parents: `selector` },
-          { type: `selector`, value: undefined, index: 0, parents: `selector,a` },
-          {
-            type: `pseudo_class`,
-            value: `b`,
-            index: 0,
-            parents: `selector,a,selector`,
-          },
-          {
-            type: `selector`,
-            value: undefined,
-            index: 0,
-            parents: `selector,a,selector,b`,
-          },
-          {
-            type: `pseudo_class`,
-            value: `c`,
-            index: 0,
-            parents: `selector,a,selector,b,selector`,
-          },
-        ],
-      });
-    });
-    it(`should provide parent list to visit (test multi selectors)`, () => {
-      testWalk(parseCssSelector(`:a(:a1(), :a2), :b(:b1)`), {
-        walkOptions: {
-          ignoreList: [`selector`],
-        },
-        mapVisit: (
-          { type, value }: any,
-          _index: number,
-          _nodes: any[],
-          parents: any[]
-        ) => ({
-          type,
-          value,
-          parents: parents.map(({ value, type }) => value || type).join(`,`),
-        }),
-        expectedMap: [
-          { type: `pseudo_class`, value: `a`, parents: `selector` },
-          {
-            type: `pseudo_class`,
-            value: `a1`,
-            parents: `selector,a,selector`,
-          },
-          {
-            type: `pseudo_class`,
-            value: `a2`,
-            parents: `selector,a,selector`,
-          },
-          { type: `pseudo_class`, value: `b`, parents: `selector` },
-          {
-            type: `pseudo_class`,
-            value: `b1`,
-            parents: `selector,b,selector`,
-          },
-        ],
-      });
+    describe(`context`, () => {
+        it(`should provide index and sibling nodes within selector`, () => {
+            testWalk(parseCssSelector(`:a(.a1.a2, .aX.aY), :b(.b1.b2)`), {
+                mapVisit: ({ type, value }: any, index: number, nodes: any[]) => ({
+                    type,
+                    value,
+                    index,
+                    nodes: nodes.map(({ value, type }) => value || type).join(`,`),
+                }),
+                expectedMap: [
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 0,
+                        nodes: `selector,selector`,
+                    },
+                    { type: `pseudo_class`, value: `a`, index: 0, nodes: `a` },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 0,
+                        nodes: `selector,selector`,
+                    },
+                    {
+                        type: `class`,
+                        value: `a1`,
+                        index: 0,
+                        nodes: `a1,a2`,
+                    },
+                    {
+                        type: `class`,
+                        value: `a2`,
+                        index: 1,
+                        nodes: `a1,a2`,
+                    },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 1,
+                        nodes: `selector,selector`,
+                    },
+                    {
+                        type: `class`,
+                        value: `aX`,
+                        index: 0,
+                        nodes: `aX,aY`,
+                    },
+                    {
+                        type: `class`,
+                        value: `aY`,
+                        index: 1,
+                        nodes: `aX,aY`,
+                    },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 1,
+                        nodes: `selector,selector`,
+                    },
+                    { type: `pseudo_class`, value: `b`, index: 0, nodes: `b` },
+                    { type: `selector`, value: undefined, index: 0, nodes: `selector` },
+                    {
+                        type: `class`,
+                        value: `b1`,
+                        index: 0,
+                        nodes: `b1,b2`,
+                    },
+                    {
+                        type: `class`,
+                        value: `b2`,
+                        index: 1,
+                        nodes: `b1,b2`,
+                    },
+                ],
+            });
+        });
+        it(`should provide index and sibling nodes within selector (skip nodes)`, () => {
+            testWalk(parseCssSelector(`:a(.a1.a2, .aX.aY), :b(.b1.b2):c`), {
+                mapVisit: ({ type, value }: any, index: number, nodes: any[]) => ({
+                    type,
+                    value,
+                    index,
+                    nodes: nodes.map(({ value, type }) => value || type).join(`,`),
+                }),
+                resultVisit: ({ value }: any) => {
+                    if (value === `a1`) {
+                        return walk.skipCurrentSelector;
+                    } else if (value === `b`) {
+                        return walk.skipNested;
+                    }
+                    return;
+                },
+                expectedMap: [
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 0,
+                        nodes: `selector,selector`,
+                    },
+                    { type: `pseudo_class`, value: `a`, index: 0, nodes: `a` },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 0,
+                        nodes: `selector,selector`,
+                    },
+                    {
+                        type: `class`,
+                        value: `a1`,
+                        index: 0,
+                        nodes: `a1,a2`,
+                    },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 1,
+                        nodes: `selector,selector`,
+                    },
+                    {
+                        type: `class`,
+                        value: `aX`,
+                        index: 0,
+                        nodes: `aX,aY`,
+                    },
+                    {
+                        type: `class`,
+                        value: `aY`,
+                        index: 1,
+                        nodes: `aX,aY`,
+                    },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 1,
+                        nodes: `selector,selector`,
+                    },
+                    { type: `pseudo_class`, value: `b`, index: 0, nodes: `b,c` },
+                    { type: `pseudo_class`, value: `c`, index: 1, nodes: `b,c` },
+                ],
+            });
+        });
+        it(`should provide parent list to visit`, () => {
+            testWalk(parseCssSelector(`:a(:b(:c))`), {
+                mapVisit: ({ type, value }: any, index: number, _nodes: any[], parents: any[]) => ({
+                    type,
+                    value,
+                    index,
+                    parents: parents.map(({ value, type }) => value || type).join(`,`),
+                }),
+                expectedMap: [
+                    { type: `selector`, value: undefined, index: 0, parents: `` },
+                    { type: `pseudo_class`, value: `a`, index: 0, parents: `selector` },
+                    { type: `selector`, value: undefined, index: 0, parents: `selector,a` },
+                    {
+                        type: `pseudo_class`,
+                        value: `b`,
+                        index: 0,
+                        parents: `selector,a,selector`,
+                    },
+                    {
+                        type: `selector`,
+                        value: undefined,
+                        index: 0,
+                        parents: `selector,a,selector,b`,
+                    },
+                    {
+                        type: `pseudo_class`,
+                        value: `c`,
+                        index: 0,
+                        parents: `selector,a,selector,b,selector`,
+                    },
+                ],
+            });
+        });
+        it(`should provide parent list to visit (test multi selectors)`, () => {
+            testWalk(parseCssSelector(`:a(:a1(), :a2), :b(:b1)`), {
+                walkOptions: {
+                    ignoreList: [`selector`],
+                },
+                mapVisit: (
+                    { type, value }: any,
+                    _index: number,
+                    _nodes: any[],
+                    parents: any[]
+                ) => ({
+                    type,
+                    value,
+                    parents: parents.map(({ value, type }) => value || type).join(`,`),
+                }),
+                expectedMap: [
+                    { type: `pseudo_class`, value: `a`, parents: `selector` },
+                    {
+                        type: `pseudo_class`,
+                        value: `a1`,
+                        parents: `selector,a,selector`,
+                    },
+                    {
+                        type: `pseudo_class`,
+                        value: `a2`,
+                        parents: `selector,a,selector`,
+                    },
+                    { type: `pseudo_class`, value: `b`, parents: `selector` },
+                    {
+                        type: `pseudo_class`,
+                        value: `b1`,
+                        parents: `selector,b,selector`,
+                    },
+                ],
+            });
+        });
     });
-  });
 });
diff --git a/packages/css-selector-parser/test/selector-parser.spec.ts b/packages/css-selector-parser/test/selector-parser.spec.ts
index 1fdc8377..a4888823 100644
--- a/packages/css-selector-parser/test/selector-parser.spec.ts
+++ b/packages/css-selector-parser/test/selector-parser.spec.ts
@@ -1,3507 +1,3504 @@
-import { test, createNode } from "./test-kit/parsing";
+import { test, createNode } from './test-kit/parsing';
 
 describe(`selector-parser`, () => {
-  describe(`selector types`, () => {
-    it(`*`, () => {
-      test(`*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 1,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`some-element`, () => {
-      test(`some-element`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 12,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `some-element`,
-                start: 0,
-                end: 12,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`someelement`, () => {
-      test(`someelement`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 11,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `someelement`,
-                start: 0,
-                end: 11,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`.classX`, () => {
-      test(`.classX`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 7,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `classX`,
-                start: 0,
-                end: 7,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`#x-id`, () => {
-      test(`#x-id`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `id`,
-                value: `x-id`,
-                start: 0,
-                end: 5,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:pseudo-class-x`, () => {
-      test(`:pseudo-class-x`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `pseudo-class-x`,
-                start: 0,
-                end: 15,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nested-pseudo-class-x()`, () => {
-      test(`:nested-pseudo-class-x()`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 24,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nested-pseudo-class-x`,
-                start: 0,
-                end: 24,
-                nodes: [],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nested-pseudo-class-x(.a)`, () => {
-      test(`:nested-pseudo-class-x(.a)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 26,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nested-pseudo-class-x`,
-                start: 0,
-                end: 26,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 23,
-                    end: 25,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 23,
-                        end: 25,
-                      }),
-                    ],
-                  }),
+    describe(`selector types`, () => {
+        it(`*`, () => {
+            test(`*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 1,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nested-pseudo-class-x(.a, .b)`, () => {
-      test(`:nested-pseudo-class-x(.a, .b)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 30,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nested-pseudo-class-x`,
-                start: 0,
-                end: 30,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 23,
-                    end: 25,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 23,
-                        end: 25,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 26,
-                    end: 29,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `b`,
-                        start: 27,
-                        end: 29,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`some-element`, () => {
+            test(`some-element`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 12,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `some-element`,
+                                start: 0,
+                                end: 12,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`::pseudo-element-x`, () => {
-      test(`::pseudo-element-x`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 18,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `pseudo-element-x`,
-                start: 0,
-                end: 18,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`::pseudo-element-x()`, () => {
-      test(`::pseudo-element-x()`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 20,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `pseudo-element-x`,
-                start: 0,
-                end: 20,
-                nodes: [],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`::pseudo-element-x(.a)`, () => {
-      test(`::pseudo-element-x(.a)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 22,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `pseudo-element-x`,
-                start: 0,
-                end: 22,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 19,
-                    end: 21,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 19,
-                        end: 21,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`someelement`, () => {
+            test(`someelement`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 11,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `someelement`,
+                                start: 0,
+                                end: 11,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`::pseudo-element-x(.a, .b)`, () => {
-      test(`::pseudo-element-x(.a, .b)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 26,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `pseudo-element-x`,
-                start: 0,
-                end: 26,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 19,
-                    end: 21,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 19,
-                        end: 21,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 22,
-                    end: 25,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `b`,
-                        start: 23,
-                        end: 25,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`.classX`, () => {
+            test(`.classX`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 7,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `classX`,
+                                start: 0,
+                                end: 7,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`[attr-x]`, () => {
-      test(`[attr-x]`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `attribute`,
-                value: `attr-x`,
-                start: 0,
-                end: 8,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`[attr-x="attr-value"]`, () => {
-      test(`[attr-x="attr-value"]`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 21,
-            nodes: [
-              createNode({
-                type: `attribute`,
-                value: `attr-x="attr-value"`,
-                start: 0,
-                end: 21,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`[&="&"]`, () => {
-      test(`[&="&"]`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 7,
-            nodes: [
-              createNode({
-                type: `attribute`,
-                value: `&="&"`,
-                start: 0,
-                end: 7,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`&`, () => {
-      test(`&`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 1,
-            nodes: [
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 0,
-                end: 1,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`&&`, () => {
-      test(`&&`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 2,
-            nodes: [
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 1,
-                end: 2,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`nth`, () => {
-    it(`:nth-child()`, () => {
-      test(`:nth-child()`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 12,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 12,
-                nodes: [],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n)`, () => {
-      test(`:nth-child(2n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 14,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 14,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 13,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`#x-id`, () => {
+            test(`#x-id`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `id`,
+                                value: `x-id`,
+                                start: 0,
+                                end: 5,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(-2n)`, () => {
-      test(`:nth-child(-2n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 15,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 14,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `-2n`,
-                        start: 11,
-                        end: 14,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:pseudo-class-x`, () => {
+            test(`:pseudo-class-x`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 15,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `pseudo-class-x`,
+                                start: 0,
+                                end: 15,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(+2N)`, () => {
-      test(`:nth-child(+2N)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 15,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 14,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `+2N`,
-                        start: 11,
-                        end: 14,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nested-pseudo-class-x()`, () => {
+            test(`:nested-pseudo-class-x()`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 24,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nested-pseudo-class-x`,
+                                start: 0,
+                                end: 24,
+                                nodes: [],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(-n)`, () => {
-      test(`:nth-child(-n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 14,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 14,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 13,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `-n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nested-pseudo-class-x(.a)`, () => {
+            test(`:nested-pseudo-class-x(.a)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 26,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nested-pseudo-class-x`,
+                                start: 0,
+                                end: 26,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 23,
+                                        end: 25,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 23,
+                                                end: 25,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(+n)`, () => {
-      test(`:nth-child(+n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 14,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 14,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 13,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `+n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nested-pseudo-class-x(.a, .b)`, () => {
+            test(`:nested-pseudo-class-x(.a, .b)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 30,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nested-pseudo-class-x`,
+                                start: 0,
+                                end: 30,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 23,
+                                        end: 25,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 23,
+                                                end: 25,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 26,
+                                        end: 29,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `b`,
+                                                start: 27,
+                                                end: 29,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`::pseudo-element-x`, () => {
+            test(`::pseudo-element-x`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 18,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `pseudo-element-x`,
+                                start: 0,
+                                end: 18,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`::pseudo-element-x()`, () => {
+            test(`::pseudo-element-x()`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 20,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `pseudo-element-x`,
+                                start: 0,
+                                end: 20,
+                                nodes: [],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`::pseudo-element-x(.a)`, () => {
+            test(`::pseudo-element-x(.a)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 22,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `pseudo-element-x`,
+                                start: 0,
+                                end: 22,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 19,
+                                        end: 21,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 19,
+                                                end: 21,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`::pseudo-element-x(.a, .b)`, () => {
+            test(`::pseudo-element-x(.a, .b)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 26,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `pseudo-element-x`,
+                                start: 0,
+                                end: 26,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 19,
+                                        end: 21,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 19,
+                                                end: 21,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 22,
+                                        end: 25,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `b`,
+                                                start: 23,
+                                                end: 25,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`[attr-x]`, () => {
+            test(`[attr-x]`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `attribute`,
+                                value: `attr-x`,
+                                start: 0,
+                                end: 8,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`[attr-x="attr-value"]`, () => {
+            test(`[attr-x="attr-value"]`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 21,
+                        nodes: [
+                            createNode({
+                                type: `attribute`,
+                                value: `attr-x="attr-value"`,
+                                start: 0,
+                                end: 21,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`[&="&"]`, () => {
+            test(`[&="&"]`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 7,
+                        nodes: [
+                            createNode({
+                                type: `attribute`,
+                                value: `&="&"`,
+                                start: 0,
+                                end: 7,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
+        it(`&`, () => {
+            test(`&`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 1,
+                        nodes: [
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 0,
+                                end: 1,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`&&`, () => {
+            test(`&&`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 2,
+                        nodes: [
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 1,
+                                end: 2,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
     });
-    it(`:nth-child(n)`, () => {
-      test(`:nth-child(n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 13,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 13,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 12,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `n`,
-                        start: 11,
+    describe(`nth`, () => {
+        it(`:nth-child()`, () => {
+            test(`:nth-child()`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 12,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 12,
+                                nodes: [],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(odd)`, () => {
-      test(`:nth-child(odd)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 15,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 14,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `odd`,
-                        start: 11,
+            });
+        });
+        it(`:nth-child(2n)`, () => {
+            test(`:nth-child(2n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 14,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 14,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 13,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(even)`, () => {
-      test(`:nth-child(even)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 16,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 16,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 15,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `even`,
-                        start: 11,
+            });
+        });
+        it(`:nth-child(-2n)`, () => {
+            test(`:nth-child(-2n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 15,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 15,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 14,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `-2n`,
+                                                start: 11,
+                                                end: 14,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n-3)`, () => {
-      test(`:nth-child(2n-3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 16,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 16,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 15,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `-3`,
-                        start: 13,
+            });
+        });
+        it(`:nth-child(+2N)`, () => {
+            test(`:nth-child(+2N)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 15,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 15,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 14,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `+2N`,
+                                                start: 11,
+                                                end: 14,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n+3)`, () => {
-      test(`:nth-child(2n+3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 16,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 16,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 15,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `+3`,
-                        start: 13,
-                        end: 15,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(-n)`, () => {
+            test(`:nth-child(-n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 14,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 14,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 13,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `-n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(3)`, () => {
-      test(`:nth-child(3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 13,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 13,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 12,
-                    nodes: [
-                      createNode({
-                        type: `nth_offset`,
-                        value: `3`,
-                        start: 11,
-                        end: 12,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(+n)`, () => {
+            test(`:nth-child(+n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 14,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 14,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 13,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `+n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n- 3)`, () => {
-      test(`:nth-child(2n- 3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 17,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 17,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
+            });
+        });
+        it(`:nth-child(n)`, () => {
+            test(`:nth-child(n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 13,
-                      }),
-                      createNode({
-                        type: `nth_dash`,
-                        value: `-`,
-                        start: 13,
-                        end: 15,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `3`,
-                        start: 15,
-                        end: 16,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 13,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 12,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `n`,
+                                                start: 11,
+                                                end: 12,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n+ 3)`, () => {
-      test(`:nth-child(2n+ 3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 17,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 17,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                      createNode({
-                        type: `nth_dash`,
-                        value: `+`,
-                        start: 13,
+            });
+        });
+        it(`:nth-child(odd)`, () => {
+            test(`:nth-child(odd)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 15,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `3`,
-                        start: 15,
-                        end: 16,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 15,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 14,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `odd`,
+                                                start: 11,
+                                                end: 14,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n - 3)`, () => {
-      test(`:nth-child(2n - 3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 18,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 18,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 17,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 14,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_dash`,
-                        value: `-`,
-                        start: 14,
+            });
+        });
+        it(`:nth-child(even)`, () => {
+            test(`:nth-child(even)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 16,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `3`,
-                        start: 16,
-                        end: 17,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 16,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 15,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `even`,
+                                                start: 11,
+                                                end: 15,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n + 3)`, () => {
-      test(`:nth-child(2n + 3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 18,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 18,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 17,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 14,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_dash`,
-                        value: `+`,
-                        start: 14,
+            });
+        });
+        it(`:nth-child(2n-3)`, () => {
+            test(`:nth-child(2n-3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 16,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `3`,
-                        start: 16,
-                        end: 17,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 16,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 15,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `-3`,
+                                                start: 13,
+                                                end: 15,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n + 3 of div.klass)`, () => {
-      test(`:nth-child(2n + 3 of div.klass)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 31,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 31,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 20,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 14,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_dash`,
-                        value: `+`,
-                        start: 14,
+            });
+        });
+        it(`:nth-child(2n+3)`, () => {
+            test(`:nth-child(2n+3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 16,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `3`,
-                        start: 16,
-                        end: 18,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_of`,
-                        value: `of`,
-                        start: 18,
-                        end: 20,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 20,
-                    end: 30,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `type`,
-                        value: `div`,
-                        start: 21,
-                        end: 24,
-                      }),
-                      createNode({
-                        type: `class`,
-                        value: `klass`,
-                        start: 24,
-                        end: 30,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 16,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 15,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `+3`,
+                                                start: 13,
+                                                end: 15,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n of html|div)`, () => {
-      test(`:nth-child(2n of html|div)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 26,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 26,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 14,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_of`,
-                        value: `of`,
-                        start: 14,
+            });
+        });
+        it(`:nth-child(3)`, () => {
+            test(`:nth-child(3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 13,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 13,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 12,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `3`,
+                                                start: 11,
+                                                end: 12,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n- 3)`, () => {
+            test(`:nth-child(2n- 3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 17,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 17,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `-`,
+                                                start: 13,
+                                                end: 15,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `3`,
+                                                start: 15,
+                                                end: 16,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n+ 3)`, () => {
+            test(`:nth-child(2n+ 3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 17,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 17,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `+`,
+                                                start: 13,
+                                                end: 15,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `3`,
+                                                start: 15,
+                                                end: 16,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n - 3)`, () => {
+            test(`:nth-child(2n - 3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 18,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 18,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 17,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 14,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `-`,
+                                                start: 14,
+                                                end: 16,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `3`,
+                                                start: 16,
+                                                end: 17,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n + 3)`, () => {
+            test(`:nth-child(2n + 3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 18,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 18,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 17,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 14,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `+`,
+                                                start: 14,
+                                                end: 16,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `3`,
+                                                start: 16,
+                                                end: 17,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n + 3 of div.klass)`, () => {
+            test(`:nth-child(2n + 3 of div.klass)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 31,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 31,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 20,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 14,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `+`,
+                                                start: 14,
+                                                end: 16,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `3`,
+                                                start: 16,
+                                                end: 18,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_of`,
+                                                value: `of`,
+                                                start: 18,
+                                                end: 20,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 20,
+                                        end: 30,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `type`,
+                                                value: `div`,
+                                                start: 21,
+                                                end: 24,
+                                            }),
+                                            createNode({
+                                                type: `class`,
+                                                value: `klass`,
+                                                start: 24,
+                                                end: 30,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n of html|div)`, () => {
+            test(`:nth-child(2n of html|div)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 26,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 26,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 14,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_of`,
+                                                value: `of`,
+                                                start: 14,
+                                                end: 16,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 16,
+                                        end: 25,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `type`,
+                                                value: `div`,
+                                                start: 17,
+                                                end: 25,
+                                                namespace: {
+                                                    value: `html`,
+                                                    beforeComments: [],
+                                                    afterComments: [],
+                                                },
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(2n of div, span)`, () => {
+            test(`:nth-child(2n of div, span)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 27,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 27,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 14,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_of`,
+                                                value: `of`,
+                                                start: 14,
+                                                end: 16,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 16,
+                                        end: 20,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `type`,
+                                                value: `div`,
+                                                start: 17,
+                                                end: 20,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 21,
+                                        end: 26,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `type`,
+                                                value: `span`,
+                                                start: 22,
+                                                end: 26,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-last-child(2n)`, () => {
+            test(`:nth-last-child(2n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 19,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-last-child`,
+                                start: 0,
+                                end: 19,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 16,
+                                        end: 18,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 16,
+                                                end: 18,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-of-type(2n)`, () => {
+            test(`:nth-of-type(2n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 16,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 16,
-                    end: 25,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `type`,
-                        value: `div`,
-                        start: 17,
-                        end: 25,
-                        namespace: {
-                          value: `html`,
-                          beforeComments: [],
-                          afterComments: [],
-                        },
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-of-type`,
+                                start: 0,
+                                end: 16,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 13,
+                                        end: 15,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 13,
+                                                end: 15,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-last-of-type(2n)`, () => {
+            test(`:nth-last-of-type(2n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 21,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-last-of-type`,
+                                start: 0,
+                                end: 21,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 18,
+                                        end: 20,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 18,
+                                                end: 20,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child( 2n)`, () => {
+            test(`:nth-child( 2n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 15,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 15,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 14,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 12,
+                                                end: 14,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
     });
-    it(`:nth-child(2n of div, span)`, () => {
-      test(`:nth-child(2n of div, span)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 27,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 27,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 14,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_of`,
-                        value: `of`,
-                        start: 14,
-                        end: 16,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 16,
-                    end: 20,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `type`,
-                        value: `div`,
-                        start: 17,
+    describe(`namespace`, () => {
+        it(`ns|div`, () => {
+            test(`ns|div`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 6,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 0,
+                                end: 6,
+                                namespace: {
+                                    value: `ns`,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*|div`, () => {
+            test(`*|div`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 0,
+                                end: 5,
+                                namespace: {
+                                    value: `*`,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`|div`, () => {
+            test(`|div`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 4,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 0,
+                                end: 4,
+                                namespace: {
+                                    value: ``,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`ns|*`, () => {
+            test(`ns|*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 4,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 4,
+                                namespace: {
+                                    value: `ns`,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+    });
+    describe(`nesting (not-native)`, () => {
+        it(`div(:hover)`, () => {
+            test(`div(:hover)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 11,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 0,
+                                end: 11,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 4,
+                                        end: 10,
+                                        nodes: [
+                                            createNode({
+                                                type: `pseudo_class`,
+                                                value: `hover`,
+                                                start: 4,
+                                                end: 10,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`#id(:hover)`, () => {
+            test(`#id(:hover)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 11,
+                        nodes: [
+                            createNode({
+                                type: `id`,
+                                value: `id`,
+                                start: 0,
+                                end: 11,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 4,
+                                        end: 10,
+                                        nodes: [
+                                            createNode({
+                                                type: `pseudo_class`,
+                                                value: `hover`,
+                                                start: 4,
+                                                end: 10,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`.a(:hover)`, () => {
+            test(`.a(:hover)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 10,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 0,
+                                end: 10,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 3,
+                                        end: 9,
+                                        nodes: [
+                                            createNode({
+                                                type: `pseudo_class`,
+                                                value: `hover`,
+                                                start: 3,
+                                                end: 9,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`[attr="val"](:hover)`, () => {
+            test(`[attr="val"](:hover)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 20,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 21,
-                    end: 26,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `type`,
-                        value: `span`,
-                        start: 22,
-                        end: 26,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `attribute`,
+                                value: `attr="val"`,
+                                start: 0,
+                                end: 20,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 13,
+                                        end: 19,
+                                        nodes: [
+                                            createNode({
+                                                type: `pseudo_class`,
+                                                value: `hover`,
+                                                start: 13,
+                                                end: 19,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`&(:hover)`, () => {
+            test(`&(:hover)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 9,
+                        nodes: [
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 0,
+                                end: 9,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 2,
+                                        end: 8,
+                                        nodes: [
+                                            createNode({
+                                                type: `pseudo_class`,
+                                                value: `hover`,
+                                                start: 2,
+                                                end: 8,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
     });
-    it(`:nth-last-child(2n)`, () => {
-      test(`:nth-last-child(2n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 19,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-last-child`,
-                start: 0,
-                end: 19,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 16,
-                    end: 18,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 16,
+    describe(`comments`, () => {
+        it(`/* comment  */`, () => {
+            test(`/* comment  */`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 14,
+                        nodes: [
+                            createNode({
+                                type: `comment`,
+                                value: `/* comment  */`,
+                                start: 0,
+                                end: 14,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`./*comment1???*//*???comment2*/classX`, () => {
+            test(`./*comment1???*//*???comment2*/classX`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 37,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `classX`,
+                                start: 0,
+                                end: 37,
+                                dotComments: [
+                                    createNode({
+                                        type: `comment`,
+                                        value: `/*comment1???*/`,
+                                        start: 1,
+                                        end: 16,
+                                    }),
+                                    createNode({
+                                        type: `comment`,
+                                        value: `/*???comment2*/`,
+                                        start: 16,
+                                        end: 31,
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:/*comment1???*//*???comment2*/pseudo-class`, () => {
+            test(`:/*comment1???*//*???comment2*/pseudo-class`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 43,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `pseudo-class`,
+                                start: 0,
+                                end: 43,
+                                colonComments: [
+                                    createNode({
+                                        type: `comment`,
+                                        value: `/*comment1???*/`,
+                                        start: 1,
+                                        end: 16,
+                                    }),
+                                    createNode({
+                                        type: `comment`,
+                                        value: `/*???comment2*/`,
+                                        start: 16,
+                                        end: 31,
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:/*c1*//*c2*/:/*c3*//*c4*/pseudo-element`, () => {
+            test(`:/*c1*//*c2*/:/*c3*//*c4*/pseudo-element`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 40,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `pseudo-element`,
+                                start: 0,
+                                end: 40,
+                                colonComments: {
+                                    first: [
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c1*/`,
+                                            start: 1,
+                                            end: 7,
+                                        }),
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c2*/`,
+                                            start: 7,
+                                            end: 13,
+                                        }),
+                                    ],
+                                    second: [
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c3*/`,
+                                            start: 14,
+                                            end: 20,
+                                        }),
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c4*/`,
+                                            start: 20,
+                                            end: 26,
+                                        }),
+                                    ],
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*+/*c1*/+*`, () => {
+            test(`*+/*c1*/+*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 10,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 2,
+                                end: 8,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 8,
+                                end: 9,
+                                invalid: true,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 9,
+                                end: 10,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*+/*c1*/  *`, () => {
+            test(`*+/*c1*/  *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 11,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 2,
+                                end: 10,
+                                after: `  `,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 10,
+                                end: 11,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*+ /*c1*/ /*c2*/ *`, () => {
+            test(`*+ /*c1*/ /*c2*/ *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 18,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 3,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 3,
+                                end: 10,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c2*/`,
+                                start: 10,
+                                end: 17,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 17,
+                                end: 18,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*/*c1*//*c2*/|/*c3*//*c4*/div`, () => {
+            test(`*/*c1*//*c2*/|/*c3*//*c4*/div`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 29,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 0,
+                                end: 29,
+                                namespace: {
+                                    value: `*`,
+                                    beforeComments: [
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c1*/`,
+                                            start: 1,
+                                            end: 7,
+                                        }),
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c2*/`,
+                                            start: 7,
+                                            end: 13,
+                                        }),
+                                    ],
+                                    afterComments: [
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c3*/`,
+                                            start: 14,
+                                            end: 20,
+                                        }),
+                                        createNode({
+                                            type: `comment`,
+                                            value: `/*c4*/`,
+                                            start: 20,
+                                            end: 26,
+                                        }),
+                                    ],
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(/*c0*/ -5n /*c1*/ - /*c2*/ 10 /*c3*/ of /*c4*/div/*c5*/)`, () => {
+            test(`:nth-child(/*c0*/ -5n /*c1*/ - /*c2*/ 10 /*c3*/ of /*c4*/div/*c5*/)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 67,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 67,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 50,
+                                        nodes: [
+                                            createNode({
+                                                type: `comment`,
+                                                value: `/*c0*/`,
+                                                start: 11,
+                                                end: 18,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `-5n`,
+                                                start: 18,
+                                                end: 22,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `comment`,
+                                                value: `/*c1*/`,
+                                                start: 22,
+                                                end: 29,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `-`,
+                                                start: 29,
+                                                end: 31,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `comment`,
+                                                value: `/*c2*/`,
+                                                start: 31,
+                                                end: 38,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `10`,
+                                                start: 38,
+                                                end: 41,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `comment`,
+                                                value: `/*c3*/`,
+                                                start: 41,
+                                                end: 48,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_of`,
+                                                value: `of`,
+                                                start: 48,
+                                                end: 50,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 50,
+                                        end: 66,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `comment`,
+                                                value: `/*c4*/`,
+                                                start: 51,
+                                                end: 57,
+                                            }),
+                                            createNode({
+                                                type: `type`,
+                                                value: `div`,
+                                                start: 57,
+                                                end: 60,
+                                            }),
+                                            createNode({
+                                                type: `comment`,
+                                                value: `/*c5*/`,
+                                                start: 60,
+                                                end: 66,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+    });
+    describe(`combinators`, () => {
+        it(`* .nested-class`, () => {
+            test(`* .nested-class`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 15,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `space`,
+                                value: ` `,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `nested-class`,
+                                start: 2,
+                                end: 15,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*+.adjacent-class`, () => {
+            test(`*+.adjacent-class`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 17,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `adjacent-class`,
+                                start: 2,
+                                end: 17,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*~.proceeding-sibling-class`, () => {
+            test(`*~.proceeding-sibling-class`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 27,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `~`,
+                                value: `~`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `proceeding-sibling-class`,
+                                start: 2,
+                                end: 27,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*>.direct-child-class`, () => {
+            test(`*>.direct-child-class`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 21,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `>`,
+                                value: `>`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `direct-child-class`,
+                                start: 2,
+                                end: 21,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*++*`, () => {
+            test(`*++*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 4,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 2,
+                                end: 3,
+                                invalid: true,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 3,
+                                end: 4,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`* ++*`, () => {
+            test(`* ++*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 3,
+                                before: ` `,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 3,
+                                end: 4,
+                                invalid: true,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 4,
+                                end: 5,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
+        it(`*+*+*`, () => {
+            test(`*+*+*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 2,
+                                end: 3,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 3,
+                                end: 4,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 4,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*   *`, () => {
+            test(`*   *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `space`,
+                                value: ` `,
+                                start: 1,
+                                end: 4,
+                                after: `  `,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 4,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`* + *`, () => {
+            test(`* + *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 4,
+                                before: ` `,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 4,
+                                end: 5,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`*+~> *`, () => {
+            test(`*+~> *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 6,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `~`,
+                                value: `~`,
+                                start: 2,
+                                end: 3,
+                                invalid: true,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `>`,
+                                value: `>`,
+                                start: 3,
+                                end: 5,
+                                after: ` `,
+                                invalid: true,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 5,
+                                end: 6,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`* /*c1*/ + *`, () => {
+            test(`* /*c1*/ + *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 12,
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 1,
+                                end: 9,
+                                before: ` `,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 9,
+                                end: 11,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 11,
+                                end: 12,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(` /*c1*/ + *`, () => {
+            test(` /*c1*/ + *`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 11,
+                        before: ` `,
+                        nodes: [
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 1,
+                                end: 8,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 8,
+                                end: 10,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 10,
+                                end: 11,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
     });
-    it(`:nth-of-type(2n)`, () => {
-      test(`:nth-of-type(2n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 16,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-of-type`,
-                start: 0,
-                end: 16,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 13,
-                    end: 15,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 13,
+    describe(`invalid`, () => {
+        it(`:pseudo(`, () => {
+            test(`:pseudo(`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `pseudo`,
+                                start: 0,
+                                end: 7,
+                            }),
+                            createNode({
+                                type: `invalid`,
+                                value: `(`,
+                                start: 7,
+                                end: 8,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`::pseudo(`, () => {
+            test(`::pseudo(`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 9,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `pseudo`,
+                                start: 0,
+                                end: 8,
+                            }),
+                            createNode({
+                                type: `invalid`,
+                                value: `(`,
+                                start: 8,
+                                end: 9,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`.ns|*`, () => {
+            test(`.ns|*`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 5,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `ns`,
+                                start: 0,
+                                end: 3,
+                            }),
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 3,
+                                end: 5,
+                                namespace: {
+                                    value: ``,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                    invalid: `namespace`,
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`ns|`, () => {
+            test(`ns|`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 3,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: ``,
+                                start: 0,
+                                end: 3,
+                                namespace: {
+                                    value: `ns`,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                    invalid: `target`,
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:x|`, () => {
+            test(`:x|`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 3,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `x`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `type`,
+                                value: ``,
+                                start: 2,
+                                end: 3,
+                                namespace: {
+                                    value: ``,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                    invalid: `namespace,target`,
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`ns|||div`, () => {
+            test(`ns|||div`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 8,
+                        nodes: [
+                            createNode({
+                                type: `type`,
+                                value: ``,
+                                start: 0,
+                                end: 3,
+                                namespace: {
+                                    value: `ns`,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                    invalid: `target`,
+                                },
+                            }),
+                            createNode({
+                                type: `type`,
+                                value: ``,
+                                start: 3,
+                                end: 4,
+                                namespace: {
+                                    value: ``,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                    invalid: `namespace,target`,
+                                },
+                            }),
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 4,
+                                end: 8,
+                                namespace: {
+                                    value: ``,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                    invalid: `namespace`,
+                                },
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`:nth-child(-3x)`, () => {
+            test(`:nth-child(-3x)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 15,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 15,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 14,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `-3x`,
+                                                start: 11,
+                                                end: 14,
+                                                invalid: true,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-last-of-type(2n)`, () => {
-      test(`:nth-last-of-type(2n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 21,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-last-of-type`,
-                start: 0,
-                end: 21,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 18,
-                    end: 20,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 18,
-                        end: 20,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(-odd)`, () => {
+            test(`:nth-child(-odd)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 16,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 16,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 15,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `-odd`,
+                                                start: 11,
+                                                end: 15,
+                                                invalid: true,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child( 2n)`, () => {
-      test(`:nth-child( 2n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 15,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 14,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 12,
-                        end: 14,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(+even)`, () => {
+            test(`:nth-child(+even)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 17,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 17,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `+even`,
+                                                start: 11,
+                                                end: 16,
+                                                invalid: true,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`namespace`, () => {
-    it(`ns|div`, () => {
-      test(`ns|div`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 6,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 0,
-                end: 6,
-                namespace: {
-                  value: `ns`,
-                  beforeComments: [],
-                  afterComments: [],
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*|div`, () => {
-      test(`*|div`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 0,
-                end: 5,
-                namespace: {
-                  value: `*`,
-                  beforeComments: [],
-                  afterComments: [],
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`|div`, () => {
-      test(`|div`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 4,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 0,
-                end: 4,
-                namespace: {
-                  value: ``,
-                  beforeComments: [],
-                  afterComments: [],
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`ns|*`, () => {
-      test(`ns|*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 4,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 4,
-                namespace: {
-                  value: `ns`,
-                  beforeComments: [],
-                  afterComments: [],
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`nesting (not-native)`, () => {
-    it(`div(:hover)`, () => {
-      test(`div(:hover)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 11,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 0,
-                end: 11,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 4,
-                    end: 10,
-                    nodes: [
-                      createNode({
-                        type: `pseudo_class`,
-                        value: `hover`,
-                        start: 4,
-                        end: 10,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(5n-3n)`, () => {
+            test(`:nth-child(5n-3n)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 17,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 17,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `5n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `-3n`,
+                                                start: 13,
+                                                end: 16,
+                                                invalid: true,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`#id(:hover)`, () => {
-      test(`#id(:hover)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 11,
-            nodes: [
-              createNode({
-                type: `id`,
-                value: `id`,
-                start: 0,
-                end: 11,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 4,
-                    end: 10,
-                    nodes: [
-                      createNode({
-                        type: `pseudo_class`,
-                        value: `hover`,
-                        start: 4,
-                        end: 10,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(2n+3 off div)`, () => {
+            test(`:nth-child(2n+3 off div)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 24,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 24,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 19,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `2n`,
+                                                start: 11,
+                                                end: 13,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `+3`,
+                                                start: 13,
+                                                end: 16,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_of`,
+                                                value: `off`,
+                                                start: 16,
+                                                end: 19,
+                                                invalid: true,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 19,
+                                        end: 23,
+                                        before: ` `,
+                                        nodes: [
+                                            createNode({
+                                                type: `type`,
+                                                value: `div`,
+                                                start: 20,
+                                                end: 23,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`.a(:hover)`, () => {
-      test(`.a(:hover)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 10,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 0,
-                end: 10,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 3,
-                    end: 9,
-                    nodes: [
-                      createNode({
-                        type: `pseudo_class`,
-                        value: `hover`,
-                        start: 3,
-                        end: 9,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`:nth-child(- 5)`, () => {
+            test(`:nth-child(- 5)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 15,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 15,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 14,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `-`,
+                                                start: 11,
+                                                end: 13,
+                                                after: ` `,
+                                                invalid: true,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `5`,
+                                                start: 13,
+                                                end: 14,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`[attr="val"](:hover)`, () => {
-      test(`[attr="val"](:hover)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 20,
-            nodes: [
-              createNode({
-                type: `attribute`,
-                value: `attr="val"`,
-                start: 0,
-                end: 20,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 13,
-                    end: 19,
-                    nodes: [
-                      createNode({
-                        type: `pseudo_class`,
-                        value: `hover`,
-                        start: 13,
+            });
+        });
+        it(`:nth-child(5n - +3)`, () => {
+            test(`:nth-child(5n - +3)`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 19,
-                      }),
-                    ],
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`&(:hover)`, () => {
-      test(`&(:hover)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 9,
-            nodes: [
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 0,
-                end: 9,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 2,
-                    end: 8,
-                    nodes: [
-                      createNode({
-                        type: `pseudo_class`,
-                        value: `hover`,
-                        start: 2,
-                        end: 8,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `nth-child`,
+                                start: 0,
+                                end: 19,
+                                nodes: [
+                                    createNode({
+                                        type: `nth`,
+                                        start: 11,
+                                        end: 18,
+                                        nodes: [
+                                            createNode({
+                                                type: `nth_step`,
+                                                value: `5n`,
+                                                start: 11,
+                                                end: 14,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_dash`,
+                                                value: `-`,
+                                                start: 14,
+                                                end: 16,
+                                                after: ` `,
+                                            }),
+                                            createNode({
+                                                type: `nth_offset`,
+                                                value: `+3`,
+                                                start: 16,
+                                                end: 18,
+                                                invalid: true,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`comments`, () => {
-    it(`/* comment  */`, () => {
-      test(`/* comment  */`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 14,
-            nodes: [
-              createNode({
-                type: `comment`,
-                value: `/* comment  */`,
-                start: 0,
-                end: 14,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`./*comment1???*//*???comment2*/classX`, () => {
-      test(`./*comment1???*//*???comment2*/classX`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 37,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `classX`,
-                start: 0,
-                end: 37,
-                dotComments: [
-                  createNode({
-                    type: `comment`,
-                    value: `/*comment1???*/`,
-                    start: 1,
-                    end: 16,
-                  }),
-                  createNode({
-                    type: `comment`,
-                    value: `/*???comment2*/`,
-                    start: 16,
-                    end: 31,
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:/*comment1???*//*???comment2*/pseudo-class`, () => {
-      test(`:/*comment1???*//*???comment2*/pseudo-class`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 43,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `pseudo-class`,
-                start: 0,
-                end: 43,
-                colonComments: [
-                  createNode({
-                    type: `comment`,
-                    value: `/*comment1???*/`,
-                    start: 1,
-                    end: 16,
-                  }),
-                  createNode({
-                    type: `comment`,
-                    value: `/*???comment2*/`,
-                    start: 16,
-                    end: 31,
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:/*c1*//*c2*/:/*c3*//*c4*/pseudo-element`, () => {
-      test(`:/*c1*//*c2*/:/*c3*//*c4*/pseudo-element`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 40,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `pseudo-element`,
-                start: 0,
-                end: 40,
-                colonComments: {
-                  first: [
-                    createNode({
-                      type: `comment`,
-                      value: `/*c1*/`,
-                      start: 1,
-                      end: 7,
-                    }),
-                    createNode({
-                      type: `comment`,
-                      value: `/*c2*/`,
-                      start: 7,
-                      end: 13,
-                    }),
-                  ],
-                  second: [
-                    createNode({
-                      type: `comment`,
-                      value: `/*c3*/`,
-                      start: 14,
-                      end: 20,
-                    }),
-                    createNode({
-                      type: `comment`,
-                      value: `/*c4*/`,
-                      start: 20,
-                      end: 26,
-                    }),
-                  ],
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*+/*c1*/+*`, () => {
-      test(`*+/*c1*/+*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 10,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
-                start: 2,
-                end: 8,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 8,
-                end: 9,
-                invalid: true,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 9,
-                end: 10,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*+/*c1*/  *`, () => {
-      test(`*+/*c1*/  *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 11,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
-                start: 2,
-                end: 10,
-                after: `  `,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 10,
-                end: 11,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*+ /*c1*/ /*c2*/ *`, () => {
-      test(`*+ /*c1*/ /*c2*/ *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 18,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 3,
-                after: ` `,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
-                start: 3,
-                end: 10,
-                after: ` `,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c2*/`,
-                start: 10,
-                end: 17,
-                after: ` `,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 17,
-                end: 18,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*/*c1*//*c2*/|/*c3*//*c4*/div`, () => {
-      test(`*/*c1*//*c2*/|/*c3*//*c4*/div`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 29,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 0,
-                end: 29,
-                namespace: {
-                  value: `*`,
-                  beforeComments: [
-                    createNode({
-                      type: `comment`,
-                      value: `/*c1*/`,
-                      start: 1,
-                      end: 7,
-                    }),
-                    createNode({
-                      type: `comment`,
-                      value: `/*c2*/`,
-                      start: 7,
-                      end: 13,
-                    }),
-                  ],
-                  afterComments: [
-                    createNode({
-                      type: `comment`,
-                      value: `/*c3*/`,
-                      start: 14,
-                      end: 20,
-                    }),
-                    createNode({
-                      type: `comment`,
-                      value: `/*c4*/`,
-                      start: 20,
-                      end: 26,
-                    }),
-                  ],
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(/*c0*/ -5n /*c1*/ - /*c2*/ 10 /*c3*/ of /*c4*/div/*c5*/)`, () => {
-      test(
-        `:nth-child(/*c0*/ -5n /*c1*/ - /*c2*/ 10 /*c3*/ of /*c4*/div/*c5*/)`,
-        {
-          expectedAst: [
-            createNode({
-              type: `selector`,
-              start: 0,
-              end: 67,
-              nodes: [
-                createNode({
-                  type: `pseudo_class`,
-                  value: `nth-child`,
-                  start: 0,
-                  end: 67,
-                  nodes: [
-                    createNode({
-                      type: `nth`,
-                      start: 11,
-                      end: 50,
-                      nodes: [
-                        createNode({
-                          type: `comment`,
-                          value: `/*c0*/`,
-                          start: 11,
-                          end: 18,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `nth_step`,
-                          value: `-5n`,
-                          start: 18,
-                          end: 22,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `comment`,
-                          value: `/*c1*/`,
-                          start: 22,
-                          end: 29,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `nth_dash`,
-                          value: `-`,
-                          start: 29,
-                          end: 31,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `comment`,
-                          value: `/*c2*/`,
-                          start: 31,
-                          end: 38,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `nth_offset`,
-                          value: `10`,
-                          start: 38,
-                          end: 41,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `comment`,
-                          value: `/*c3*/`,
-                          start: 41,
-                          end: 48,
-                          after: ` `,
-                        }),
-                        createNode({
-                          type: `nth_of`,
-                          value: `of`,
-                          start: 48,
-                          end: 50,
-                        }),
-                      ],
+            });
+        });
+        it(`&|&`, () => {
+            test(`&|&`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 3,
+                        nodes: [
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `type`,
+                                value: ``,
+                                start: 1,
+                                end: 2,
+                                namespace: {
+                                    value: ``,
+                                    invalid: `namespace,target`,
+                                    beforeComments: [],
+                                    afterComments: [],
+                                },
+                            }),
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 2,
+                                end: 3,
+                            }),
+                        ],
                     }),
+                ],
+            });
+        });
+        it(`.x{}`, () => {
+            test(`.x{}`, {
+                expectedAst: [
                     createNode({
-                      type: `selector`,
-                      start: 50,
-                      end: 66,
-                      before: ` `,
-                      nodes: [
-                        createNode({
-                          type: `comment`,
-                          value: `/*c4*/`,
-                          start: 51,
-                          end: 57,
-                        }),
-                        createNode({
-                          type: `type`,
-                          value: `div`,
-                          start: 57,
-                          end: 60,
-                        }),
-                        createNode({
-                          type: `comment`,
-                          value: `/*c5*/`,
-                          start: 60,
-                          end: 66,
-                        }),
-                      ],
-                    }),
-                  ],
-                }),
-              ],
-            }),
-          ],
-        }
-      );
-    });
-  });
-  describe(`combinators`, () => {
-    it(`* .nested-class`, () => {
-      test(`* .nested-class`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `space`,
-                value: ` `,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `nested-class`,
-                start: 2,
-                end: 15,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*+.adjacent-class`, () => {
-      test(`*+.adjacent-class`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 17,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `adjacent-class`,
-                start: 2,
-                end: 17,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*~.proceeding-sibling-class`, () => {
-      test(`*~.proceeding-sibling-class`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 27,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `~`,
-                value: `~`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `proceeding-sibling-class`,
-                start: 2,
-                end: 27,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*>.direct-child-class`, () => {
-      test(`*>.direct-child-class`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 21,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `>`,
-                value: `>`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `direct-child-class`,
-                start: 2,
-                end: 21,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*++*`, () => {
-      test(`*++*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 4,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 2,
-                end: 3,
-                invalid: true,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 3,
-                end: 4,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`* ++*`, () => {
-      test(`* ++*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 3,
-                before: ` `,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 3,
-                end: 4,
-                invalid: true,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 4,
-                end: 5,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*+*+*`, () => {
-      test(`*+*+*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 2,
-                end: 3,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 3,
-                end: 4,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 4,
-                end: 5,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*   *`, () => {
-      test(`*   *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `space`,
-                value: ` `,
-                start: 1,
-                end: 4,
-                after: `  `,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 4,
-                end: 5,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`* + *`, () => {
-      test(`* + *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 4,
-                before: ` `,
-                after: ` `,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 4,
-                end: 5,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*+~> *`, () => {
-      test(`*+~> *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 6,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `~`,
-                value: `~`,
-                start: 2,
-                end: 3,
-                invalid: true,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `>`,
-                value: `>`,
-                start: 3,
-                end: 5,
-                after: ` `,
-                invalid: true,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 5,
-                end: 6,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`* /*c1*/ + *`, () => {
-      test(`* /*c1*/ + *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 12,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
-                start: 1,
-                end: 9,
-                before: ` `,
-                after: ` `,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 9,
-                end: 11,
-                after: ` `,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 11,
-                end: 12,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(` /*c1*/ + *`, () => {
-      test(` /*c1*/ + *`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 11,
-            before: ` `,
-            nodes: [
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
-                start: 1,
-                end: 8,
-                after: ` `,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 8,
-                end: 10,
-                after: ` `,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 10,
-                end: 11,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`invalid`, () => {
-    it(`:pseudo(`, () => {
-      test(`:pseudo(`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `pseudo`,
-                start: 0,
-                end: 7,
-              }),
-              createNode({
-                type: `invalid`,
-                value: `(`,
-                start: 7,
-                end: 8,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`::pseudo(`, () => {
-      test(`::pseudo(`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 9,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `pseudo`,
-                start: 0,
-                end: 8,
-              }),
-              createNode({
-                type: `invalid`,
-                value: `(`,
-                start: 8,
-                end: 9,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`.ns|*`, () => {
-      test(`.ns|*`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 5,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `ns`,
-                start: 0,
-                end: 3,
-              }),
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 3,
-                end: 5,
-                namespace: {
-                  value: ``,
-                  beforeComments: [],
-                  afterComments: [],
-                  invalid: `namespace`,
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`ns|`, () => {
-      test(`ns|`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 3,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: ``,
-                start: 0,
-                end: 3,
-                namespace: {
-                  value: `ns`,
-                  beforeComments: [],
-                  afterComments: [],
-                  invalid: `target`,
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:x|`, () => {
-      test(`:x|`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 3,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `x`,
-                start: 0,
-                end: 2,
-              }),
-              createNode({
-                type: `type`,
-                value: ``,
-                start: 2,
-                end: 3,
-                namespace: {
-                  value: ``,
-                  beforeComments: [],
-                  afterComments: [],
-                  invalid: `namespace,target`,
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`ns|||div`, () => {
-      test(`ns|||div`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 8,
-            nodes: [
-              createNode({
-                type: `type`,
-                value: ``,
-                start: 0,
-                end: 3,
-                namespace: {
-                  value: `ns`,
-                  beforeComments: [],
-                  afterComments: [],
-                  invalid: `target`,
-                },
-              }),
-              createNode({
-                type: `type`,
-                value: ``,
-                start: 3,
-                end: 4,
-                namespace: {
-                  value: ``,
-                  beforeComments: [],
-                  afterComments: [],
-                  invalid: `namespace,target`,
-                },
-              }),
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 4,
-                end: 8,
-                namespace: {
-                  value: ``,
-                  beforeComments: [],
-                  afterComments: [],
-                  invalid: `namespace`,
-                },
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(-3x)`, () => {
-      test(`:nth-child(-3x)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 15,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 14,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `-3x`,
-                        start: 11,
-                        end: 14,
-                        invalid: true,
-                      }),
-                    ],
-                  }),
+                        type: `selector`,
+                        start: 0,
+                        end: 4,
+                        nodes: [
+                            createNode({ type: 'class', value: 'x', start: 0, end: 2 }),
+                            createNode({ type: 'invalid', value: '{', start: 2, end: 3 }),
+                            createNode({ type: 'invalid', value: '}', start: 3, end: 4 }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
     });
-    it(`:nth-child(-odd)`, () => {
-      test(`:nth-child(-odd)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 16,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 16,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 15,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `-odd`,
-                        start: 11,
-                        end: 15,
-                        invalid: true,
-                      }),
-                    ],
-                  }),
+    describe(`spaces`, () => {
+        it(`:p(  .a  ,   .b  )`, () => {
+            test(`:p(  .a  ,   .b  )`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 18,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `p`,
+                                start: 0,
+                                end: 18,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 3,
+                                        end: 9,
+                                        before: `  `,
+                                        after: `  `,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 5,
+                                                end: 7,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 10,
+                                        end: 17,
+                                        before: `   `,
+                                        after: `  `,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `b`,
+                                                start: 13,
+                                                end: 15,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(+even)`, () => {
-      test(`:nth-child(+even)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 17,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 17,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `+even`,
-                        start: 11,
-                        end: 16,
-                        invalid: true,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`::p(  .a  ,   .b  )`, () => {
+            test(`::p(  .a  ,   .b  )`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 19,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_element`,
+                                value: `p`,
+                                start: 0,
+                                end: 19,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 4,
+                                        end: 10,
+                                        before: `  `,
+                                        after: `  `,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `a`,
+                                                start: 6,
+                                                end: 8,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 11,
+                                        end: 18,
+                                        before: `   `,
+                                        after: `  `,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `b`,
+                                                start: 14,
+                                                end: 16,
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(5n-3n)`, () => {
-      test(`:nth-child(5n-3n)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 17,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 17,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `5n`,
-                        start: 11,
+            });
+        });
+        it(`*    .a  + .b`, () => {
+            test(`*    .a  + .b`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 13,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `-3n`,
-                        start: 13,
-                        end: 16,
-                        invalid: true,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `space`,
+                                value: ` `,
+                                after: `   `,
+                                start: 1,
+                                end: 5,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 5,
+                                end: 7,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                before: `  `,
+                                after: ` `,
+                                start: 7,
+                                end: 11,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 11,
+                                end: 13,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(2n+3 off div)`, () => {
-      test(`:nth-child(2n+3 off div)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 24,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 24,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 19,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `2n`,
-                        start: 11,
-                        end: 13,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `+3`,
-                        start: 13,
-                        end: 16,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_of`,
-                        value: `off`,
-                        start: 16,
-                        end: 19,
-                        invalid: true,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 19,
-                    end: 23,
-                    before: ` `,
-                    nodes: [
-                      createNode({
-                        type: `type`,
-                        value: `div`,
-                        start: 20,
-                        end: 23,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(` /*c1*/ .a .b /*c2*/ `, () => {
+            test(` /*c1*/ .a .b /*c2*/ `, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 21,
+                        before: ` `,
+                        nodes: [
+                            createNode({
+                                type: `comment`,
+                                value: `/*c1*/`,
+                                start: 1,
+                                end: 8,
+                                after: ` `,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 8,
+                                end: 10,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `space`,
+                                value: ` `,
+                                start: 10,
+                                end: 11,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 11,
+                                end: 13,
+                            }),
+                            createNode({
+                                type: `comment`,
+                                value: `/*c2*/`,
+                                start: 13,
+                                end: 21,
+                                before: ` `,
+                                after: ` `,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
     });
-    it(`:nth-child(- 5)`, () => {
-      test(`:nth-child(- 5)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 15,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 14,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `-`,
-                        start: 11,
-                        end: 13,
-                        after: ` `,
-                        invalid: true,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `5`,
-                        start: 13,
-                        end: 14,
-                      }),
-                    ],
-                  }),
+    describe(`escaped`, () => {
+        it(`should parse escaped delimiters as part of value`, () => {
+            test(`.classWith\\.dot`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 15,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `classWith\\.dot`,
+                                start: 0,
+                                end: 15,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`:nth-child(5n - +3)`, () => {
-      test(`:nth-child(5n - +3)`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 19,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `nth-child`,
-                start: 0,
-                end: 19,
-                nodes: [
-                  createNode({
-                    type: `nth`,
-                    start: 11,
-                    end: 18,
-                    nodes: [
-                      createNode({
-                        type: `nth_step`,
-                        value: `5n`,
-                        start: 11,
-                        end: 14,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_dash`,
-                        value: `-`,
-                        start: 14,
-                        end: 16,
-                        after: ` `,
-                      }),
-                      createNode({
-                        type: `nth_offset`,
-                        value: `+3`,
-                        start: 16,
-                        end: 18,
-                        invalid: true,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`should parse escaped delimiters (various)`, () => {
+            test(`.a\\.\\[\\]\\(\\)\\,\\*\\|\\:\\#\\>\\~\\+\\{\\}`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 32,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a\\.\\[\\]\\(\\)\\,\\*\\|\\:\\#\\>\\~\\+\\{\\}`,
+                                start: 0,
+                                end: 32,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`&|&`, () => {
-      test(`&|&`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 3,
-            nodes: [
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `type`,
-                value: ``,
-                start: 1,
-                end: 2,
-                namespace: {
-                  value: ``,
-                  invalid: `namespace,target`,
-                  beforeComments: [],
-                  afterComments: [],
-                },
-              }),
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 2,
-                end: 3,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`.x{}`, () => {
-      test(`.x{}`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 4,
-            nodes: [
-              createNode({ type: "class", value: "x", start: 0, end: 2 }),
-              createNode({ type: "invalid", value: "{", start: 2, end: 3 }),
-              createNode({ type: "invalid", value: "}", start: 3, end: 4 }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
+        it(`should parse escaped string delimiters as part of value`, () => {
+            test(`.a\\"\\'`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 6,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `a\\"\\'`,
+                                start: 0,
+                                end: 6,
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
     });
-  });
-  describe(`spaces`, () => {
-    it(`:p(  .a  ,   .b  )`, () => {
-      test(`:p(  .a  ,   .b  )`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 18,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `p`,
-                start: 0,
-                end: 18,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 3,
-                    end: 9,
-                    before: `  `,
-                    after: `  `,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 5,
+    describe(`combinations`, () => {
+        it(`:a(.b,::d(.e,.f))`, () => {
+            test(`:a(.b,::d(.e,.f))`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 17,
+                        nodes: [
+                            createNode({
+                                type: `pseudo_class`,
+                                value: `a`,
+                                start: 0,
+                                end: 17,
+                                nodes: [
+                                    createNode({
+                                        type: `selector`,
+                                        start: 3,
+                                        end: 5,
+                                        nodes: [
+                                            createNode({
+                                                type: `class`,
+                                                value: `b`,
+                                                start: 3,
+                                                end: 5,
+                                            }),
+                                        ],
+                                    }),
+                                    createNode({
+                                        type: `selector`,
+                                        start: 6,
+                                        end: 16,
+                                        nodes: [
+                                            createNode({
+                                                type: `pseudo_element`,
+                                                value: `d`,
+                                                start: 6,
+                                                end: 16,
+                                                nodes: [
+                                                    createNode({
+                                                        type: `selector`,
+                                                        start: 10,
+                                                        end: 12,
+                                                        nodes: [
+                                                            createNode({
+                                                                type: `class`,
+                                                                value: `e`,
+                                                                start: 10,
+                                                                end: 12,
+                                                            }),
+                                                        ],
+                                                    }),
+                                                    createNode({
+                                                        type: `selector`,
+                                                        start: 13,
+                                                        end: 15,
+                                                        nodes: [
+                                                            createNode({
+                                                                type: `class`,
+                                                                value: `f`,
+                                                                start: 13,
+                                                                end: 15,
+                                                            }),
+                                                        ],
+                                                    }),
+                                                ],
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
+                ],
+            });
+        });
+        it(`* .a+.b`, () => {
+            test(`* .a+.b`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
                         end: 7,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 10,
-                    end: 17,
-                    before: `   `,
-                    after: `  `,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `b`,
-                        start: 13,
-                        end: 15,
-                      }),
-                    ],
-                  }),
+                        nodes: [
+                            createNode({
+                                type: `universal`,
+                                value: `*`,
+                                start: 0,
+                                end: 1,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `space`,
+                                value: ` `,
+                                start: 1,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `a`,
+                                start: 2,
+                                end: 4,
+                            }),
+                            createNode({
+                                type: `combinator`,
+                                combinator: `+`,
+                                value: `+`,
+                                start: 4,
+                                end: 5,
+                            }),
+                            createNode({
+                                type: `class`,
+                                value: `b`,
+                                start: 5,
+                                end: 7,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`::p(  .a  ,   .b  )`, () => {
-      test(`::p(  .a  ,   .b  )`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 19,
-            nodes: [
-              createNode({
-                type: `pseudo_element`,
-                value: `p`,
-                start: 0,
-                end: 19,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 4,
-                    end: 10,
-                    before: `  `,
-                    after: `  `,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `a`,
-                        start: 6,
-                        end: 8,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 11,
-                    end: 18,
-                    before: `   `,
-                    after: `  `,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `b`,
-                        start: 14,
-                        end: 16,
-                      }),
-                    ],
-                  }),
+            });
+        });
+        it(`.z&div`, () => {
+            test(`.z&div`, {
+                expectedAst: [
+                    createNode({
+                        type: `selector`,
+                        start: 0,
+                        end: 6,
+                        nodes: [
+                            createNode({
+                                type: `class`,
+                                value: `z`,
+                                start: 0,
+                                end: 2,
+                            }),
+                            createNode({
+                                type: `nesting`,
+                                value: `&`,
+                                start: 2,
+                                end: 3,
+                            }),
+                            createNode({
+                                type: `type`,
+                                value: `div`,
+                                start: 3,
+                                end: 6,
+                            }),
+                        ],
+                    }),
                 ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`*    .a  + .b`, () => {
-      test(`*    .a  + .b`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 13,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `space`,
-                value: ` `,
-                after: `   `,
-                start: 1,
-                end: 5,
-              }),
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 5,
-                end: 7,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                before: `  `,
-                after: ` `,
-                start: 7,
-                end: 11,
-              }),
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 11,
-                end: 13,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(` /*c1*/ .a .b /*c2*/ `, () => {
-      test(` /*c1*/ .a .b /*c2*/ `, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 21,
-            before: ` `,
-            nodes: [
-              createNode({
-                type: `comment`,
-                value: `/*c1*/`,
-                start: 1,
-                end: 8,
-                after: ` `,
-              }),
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 8,
-                end: 10,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `space`,
-                value: ` `,
-                start: 10,
-                end: 11,
-              }),
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 11,
-                end: 13,
-              }),
-              createNode({
-                type: `comment`,
-                value: `/*c2*/`,
-                start: 13,
-                end: 21,
-                before: ` `,
-                after: ` `,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`escaped`, () => {
-    it(`should parse escaped delimiters as part of value`, () => {
-      test(`.classWith\\.dot`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 15,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `classWith\\.dot`,
-                start: 0,
-                end: 15,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`should parse escaped delimiters (various)`, () => {
-      test(`.a\\.\\[\\]\\(\\)\\,\\*\\|\\:\\#\\>\\~\\+\\{\\}`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 32,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a\\.\\[\\]\\(\\)\\,\\*\\|\\:\\#\\>\\~\\+\\{\\}`,
-                start: 0,
-                end: 32,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`should parse escaped string delimiters as part of value`, () => {
-      test(`.a\\"\\'`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 6,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `a\\"\\'`,
-                start: 0,
-                end: 6,
-              }),
-            ],
-          }),
-        ],
-      });
+            });
+        });
     });
-  });
-  describe(`combinations`, () => {
-    it(`:a(.b,::d(.e,.f))`, () => {
-      test(`:a(.b,::d(.e,.f))`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 17,
-            nodes: [
-              createNode({
-                type: `pseudo_class`,
-                value: `a`,
-                start: 0,
-                end: 17,
-                nodes: [
-                  createNode({
-                    type: `selector`,
-                    start: 3,
-                    end: 5,
-                    nodes: [
-                      createNode({
-                        type: `class`,
-                        value: `b`,
-                        start: 3,
-                        end: 5,
-                      }),
-                    ],
-                  }),
-                  createNode({
-                    type: `selector`,
-                    start: 6,
-                    end: 16,
-                    nodes: [
-                      createNode({
-                        type: `pseudo_element`,
-                        value: `d`,
-                        start: 6,
-                        end: 16,
-                        nodes: [
-                          createNode({
+    describe(`config`, () => {
+        describe(`offset`, () => {
+            it(`should start from a given offset`, () => {
+                test(`.classX`, {
+                    config: { offset: 10 },
+                    expectedAst: [
+                        createNode({
                             type: `selector`,
                             start: 10,
-                            end: 12,
+                            end: 17,
                             nodes: [
-                              createNode({
-                                type: `class`,
-                                value: `e`,
-                                start: 10,
-                                end: 12,
-                              }),
-                            ],
-                          }),
-                          createNode({
-                            type: `selector`,
-                            start: 13,
-                            end: 15,
-                            nodes: [
-                              createNode({
-                                type: `class`,
-                                value: `f`,
-                                start: 13,
-                                end: 15,
-                              }),
+                                createNode({
+                                    type: `class`,
+                                    value: `classX`,
+                                    start: 10,
+                                    end: 17,
+                                }),
                             ],
-                          }),
-                        ],
-                      }),
+                        }),
                     ],
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`* .a+.b`, () => {
-      test(`* .a+.b`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 7,
-            nodes: [
-              createNode({
-                type: `universal`,
-                value: `*`,
-                start: 0,
-                end: 1,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `space`,
-                value: ` `,
-                start: 1,
-                end: 2,
-              }),
-              createNode({
-                type: `class`,
-                value: `a`,
-                start: 2,
-                end: 4,
-              }),
-              createNode({
-                type: `combinator`,
-                combinator: `+`,
-                value: `+`,
-                start: 4,
-                end: 5,
-              }),
-              createNode({
-                type: `class`,
-                value: `b`,
-                start: 5,
-                end: 7,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-    it(`.z&div`, () => {
-      test(`.z&div`, {
-        expectedAst: [
-          createNode({
-            type: `selector`,
-            start: 0,
-            end: 6,
-            nodes: [
-              createNode({
-                type: `class`,
-                value: `z`,
-                start: 0,
-                end: 2,
-              }),
-              createNode({
-                type: `nesting`,
-                value: `&`,
-                start: 2,
-                end: 3,
-              }),
-              createNode({
-                type: `type`,
-                value: `div`,
-                start: 3,
-                end: 6,
-              }),
-            ],
-          }),
-        ],
-      });
-    });
-  });
-  describe(`config`, () => {
-    describe(`offset`, () => {
-      it(`should start from a given offset`, () => {
-        test(`.classX`, {
-          config: { offset: 10 },
-          expectedAst: [
-            createNode({
-              type: `selector`,
-              start: 10,
-              end: 17,
-              nodes: [
-                createNode({
-                  type: `class`,
-                  value: `classX`,
-                  start: 10,
-                  end: 17,
-                }),
-              ],
-            }),
-          ],
-        });
-      });
+                });
+            });
+        });
     });
-  });
 });
diff --git a/packages/css-selector-parser/test/stringify.spec.ts b/packages/css-selector-parser/test/stringify.spec.ts
index d716dd97..3ea41020 100644
--- a/packages/css-selector-parser/test/stringify.spec.ts
+++ b/packages/css-selector-parser/test/stringify.spec.ts
@@ -58,6 +58,5 @@ describe(`stringifySelectorAst`, () => {
         ].forEach((ast) => {
             stringifySelectorAst(ast); // expect no type error
         });
-        
     });
 });
diff --git a/packages/css-selector-parser/test/test-kit/parsing.ts b/packages/css-selector-parser/test/test-kit/parsing.ts
index c524cb74..c058d19d 100644
--- a/packages/css-selector-parser/test/test-kit/parsing.ts
+++ b/packages/css-selector-parser/test/test-kit/parsing.ts
@@ -1,118 +1,114 @@
-import {
-  parseCssSelector,
-  stringifySelectorAst,
-} from "@tokey/css-selector-parser";
+import { parseCssSelector, stringifySelectorAst } from '@tokey/css-selector-parser';
 import type {
-  SelectorNode,
-  Selector,
-  Universal,
-  Class,
-  PseudoElement,
-  PseudoClass,
-  Attribute,
-  Type,
-  Id,
-  Comment,
-  Nth,
-  NthStep,
-  NthDash,
-  NthOffset,
-  NthOf,
-  Nesting,
-  CompoundSelector,
-  ParseConfig,
-} from "@tokey/css-selector-parser";
-import { createParseTester } from "@tokey/test-kit";
+    SelectorNode,
+    Selector,
+    Universal,
+    Class,
+    PseudoElement,
+    PseudoClass,
+    Attribute,
+    Type,
+    Id,
+    Comment,
+    Nth,
+    NthStep,
+    NthDash,
+    NthOffset,
+    NthOf,
+    Nesting,
+    CompoundSelector,
+    ParseConfig,
+} from '@tokey/css-selector-parser';
+import { createParseTester } from '@tokey/test-kit';
 
 export const test = createParseTester({
-  parse: (selector: string, config?: ParseConfig) =>
-    parseCssSelector(selector, config),
-  stringify: stringifySelectorAst,
+    parse: (selector: string, config?: ParseConfig) => parseCssSelector(selector, config),
+    stringify: stringifySelectorAst,
 });
 
-export function createNode<TYPE extends SelectorNode["type"]>(
-  expected: Partial<SelectorNode> & { type: TYPE }
-): TYPE extends "selector"
-  ? Selector
-  : TYPE extends "universal"
-  ? Universal
-  : TYPE extends "comment"
-  ? Comment
-  : TYPE extends "nth"
-  ? Nth
-  : TYPE extends "nth_step"
-  ? NthStep
-  : TYPE extends "nth_dash"
-  ? NthDash
-  : TYPE extends "nth_offset"
-  ? NthOffset
-  : TYPE extends "nth_of"
-  ? NthOf
-  : TYPE extends "compound_selector"
-  ? CompoundSelector
-  : TYPE extends "class"
-  ? Class
-  : TYPE extends "pseudo_element"
-  ? PseudoElement
-  : TYPE extends "pseudo_class"
-  ? PseudoClass
-  : TYPE extends "attribute"
-  ? Attribute
-  : TYPE extends "type"
-  ? Type
-  : TYPE extends "id"
-  ? Id
-  : TYPE extends "nesting"
-  ? Nesting
-  : SelectorNode {
-  const defaults: SelectorNode = {
-    type: expected.type,
-    start: 0,
-    end: 0,
-    // value: ``,
-  } as any;
-  // if (
-  //   defaults.type === `attribute` ||
-  //   defaults.type === `id` ||
-  //   defaults.type === `class` ||
-  //   defaults.type === `selector` ||
-  //   defaults.type === `pseudo_class` ||
-  //   defaults.type === `pseudo_element` ||
-  //   defaults.type === `star`
-  // ) {
-  //   defaults.nodes = [];
-  // }
-  if (defaults.type === `class`) {
-    defaults.dotComments = [];
-  }
-  if (defaults.type === `universal` || defaults.type === `type`) {
-    // defaults.namespace = { value: ``, beforeComments: [], afterComments: [] };
-  }
-  if (defaults.type === `pseudo_class`) {
-    defaults.colonComments = [];
-  }
-  if (defaults.type === `pseudo_element`) {
-    defaults.colonComments = { first: [], second: [] };
-  }
-  if (
-    defaults.type === `selector` ||
-    defaults.type === `compound_selector` ||
-    defaults.type === `combinator` ||
-    defaults.type === `comment` ||
-    defaults.type === `nth` ||
-    defaults.type === `nth_step` ||
-    defaults.type === `nth_dash` ||
-    defaults.type === `nth_offset` ||
-    defaults.type === `nth_of`
-  ) {
-    defaults.before = ``;
-    defaults.after = ``;
-  }
-  if (defaults.type === `combinator` || defaults.type === `compound_selector`) {
-    defaults.invalid = false;
-  }
-  return {
-    ...defaults,
-    ...(expected as unknown as any),
-  };
+export function createNode<TYPE extends SelectorNode['type']>(
+    expected: Partial<SelectorNode> & { type: TYPE }
+): TYPE extends 'selector'
+    ? Selector
+    : TYPE extends 'universal'
+    ? Universal
+    : TYPE extends 'comment'
+    ? Comment
+    : TYPE extends 'nth'
+    ? Nth
+    : TYPE extends 'nth_step'
+    ? NthStep
+    : TYPE extends 'nth_dash'
+    ? NthDash
+    : TYPE extends 'nth_offset'
+    ? NthOffset
+    : TYPE extends 'nth_of'
+    ? NthOf
+    : TYPE extends 'compound_selector'
+    ? CompoundSelector
+    : TYPE extends 'class'
+    ? Class
+    : TYPE extends 'pseudo_element'
+    ? PseudoElement
+    : TYPE extends 'pseudo_class'
+    ? PseudoClass
+    : TYPE extends 'attribute'
+    ? Attribute
+    : TYPE extends 'type'
+    ? Type
+    : TYPE extends 'id'
+    ? Id
+    : TYPE extends 'nesting'
+    ? Nesting
+    : SelectorNode {
+    const defaults: SelectorNode = {
+        type: expected.type,
+        start: 0,
+        end: 0,
+        // value: ``,
+    } as any;
+    // if (
+    //   defaults.type === `attribute` ||
+    //   defaults.type === `id` ||
+    //   defaults.type === `class` ||
+    //   defaults.type === `selector` ||
+    //   defaults.type === `pseudo_class` ||
+    //   defaults.type === `pseudo_element` ||
+    //   defaults.type === `star`
+    // ) {
+    //   defaults.nodes = [];
+    // }
+    if (defaults.type === `class`) {
+        defaults.dotComments = [];
+    }
+    if (defaults.type === `universal` || defaults.type === `type`) {
+        // defaults.namespace = { value: ``, beforeComments: [], afterComments: [] };
+    }
+    if (defaults.type === `pseudo_class`) {
+        defaults.colonComments = [];
+    }
+    if (defaults.type === `pseudo_element`) {
+        defaults.colonComments = { first: [], second: [] };
+    }
+    if (
+        defaults.type === `selector` ||
+        defaults.type === `compound_selector` ||
+        defaults.type === `combinator` ||
+        defaults.type === `comment` ||
+        defaults.type === `nth` ||
+        defaults.type === `nth_step` ||
+        defaults.type === `nth_dash` ||
+        defaults.type === `nth_offset` ||
+        defaults.type === `nth_of`
+    ) {
+        defaults.before = ``;
+        defaults.after = ``;
+    }
+    if (defaults.type === `combinator` || defaults.type === `compound_selector`) {
+        defaults.invalid = false;
+    }
+    return {
+        ...defaults,
+        ...(expected as unknown as any),
+    };
 }
diff --git a/packages/css-value-parser/package.json b/packages/css-value-parser/package.json
index 73b4219b..92b9c5e5 100644
--- a/packages/css-value-parser/package.json
+++ b/packages/css-value-parser/package.json
@@ -31,6 +31,5 @@
   "author": "Wix.com",
   "license": "MIT",
   "repository": "https://github.com/wixplosives/tokey/packages/css-value-parser",
-  "prettier": {},
   "sideEffects": false
 }
diff --git a/packages/css-value-parser/src/ast-types.ts b/packages/css-value-parser/src/ast-types.ts
index 45fde911..06f3b53a 100644
--- a/packages/css-value-parser/src/ast-types.ts
+++ b/packages/css-value-parser/src/ast-types.ts
@@ -1,70 +1,70 @@
 import type {
-  lengthValidUnits,
-  angleValidUnits,
-  frequencyValidUnits,
-  resolutionValidUnits,
-  timeValidUnits,
-} from "./units";
+    lengthValidUnits,
+    angleValidUnits,
+    frequencyValidUnits,
+    resolutionValidUnits,
+    timeValidUnits,
+} from './units';
 
 export interface CSSValueAST<TYPE extends string> {
-  type: TYPE;
-  start: number;
-  end: number;
-  value: string;
+    type: TYPE;
+    start: number;
+    end: number;
+    value: string;
 }
 
 export type BaseAstNode =
-  | Literal
-  | CssWideKeyword
-  | Space
-  | Comment
-  | Invalid
-  | CustomIdent
-  | DashedIdent
-  | Call
-  | String
-  | Number
-  | Integer
-  | Length
-  | Angle
-  | Time
-  | Percentage
-  | Frequency
-  | Resolution
-  | Flex
-  | UnknownUnit
-  | Color;
+    | Literal
+    | CssWideKeyword
+    | Space
+    | Comment
+    | Invalid
+    | CustomIdent
+    | DashedIdent
+    | Call
+    | String
+    | Number
+    | Integer
+    | Length
+    | Angle
+    | Time
+    | Percentage
+    | Frequency
+    | Resolution
+    | Flex
+    | UnknownUnit
+    | Color;
 
 /* types */
 
 // custom
 export type BuildVarAst = CSSValueAST<`build-var`> & {
-  subType: string;
-  id: string;
+    subType: string;
+    id: string;
 };
 export type Literal = CSSValueAST<`literal`> & {
-  before: string;
-  after: string;
+    before: string;
+    after: string;
 };
 export type CssWideKeyword = CSSValueAST<`css-wide-keyword`> & {
-  value: AnyCase<`inherit` | `unset` | `initial`>;
+    value: AnyCase<`inherit` | `unset` | `initial`>;
 };
 export type Space = CSSValueAST<`space`> & {
-  before: string;
-  after: string;
+    before: string;
+    after: string;
 };
 export type Comment = CSSValueAST<`comment`> & {
-  before: string;
-  after: string;
+    before: string;
+    after: string;
 };
-export type Call<TYPE extends string = "call"> = CSSValueAST<TYPE> & {
-  args: CSSValueAST<any>[];
-  before: string;
-  after: string;
+export type Call<TYPE extends string = 'call'> = CSSValueAST<TYPE> & {
+    args: CSSValueAST<any>[];
+    before: string;
+    after: string;
 };
 type Unit<TYPE extends string, UNIT extends string> = CSSValueAST<TYPE> & {
-  unit: UNIT;
-  integer: boolean;
+    unit: UNIT;
+    integer: boolean;
 };
 export type Invalid = CSSValueAST<`invalid`>;
 export type UnknownUnit = Unit<`unknown-unit`, string>;
@@ -85,14 +85,8 @@ export type Length = Unit<`<length>`, AnyCase<typeof lengthValidUnits[number]>>;
 export type Flex = Unit<`<flex>`, AnyCase<`fr`>>;
 export type Angle = Unit<`<angle>`, AnyCase<typeof angleValidUnits[number]>>;
 export type Time = Unit<`<time>`, AnyCase<typeof timeValidUnits[number]>>;
-export type Frequency = Unit<
-  `<frequency>`,
-  AnyCase<typeof frequencyValidUnits[number]>
->;
-export type Resolution = Unit<
-  `<resolution>`,
-  AnyCase<typeof resolutionValidUnits[number]>
->;
+export type Frequency = Unit<`<frequency>`, AnyCase<typeof frequencyValidUnits[number]>>;
+export type Resolution = Unit<`<resolution>`, AnyCase<typeof resolutionValidUnits[number]>>;
 // other
 export type Color = CSSValueAST<`<color>`>;
 export type Image = CSSValueAST<`<image>`>;
@@ -127,181 +121,171 @@ export type Attribute = CSSValueAST<`<attr()>`>;
 */
 /////////////////////
 type AnyCase<T extends string> = string extends T
-  ? string
-  : T extends `${infer F1}${infer F2}${infer R}`
-  ? `${Uppercase<F1> | Lowercase<F1>}${
-      | Uppercase<F2>
-      | Lowercase<F2>}${AnyCase<R>}`
-  : T extends `${infer F}${infer R}`
-  ? `${Uppercase<F> | Lowercase<F>}${AnyCase<R>}`
-  : "";
+    ? string
+    : T extends `${infer F1}${infer F2}${infer R}`
+    ? `${Uppercase<F1> | Lowercase<F1>}${Uppercase<F2> | Lowercase<F2>}${AnyCase<R>}`
+    : T extends `${infer F}${infer R}`
+    ? `${Uppercase<F> | Lowercase<F>}${AnyCase<R>}`
+    : '';
 /////////////////////
 
 export const invalid = (value: Partial<Invalid>): Invalid => ({
-  start: 0,
-  end: 0,
-  value: ``,
-  ...value,
-  type: `invalid`,
+    start: 0,
+    end: 0,
+    value: ``,
+    ...value,
+    type: `invalid`,
 });
 export const literal = (value: Partial<Literal>): Literal => ({
-  start: 0,
-  end: 0,
-  before: ``,
-  after: ``,
-  value: ``,
-  ...value,
-  type: `literal`,
+    start: 0,
+    end: 0,
+    before: ``,
+    after: ``,
+    value: ``,
+    ...value,
+    type: `literal`,
 });
-export const cssWideKeyword = (
-  value: Partial<CssWideKeyword>
-): CssWideKeyword => ({
-  start: 0,
-  end: 0,
-  value: `initial`,
-  ...value,
-  type: `css-wide-keyword`,
+export const cssWideKeyword = (value: Partial<CssWideKeyword>): CssWideKeyword => ({
+    start: 0,
+    end: 0,
+    value: `initial`,
+    ...value,
+    type: `css-wide-keyword`,
 });
 export const space = (value: Partial<Space>): Space => ({
-  start: 0,
-  end: 0,
-  before: ``,
-  after: ``,
-  value: ` `,
-  ...value,
-  type: `space`,
+    start: 0,
+    end: 0,
+    before: ``,
+    after: ``,
+    value: ` `,
+    ...value,
+    type: `space`,
 });
 export const comment = (value: Partial<Comment>): Comment => ({
-  start: 0,
-  end: 0,
-  before: ``,
-  after: ``,
-  value: ``,
-  ...value,
-  type: `comment`,
+    start: 0,
+    end: 0,
+    before: ``,
+    after: ``,
+    value: ``,
+    ...value,
+    type: `comment`,
 });
 export const customIdent = (value: Partial<CustomIdent>): CustomIdent => ({
-  start: 0,
-  end: 0,
-  value: ``,
-  ...value,
-  type: `<custom-ident>`,
+    start: 0,
+    end: 0,
+    value: ``,
+    ...value,
+    type: `<custom-ident>`,
 });
 export const dashedIdent = (value: Partial<DashedIdent>): DashedIdent => ({
-  start: 0,
-  end: 0,
-  value: `-`,
-  ...value,
-  type: `<dashed-ident>`,
+    start: 0,
+    end: 0,
+    value: `-`,
+    ...value,
+    type: `<dashed-ident>`,
 });
 export const string = (value: Partial<String>): String => ({
-  start: 0,
-  end: 0,
-  value: `""`,
-  ...value,
-  type: `<string>`,
+    start: 0,
+    end: 0,
+    value: `""`,
+    ...value,
+    type: `<string>`,
 });
 export const integer = (value: Partial<Integer>): Integer => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  ...value,
-  type: `<integer>`,
+    start: 0,
+    end: 0,
+    value: `0`,
+    ...value,
+    type: `<integer>`,
 });
 export const number = (value: Partial<Number>): Number => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  ...value,
-  type: `<number>`,
+    start: 0,
+    end: 0,
+    value: `0`,
+    ...value,
+    type: `<number>`,
 });
 export const unknownUnit = (value: Partial<UnknownUnit>): UnknownUnit => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  unit: ``,
-  integer: false,
-  ...value,
-  type: `unknown-unit`,
+    start: 0,
+    end: 0,
+    value: `0`,
+    unit: ``,
+    integer: false,
+    ...value,
+    type: `unknown-unit`,
 });
-export const length = (
-  value: Partial<Length> & Pick<Length, "unit">
-): Length => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  integer: false,
-  ...value,
-  type: `<length>`,
+export const length = (value: Partial<Length> & Pick<Length, 'unit'>): Length => ({
+    start: 0,
+    end: 0,
+    value: `0`,
+    integer: false,
+    ...value,
+    type: `<length>`,
 });
-export const angle = (value: Partial<Angle> & Pick<Angle, "unit">): Angle => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  integer: false,
-  ...value,
-  type: `<angle>`,
+export const angle = (value: Partial<Angle> & Pick<Angle, 'unit'>): Angle => ({
+    start: 0,
+    end: 0,
+    value: `0`,
+    integer: false,
+    ...value,
+    type: `<angle>`,
 });
 export const percentage = (value: Partial<Percentage>): Percentage => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  unit: `%`,
-  integer: false,
-  ...value,
-  type: `<percentage>`,
+    start: 0,
+    end: 0,
+    value: `0`,
+    unit: `%`,
+    integer: false,
+    ...value,
+    type: `<percentage>`,
 });
 export const flex = (value: Partial<Flex>): Flex => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  unit: `fr`,
-  integer: false,
-  ...value,
-  type: `<flex>`,
+    start: 0,
+    end: 0,
+    value: `0`,
+    unit: `fr`,
+    integer: false,
+    ...value,
+    type: `<flex>`,
 });
-export const time = (value: Partial<Time> & Pick<Time, "unit">): Time => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  integer: false,
-  ...value,
-  type: `<time>`,
+export const time = (value: Partial<Time> & Pick<Time, 'unit'>): Time => ({
+    start: 0,
+    end: 0,
+    value: `0`,
+    integer: false,
+    ...value,
+    type: `<time>`,
 });
-export const frequency = (
-  value: Partial<Frequency> & Pick<Frequency, "unit">
-): Frequency => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  integer: false,
-  ...value,
-  type: `<frequency>`,
+export const frequency = (value: Partial<Frequency> & Pick<Frequency, 'unit'>): Frequency => ({
+    start: 0,
+    end: 0,
+    value: `0`,
+    integer: false,
+    ...value,
+    type: `<frequency>`,
 });
-export const resolution = (
-  value: Partial<Resolution> & Pick<Resolution, "unit">
-): Resolution => ({
-  start: 0,
-  end: 0,
-  value: `0`,
-  integer: false,
-  ...value,
-  type: `<resolution>`,
+export const resolution = (value: Partial<Resolution> & Pick<Resolution, 'unit'>): Resolution => ({
+    start: 0,
+    end: 0,
+    value: `0`,
+    integer: false,
+    ...value,
+    type: `<resolution>`,
 });
 export const call = (value: Partial<Call>): Call => ({
-  start: 0,
-  end: 0,
-  value: ``,
-  args: value.args || [],
-  before: ``,
-  after: ``,
-  ...value,
-  type: `call`,
+    start: 0,
+    end: 0,
+    value: ``,
+    args: value.args || [],
+    before: ``,
+    after: ``,
+    ...value,
+    type: `call`,
 });
 export const color = (value: Partial<Color>): Color => ({
-  start: 0,
-  end: 0,
-  value: `#000000`,
-  ...value,
-  type: `<color>`,
+    start: 0,
+    end: 0,
+    value: `#000000`,
+    ...value,
+    type: `<color>`,
 });
diff --git a/packages/css-value-parser/src/define-property.ts b/packages/css-value-parser/src/define-property.ts
index 822c4b38..ef988cfb 100644
--- a/packages/css-value-parser/src/define-property.ts
+++ b/packages/css-value-parser/src/define-property.ts
@@ -1,71 +1,68 @@
-import type { CSSValueAST, BuildVarAst } from "./ast-types";
-import type { ParseResults } from "./value-parser";
+import type { CSSValueAST, BuildVarAst } from './ast-types';
+import type { ParseResults } from './value-parser';
 
 export function defineProperty<
-  FORMATS extends string,
-  CLASSIFICATIONS extends string,
-  TOP_COMMA extends boolean = false
+    FORMATS extends string,
+    CLASSIFICATIONS extends string,
+    TOP_COMMA extends boolean = false
 >(_config: {
-  name: string;
-  syntax: string;
-  subSyntax?: Record<string, string>;
-  subProperties?: Record<string, ReturnType<typeof defineProperty>>;
-  topLevelCommaSeparation?: TOP_COMMA;
-  formats?: Record<FORMATS, string>;
-  classifications?: Record<
-    CLASSIFICATIONS,
-    | MatchClassification // ToDo: optional default value / required
-    | (TOP_COMMA extends true
-        ? {
-            match?: MatchClassification;
-            syntax?: string;
-            inTopLevelIndex?: (index: number, total: number) => boolean;
-            cssProperty?: ReturnType<typeof defineProperty>;
-          }
-        : {
-            match?: MatchClassification;
-            syntax?: string;
-            cssProperty?: ReturnType<typeof defineProperty>;
-          })
-  >;
+    name: string;
+    syntax: string;
+    subSyntax?: Record<string, string>;
+    subProperties?: Record<string, ReturnType<typeof defineProperty>>;
+    topLevelCommaSeparation?: TOP_COMMA;
+    formats?: Record<FORMATS, string>;
+    classifications?: Record<
+        CLASSIFICATIONS,
+        | MatchClassification // ToDo: optional default value / required
+        | (TOP_COMMA extends true
+              ? {
+                    match?: MatchClassification;
+                    syntax?: string;
+                    inTopLevelIndex?: (index: number, total: number) => boolean;
+                    cssProperty?: ReturnType<typeof defineProperty>;
+                }
+              : {
+                    match?: MatchClassification;
+                    syntax?: string;
+                    cssProperty?: ReturnType<typeof defineProperty>;
+                })
+    >;
 }): {
-  validate: (
-    ast: CSSValueAST<any>[],
-    options?: ActionParams
-  ) => [...errors: string[]];
-  getFormat: (ast: CSSValueAST<any>[], options?: ActionParams) => FORMATS;
-  classify: (
-    ast: CSSValueAST<any>[],
-    options?: ActionParams & { deep?: boolean; ignoreComments?: boolean }
-  ) => TOP_COMMA extends true
-    ? Record<CLASSIFICATIONS, Classification>[]
-    : Record<CLASSIFICATIONS, Classification>;
+    validate: (ast: CSSValueAST<any>[], options?: ActionParams) => [...errors: string[]];
+    getFormat: (ast: CSSValueAST<any>[], options?: ActionParams) => FORMATS;
+    classify: (
+        ast: CSSValueAST<any>[],
+        options?: ActionParams & { deep?: boolean; ignoreComments?: boolean }
+    ) => TOP_COMMA extends true
+        ? Record<CLASSIFICATIONS, Classification>[]
+        : Record<CLASSIFICATIONS, Classification>;
 } {
-  return {} as any;
+    return {} as any;
 }
 
 defineProperty.errors = {
-  unexpectedType: (node: CSSValueAST<any>, expectedType: string) =>
-    `expected to get ${expectedType}, but got ${node.type}`,
-  unexpectedComma: () => `unexpected comma`,
+    unexpectedType: (node: CSSValueAST<any>, expectedType: string) =>
+        `expected to get ${expectedType}, but got ${node.type}`,
+    unexpectedComma: () => `unexpected comma`,
 };
 
 export interface ActionParams {
-  cssVars?: Record<string, CSSValueAST<any>[]>;
-  resolveBuildVar?: (node: BuildVarAst) => CSSValueAST<any>[];
+    cssVars?: Record<string, CSSValueAST<any>[]>;
+    resolveBuildVar?: (node: BuildVarAst) => CSSValueAST<any>[];
 }
 
 type MatchClassification = (
-  node: CSSValueAST<any>,
-  info: {
-    index: number;
-    indexOfType: number;
-    amountOfType: number;
-  }
+    node: CSSValueAST<any>,
+    info: {
+        index: number;
+        indexOfType: number;
+        amountOfType: number;
+    }
 ) => boolean;
 
 type Classification = {
-  value: CSSValueAST<any>[];
-  resolved: { origin: ParseResults; nodes: CSSValueAST<any>[] }[][]; // ToDo: should probably be more detailed... need to see cases
-  isProperty: boolean;
+    value: CSSValueAST<any>[];
+    resolved: { origin: ParseResults; nodes: CSSValueAST<any>[] }[][]; // ToDo: should probably be more detailed... need to see cases
+    isProperty: boolean;
 };
diff --git a/packages/css-value-parser/src/index.ts b/packages/css-value-parser/src/index.ts
index a71000fa..acf3b729 100644
--- a/packages/css-value-parser/src/index.ts
+++ b/packages/css-value-parser/src/index.ts
@@ -1,9 +1,9 @@
-export * from "./ast-types";
-export { parseCSSValue } from "./value-parser";
-export { stringifyCSSValue } from "./value-stringify";
-export { defineProperty } from "./define-property";
+export * from './ast-types';
+export { parseCSSValue } from './value-parser';
+export { stringifyCSSValue } from './value-stringify';
+export { defineProperty } from './define-property';
 // properties
-export { background } from "./properties/background";
-export { margin } from "./properties/margin";
+export { background } from './properties/background';
+export { margin } from './properties/margin';
 // syntax
-export { parseValueSyntax } from "./value-syntax-parser";
+export { parseValueSyntax } from './value-syntax-parser';
diff --git a/packages/css-value-parser/src/properties/background.ts b/packages/css-value-parser/src/properties/background.ts
index 25a18da2..165b792c 100644
--- a/packages/css-value-parser/src/properties/background.ts
+++ b/packages/css-value-parser/src/properties/background.ts
@@ -1,46 +1,46 @@
-import { defineProperty } from "../define-property";
+import { defineProperty } from '../define-property';
 
 export const background = defineProperty({
-  name: `background`,
-  syntax: `[ <bg-layer> , ]* <final-bg-layer>`,
-  subSyntax: {
-    "<bg-layer>": `<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>`,
-    "<final-bg-layer>": `<'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>`,
-  },
-  subProperties: {
-    // ToDo: define and add
-  },
-  topLevelCommaSeparation: true,
-  classifications: {
-    "background-image": () => {
-      return false;
+    name: `background`,
+    syntax: `[ <bg-layer> , ]* <final-bg-layer>`,
+    subSyntax: {
+        '<bg-layer>': `<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>`,
+        '<final-bg-layer>': `<'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>`,
+    },
+    subProperties: {
+        // ToDo: define and add
+    },
+    topLevelCommaSeparation: true,
+    classifications: {
+        'background-image': () => {
+            return false;
+        },
+        'background-position': () => {
+            return false;
+        },
+        'background-size': {
+            syntax: `<bg-size>`,
+            match: () => true,
+        },
+        'background-repeat': () => {
+            return false;
+        },
+        'background-origin': () => {
+            return false;
+        },
+        'background-clip': () => {
+            return false;
+        },
+        'background-attachment': () => {
+            return false;
+        },
+        'background-color': {
+            inTopLevelIndex: (index, total) => {
+                return index === total - 1;
+            },
+            match: () => {
+                return false;
+            },
+        },
     },
-    "background-position": () => {
-      return false;
-    },
-    "background-size": {
-      syntax: `<bg-size>`,
-      match: () => true,
-    },
-    "background-repeat": () => {
-      return false;
-    },
-    "background-origin": () => {
-      return false;
-    },
-    "background-clip": () => {
-      return false;
-    },
-    "background-attachment": () => {
-      return false;
-    },
-    "background-color": {
-      inTopLevelIndex: (index, total) => {
-        return index === total - 1;
-      },
-      match: () => {
-        return false;
-      },
-    },
-  },
 });
diff --git a/packages/css-value-parser/src/properties/margin.ts b/packages/css-value-parser/src/properties/margin.ts
index a131be10..c42a4f67 100644
--- a/packages/css-value-parser/src/properties/margin.ts
+++ b/packages/css-value-parser/src/properties/margin.ts
@@ -1,36 +1,36 @@
-import { defineProperty } from "../define-property";
+import { defineProperty } from '../define-property';
 
 const subMarginPlacements: Record<
-  "top" | "right" | "bottom" | "left",
-  [single: number, two: number, three: number, four: number]
+    'top' | 'right' | 'bottom' | 'left',
+    [single: number, two: number, three: number, four: number]
 > = {
-  top: [0, 1, 0, 0],
-  left: [0, 0, 1, 3],
-  bottom: [0, 1, 2, 2],
-  right: [0, 0, 1, 1],
+    top: [0, 1, 0, 0],
+    left: [0, 0, 1, 3],
+    bottom: [0, 1, 2, 2],
+    right: [0, 0, 1, 1],
 };
 
 export const margin = defineProperty({
-  name: `margin`,
-  syntax: `<length>{1,4}`,
-  formats: {
-    all: `<length>`,
-    "horizontal-vertical": `<length><length>`,
-    "top-horizontal-bottom": `<length><length><length>`,
-    "top-right-bottom-left": `<length><length><length><length>`,
-  },
-  classifications: {
-    "margin-top": (_node, { amountOfType, indexOfType }) => {
-      return subMarginPlacements.top[amountOfType - 1] === indexOfType;
+    name: `margin`,
+    syntax: `<length>{1,4}`,
+    formats: {
+        all: `<length>`,
+        'horizontal-vertical': `<length><length>`,
+        'top-horizontal-bottom': `<length><length><length>`,
+        'top-right-bottom-left': `<length><length><length><length>`,
     },
-    "margin-right": (_node, { amountOfType, indexOfType }) => {
-      return subMarginPlacements.right[amountOfType - 1] === indexOfType;
+    classifications: {
+        'margin-top': (_node, { amountOfType, indexOfType }) => {
+            return subMarginPlacements.top[amountOfType - 1] === indexOfType;
+        },
+        'margin-right': (_node, { amountOfType, indexOfType }) => {
+            return subMarginPlacements.right[amountOfType - 1] === indexOfType;
+        },
+        'margin-bottom': (_node, { amountOfType, indexOfType }) => {
+            return subMarginPlacements.bottom[amountOfType - 1] === indexOfType;
+        },
+        'margin-left': (_node, { amountOfType, indexOfType }) => {
+            return subMarginPlacements.left[amountOfType - 1] === indexOfType;
+        },
     },
-    "margin-bottom": (_node, { amountOfType, indexOfType }) => {
-      return subMarginPlacements.bottom[amountOfType - 1] === indexOfType;
-    },
-    "margin-left": (_node, { amountOfType, indexOfType }) => {
-      return subMarginPlacements.left[amountOfType - 1] === indexOfType;
-    },
-  },
 });
diff --git a/packages/css-value-parser/src/tokenizer.ts b/packages/css-value-parser/src/tokenizer.ts
index 66cf69cd..bfe5b0b7 100644
--- a/packages/css-value-parser/src/tokenizer.ts
+++ b/packages/css-value-parser/src/tokenizer.ts
@@ -1,48 +1,45 @@
 import {
-  tokenize,
-  isStringDelimiter,
-  isWhitespace,
-  createToken,
-  getJSCommentStartType,
-  getMultilineCommentStartType,
-  isCommentEnd,
-  getUnclosedComment,
-} from "@tokey/core";
-import type { Token, Descriptors } from "@tokey/core";
-
-type Delimiters = "(" | ")" | "," | "/" | "+" | "-" | "*" | "#";
-
-export type CSSValueToken = Token<Descriptors | Delimiters>;
-
-export function tokenizeValue(
-  source: string,
-  options: { offset?: number } = {}
-) {
-  const parseLineComments = false; // why would that be a choice?
-  return tokenize<CSSValueToken>(source, {
-    isDelimiter,
-    isStringDelimiter(char: string, previousChar: string) {
-      return previousChar !== `\\` && isStringDelimiter(char);
-    },
+    tokenize,
+    isStringDelimiter,
     isWhitespace,
-    shouldAddToken: () => true,
     createToken,
-    getCommentStartType: parseLineComments
-      ? getJSCommentStartType
-      : getMultilineCommentStartType,
+    getJSCommentStartType,
+    getMultilineCommentStartType,
     isCommentEnd,
     getUnclosedComment,
-    offset: options.offset,
-  });
+} from '@tokey/core';
+import type { Token, Descriptors } from '@tokey/core';
+
+type Delimiters = '(' | ')' | ',' | '/' | '+' | '-' | '*' | '#';
+
+export type CSSValueToken = Token<Descriptors | Delimiters>;
+
+export function tokenizeValue(source: string, options: { offset?: number } = {}) {
+    const parseLineComments = false; // why would that be a choice?
+    return tokenize<CSSValueToken>(source, {
+        isDelimiter,
+        isStringDelimiter(char: string, previousChar: string) {
+            return previousChar !== `\\` && isStringDelimiter(char);
+        },
+        isWhitespace,
+        shouldAddToken: () => true,
+        createToken,
+        getCommentStartType: parseLineComments
+            ? getJSCommentStartType
+            : getMultilineCommentStartType,
+        isCommentEnd,
+        getUnclosedComment,
+        offset: options.offset,
+    });
 }
 
 const isDelimiter = (char: string, previousChar: string) =>
-  previousChar !== "\\" &&
-  (char === "(" ||
-    char === ")" ||
-    char === "," ||
-    char === "/" ||
-    char === "+" ||
-    char === "-" ||
-    char === "*" ||
-    char === "#");
+    previousChar !== '\\' &&
+    (char === '(' ||
+        char === ')' ||
+        char === ',' ||
+        char === '/' ||
+        char === '+' ||
+        char === '-' ||
+        char === '*' ||
+        char === '#');
diff --git a/packages/css-value-parser/src/units.ts b/packages/css-value-parser/src/units.ts
index 244dc367..f743f92a 100644
--- a/packages/css-value-parser/src/units.ts
+++ b/packages/css-value-parser/src/units.ts
@@ -1,25 +1,25 @@
 export const lengthValidUnits = [
-  `px`,
-  `em`,
-  `ex`,
-  `cap`,
-  `ch`,
-  `ic`,
-  `rem`,
-  `lh`,
-  `rlh`,
-  `vw`,
-  `vh`,
-  `vi`,
-  `vb`,
-  `vmin`,
-  `vmax`,
-  `cm`,
-  `mm`,
-  `q`,
-  `in`,
-  `pt`,
-  `pc`,
+    `px`,
+    `em`,
+    `ex`,
+    `cap`,
+    `ch`,
+    `ic`,
+    `rem`,
+    `lh`,
+    `rlh`,
+    `vw`,
+    `vh`,
+    `vi`,
+    `vb`,
+    `vmin`,
+    `vmax`,
+    `cm`,
+    `mm`,
+    `q`,
+    `in`,
+    `pt`,
+    `pc`,
 ] as const;
 export const angleValidUnits = [`deg`, `grad`, `rad`, `turn`] as const;
 export const timeValidUnits = [`s`, `ms`] as const;
diff --git a/packages/css-value-parser/src/value-parser.ts b/packages/css-value-parser/src/value-parser.ts
index fe36ad25..7d5fdf1d 100644
--- a/packages/css-value-parser/src/value-parser.ts
+++ b/packages/css-value-parser/src/value-parser.ts
@@ -1,368 +1,360 @@
 import {
-  BaseAstNode,
-  customIdent,
-  dashedIdent,
-  literal,
-  cssWideKeyword,
-  space,
-  string,
-  number,
-  unknownUnit,
-  length,
-  percentage,
-  angle,
-  time,
-  flex,
-  call,
-  frequency,
-  resolution,
-  integer,
-  color,
-  invalid,
-} from "./ast-types";
+    BaseAstNode,
+    customIdent,
+    dashedIdent,
+    literal,
+    cssWideKeyword,
+    space,
+    string,
+    number,
+    unknownUnit,
+    length,
+    percentage,
+    angle,
+    time,
+    flex,
+    call,
+    frequency,
+    resolution,
+    integer,
+    color,
+    invalid,
+} from './ast-types';
 import {
-  lengthValidUnits,
-  angleValidUnits,
-  timeValidUnits,
-  frequencyValidUnits,
-  resolutionValidUnits,
-} from "./units";
-import { tokenizeValue, CSSValueToken } from "./tokenizer";
-import { stringifyCSSValue } from "./value-stringify";
-import { Seeker, isComment } from "@tokey/core";
-import { comment } from ".";
+    lengthValidUnits,
+    angleValidUnits,
+    timeValidUnits,
+    frequencyValidUnits,
+    resolutionValidUnits,
+} from './units';
+import { tokenizeValue, CSSValueToken } from './tokenizer';
+import { stringifyCSSValue } from './value-stringify';
+import { Seeker, isComment } from '@tokey/core';
+import { comment } from '.';
 
 export type ParseResults = Array<BaseAstNode>;
 
 export function parseCSSValue(
-  source: string,
-  _options?: { parseBuildVar?: () => { id: string; subType: string } }
+    source: string,
+    _options?: { parseBuildVar?: () => { id: string; subType: string } }
 ): ParseResults {
-  const tokens = tokenizeValue(source);
-  return new Seeker(tokens).run<ParseResults>(handleToken, [], source);
+    const tokens = tokenizeValue(source);
+    return new Seeker(tokens).run<ParseResults>(handleToken, [], source);
 }
 
 function handleToken(
-  token: CSSValueToken,
-  ast: ParseResults,
-  source: string,
-  s: Seeker<CSSValueToken>
+    token: CSSValueToken,
+    ast: ParseResults,
+    source: string,
+    s: Seeker<CSSValueToken>
 ): void {
-  const { type, value, start, end } = token;
-  if (type === `space`) {
-    const firstSpace = value.indexOf(` `);
-    const before = firstSpace !== -1 ? value.substring(0, firstSpace) : ``;
-    const after =
-      firstSpace !== -1 ? value.substring(firstSpace + 1) : value.substring(1);
-    ast.push(
-      space({
-        value: firstSpace !== -1 ? ` ` : value[0],
-        start,
-        end,
-        before,
-        after,
-      })
-    );
-  } else if (type === `text` || type === `-`) {
-    // numbers and lengths
-    if (parseNumber(token, ast, source, s)) {
-      return;
-    }
-    const ident = collectIdent(token, ast, source, s);
-    if (s.peek().type === `(`) {
-      // function
-      s.next();
-      const args: ParseResults = [];
-      s.run(
-        (token, args) => {
-          if (token.type === ")") {
-            return false;
-          }
-          return handleToken(token, args, source, s);
-        },
-        args,
-        source
-      );
-      const before =
-        args.length && args[0].type === `space`
-          ? stringifyCSSValue(args.shift()!)
-          : ``;
-      const after =
-        args.length && args[args.length - 1].type === `space`
-          ? stringifyCSSValue(args.pop()!)
-          : ``;
-      ast.push(
-        call({
-          value: ident,
-          start,
-          end: s.peek(0).end,
-          args,
-          before,
-          after,
-        })
-      );
-    } else if (ident.match(/^inherit|unset|initial$/i)) {
-      // css-wide keyword
-      ast.push(
-        cssWideKeyword({
-          value: ident as any,
-          start: token.start,
-          end: s.peek(0).end,
-        })
-      );
-    } else if (ident.match(/^--/)) {
-      // dashed ident
-      ast.push(
-        dashedIdent({
-          value: ident,
-          start: token.start,
-          end: s.peek(0).end,
-        })
-      );
-    } else if (ident.match(/^[-][a-z]|[a-z]/i)) {
-      // custom ident
-      ast.push(
-        customIdent({
-          value: ident,
-          start: token.start,
-          end: s.peek(0).end,
-        })
-      );
-    } else {
-      ast.push(
-        literal({
-          value: ident,
-          start,
-          end: s.peek(0).end,
-        })
-      );
-    }
-  } else if (type === `string`) {
-    ast.push(
-      string({
-        value,
-        start,
-        end,
-      })
-    );
-  } else if (type === `+`) {
-    if (parseNumber(token, ast, source, s)) {
-      return;
-    }
-    ast.push(
-      literal({
-        value,
-        start,
-        end,
-      })
-    );
-  } else if (type === `#`) {
-    const nextToken = s.next(); // #000000
-    const isValidColor =
-      nextToken.type === `text` &&
-      nextToken.value.match(/^[0-9a-f]{3,8}$/i) &&
-      nextToken.value.length !== 5 &&
-      nextToken.value.length !== 7;
-    if (isValidColor) {
-      ast.push(
-        color({
-          value: value + nextToken.value,
-          start,
-          end: nextToken.end,
-        })
-      );
-    } else {
-      s.back();
-      ast.push(
-        invalid({
-          value: `#`,
-          start,
-          end,
-        })
-      );
-    }
-  } else if (isComment(type)) {
-    ast.push(
-      comment({
-        value,
-        start,
-        end,
-      })
-    );
-  } else if (value.length === 1) {
-    /* catches: , / or any other single char value.
+    const { type, value, start, end } = token;
+    if (type === `space`) {
+        const firstSpace = value.indexOf(` `);
+        const before = firstSpace !== -1 ? value.substring(0, firstSpace) : ``;
+        const after = firstSpace !== -1 ? value.substring(firstSpace + 1) : value.substring(1);
+        ast.push(
+            space({
+                value: firstSpace !== -1 ? ` ` : value[0],
+                start,
+                end,
+                before,
+                after,
+            })
+        );
+    } else if (type === `text` || type === `-`) {
+        // numbers and lengths
+        if (parseNumber(token, ast, source, s)) {
+            return;
+        }
+        const ident = collectIdent(token, ast, source, s);
+        if (s.peek().type === `(`) {
+            // function
+            s.next();
+            const args: ParseResults = [];
+            s.run(
+                (token, args) => {
+                    if (token.type === ')') {
+                        return false;
+                    }
+                    return handleToken(token, args, source, s);
+                },
+                args,
+                source
+            );
+            const before =
+                args.length && args[0].type === `space` ? stringifyCSSValue(args.shift()!) : ``;
+            const after =
+                args.length && args[args.length - 1].type === `space`
+                    ? stringifyCSSValue(args.pop()!)
+                    : ``;
+            ast.push(
+                call({
+                    value: ident,
+                    start,
+                    end: s.peek(0).end,
+                    args,
+                    before,
+                    after,
+                })
+            );
+        } else if (ident.match(/^inherit|unset|initial$/i)) {
+            // css-wide keyword
+            ast.push(
+                cssWideKeyword({
+                    value: ident as any,
+                    start: token.start,
+                    end: s.peek(0).end,
+                })
+            );
+        } else if (ident.match(/^--/)) {
+            // dashed ident
+            ast.push(
+                dashedIdent({
+                    value: ident,
+                    start: token.start,
+                    end: s.peek(0).end,
+                })
+            );
+        } else if (ident.match(/^[-][a-z]|[a-z]/i)) {
+            // custom ident
+            ast.push(
+                customIdent({
+                    value: ident,
+                    start: token.start,
+                    end: s.peek(0).end,
+                })
+            );
+        } else {
+            ast.push(
+                literal({
+                    value: ident,
+                    start,
+                    end: s.peek(0).end,
+                })
+            );
+        }
+    } else if (type === `string`) {
+        ast.push(
+            string({
+                value,
+                start,
+                end,
+            })
+        );
+    } else if (type === `+`) {
+        if (parseNumber(token, ast, source, s)) {
+            return;
+        }
+        ast.push(
+            literal({
+                value,
+                start,
+                end,
+            })
+        );
+    } else if (type === `#`) {
+        const nextToken = s.next(); // #000000
+        const isValidColor =
+            nextToken.type === `text` &&
+            nextToken.value.match(/^[0-9a-f]{3,8}$/i) &&
+            nextToken.value.length !== 5 &&
+            nextToken.value.length !== 7;
+        if (isValidColor) {
+            ast.push(
+                color({
+                    value: value + nextToken.value,
+                    start,
+                    end: nextToken.end,
+                })
+            );
+        } else {
+            s.back();
+            ast.push(
+                invalid({
+                    value: `#`,
+                    start,
+                    end,
+                })
+            );
+        }
+    } else if (isComment(type)) {
+        ast.push(
+            comment({
+                value,
+                start,
+                end,
+            })
+        );
+    } else if (value.length === 1) {
+        /* catches: , / or any other single char value.
     not sure about this, might be better to break down 
     any multi value token into single literal nodes.
     */
-    ast.push(
-      literal({
-        start,
-        end,
-        value,
-      })
-    );
-  } else {
-    ast.push(
-      invalid({
-        value,
-        start,
-        end,
-      })
-    );
-  }
+        ast.push(
+            literal({
+                start,
+                end,
+                value,
+            })
+        );
+    } else {
+        ast.push(
+            invalid({
+                value,
+                start,
+                end,
+            })
+        );
+    }
 }
 
 /** parse ident **/
 function collectIdent(
-  token: CSSValueToken,
-  _ast: ParseResults,
-  _source: string,
-  s: Seeker<CSSValueToken>
+    token: CSSValueToken,
+    _ast: ParseResults,
+    _source: string,
+    s: Seeker<CSSValueToken>
 ) {
-  let collectedValue = ``;
-  let pickAmount = 0;
-  let current = token;
-  while (current.type === `text` || current.type === `-`) {
-    collectedValue += current.value;
-    pickAmount++;
-    current = s.peek(pickAmount);
-  }
-  s.index += pickAmount - 1;
-  return collectedValue;
+    let collectedValue = ``;
+    let pickAmount = 0;
+    let current = token;
+    while (current.type === `text` || current.type === `-`) {
+        collectedValue += current.value;
+        pickAmount++;
+        current = s.peek(pickAmount);
+    }
+    s.index += pickAmount - 1;
+    return collectedValue;
 }
 
 /** parse number **/
 function parseNumber(
-  token: CSSValueToken,
-  ast: ParseResults,
-  _source: string,
-  s: Seeker<CSSValueToken>
+    token: CSSValueToken,
+    ast: ParseResults,
+    _source: string,
+    s: Seeker<CSSValueToken>
 ) {
-  const { value, start } = token;
-  let startMatch = isStartOfNumber(value);
-  if (!startMatch) {
-    return false;
-  }
-  let [numberValue, numberUnit] = startMatch;
-  // check number is a valid full number (e.g. 5em -> [5e, m])
-  if (numberUnit && !isNumber(numberValue)) {
-    const fullNumberMatch = startWithValidNumber(value);
-    if (!fullNumberMatch) {
-      // token is not a valid number: bail out
-      return;
+    const { value, start } = token;
+    let startMatch = isStartOfNumber(value);
+    if (!startMatch) {
+        return false;
     }
-    // token is number with a unit
-    [numberValue, numberUnit] = fullNumberMatch;
-  }
-  let peekCount = 1;
-  if (!numberUnit) {
-    // collect potential extra number parts
-    let nextToken = s.peek(peekCount);
-    while (
-      nextToken.type === `-` ||
-      nextToken.type === `+` ||
-      nextToken.type === `text`
-    ) {
-      const nextValue = numberValue + nextToken.value;
-      // const validNumber = isNumber(nextValue);
-      startMatch = isStartOfNumber(nextValue);
-      if (!startMatch) {
-        if (!isNumber(numberValue)) {
-          // doesn't amount to a number: bail out
-          return;
+    let [numberValue, numberUnit] = startMatch;
+    // check number is a valid full number (e.g. 5em -> [5e, m])
+    if (numberUnit && !isNumber(numberValue)) {
+        const fullNumberMatch = startWithValidNumber(value);
+        if (!fullNumberMatch) {
+            // token is not a valid number: bail out
+            return;
         }
-        // collected a number: stop collection
-        peekCount--;
-        break;
-      }
-      //
-      peekCount++;
-      const [matchedNumber, leftover] = startMatch;
-      numberValue = matchedNumber;
-      if (leftover) {
-        // leftover must be unit: no more number to collect
-        numberUnit = leftover;
-        break;
-      }
-      nextToken = s.peek(peekCount);
+        // token is number with a unit
+        [numberValue, numberUnit] = fullNumberMatch;
     }
-    // check final collected number
-    if (!isNumber(numberValue)) {
-      // check for partial initial number (e.g 5e with m as unit)
-      const fullNumberMatch = startWithValidNumber(numberValue + numberUnit);
-      if (!fullNumberMatch) {
-        return;
-      }
-      [numberValue, numberUnit] = fullNumberMatch;
+    let peekCount = 1;
+    if (!numberUnit) {
+        // collect potential extra number parts
+        let nextToken = s.peek(peekCount);
+        while (nextToken.type === `-` || nextToken.type === `+` || nextToken.type === `text`) {
+            const nextValue = numberValue + nextToken.value;
+            // const validNumber = isNumber(nextValue);
+            startMatch = isStartOfNumber(nextValue);
+            if (!startMatch) {
+                if (!isNumber(numberValue)) {
+                    // doesn't amount to a number: bail out
+                    return;
+                }
+                // collected a number: stop collection
+                peekCount--;
+                break;
+            }
+            //
+            peekCount++;
+            const [matchedNumber, leftover] = startMatch;
+            numberValue = matchedNumber;
+            if (leftover) {
+                // leftover must be unit: no more number to collect
+                numberUnit = leftover;
+                break;
+            }
+            nextToken = s.peek(peekCount);
+        }
+        // check final collected number
+        if (!isNumber(numberValue)) {
+            // check for partial initial number (e.g 5e with m as unit)
+            const fullNumberMatch = startWithValidNumber(numberValue + numberUnit);
+            if (!fullNumberMatch) {
+                return;
+            }
+            [numberValue, numberUnit] = fullNumberMatch;
+        }
+        // forward index by the tokens used for number value
+        s.index += peekCount - 1;
+        // take potential unit
+        if (!numberUnit && s.peek().type === `text`) {
+            numberUnit = s.next().value;
+        }
     }
-    // forward index by the tokens used for number value
-    s.index += peekCount - 1;
-    // take potential unit
-    if (!numberUnit && s.peek().type === `text`) {
-      numberUnit = s.next().value;
+    const isInteger = numberValue.match(integerRegExp);
+    // add to ast
+    if (numberUnit) {
+        const nodeType =
+            knownUnits[numberUnit.toLowerCase() as keyof typeof knownUnits] || unknownUnit;
+        ast.push(
+            nodeType({
+                value: numberValue,
+                unit: numberUnit,
+                integer: !!isInteger,
+                start,
+                end: s.peek(0).end,
+            } as any)
+        );
+    } else {
+        const nodeType = isInteger ? integer : number;
+        ast.push(
+            nodeType({
+                value: numberValue,
+                start,
+                end: s.peek(0).end,
+            })
+        );
     }
-  }
-  const isInteger = numberValue.match(integerRegExp);
-  // add to ast
-  if (numberUnit) {
-    const nodeType =
-      knownUnits[numberUnit.toLowerCase() as keyof typeof knownUnits] ||
-      unknownUnit;
-    ast.push(
-      nodeType({
-        value: numberValue,
-        unit: numberUnit,
-        integer: !!isInteger,
-        start,
-        end: s.peek(0).end,
-      } as any)
-    );
-  } else {
-    const nodeType = isInteger ? integer : number;
-    ast.push(
-      nodeType({
-        value: numberValue,
-        start,
-        end: s.peek(0).end,
-      })
-    );
-  }
-  return true;
+    return true;
 }
 const knownUnits = {
-  "%": percentage,
-  fr: flex,
-  ...lengthValidUnits.reduce((units, unit) => {
-    units[unit] = length;
-    return units;
-  }, {} as Record<typeof lengthValidUnits[number], typeof length>),
-  ...angleValidUnits.reduce((units, unit) => {
-    units[unit] = angle;
-    return units;
-  }, {} as Record<typeof angleValidUnits[number], typeof angle>),
-  ...timeValidUnits.reduce((units, unit) => {
-    units[unit] = time;
-    return units;
-  }, {} as Record<typeof timeValidUnits[number], typeof time>),
-  ...frequencyValidUnits.reduce((units, unit) => {
-    units[unit] = frequency;
-    return units;
-  }, {} as Record<typeof frequencyValidUnits[number], typeof frequency>),
-  ...resolutionValidUnits.reduce((units, unit) => {
-    units[unit] = resolution;
-    return units;
-  }, {} as Record<typeof resolutionValidUnits[number], typeof resolution>),
+    '%': percentage,
+    fr: flex,
+    ...lengthValidUnits.reduce((units, unit) => {
+        units[unit] = length;
+        return units;
+    }, {} as Record<typeof lengthValidUnits[number], typeof length>),
+    ...angleValidUnits.reduce((units, unit) => {
+        units[unit] = angle;
+        return units;
+    }, {} as Record<typeof angleValidUnits[number], typeof angle>),
+    ...timeValidUnits.reduce((units, unit) => {
+        units[unit] = time;
+        return units;
+    }, {} as Record<typeof timeValidUnits[number], typeof time>),
+    ...frequencyValidUnits.reduce((units, unit) => {
+        units[unit] = frequency;
+        return units;
+    }, {} as Record<typeof frequencyValidUnits[number], typeof frequency>),
+    ...resolutionValidUnits.reduce((units, unit) => {
+        units[unit] = resolution;
+        return units;
+    }, {} as Record<typeof resolutionValidUnits[number], typeof resolution>),
 } as const;
 
 const NumberRegExp = /[-+]?(\d+\.?\d*|\d*\.?\d+)(e[-+]?\d+)?/i;
 const integerRegExp = /^[-+]?\d+$/i; // one or more decimal digits 0 through 9 (preceded by -/+ ) - https://www.w3.org/TR/css-values-4/#integer-value
 const validNumberRegex = [
-  /[-+]?(\d+\.?\d*|\d*\.?\d+)(e[-+]?\d*)?/, // float+exponential
-  /[-+]?\d+(e[-+]?\d*)?/, // int+exponential
-  /[-+]/, // sign
+    /[-+]?(\d+\.?\d*|\d*\.?\d+)(e[-+]?\d*)?/, // float+exponential
+    /[-+]?\d+(e[-+]?\d*)?/, // int+exponential
+    /[-+]/, // sign
 ]
-  .map((r) => r.source)
-  .join(`|`); // join with one-of ("or")
+    .map((r) => r.source)
+    .join(`|`); // join with one-of ("or")
 
 /**
  * Return true if the input is a valid number
@@ -372,21 +364,17 @@ const validNumberRegex = [
  * @returns true if value is valid as a number
  */
 function isNumber(value: string) {
-  const match = value.match(NumberRegExp);
-  const numVal = match?.[0];
-  return !!numVal && numVal === value;
+    const match = value.match(NumberRegExp);
+    const numVal = match?.[0];
+    return !!numVal && numVal === value;
 }
-function isStartOfNumber(
-  value: string
-): false | [number: string, leftover: string] {
-  const match = value.match(new RegExp(validNumberRegex, `i`));
-  const numVal = match?.[0];
-  return numVal ? [numVal, value.substring(numVal.length)] : false;
+function isStartOfNumber(value: string): false | [number: string, leftover: string] {
+    const match = value.match(new RegExp(validNumberRegex, `i`));
+    const numVal = match?.[0];
+    return numVal ? [numVal, value.substring(numVal.length)] : false;
 }
-function startWithValidNumber(
-  value: string
-): false | [number: string, leftover: string] {
-  const match = value.match(NumberRegExp);
-  const numVal = match?.[0];
-  return numVal ? [numVal, value.substring(numVal.length)] : false;
+function startWithValidNumber(value: string): false | [number: string, leftover: string] {
+    const match = value.match(NumberRegExp);
+    const numVal = match?.[0];
+    return numVal ? [numVal, value.substring(numVal.length)] : false;
 }
diff --git a/packages/css-value-parser/src/value-stringify.ts b/packages/css-value-parser/src/value-stringify.ts
index 32febf12..3f57c3ea 100644
--- a/packages/css-value-parser/src/value-stringify.ts
+++ b/packages/css-value-parser/src/value-stringify.ts
@@ -1,64 +1,64 @@
 import type {
-  BaseAstNode,
-  Literal,
-  CssWideKeyword,
-  Space,
-  Comment,
-  String,
-  Number,
-  Call,
-  CustomIdent,
-  DashedIdent,
-  Integer,
-  Angle,
-  Color,
-  Flex,
-  Frequency,
-  Invalid,
-  Length,
-  Percentage,
-  Resolution,
-  Time,
-  UnknownUnit,
-} from "./ast-types";
+    BaseAstNode,
+    Literal,
+    CssWideKeyword,
+    Space,
+    Comment,
+    String,
+    Number,
+    Call,
+    CustomIdent,
+    DashedIdent,
+    Integer,
+    Angle,
+    Color,
+    Flex,
+    Frequency,
+    Invalid,
+    Length,
+    Percentage,
+    Resolution,
+    Time,
+    UnknownUnit,
+} from './ast-types';
 
 export function stringifyCSSValue(ast: BaseAstNode | BaseAstNode[]) {
-  if (!Array.isArray(ast)) {
-    return stringifyNode(ast);
-  }
-  let result = ``;
-  for (const node of ast) {
-    result += stringifyNode(node);
-  }
-  return result;
+    if (!Array.isArray(ast)) {
+        return stringifyNode(ast);
+    }
+    let result = ``;
+    for (const node of ast) {
+        result += stringifyNode(node);
+    }
+    return result;
 }
 function stringifyNode(node: BaseAstNode) {
-  return stringifyByType[node.type]?.(node as any) || ``;
+    return stringifyByType[node.type]?.(node as any) || ``;
 }
 
 type Printers = {
-  [K in BaseAstNode as K["type"]]: (node: K) => string;
+    [K in BaseAstNode as K['type']]: (node: K) => string;
 };
 const stringifyByType: Printers = {
-  space: ({ before, value, after }: Space) => before + value + after,
-  literal: ({ before, value, after }: Literal) => before + value + after,
-  "css-wide-keyword": ({ value }: CssWideKeyword) => value,
-  invalid: ({ value }: Invalid) => value,
-  comment: ({ value }: Comment) => value,
-  call: ({ value, before, after, args }: Call) =>
-    `${value}(${before}${stringifyCSSValue(args)}${after})`,
-  "<custom-ident>": ({ value }: CustomIdent) => value,
-  "<dashed-ident>": ({ value }: DashedIdent) => value,
-  "<string>": ({ value }: String) => value,
-  "<number>": ({ value }: Number) => value,
-  "<integer>": ({ value }: Integer) => value,
-  "<length>": ({ value, unit }: Length) => value + unit,
-  "<percentage>": ({ value, unit }: Percentage) => value + unit,
-  "<angle>": ({ value, unit }: Angle) => value + unit,
-  "<time>": ({ value, unit }: Time) => value + unit,
-  "<frequency>": ({ value, unit }: Frequency) => value + unit,
-  "<resolution>": ({ value, unit }: Resolution) => value + unit,
-  "<flex>": ({ value, unit }: Flex) => value + unit,
-  "unknown-unit": ({ value, unit }: UnknownUnit) => value + unit,
-  "<color>": ({ value }: Color) => value,
+    space: ({ before, value, after }: Space) => before + value + after,
+    literal: ({ before, value, after }: Literal) => before + value + after,
+    'css-wide-keyword': ({ value }: CssWideKeyword) => value,
+    invalid: ({ value }: Invalid) => value,
+    comment: ({ value }: Comment) => value,
+    call: ({ value, before, after, args }: Call) =>
+        `${value}(${before}${stringifyCSSValue(args)}${after})`,
+    '<custom-ident>': ({ value }: CustomIdent) => value,
+    '<dashed-ident>': ({ value }: DashedIdent) => value,
+    '<string>': ({ value }: String) => value,
+    '<number>': ({ value }: Number) => value,
+    '<integer>': ({ value }: Integer) => value,
+    '<length>': ({ value, unit }: Length) => value + unit,
+    '<percentage>': ({ value, unit }: Percentage) => value + unit,
+    '<angle>': ({ value, unit }: Angle) => value + unit,
+    '<time>': ({ value, unit }: Time) => value + unit,
+    '<frequency>': ({ value, unit }: Frequency) => value + unit,
+    '<resolution>': ({ value, unit }: Resolution) => value + unit,
+    '<flex>': ({ value, unit }: Flex) => value + unit,
+    'unknown-unit': ({ value, unit }: UnknownUnit) => value + unit,
+    '<color>': ({ value }: Color) => value,
 };
diff --git a/packages/css-value-parser/src/value-syntax-parser.ts b/packages/css-value-parser/src/value-syntax-parser.ts
index f82522e1..af40e88f 100644
--- a/packages/css-value-parser/src/value-syntax-parser.ts
+++ b/packages/css-value-parser/src/value-syntax-parser.ts
@@ -1,29 +1,22 @@
-import {
-  tokenize,
-  createToken,
-  Token,
-  Seeker,
-  getText,
-  last,
-} from "@tokey/core";
+import { tokenize, createToken, Token, Seeker, getText, last } from '@tokey/core';
 
-type RangeMultipliers = "!" | "?" | "+" | "*";
+type RangeMultipliers = '!' | '?' | '+' | '*';
 
 type Delimiters =
-  | "<"
-  | ">"
-  | "["
-  | "]"
-  | ","
-  | "/"
-  | "|"
-  | "&"
-  | "#"
-  | "("
-  | ")"
-  | "{"
-  | "}"
-  | RangeMultipliers;
+    | '<'
+    | '>'
+    | '['
+    | ']'
+    | ','
+    | '/'
+    | '|'
+    | '&'
+    | '#'
+    | '('
+    | ')'
+    | '{'
+    | '}'
+    | RangeMultipliers;
 
 /**
  * Add comments
@@ -31,500 +24,458 @@ type Delimiters =
  */
 
 const isDelimiter = (char: string) =>
-  char === "<" ||
-  char === ">" ||
-  char === "[" ||
-  char === "]" ||
-  char === "," ||
-  char === "/" ||
-  char === "|" ||
-  char === "&" ||
-  char === "#" ||
-  char === "(" ||
-  char === ")" ||
-  char === "{" ||
-  char === "}" ||
-  char === "?" ||
-  char === "!" ||
-  char === "*" ||
-  char === "+";
-
-type ValueSyntaxToken = Token<"space" | "text" | Delimiters>;
+    char === '<' ||
+    char === '>' ||
+    char === '[' ||
+    char === ']' ||
+    char === ',' ||
+    char === '/' ||
+    char === '|' ||
+    char === '&' ||
+    char === '#' ||
+    char === '(' ||
+    char === ')' ||
+    char === '{' ||
+    char === '}' ||
+    char === '?' ||
+    char === '!' ||
+    char === '*' ||
+    char === '+';
+
+type ValueSyntaxToken = Token<'space' | 'text' | Delimiters>;
 
 export const isWhitespace = (char: string) =>
-  char === " " ||
-  char === `\t` ||
-  char === `\r` ||
-  char === "\n" ||
-  char === "\f";
+    char === ' ' || char === `\t` || char === `\r` || char === '\n' || char === '\f';
 
 export function parseValueSyntax(source: string) {
-  return parseTokens(
-    tokenize<ValueSyntaxToken>(source, {
-      isDelimiter,
-      isWhitespace,
-      createToken,
-      isStringDelimiter: () => false,
-      shouldAddToken: () => true,
-      getCommentStartType: () => "",
-      isCommentEnd: () => false,
-      getUnclosedComment: () => "",
-    }),
-    source
-  );
+    return parseTokens(
+        tokenize<ValueSyntaxToken>(source, {
+            isDelimiter,
+            isWhitespace,
+            createToken,
+            isStringDelimiter: () => false,
+            shouldAddToken: () => true,
+            getCommentStartType: () => '',
+            isCommentEnd: () => false,
+            getUnclosedComment: () => '',
+        }),
+        source
+    );
 }
 
 type Range = [min: number, max: number];
 
 interface Multipliers {
-  range?: Range;
-  list?: boolean;
+    range?: Range;
+    list?: boolean;
 }
 
 interface DataTypeNode {
-  type: "data-type";
-  name: string;
-  range?: Range;
-  multipliers?: Multipliers;
+    type: 'data-type';
+    name: string;
+    range?: Range;
+    multipliers?: Multipliers;
 }
 
 interface PropertyNode {
-  type: "property";
-  name: string;
-  range?: Range;
-  multipliers?: Multipliers;
+    type: 'property';
+    name: string;
+    range?: Range;
+    multipliers?: Multipliers;
 }
 
 interface LiteralNode {
-  type: "literal";
-  name: string;
-  enclosed: boolean;
-  multipliers?: Multipliers;
+    type: 'literal';
+    name: string;
+    enclosed: boolean;
+    multipliers?: Multipliers;
 }
 
 interface KeywordNode {
-  type: "keyword";
-  name: string;
-  multipliers?: Multipliers;
+    type: 'keyword';
+    name: string;
+    multipliers?: Multipliers;
 }
 
 interface CombinatorGroup {
-  nodes: ValueSyntaxAstNode[];
+    nodes: ValueSyntaxAstNode[];
 }
 
 interface JuxtaposingNode extends CombinatorGroup {
-  type: "juxtaposing";
+    type: 'juxtaposing';
 }
 
 interface DoubleAmpersandNode extends CombinatorGroup {
-  type: "&&";
+    type: '&&';
 }
 
 interface DoubleBarNode extends CombinatorGroup {
-  type: "||";
+    type: '||';
 }
 
 interface BarNode extends CombinatorGroup {
-  type: "|";
+    type: '|';
 }
 
 interface GroupNode extends CombinatorGroup {
-  type: "group";
-  multipliers?: Multipliers;
+    type: 'group';
+    multipliers?: Multipliers;
 }
 
-type Combinators =
-  | GroupNode
-  | JuxtaposingNode
-  | DoubleAmpersandNode
-  | DoubleBarNode
-  | BarNode;
+type Combinators = GroupNode | JuxtaposingNode | DoubleAmpersandNode | DoubleBarNode | BarNode;
 
 type Components = DataTypeNode | PropertyNode;
-export type ValueSyntaxAstNode =
-  | Components
-  | KeywordNode
-  | LiteralNode
-  | Combinators;
+export type ValueSyntaxAstNode = Components | KeywordNode | LiteralNode | Combinators;
 
-export function literal(
-  name: string,
-  enclosed = false,
-  multipliers?: Multipliers
-): LiteralNode {
-  return { type: "literal", name, enclosed, multipliers };
+export function literal(name: string, enclosed = false, multipliers?: Multipliers): LiteralNode {
+    return { type: 'literal', name, enclosed, multipliers };
 }
 
 export function keyword(name: string, multipliers?: Multipliers): KeywordNode {
-  return { type: "keyword", name, multipliers };
+    return { type: 'keyword', name, multipliers };
 }
 
-export function property(
-  name: string,
-  range?: Range,
-  multipliers?: Multipliers
-): PropertyNode {
-  return { type: "property", name, range, multipliers };
+export function property(name: string, range?: Range, multipliers?: Multipliers): PropertyNode {
+    return { type: 'property', name, range, multipliers };
 }
 
-export function dataType(
-  name: string,
-  range?: Range,
-  multipliers?: Multipliers
-): DataTypeNode {
-  return { type: "data-type", name, range, multipliers };
+export function dataType(name: string, range?: Range, multipliers?: Multipliers): DataTypeNode {
+    return { type: 'data-type', name, range, multipliers };
 }
 
-export function group(
-  nodes: ValueSyntaxAstNode[],
-  multipliers?: Multipliers
-): GroupNode {
-  return { type: "group", nodes, multipliers };
+export function group(nodes: ValueSyntaxAstNode[], multipliers?: Multipliers): GroupNode {
+    return { type: 'group', nodes, multipliers };
 }
 
 export function juxtaposing(nodes: ValueSyntaxAstNode[]): JuxtaposingNode {
-  return { type: "juxtaposing", nodes };
+    return { type: 'juxtaposing', nodes };
 }
 
 export function bar(nodes: ValueSyntaxAstNode[]): BarNode {
-  return { type: "|", nodes };
+    return { type: '|', nodes };
 }
 
-export function doubleAmpersand(
-  nodes: ValueSyntaxAstNode[]
-): DoubleAmpersandNode {
-  return { type: "&&", nodes };
+export function doubleAmpersand(nodes: ValueSyntaxAstNode[]): DoubleAmpersandNode {
+    return { type: '&&', nodes };
 }
 
 export function doubleBar(nodes: ValueSyntaxAstNode[]): DoubleBarNode {
-  return { type: "||", nodes };
+    return { type: '||', nodes };
 }
 
 interface ParsingContext {
-  ast: ValueSyntaxAstNode[];
+    ast: ValueSyntaxAstNode[];
 }
 
 function parseTokens(tokens: ValueSyntaxToken[], source: string) {
-  const handleToken = (
-    token: ValueSyntaxToken,
-    { ast }: ParsingContext,
-    _source: string,
-    s: Seeker<ValueSyntaxToken>
-  ) => {
-    if (token.type === "<") {
-      let closed = false;
-      s.eat("space");
-      const nameBlock = s.run<ValueSyntaxToken[]>(
-        (node, ast) => {
-          const { type } = node;
-          if (type === "space" || type === "[" || type === ">") {
-            return false;
-          } else {
-            ast.push(node);
-            return;
-          }
-        },
-        [],
-        _source
-      );
-      if (nameBlock.length === 0) {
-        throw new Error("missing data type name");
-      }
-      s.back();
-      const name = getText(nameBlock, undefined, undefined, source);
-
-      const type = getLiteralValueType(name);
-      let range: Range | undefined;
-      if (type === "invalid") {
-        throw new Error("missing data type name");
-      } else {
-        const t = s.eat("space").next();
-        if (t.type === ">") {
-          closed = true;
-        } else if (t.type === "[") {
-          const min = s.eat("space").take("text");
-          const sep = s.eat("space").take(",");
-          const max = s.eat("space").take("text");
-          const end = s.eat("space").take("]");
-          if (min && sep && max && end) {
-            range = [parseNumber(min.value), parseNumber(max.value)];
-          } else {
-            throw new Error("Invalid range");
-          }
-          const t = s.eat("space").take(">");
-          if (t) {
-            closed = true;
-          }
-        }
-      }
-      if (!closed) {
-        throw new Error('missing ">"');
-      }
-      if (type === "quoted") {
-        ast.push(property(name.slice(1, -1), range));
-      } else {
-        ast.push(dataType(name, range));
-      }
-    } else if (token.type === "[") {
-      const res = s.run(handleToken, { ast: [] }, source);
-      applyPrecedence(res.ast);
-      ast.push(group(res.ast));
-    } else if (token.type === "]") {
-      return false;
-    } else if (token.type === "text") {
-      const t = getLiteralValueType(token.value);
-      if (t === "invalid") {
-        if (token.value.startsWith("'")) {
-          const tokens = s.run(
-            (token, ast) => {
-              ast.push(token);
-              return token.value.endsWith("'") ? false : undefined;
-            },
-            [token] as ValueSyntaxToken[],
-            source
-          );
-          if (tokens.length <= 2) {
-            throw new Error("unclosed or empty literal");
-          } else {
-            ast.push(
-              literal(
-                getText(tokens, undefined, undefined, source).slice(1, -1),
-                true
-              )
+    const handleToken = (
+        token: ValueSyntaxToken,
+        { ast }: ParsingContext,
+        _source: string,
+        s: Seeker<ValueSyntaxToken>
+    ) => {
+        if (token.type === '<') {
+            let closed = false;
+            s.eat('space');
+            const nameBlock = s.run<ValueSyntaxToken[]>(
+                (node, ast) => {
+                    const { type } = node;
+                    if (type === 'space' || type === '[' || type === '>') {
+                        return false;
+                    } else {
+                        ast.push(node);
+                        return;
+                    }
+                },
+                [],
+                _source
             );
-          }
+            if (nameBlock.length === 0) {
+                throw new Error('missing data type name');
+            }
+            s.back();
+            const name = getText(nameBlock, undefined, undefined, source);
+
+            const type = getLiteralValueType(name);
+            let range: Range | undefined;
+            if (type === 'invalid') {
+                throw new Error('missing data type name');
+            } else {
+                const t = s.eat('space').next();
+                if (t.type === '>') {
+                    closed = true;
+                } else if (t.type === '[') {
+                    const min = s.eat('space').take('text');
+                    const sep = s.eat('space').take(',');
+                    const max = s.eat('space').take('text');
+                    const end = s.eat('space').take(']');
+                    if (min && sep && max && end) {
+                        range = [parseNumber(min.value), parseNumber(max.value)];
+                    } else {
+                        throw new Error('Invalid range');
+                    }
+                    const t = s.eat('space').take('>');
+                    if (t) {
+                        closed = true;
+                    }
+                }
+            }
+            if (!closed) {
+                throw new Error('missing ">"');
+            }
+            if (type === 'quoted') {
+                ast.push(property(name.slice(1, -1), range));
+            } else {
+                ast.push(dataType(name, range));
+            }
+        } else if (token.type === '[') {
+            const res = s.run(handleToken, { ast: [] }, source);
+            applyPrecedence(res.ast);
+            ast.push(group(res.ast));
+        } else if (token.type === ']') {
+            return false;
+        } else if (token.type === 'text') {
+            const t = getLiteralValueType(token.value);
+            if (t === 'invalid') {
+                if (token.value.startsWith("'")) {
+                    const tokens = s.run(
+                        (token, ast) => {
+                            ast.push(token);
+                            return token.value.endsWith("'") ? false : undefined;
+                        },
+                        [token] as ValueSyntaxToken[],
+                        source
+                    );
+                    if (tokens.length <= 2) {
+                        throw new Error('unclosed or empty literal');
+                    } else {
+                        ast.push(
+                            literal(
+                                getText(tokens, undefined, undefined, source).slice(1, -1),
+                                true
+                            )
+                        );
+                    }
+                } else {
+                    throw new Error('invalid literal');
+                }
+            } else if (t === 'quoted') {
+                ast.push(literal(token.value.slice(1, -1), true));
+            } else {
+                ast.push(keyword(token.value));
+            }
+        } else if (
+            token.type === ',' ||
+            token.type === '/' ||
+            token.type === '(' ||
+            token.type === ')'
+        ) {
+            ast.push(literal(token.value));
+        } else if (token.type === 'space') {
+            s.eat('space');
+        } else if (isRangeMultiplier(token)) {
+            const node = lastParsedNode(ast);
+            if (!node || node.type === 'juxtaposing' || isLowLevelGroup(node)) {
+                throw new Error('unexpected modifier');
+            }
+            node.multipliers ??= {};
+            if (node.multipliers.range) {
+                throw new Error('multiple multipliers on same node');
+            }
+            node.multipliers.range = typeToRange(token.type);
+        } else if (token.type === '{') {
+            const node = lastParsedNode(ast);
+
+            if (!node || isLowLevelGroup(node) || node.type === 'juxtaposing') {
+                throw new Error('unexpected range modifier');
+            }
+
+            const start = s.eat('space').take('text');
+            if (!start) {
+                throw new Error('missing range start value');
+            }
+            const sep = s.eat('space').take(',');
+            if (sep) {
+                const end = s.eat('space').take('text');
+                const close = s.eat('space').take('}');
+                if (!close) {
+                    throw new Error('missing }');
+                }
+
+                node.multipliers ??= {};
+                if (node.multipliers.range) {
+                    throw new Error('multiple multipliers on same node');
+                }
+                node.multipliers.range = [parseNumber(start.value), parseNumber(end?.value ?? '∞')];
+            } else {
+                const close = s.eat('space').take('}');
+                if (!close) {
+                    throw new Error('missing }');
+                }
+                node.multipliers ??= {};
+                if (node.multipliers.range) {
+                    throw new Error('multiple multipliers on same node');
+                }
+                node.multipliers.range = [parseNumber(start.value), parseNumber(start.value)];
+            }
+        } else if (token.type === '#') {
+            const node = lastParsedNode(ast);
+            if (!node || node.type === 'juxtaposing' || isLowLevelGroup(node)) {
+                throw new Error('unexpected list modifier');
+            }
+            node.multipliers ??= {};
+            node.multipliers.list = true;
+        } else if (token.type === '&') {
+            const nextAnd = s.take('&');
+            if (!nextAnd) {
+                throw new Error('missing &');
+            }
+            ast.push(doubleAmpersand([]));
+        } else if (token.type === '|') {
+            ast.push(s.take('|') ? doubleBar([]) : bar([]));
         } else {
-          throw new Error("invalid literal");
-        }
-      } else if (t === "quoted") {
-        ast.push(literal(token.value.slice(1, -1), true));
-      } else {
-        ast.push(keyword(token.value));
-      }
-    } else if (
-      token.type === "," ||
-      token.type === "/" ||
-      token.type === "(" ||
-      token.type === ")"
-    ) {
-      ast.push(literal(token.value));
-    } else if (token.type === "space") {
-      s.eat("space");
-    } else if (isRangeMultiplier(token)) {
-      const node = lastParsedNode(ast);
-      if (!node || node.type === "juxtaposing" || isLowLevelGroup(node)) {
-        throw new Error("unexpected modifier");
-      }
-      node.multipliers ??= {};
-      if (node.multipliers.range) {
-        throw new Error("multiple multipliers on same node");
-      }
-      node.multipliers.range = typeToRange(token.type);
-    } else if (token.type === "{") {
-      const node = lastParsedNode(ast);
-
-      if (!node || isLowLevelGroup(node) || node.type === "juxtaposing") {
-        throw new Error("unexpected range modifier");
-      }
-
-      const start = s.eat("space").take("text");
-      if (!start) {
-        throw new Error("missing range start value");
-      }
-      const sep = s.eat("space").take(",");
-      if (sep) {
-        const end = s.eat("space").take("text");
-        const close = s.eat("space").take("}");
-        if (!close) {
-          throw new Error("missing }");
-        }
-
-        node.multipliers ??= {};
-        if (node.multipliers.range) {
-          throw new Error("multiple multipliers on same node");
+            throw new Error(`UnHandled ${JSON.stringify(token)}`);
         }
-        node.multipliers.range = [
-          parseNumber(start.value),
-          parseNumber(end?.value ?? "∞"),
-        ];
-      } else {
-        const close = s.eat("space").take("}");
-        if (!close) {
-          throw new Error("missing }");
-        }
-        node.multipliers ??= {};
-        if (node.multipliers.range) {
-          throw new Error("multiple multipliers on same node");
-        }
-        node.multipliers.range = [
-          parseNumber(start.value),
-          parseNumber(start.value),
-        ];
-      }
-    } else if (token.type === "#") {
-      const node = lastParsedNode(ast);
-      if (!node || node.type === "juxtaposing" || isLowLevelGroup(node)) {
-        throw new Error("unexpected list modifier");
-      }
-      node.multipliers ??= {};
-      node.multipliers.list = true;
-    } else if (token.type === "&") {
-      const nextAnd = s.take("&");
-      if (!nextAnd) {
-        throw new Error("missing &");
-      }
-      ast.push(doubleAmpersand([]));
-    } else if (token.type === "|") {
-      ast.push(s.take("|") ? doubleBar([]) : bar([]));
-    } else {
-      throw new Error(`UnHandled ${JSON.stringify(token)}`);
-    }
 
-    applyJuxtaposing(ast);
+        applyJuxtaposing(ast);
 
-    return;
-  };
+        return;
+    };
 
-  const results = new Seeker(tokens).run<ParsingContext>(
-    handleToken,
-    { ast: [] },
-    source
-  );
+    const results = new Seeker(tokens).run<ParsingContext>(handleToken, { ast: [] }, source);
 
-  applyPrecedence(results.ast);
+    applyPrecedence(results.ast);
 
-  return results.ast[0];
+    return results.ast[0];
 }
 
 function lastParsedNode(ast: ValueSyntaxAstNode[]) {
-  const node = last(ast);
-  // assume the parse process in juxtaposing on each step
-  return node?.type === "juxtaposing" ? last(node.nodes) : node;
+    const node = last(ast);
+    // assume the parse process in juxtaposing on each step
+    return node?.type === 'juxtaposing' ? last(node.nodes) : node;
 }
 
 function applyPrecedence(ast: ValueSyntaxAstNode[]) {
-  const order = ["&&", "||", "|"] as const;
-
-  for (let i = 0; i < order.length; i++) {
-    const type = order[i];
-    for (let j = 0; j < ast.length; j++) {
-      const node = ast[j];
-      if (node.type === type) {
-        const before = ast[j - 1];
-        const after = ast[j + 1];
-        if (!before) {
-          throw new Error(`missing node before ${type}`);
-        }
-        if (!after) {
-          throw new Error(`missing node after ${type}`);
-        }
-        if (after.type === type) {
-          throw new Error("invalid grouping");
+    const order = ['&&', '||', '|'] as const;
+
+    for (let i = 0; i < order.length; i++) {
+        const type = order[i];
+        for (let j = 0; j < ast.length; j++) {
+            const node = ast[j];
+            if (node.type === type) {
+                const before = ast[j - 1];
+                const after = ast[j + 1];
+                if (!before) {
+                    throw new Error(`missing node before ${type}`);
+                }
+                if (!after) {
+                    throw new Error(`missing node after ${type}`);
+                }
+                if (after.type === type) {
+                    throw new Error('invalid grouping');
+                }
+                if (before.type === type) {
+                    before.nodes.push(after);
+                    ast.splice(j - 1, 3, before);
+                } else {
+                    node.nodes.push(before, after);
+                    ast.splice(j - 1, 3, node);
+                }
+                j--;
+            }
         }
-        if (before.type === type) {
-          before.nodes.push(after);
-          ast.splice(j - 1, 3, before);
-        } else {
-          node.nodes.push(before, after);
-          ast.splice(j - 1, 3, node);
-        }
-        j--;
-      }
     }
-  }
 
-  if (ast.length > 1) {
-    throw new Error("could not applyPrecedence");
-  }
+    if (ast.length > 1) {
+        throw new Error('could not applyPrecedence');
+    }
 }
 
 function parseNumber(value: string): number {
-  if (value === "∞") {
-    return Infinity;
-  }
-  if (value === `-∞`) {
-    return -Infinity;
-  }
-  // TODO: check for valid number, NaN, more...
-  return parseFloat(value);
+    if (value === '∞') {
+        return Infinity;
+    }
+    if (value === `-∞`) {
+        return -Infinity;
+    }
+    // TODO: check for valid number, NaN, more...
+    return parseFloat(value);
 }
 
-function isRangeMultiplier(
-  token: ValueSyntaxToken
-): token is Token<RangeMultipliers> {
-  const { type } = token;
-  return type === "!" || type === "?" || type === "+" || type === "*";
+function isRangeMultiplier(token: ValueSyntaxToken): token is Token<RangeMultipliers> {
+    const { type } = token;
+    return type === '!' || type === '?' || type === '+' || type === '*';
 }
 
 function typeToRange(type: RangeMultipliers): [number, number] {
-  switch (type) {
-    case "!":
-      return [1, 1];
-    case "*":
-      return [0, Infinity];
-    case "+":
-      return [1, Infinity];
-    case "?":
-      return [0, 1];
-  }
+    switch (type) {
+        case '!':
+            return [1, 1];
+        case '*':
+            return [0, Infinity];
+        case '+':
+            return [1, Infinity];
+        case '?':
+            return [0, 1];
+    }
 }
 
 function applyJuxtaposing(ast: ValueSyntaxAstNode[]) {
-  if (ast.length > 1) {
-    const last = ast[ast.length - 1];
-    const prev = ast[ast.length - 2];
-    if (prev.type === "juxtaposing" && !isLowLevelGroup(last)) {
-      ast.length = ast.length - 1;
-      prev.nodes.push(last);
-    } else if (!isLowLevelGroup(prev) && !isLowLevelGroup(last)) {
-      ast.splice(ast.length - 2, 2, juxtaposing([prev, last]));
+    if (ast.length > 1) {
+        const last = ast[ast.length - 1];
+        const prev = ast[ast.length - 2];
+        if (prev.type === 'juxtaposing' && !isLowLevelGroup(last)) {
+            ast.length = ast.length - 1;
+            prev.nodes.push(last);
+        } else if (!isLowLevelGroup(prev) && !isLowLevelGroup(last)) {
+            ast.splice(ast.length - 2, 2, juxtaposing([prev, last]));
+        }
     }
-  }
 }
 
 function isLowLevelGroup(
-  node: ValueSyntaxAstNode
+    node: ValueSyntaxAstNode
 ): node is DoubleBarNode | DoubleAmpersandNode | BarNode {
-  const { type } = node;
-  return type === "&&" || type === "|" || type === "||";
+    const { type } = node;
+    return type === '&&' || type === '|' || type === '||';
 }
 
 export function stringify(node: ValueSyntaxAstNode): string {
-  const { type } = node;
-  if ("multipliers" in node) {
-    throw new Error("TODO: multipliers");
-  }
-  if (type === "property") {
-    return `<'${node.name}'${node.range ? ` [${node.range}]` : ""}>`;
-  } else if (type === "data-type") {
-    return `<${node.name}${node.range ? ` [${node.range}]` : ""}>`;
-  } else if (type === "literal") {
-    return node.enclosed ? `'${node.name}'` : `${node.name}`;
-  } else if (type === "group") {
-    return `[ ${node.nodes.map((child) => stringify(child)).join("")} ]`;
-  } else if (type === "&&") {
-    return node.nodes.map((child) => stringify(child)).join(" && ");
-  } else if (type === "||") {
-    return node.nodes.map((child) => stringify(child)).join(" || ");
-  } else if (type === "|") {
-    return node.nodes.map((child) => stringify(child)).join(" | ");
-  } else if (type === "juxtaposing") {
-    return node.nodes.map((child) => stringify(child)).join(" ");
-  } else if (type === "keyword") {
-    return node.name;
-  } else {
-    throw new Error(`missing stringify for node ${JSON.stringify(node)}`);
-  }
+    const { type } = node;
+    if ('multipliers' in node) {
+        throw new Error('TODO: multipliers');
+    }
+    if (type === 'property') {
+        return `<'${node.name}'${node.range ? ` [${node.range}]` : ''}>`;
+    } else if (type === 'data-type') {
+        return `<${node.name}${node.range ? ` [${node.range}]` : ''}>`;
+    } else if (type === 'literal') {
+        return node.enclosed ? `'${node.name}'` : `${node.name}`;
+    } else if (type === 'group') {
+        return `[ ${node.nodes.map((child) => stringify(child)).join('')} ]`;
+    } else if (type === '&&') {
+        return node.nodes.map((child) => stringify(child)).join(' && ');
+    } else if (type === '||') {
+        return node.nodes.map((child) => stringify(child)).join(' || ');
+    } else if (type === '|') {
+        return node.nodes.map((child) => stringify(child)).join(' | ');
+    } else if (type === 'juxtaposing') {
+        return node.nodes.map((child) => stringify(child)).join(' ');
+    } else if (type === 'keyword') {
+        return node.name;
+    } else {
+        throw new Error(`missing stringify for node ${JSON.stringify(node)}`);
+    }
 }
 
 function getLiteralValueType(value: string) {
-  if (value.startsWith("'")) {
-    if (value.endsWith("'") && value.length > 1) {
-      return "quoted";
+    if (value.startsWith("'")) {
+        if (value.endsWith("'") && value.length > 1) {
+            return 'quoted';
+        } else {
+            return 'invalid';
+        }
     } else {
-      return "invalid";
+        return 'literal';
     }
-  } else {
-    return "literal";
-  }
 }
diff --git a/packages/css-value-parser/test/css-value-syntax.spec.ts b/packages/css-value-parser/test/css-value-syntax.spec.ts
index c2382bbc..5686ad37 100644
--- a/packages/css-value-parser/test/css-value-syntax.spec.ts
+++ b/packages/css-value-parser/test/css-value-syntax.spec.ts
@@ -1,290 +1,254 @@
-import { parseValueSyntax } from "@tokey/css-value-parser";
-import { expect } from "chai";
+import { parseValueSyntax } from '@tokey/css-value-parser';
+import { expect } from 'chai';
 //TODO: fixme
 import {
-  bar,
-  dataType,
-  doubleAmpersand,
-  doubleBar,
-  group,
-  juxtaposing,
-  keyword,
-  literal,
-  property,
-} from "../src/value-syntax-parser";
+    bar,
+    dataType,
+    doubleAmpersand,
+    doubleBar,
+    group,
+    juxtaposing,
+    keyword,
+    literal,
+    property,
+} from '@tokey/css-value-parser/dist/value-syntax-parser';
 
-import * as webCssRef from "@webref/css";
+import * as webCssRef from '@webref/css';
 
 describe(`sanity`, () => {
-  before(async () => {
-    const specs = await webCssRef.listAll();
-    for (const [specName, data] of Object.entries(specs)) {
-      describe(specName, () => {
-        describe("properties", () => {
-          for (const { name, value } of Object.values(data.properties)) {
-            if (value) {
-              it(`<'${name}'>: ${value}`, () => {
-                parseValueSyntax(value);
-              });
-            }
-          }
-        });
-        describe("valuespaces", () => {
-          for (const [name, { value }] of Object.entries(data.valuespaces)) {
-            if (value) {
-              it(`${name}: ${value}`, () => {
-                parseValueSyntax(value);
-              });
-            }
-          }
-        });
-      });
-    }
-  });
-  it(`just here to make the before dynamically load and create tests`, () => {
-    /**/
-  });
+    const knownProblemticValuespacesCases = [
+        `<keyframe-block>: <keyframe-selector># { <declaration-list> }`,
+        `<custom-selector>: <custom-arg>? : <extension-name> [ ( <custom-arg>+#? ) ]? ;`,
+        `<feature-value-block>: <font-feature-value-type> { <declaration-list> }`,
+    ];
+    before(async () => {
+        const specs = await webCssRef.listAll();
+        for (const [specName, data] of Object.entries(specs)) {
+            describe(specName, () => {
+                describe('properties', () => {
+                    for (const { name, value } of Object.values(data.properties)) {
+                        if (value) {
+                            it(`<'${name}'>: ${value}`, () => {
+                                parseValueSyntax(value);
+                            });
+                        }
+                    }
+                });
+                describe('valuespaces', () => {
+                    for (const [name, { value }] of Object.entries(data.valuespaces)) {
+                        if (value) {
+                            const title = `${name}: ${value}`;
+                            if (knownProblemticValuespacesCases.includes(title)) {
+                                continue;
+                            }
+                            it(title, () => {
+                                parseValueSyntax(value);
+                            });
+                        }
+                    }
+                });
+            });
+        }
+    });
+    it(`just here to make the before dynamically load and create tests`, () => {
+        /**/
+    });
 });
 
 // add test for #
 
-describe("value-syntax-parser", () => {
-  describe("components", () => {
-    it("should parse simple data-type component", () => {
-      expect(parseValueSyntax(`<name>`)).to.eql(dataType("name"));
-    });
+describe('value-syntax-parser', () => {
+    describe('components', () => {
+        it('should parse simple data-type component', () => {
+            expect(parseValueSyntax(`<name>`)).to.eql(dataType('name'));
+        });
 
-    it("should parse simple data-type component with range definition", () => {
-      expect(parseValueSyntax(`<name [1,1000]>`)).to.eql(
-        dataType("name", [1, 1000])
-      );
-      expect(parseValueSyntax(`<name [ 1 , 1000 ] >`)).to.eql(
-        dataType("name", [1, 1000])
-      );
-    });
+        it('should parse simple data-type component with range definition', () => {
+            expect(parseValueSyntax(`<name [1,1000]>`)).to.eql(dataType('name', [1, 1000]));
+            expect(parseValueSyntax(`<name [ 1 , 1000 ] >`)).to.eql(dataType('name', [1, 1000]));
+        });
 
-    it("should parse simple property component", () => {
-      expect(parseValueSyntax(`<'name'>`)).to.eql(property("name"));
-    });
+        it('should parse simple property component', () => {
+            expect(parseValueSyntax(`<'name'>`)).to.eql(property('name'));
+        });
 
-    it("should parse simple property component with range definition", () => {
-      expect(parseValueSyntax(`<'name' [1,1000]>`)).to.eql(
-        property("name", [1, 1000])
-      );
-      expect(parseValueSyntax(`<'name' [ 1 , 1000 ] >`)).to.eql(
-        property("name", [1, 1000])
-      );
-      expect(parseValueSyntax(`<'name' [ -∞ , ∞ ] >`)).to.eql(
-        property("name", [-Infinity, Infinity])
-      );
+        it('should parse simple property component with range definition', () => {
+            expect(parseValueSyntax(`<'name' [1,1000]>`)).to.eql(property('name', [1, 1000]));
+            expect(parseValueSyntax(`<'name' [ 1 , 1000 ] >`)).to.eql(property('name', [1, 1000]));
+            expect(parseValueSyntax(`<'name' [ -∞ , ∞ ] >`)).to.eql(
+                property('name', [-Infinity, Infinity])
+            );
+        });
     });
-  });
 
-  describe("literals/keyword", () => {
-    it("should parse simple keyword value", () => {
-      expect(parseValueSyntax(`name`)).to.eql(keyword("name"));
-    });
-    it("should parse open enclosed literal value (with delimiter)", () => {
-      expect(parseValueSyntax(`'<'`)).to.eql(literal("<", true));
-    });
-    it("should parse open enclosed literal value", () => {
-      expect(parseValueSyntax(`'name'`)).to.eql(literal("name", true));
-    });
-    it("should parse open enclosed literal value (with delimiter in the middle)", () => {
-      expect(parseValueSyntax(`'na>me'`)).to.eql(literal("na>me", true));
-    });
-    it("should parse open parentheses literal value", () => {
-      expect(parseValueSyntax(`(`)).to.eql(literal("("));
-    });
-    it("should parse close parentheses literal value", () => {
-      expect(parseValueSyntax(`)`)).to.eql(literal(")"));
-    });
-    it("should parse comma literal value", () => {
-      expect(parseValueSyntax(`,`)).to.eql(literal(","));
-    });
-    it("should parse slash literal value", () => {
-      expect(parseValueSyntax(`/`)).to.eql(literal("/"));
+    describe('literals/keyword', () => {
+        it('should parse simple keyword value', () => {
+            expect(parseValueSyntax(`name`)).to.eql(keyword('name'));
+        });
+        it('should parse open enclosed literal value (with delimiter)', () => {
+            expect(parseValueSyntax(`'<'`)).to.eql(literal('<', true));
+        });
+        it('should parse open enclosed literal value', () => {
+            expect(parseValueSyntax(`'name'`)).to.eql(literal('name', true));
+        });
+        it('should parse open enclosed literal value (with delimiter in the middle)', () => {
+            expect(parseValueSyntax(`'na>me'`)).to.eql(literal('na>me', true));
+        });
+        it('should parse open parentheses literal value', () => {
+            expect(parseValueSyntax(`(`)).to.eql(literal('('));
+        });
+        it('should parse close parentheses literal value', () => {
+            expect(parseValueSyntax(`)`)).to.eql(literal(')'));
+        });
+        it('should parse comma literal value', () => {
+            expect(parseValueSyntax(`,`)).to.eql(literal(','));
+        });
+        it('should parse slash literal value', () => {
+            expect(parseValueSyntax(`/`)).to.eql(literal('/'));
+        });
     });
-  });
 
-  describe("multipliers", () => {
-    it("data-type with multipliers", () => {
-      expect(parseValueSyntax(`<name>!`)).to.eql(
-        dataType("name", undefined, { range: [1, 1] })
-      );
-      expect(parseValueSyntax(`<name>?`)).to.eql(
-        dataType("name", undefined, { range: [0, 1] })
-      );
-      expect(parseValueSyntax(`<name>+`)).to.eql(
-        dataType("name", undefined, { range: [1, Infinity] })
-      );
-      expect(parseValueSyntax(`<name>*`)).to.eql(
-        dataType("name", undefined, { range: [0, Infinity] })
-      );
-      expect(parseValueSyntax(`<name>{2}`)).to.eql(
-        dataType("name", undefined, { range: [2, 2] })
-      );
-      expect(parseValueSyntax(`<name>{2, 4}`)).to.eql(
-        dataType("name", undefined, { range: [2, 4] })
-      );
-    });
-    it("property with multipliers", () => {
-      expect(parseValueSyntax(`<'name'>!`)).to.eql(
-        property("name", undefined, { range: [1, 1] })
-      );
-      expect(parseValueSyntax(`<'name'>?`)).to.eql(
-        property("name", undefined, { range: [0, 1] })
-      );
-      expect(parseValueSyntax(`<'name'>+`)).to.eql(
-        property("name", undefined, { range: [1, Infinity] })
-      );
-      expect(parseValueSyntax(`<'name'>*`)).to.eql(
-        property("name", undefined, { range: [0, Infinity] })
-      );
-      expect(parseValueSyntax(`<'name'>{2}`)).to.eql(
-        property("name", undefined, { range: [2, 2] })
-      );
-      expect(parseValueSyntax(`<'name'>{2, 4}`)).to.eql(
-        property("name", undefined, { range: [2, 4] })
-      );
-    });
-    it("literal with multipliers", () => {
-      expect(parseValueSyntax(`'name'!`)).to.eql(
-        literal("name", true, { range: [1, 1] })
-      );
-      expect(parseValueSyntax(`'name'?`)).to.eql(
-        literal("name", true, { range: [0, 1] })
-      );
-      expect(parseValueSyntax(`'name'+`)).to.eql(
-        literal("name", true, { range: [1, Infinity] })
-      );
-      expect(parseValueSyntax(`'name'*`)).to.eql(
-        literal("name", true, { range: [0, Infinity] })
-      );
-      expect(parseValueSyntax(`'name'{2}`)).to.eql(
-        literal("name", true, { range: [2, 2] })
-      );
-      expect(parseValueSyntax(`'name'{2, 4}`)).to.eql(
-        literal("name", true, { range: [2, 4] })
-      );
-    });
-    it("keyword with multipliers", () => {
-      expect(parseValueSyntax(`name!`)).to.eql(
-        keyword("name", { range: [1, 1] })
-      );
-      expect(parseValueSyntax(`name?`)).to.eql(
-        keyword("name", { range: [0, 1] })
-      );
-      expect(parseValueSyntax(`name+`)).to.eql(
-        keyword("name", { range: [1, Infinity] })
-      );
-      expect(parseValueSyntax(`name*`)).to.eql(
-        keyword("name", { range: [0, Infinity] })
-      );
-      expect(parseValueSyntax(`name{2}`)).to.eql(
-        keyword("name", { range: [2, 2] })
-      );
-      expect(parseValueSyntax(`name{2, 4}`)).to.eql(
-        keyword("name", { range: [2, 4] })
-      );
-    });
-    it("group with multipliers", () => {
-      expect(parseValueSyntax(`[a]!`)).to.eql(
-        group([keyword("a")], { range: [1, 1] })
-      );
-      expect(parseValueSyntax(`[a]?`)).to.eql(
-        group([keyword("a")], { range: [0, 1] })
-      );
-      expect(parseValueSyntax(`[a]+`)).to.eql(
-        group([keyword("a")], { range: [1, Infinity] })
-      );
-      expect(parseValueSyntax(`[a]*`)).to.eql(
-        group([keyword("a")], { range: [0, Infinity] })
-      );
-      expect(parseValueSyntax(`[a]{2}`)).to.eql(
-        group([keyword("a")], { range: [2, 2] })
-      );
-      expect(parseValueSyntax(`[a]{2, 4}`)).to.eql(
-        group([keyword("a")], { range: [2, 4] })
-      );
+    describe('multipliers', () => {
+        it('data-type with multipliers', () => {
+            expect(parseValueSyntax(`<name>!`)).to.eql(
+                dataType('name', undefined, { range: [1, 1] })
+            );
+            expect(parseValueSyntax(`<name>?`)).to.eql(
+                dataType('name', undefined, { range: [0, 1] })
+            );
+            expect(parseValueSyntax(`<name>+`)).to.eql(
+                dataType('name', undefined, { range: [1, Infinity] })
+            );
+            expect(parseValueSyntax(`<name>*`)).to.eql(
+                dataType('name', undefined, { range: [0, Infinity] })
+            );
+            expect(parseValueSyntax(`<name>{2}`)).to.eql(
+                dataType('name', undefined, { range: [2, 2] })
+            );
+            expect(parseValueSyntax(`<name>{2, 4}`)).to.eql(
+                dataType('name', undefined, { range: [2, 4] })
+            );
+        });
+        it('property with multipliers', () => {
+            expect(parseValueSyntax(`<'name'>!`)).to.eql(
+                property('name', undefined, { range: [1, 1] })
+            );
+            expect(parseValueSyntax(`<'name'>?`)).to.eql(
+                property('name', undefined, { range: [0, 1] })
+            );
+            expect(parseValueSyntax(`<'name'>+`)).to.eql(
+                property('name', undefined, { range: [1, Infinity] })
+            );
+            expect(parseValueSyntax(`<'name'>*`)).to.eql(
+                property('name', undefined, { range: [0, Infinity] })
+            );
+            expect(parseValueSyntax(`<'name'>{2}`)).to.eql(
+                property('name', undefined, { range: [2, 2] })
+            );
+            expect(parseValueSyntax(`<'name'>{2, 4}`)).to.eql(
+                property('name', undefined, { range: [2, 4] })
+            );
+        });
+        it('literal with multipliers', () => {
+            expect(parseValueSyntax(`'name'!`)).to.eql(literal('name', true, { range: [1, 1] }));
+            expect(parseValueSyntax(`'name'?`)).to.eql(literal('name', true, { range: [0, 1] }));
+            expect(parseValueSyntax(`'name'+`)).to.eql(
+                literal('name', true, { range: [1, Infinity] })
+            );
+            expect(parseValueSyntax(`'name'*`)).to.eql(
+                literal('name', true, { range: [0, Infinity] })
+            );
+            expect(parseValueSyntax(`'name'{2}`)).to.eql(literal('name', true, { range: [2, 2] }));
+            expect(parseValueSyntax(`'name'{2, 4}`)).to.eql(
+                literal('name', true, { range: [2, 4] })
+            );
+        });
+        it('keyword with multipliers', () => {
+            expect(parseValueSyntax(`name!`)).to.eql(keyword('name', { range: [1, 1] }));
+            expect(parseValueSyntax(`name?`)).to.eql(keyword('name', { range: [0, 1] }));
+            expect(parseValueSyntax(`name+`)).to.eql(keyword('name', { range: [1, Infinity] }));
+            expect(parseValueSyntax(`name*`)).to.eql(keyword('name', { range: [0, Infinity] }));
+            expect(parseValueSyntax(`name{2}`)).to.eql(keyword('name', { range: [2, 2] }));
+            expect(parseValueSyntax(`name{2, 4}`)).to.eql(keyword('name', { range: [2, 4] }));
+        });
+        it('group with multipliers', () => {
+            expect(parseValueSyntax(`[a]!`)).to.eql(group([keyword('a')], { range: [1, 1] }));
+            expect(parseValueSyntax(`[a]?`)).to.eql(group([keyword('a')], { range: [0, 1] }));
+            expect(parseValueSyntax(`[a]+`)).to.eql(
+                group([keyword('a')], { range: [1, Infinity] })
+            );
+            expect(parseValueSyntax(`[a]*`)).to.eql(
+                group([keyword('a')], { range: [0, Infinity] })
+            );
+            expect(parseValueSyntax(`[a]{2}`)).to.eql(group([keyword('a')], { range: [2, 2] }));
+            expect(parseValueSyntax(`[a]{2, 4}`)).to.eql(group([keyword('a')], { range: [2, 4] }));
+        });
     });
-  });
 
-  describe("combinators", () => {
-    describe("group", () => {
-      it("should parse group combinator", () => {
-        expect(parseValueSyntax(`[a]`)).to.eql(group([keyword("a")]));
-      });
-      it("should parse nested group combinator", () => {
-        expect(parseValueSyntax(`[[a]]`)).to.eql(
-          group([group([keyword("a")])])
-        );
-      });
-    });
-    describe("juxtaposition", () => {
-      it("should parse juxtaposition combinator (with two nodes)", () => {
-        expect(parseValueSyntax(`a b`)).to.eql(
-          juxtaposing([keyword("a"), keyword("b")])
-        );
-      });
-      it("should parse juxtaposition combinator (with three nodes)", () => {
-        expect(parseValueSyntax(`a b c`)).to.eql(
-          juxtaposing([keyword("a"), keyword("b"), keyword("c")])
-        );
-      });
-    });
-    describe("double-ampersand", () => {
-      it("should parse double-ampersand combinator", () => {
-        expect(parseValueSyntax(`a && b`)).to.eql(
-          doubleAmpersand([keyword("a"), keyword("b")])
-        );
-      });
-      it("should parse double-ampersand combinator with more then two items", () => {
-        expect(parseValueSyntax(`a && b && c`)).to.eql(
-          doubleAmpersand([keyword("a"), keyword("b"), keyword("c")])
-        );
-      });
-    });
-    describe("double-bar", () => {
-      it("should parse double-bar combinator", () => {
-        expect(parseValueSyntax(`a || b`)).to.eql(
-          doubleBar([keyword("a"), keyword("b")])
-        );
-      });
-      it("should parse double-bar combinator with more then two items", () => {
-        expect(parseValueSyntax(`a || b || c`)).to.eql(
-          doubleBar([keyword("a"), keyword("b"), keyword("c")])
-        );
-      });
-    });
-    describe("bar", () => {
-      it("should parse bar combinator", () => {
-        expect(parseValueSyntax(`a | b`)).to.eql(
-          bar([keyword("a"), keyword("b")])
-        );
-      });
-      it("should parse bar combinator", () => {
-        expect(parseValueSyntax(`a | b | c`)).to.eql(
-          bar([keyword("a"), keyword("b"), keyword("c")])
-        );
-      });
+    describe('combinators', () => {
+        describe('group', () => {
+            it('should parse group combinator', () => {
+                expect(parseValueSyntax(`[a]`)).to.eql(group([keyword('a')]));
+            });
+            it('should parse nested group combinator', () => {
+                expect(parseValueSyntax(`[[a]]`)).to.eql(group([group([keyword('a')])]));
+            });
+        });
+        describe('juxtaposition', () => {
+            it('should parse juxtaposition combinator (with two nodes)', () => {
+                expect(parseValueSyntax(`a b`)).to.eql(juxtaposing([keyword('a'), keyword('b')]));
+            });
+            it('should parse juxtaposition combinator (with three nodes)', () => {
+                expect(parseValueSyntax(`a b c`)).to.eql(
+                    juxtaposing([keyword('a'), keyword('b'), keyword('c')])
+                );
+            });
+        });
+        describe('double-ampersand', () => {
+            it('should parse double-ampersand combinator', () => {
+                expect(parseValueSyntax(`a && b`)).to.eql(
+                    doubleAmpersand([keyword('a'), keyword('b')])
+                );
+            });
+            it('should parse double-ampersand combinator with more then two items', () => {
+                expect(parseValueSyntax(`a && b && c`)).to.eql(
+                    doubleAmpersand([keyword('a'), keyword('b'), keyword('c')])
+                );
+            });
+        });
+        describe('double-bar', () => {
+            it('should parse double-bar combinator', () => {
+                expect(parseValueSyntax(`a || b`)).to.eql(doubleBar([keyword('a'), keyword('b')]));
+            });
+            it('should parse double-bar combinator with more then two items', () => {
+                expect(parseValueSyntax(`a || b || c`)).to.eql(
+                    doubleBar([keyword('a'), keyword('b'), keyword('c')])
+                );
+            });
+        });
+        describe('bar', () => {
+            it('should parse bar combinator', () => {
+                expect(parseValueSyntax(`a | b`)).to.eql(bar([keyword('a'), keyword('b')]));
+            });
+            it('should parse bar combinator', () => {
+                expect(parseValueSyntax(`a | b | c`)).to.eql(
+                    bar([keyword('a'), keyword('b'), keyword('c')])
+                );
+            });
+        });
     });
-  });
 
-  describe("grouping order", () => {
-    it("no grouping ordering", () => {
-      expect(parseValueSyntax(`a b | c || d && e f`)).to.eql(
-        bar([
-          juxtaposing([keyword("a"), keyword("b")]),
-          doubleBar([
-            keyword("c"),
-            doubleAmpersand([
-              keyword("d"),
-              juxtaposing([keyword("e"), keyword("f")]),
-            ]),
-          ]),
-        ])
-      );
+    describe('grouping order', () => {
+        it('no grouping ordering', () => {
+            expect(parseValueSyntax(`a b | c || d && e f`)).to.eql(
+                bar([
+                    juxtaposing([keyword('a'), keyword('b')]),
+                    doubleBar([
+                        keyword('c'),
+                        doubleAmpersand([keyword('d'), juxtaposing([keyword('e'), keyword('f')])]),
+                    ]),
+                ])
+            );
+        });
     });
-  });
 });
diff --git a/packages/css-value-parser/test/define-property.spec.ts b/packages/css-value-parser/test/define-property.spec.ts
index ddb9527c..eced8f84 100644
--- a/packages/css-value-parser/test/define-property.spec.ts
+++ b/packages/css-value-parser/test/define-property.spec.ts
@@ -1,403 +1,404 @@
-import { defineProperty, parseCSSValue } from "@tokey/css-value-parser";
-import { expect } from "chai";
+import { defineProperty, parseCSSValue } from '@tokey/css-value-parser';
+import { expect } from 'chai';
 
-describe(`value-parser/define-property`, () => {
-  describe(`validation`, () => {
-    it(`should approve valid syntax`, () => {
-      const p = defineProperty({
-        name: `my-prop`,
-        syntax: `<number>`,
-      });
+// ToDo: implementation
+describe.skip(`value-parser/define-property`, () => {
+    describe(`validation`, () => {
+        it(`should approve valid syntax`, () => {
+            const p = defineProperty({
+                name: `my-prop`,
+                syntax: `<number>`,
+            });
 
-      expect(p.validate(parseCSSValue(`55`))).to.equal([]);
-    });
-    it(`should warn on unexpected type`, () => {
-      const p = defineProperty({
-        name: `my-prop`,
-        syntax: `<number>`,
-      });
+            expect(p.validate(parseCSSValue(`55`))).to.equal([]);
+        });
+        it(`should warn on unexpected type`, () => {
+            const p = defineProperty({
+                name: `my-prop`,
+                syntax: `<number>`,
+            });
 
-      const ast = parseCSSValue(`abc`);
-      const errors = p.validate(ast);
+            const ast = parseCSSValue(`abc`);
+            const errors = p.validate(ast);
 
-      expect(errors).to.equal([
-        {
-          msg: defineProperty.errors.unexpectedType(ast[0], `<number>`),
-          ref: ast[0],
-        },
-      ]);
-    });
-    it(`should warn on top level comma`, () => {
-      const p = defineProperty({
-        name: `my-prop`,
-        syntax: `<number>`,
-      });
+            expect(errors).to.equal([
+                {
+                    msg: defineProperty.errors.unexpectedType(ast[0], `<number>`),
+                    ref: ast[0],
+                },
+            ]);
+        });
+        it(`should warn on top level comma`, () => {
+            const p = defineProperty({
+                name: `my-prop`,
+                syntax: `<number>`,
+            });
 
-      const ast = parseCSSValue(`44,55`);
-      const errors = p.validate(ast);
+            const ast = parseCSSValue(`44,55`);
+            const errors = p.validate(ast);
 
-      expect(errors).to.equal([
-        {
-          msg: defineProperty.errors.unexpectedComma(),
-          ref: ast[1],
-        },
-      ]);
-    });
-    it(`should NOT warn on expected top level comma`, () => {
-      const p = defineProperty({
-        name: `my-prop`,
-        syntax: `<number>#`,
-        topLevelCommaSeparation: true,
-      });
+            expect(errors).to.equal([
+                {
+                    msg: defineProperty.errors.unexpectedComma(),
+                    ref: ast[1],
+                },
+            ]);
+        });
+        it(`should NOT warn on expected top level comma`, () => {
+            const p = defineProperty({
+                name: `my-prop`,
+                syntax: `<number>#`,
+                topLevelCommaSeparation: true,
+            });
 
-      const ast = parseCSSValue(`44,55`);
-      const errors = p.validate(ast);
+            const ast = parseCSSValue(`44,55`);
+            const errors = p.validate(ast);
 
-      expect(errors).to.equal([]);
+            expect(errors).to.equal([]);
+        });
     });
-  });
-  describe(`format`, () => {
-    it(`should match a defined format`, () => {
-      const p = defineProperty({
-        name: `my-prop`,
-        syntax: `<number> | <string> | <boolean>`,
-        formats: {
-          number: `<number>`,
-          string: `<string>`,
-          boolean: `<boolean>`,
-        },
-      });
+    describe(`format`, () => {
+        it(`should match a defined format`, () => {
+            const p = defineProperty({
+                name: `my-prop`,
+                syntax: `<number> | <string> | <boolean>`,
+                formats: {
+                    number: `<number>`,
+                    string: `<string>`,
+                    boolean: `<boolean>`,
+                },
+            });
 
-      expect(p.getFormat(parseCSSValue(`55`)), `number`).to.eql(`number`);
-      expect(p.getFormat(parseCSSValue(`xy`)), `string`).to.eql(`string`);
-      expect(p.getFormat(parseCSSValue(`true`)), `boolean`).to.eql(`boolean`);
-      expect(p.getFormat(parseCSSValue(`5px`)), `unknown`).to.eql(undefined);
+            expect(p.getFormat(parseCSSValue(`55`)), `number`).to.eql(`number`);
+            expect(p.getFormat(parseCSSValue(`xy`)), `string`).to.eql(`string`);
+            expect(p.getFormat(parseCSSValue(`true`)), `boolean`).to.eql(`boolean`);
+            expect(p.getFormat(parseCSSValue(`5px`)), `unknown`).to.eql(undefined);
+        });
     });
-  });
-  describe(`classification`, () => {
-    it(`should classify inner parts`, () => {
-      const p = defineProperty({
-        name: `my-prop`,
-        syntax: `<number> <string>`,
-        classifications: {
-          amount: (node) => node.type === `<number>`,
-          name: (node) => node.type === `<string>`,
-        },
-      });
+    describe(`classification`, () => {
+        it(`should classify inner parts`, () => {
+            const p = defineProperty({
+                name: `my-prop`,
+                syntax: `<number> <string>`,
+                classifications: {
+                    amount: (node) => node.type === `<number>`,
+                    name: (node) => node.type === `<string>`,
+                },
+            });
 
-      const ast = parseCSSValue(`50 abc`);
-      const classification = p.classify(ast);
+            const ast = parseCSSValue(`50 abc`);
+            const classification = p.classify(ast);
 
-      expect(classification.amount.value).to.equal(ast[0]);
-      expect(classification.name.value).to.equal(ast[2]);
-    });
-  });
-  describe(`vars`, () => {
-    // ToDo: handle unknown var
-    describe(`css properties`, () => {
-      it(`should resolve origin`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<number>`,
-          classifications: {
-            amount: (node) => node.type === `<number>`,
-          },
+            expect(classification.amount.value).to.equal(ast[0]);
+            expect(classification.name.value).to.equal(ast[2]);
         });
+    });
+    describe(`vars`, () => {
+        // ToDo: handle unknown var
+        describe(`css properties`, () => {
+            it(`should resolve origin`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<number>`,
+                    classifications: {
+                        amount: (node) => node.type === `<number>`,
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x)`);
-        const cssVars = {
-          x: parseCSSValue(`123`),
-        };
+                const ast = parseCSSValue(`var(--x)`);
+                const cssVars = {
+                    x: parseCSSValue(`123`),
+                };
 
-        expect(p.classify(ast, { cssVars })).deep.include({
-          amount: {
-            value: [cssVars.x[0]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [0] }],
-              },
-            ],
-          },
-        });
-      });
-      it(`should resolve origin deep`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<number>`,
-          classifications: {
-            amount: (node) => node.type === `<number>`,
-          },
-        });
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    amount: {
+                        value: [cssVars.x[0]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [0] }],
+                            },
+                        ],
+                    },
+                });
+            });
+            it(`should resolve origin deep`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<number>`,
+                    classifications: {
+                        amount: (node) => node.type === `<number>`,
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x)`);
-        const cssVars = {
-          x: parseCSSValue(`var(--y)`),
-          y: parseCSSValue(`123`),
-        };
+                const ast = parseCSSValue(`var(--x)`);
+                const cssVars = {
+                    x: parseCSSValue(`var(--y)`),
+                    y: parseCSSValue(`123`),
+                };
 
-        expect(p.classify(ast, { cssVars })).deep.include({
-          amount: {
-            value: [cssVars.y[0]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [
-                  {
-                    origin: cssVars.x,
-                    nodes: [0],
-                    resolved: [{ origin: cssVars.y, nodes: [0] }],
-                  },
-                ],
-              },
-            ],
-          },
-        });
-      });
-      it(`should resolve multiple parts from single origin`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<number> <number>`,
-          classifications: {
-            amountA: (node, { indexOfType }) =>
-              node.type === `<number>` && indexOfType === 0,
-            amountB: (node, { indexOfType }) =>
-              node.type === `<number>` && indexOfType === 1,
-          },
-        });
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    amount: {
+                        value: [cssVars.y[0]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [
+                                    {
+                                        origin: cssVars.x,
+                                        nodes: [0],
+                                        resolved: [{ origin: cssVars.y, nodes: [0] }],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                });
+            });
+            it(`should resolve multiple parts from single origin`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<number> <number>`,
+                    classifications: {
+                        amountA: (node, { indexOfType }) =>
+                            node.type === `<number>` && indexOfType === 0,
+                        amountB: (node, { indexOfType }) =>
+                            node.type === `<number>` && indexOfType === 1,
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x)`);
-        const cssVars = {
-          x: parseCSSValue(`123 789`),
-        };
+                const ast = parseCSSValue(`var(--x)`);
+                const cssVars = {
+                    x: parseCSSValue(`123 789`),
+                };
 
-        expect(p.classify(ast, { cssVars })).deep.include({
-          amountA: {
-            value: [cssVars.x[0]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [0] }],
-              },
-            ],
-          },
-          amountB: {
-            value: [cssVars.x[2]],
-            resolved: [
-              [
-                {
-                  origin: ast,
-                  nodes: [0],
-                  resolved: [{ origin: cssVars.x, nodes: [2] }],
-                },
-              ],
-            ],
-          },
-        });
-      });
-      it(`should resolve multiple parts from multiple origins`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<number> <number>`,
-          classifications: {
-            amountA: (node, { indexOfType }) =>
-              node.type === `<number>` && indexOfType === 0,
-            amountB: (node, { indexOfType }) =>
-              node.type === `<number>` && indexOfType === 1,
-          },
-        });
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    amountA: {
+                        value: [cssVars.x[0]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [0] }],
+                            },
+                        ],
+                    },
+                    amountB: {
+                        value: [cssVars.x[2]],
+                        resolved: [
+                            [
+                                {
+                                    origin: ast,
+                                    nodes: [0],
+                                    resolved: [{ origin: cssVars.x, nodes: [2] }],
+                                },
+                            ],
+                        ],
+                    },
+                });
+            });
+            it(`should resolve multiple parts from multiple origins`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<number> <number>`,
+                    classifications: {
+                        amountA: (node, { indexOfType }) =>
+                            node.type === `<number>` && indexOfType === 0,
+                        amountB: (node, { indexOfType }) =>
+                            node.type === `<number>` && indexOfType === 1,
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x) var(--y)`);
-        const cssVars = {
-          x: parseCSSValue(`123`),
-          y: parseCSSValue(`789`),
-        };
+                const ast = parseCSSValue(`var(--x) var(--y)`);
+                const cssVars = {
+                    x: parseCSSValue(`123`),
+                    y: parseCSSValue(`789`),
+                };
 
-        expect(p.classify(ast, { cssVars })).deep.include({
-          amountA: {
-            value: [cssVars.x[0]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [0] }],
-              },
-            ],
-          },
-          amountB: {
-            value: [cssVars.y[0]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [2],
-                resolved: [{ origin: cssVars.y, nodes: [0] }],
-              },
-            ],
-          },
-        });
-      });
-      it(`should resolve complex part from single origin`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<length> <length>`,
-          classifications: {
-            position: {
-              syntax: `<length> <length>`,
-            },
-          },
-        });
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    amountA: {
+                        value: [cssVars.x[0]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [0] }],
+                            },
+                        ],
+                    },
+                    amountB: {
+                        value: [cssVars.y[0]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [2],
+                                resolved: [{ origin: cssVars.y, nodes: [0] }],
+                            },
+                        ],
+                    },
+                });
+            });
+            it(`should resolve complex part from single origin`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<length> <length>`,
+                    classifications: {
+                        position: {
+                            syntax: `<length> <length>`,
+                        },
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x)`);
-        const cssVars = {
-          x: parseCSSValue(`1px 2px`),
-        };
+                const ast = parseCSSValue(`var(--x)`);
+                const cssVars = {
+                    x: parseCSSValue(`1px 2px`),
+                };
 
-        expect(p.classify(ast, { cssVars })).deep.include({
-          position: {
-            value: [cssVars.x[0], cssVars.x[1], cssVars.x[2]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [0] }],
-              },
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [1] }],
-              },
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [2] }],
-              },
-            ],
-          },
-        });
-      });
-      it(`should resolve complex part from multiple origins`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<length> <length>`,
-          classifications: {
-            position: {
-              syntax: `<length> <length>`,
-            },
-          },
-        });
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    position: {
+                        value: [cssVars.x[0], cssVars.x[1], cssVars.x[2]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [0] }],
+                            },
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [1] }],
+                            },
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [2] }],
+                            },
+                        ],
+                    },
+                });
+            });
+            it(`should resolve complex part from multiple origins`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<length> <length>`,
+                    classifications: {
+                        position: {
+                            syntax: `<length> <length>`,
+                        },
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x) var(--y)`);
-        const cssVars = {
-          x: parseCSSValue(`1px`),
-          y: parseCSSValue(`2px`),
-        };
+                const ast = parseCSSValue(`var(--x) var(--y)`);
+                const cssVars = {
+                    x: parseCSSValue(`1px`),
+                    y: parseCSSValue(`2px`),
+                };
 
-        expect(p.classify(ast, { cssVars })).deep.include({
-          position: {
-            value: [cssVars.x[0], ast[1], cssVars.y[0]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: cssVars.x, nodes: [0] }],
-              },
-              { origin: ast, nodes: [1] },
-              {
-                origin: ast,
-                nodes: [2],
-                resolved: [{ origin: cssVars.y, nodes: [0] }],
-              },
-            ],
-          },
-        });
-      });
-      it(`should NOT resolve concatenated values`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<length>`,
-          classifications: {
-            size: (node) => node.type === `<length>`,
-          },
-        });
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    position: {
+                        value: [cssVars.x[0], ast[1], cssVars.y[0]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: cssVars.x, nodes: [0] }],
+                            },
+                            { origin: ast, nodes: [1] },
+                            {
+                                origin: ast,
+                                nodes: [2],
+                                resolved: [{ origin: cssVars.y, nodes: [0] }],
+                            },
+                        ],
+                    },
+                });
+            });
+            it(`should NOT resolve concatenated values`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<length>`,
+                    classifications: {
+                        size: (node) => node.type === `<length>`,
+                    },
+                });
 
-        const ast = parseCSSValue(`var(--x)px`);
-        const cssVars = {
-          x: parseCSSValue(`5`),
-        };
+                const ast = parseCSSValue(`var(--x)px`);
+                const cssVars = {
+                    x: parseCSSValue(`5`),
+                };
 
-        // ToDo: maybe all methods should always output errors
-        expect(p.classify(ast, { cssVars })).deep.include({
-          amount: {
-            ref: undefined,
-            resolved: [],
-          },
-        });
-      });
-    });
-    describe(`build vars`, () => {
-      const $varParser = {} as any;
-      it(`should resolve origin`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<number>`,
-          classifications: {
-            amount: (node) => node.type === `<number>`,
-          },
+                // ToDo: maybe all methods should always output errors
+                expect(p.classify(ast, { cssVars })).deep.include({
+                    amount: {
+                        ref: undefined,
+                        resolved: [],
+                    },
+                });
+            });
         });
+        describe(`build vars`, () => {
+            const $varParser = {} as any;
+            it(`should resolve origin`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<number>`,
+                    classifications: {
+                        amount: (node) => node.type === `<number>`,
+                    },
+                });
 
-        const ast = parseCSSValue(`$x`, { parseBuildVar: $varParser });
-        const buildVars: Record<string, ReturnType<typeof parseCSSValue>> = {
-          $x: parseCSSValue(`123`),
-        };
+                const ast = parseCSSValue(`$x`, { parseBuildVar: $varParser });
+                const buildVars: Record<string, ReturnType<typeof parseCSSValue>> = {
+                    $x: parseCSSValue(`123`),
+                };
 
-        expect(
-          p.classify(ast, { resolveBuildVar: ({ id }) => buildVars[id] })
-        ).deep.include({
-          amount: {
-            value: [buildVars.$x[0]],
-            resolved: [
-              {
-                origin: ast[0],
-                nodes: [0],
-                resolved: [{ origin: buildVars.$x, nodes: [0] }],
-              },
-            ],
-          },
-        });
-      });
-      it(`should resolve concatenated origin`, () => {
-        const p = defineProperty({
-          name: `my-prop`,
-          syntax: `<length>`,
-          classifications: {
-            amount: (node) => node.type === `<length>`,
-          },
-        });
+                expect(
+                    p.classify(ast, { resolveBuildVar: ({ id }) => buildVars[id] })
+                ).deep.include({
+                    amount: {
+                        value: [buildVars.$x[0]],
+                        resolved: [
+                            {
+                                origin: ast[0],
+                                nodes: [0],
+                                resolved: [{ origin: buildVars.$x, nodes: [0] }],
+                            },
+                        ],
+                    },
+                });
+            });
+            it(`should resolve concatenated origin`, () => {
+                const p = defineProperty({
+                    name: `my-prop`,
+                    syntax: `<length>`,
+                    classifications: {
+                        amount: (node) => node.type === `<length>`,
+                    },
+                });
 
-        const ast = parseCSSValue(`#($x)px`, { parseBuildVar: $varParser });
-        const buildVars: Record<string, ReturnType<typeof parseCSSValue>> = {
-          $x: parseCSSValue(`123`),
-        };
+                const ast = parseCSSValue(`#($x)px`, { parseBuildVar: $varParser });
+                const buildVars: Record<string, ReturnType<typeof parseCSSValue>> = {
+                    $x: parseCSSValue(`123`),
+                };
 
-        expect(
-          p.classify(ast, { resolveBuildVar: ({ id }) => buildVars[id] })
-        ).deep.include({
-          amount: {
-            value: [buildVars.$x[0], ast[1]],
-            resolved: [
-              {
-                origin: ast,
-                nodes: [0],
-                resolved: [{ origin: buildVars.$x, nodes: [0] }],
-              },
-              { origin: ast, nodes: [ast[1]] },
-            ],
-          },
+                expect(
+                    p.classify(ast, { resolveBuildVar: ({ id }) => buildVars[id] })
+                ).deep.include({
+                    amount: {
+                        value: [buildVars.$x[0], ast[1]],
+                        resolved: [
+                            {
+                                origin: ast,
+                                nodes: [0],
+                                resolved: [{ origin: buildVars.$x, nodes: [0] }],
+                            },
+                            { origin: ast, nodes: [ast[1]] },
+                        ],
+                    },
+                });
+            });
         });
-      });
     });
-  });
 });
diff --git a/packages/css-value-parser/test/properties/background.spec.ts b/packages/css-value-parser/test/properties/background.spec.ts
index 9dffd101..6d8057eb 100644
--- a/packages/css-value-parser/test/properties/background.spec.ts
+++ b/packages/css-value-parser/test/properties/background.spec.ts
@@ -1,29 +1,30 @@
-import { parseCSSValue, background } from "@tokey/css-value-parser";
-import { expect } from "chai";
+import { parseCSSValue, background } from '@tokey/css-value-parser';
+import { expect } from 'chai';
 
-describe(`value-parser/properties/background`, () => {
-  it(`should resolve classification`, () => {
-    const ast = parseCSSValue(
-      //0  1                                       2   3  4  5      6         7      8          9
-      `red linear-gradient(green 0%, yellow 100%) 40% 30% / auto border-box fixed padding-box repeat-x`
-    );
+// ToDo: implementation
+describe.skip(`value-parser/properties/background`, () => {
+    it(`should resolve classification`, () => {
+        const ast = parseCSSValue(
+            //0  1                                       2   3  4  5      6         7      8          9
+            `red linear-gradient(green 0%, yellow 100%) 40% 30% / auto border-box fixed padding-box repeat-x`
+        );
 
-    const classification = background.classify(ast);
+        const classification = background.classify(ast);
 
-    expect(classification).to.eql([
-      {
-        "background-color": { ref: [ast[0]], isProperty: true }, // red
-        "background-image": { ref: [ast[1]], isProperty: true }, // linear-gradient
-        "background-position": {
-          ref: [ast[2], ast[3]],
-          isProperty: true,
-        }, // 40% 30%
-        "background-size": { ref: [ast[5]], isProperty: true }, // auto
-        "background-origin": { ref: [ast[6]], isProperty: true }, // border-box
-        "background-attachment": { ref: [ast[7]], isProperty: true }, // fixed
-        "background-clip": { ref: [ast[8]], isProperty: true }, // padding-box
-        "background-repeat": { ref: [ast[9]], isProperty: true }, // repeat-x
-      },
-    ]);
-  });
+        expect(classification).to.eql([
+            {
+                'background-color': { ref: [ast[0]], isProperty: true }, // red
+                'background-image': { ref: [ast[1]], isProperty: true }, // linear-gradient
+                'background-position': {
+                    ref: [ast[2], ast[3]],
+                    isProperty: true,
+                }, // 40% 30%
+                'background-size': { ref: [ast[5]], isProperty: true }, // auto
+                'background-origin': { ref: [ast[6]], isProperty: true }, // border-box
+                'background-attachment': { ref: [ast[7]], isProperty: true }, // fixed
+                'background-clip': { ref: [ast[8]], isProperty: true }, // padding-box
+                'background-repeat': { ref: [ast[9]], isProperty: true }, // repeat-x
+            },
+        ]);
+    });
 });
diff --git a/packages/css-value-parser/test/properties/margin.spec.ts b/packages/css-value-parser/test/properties/margin.spec.ts
index dbde9408..ed7f4da5 100644
--- a/packages/css-value-parser/test/properties/margin.spec.ts
+++ b/packages/css-value-parser/test/properties/margin.spec.ts
@@ -1,5 +1,5 @@
-import { parseCSSValue, margin } from "@tokey/css-value-parser";
-import { expect } from "chai";
+import { parseCSSValue, margin } from '@tokey/css-value-parser';
+import { expect } from 'chai';
 /*
 - parse unknown syntax (property)
 - toShorthand
@@ -8,119 +8,120 @@ import { expect } from "chai";
 - vars - handle build concatenation (buildvars/placeholders)
 - vars - handle runtime vars
 */
-describe(`value-parser/properties/margin`, () => {
-  it(`should parse unknown syntax`, () => {
-    const twoValues = parseCSSValue(`1px`);
-    expect(twoValues).to.eql([
-      {
-        type: `<length>`,
-        value: `1px`,
-      },
-      {
-        type: `<SEP>`,
-        value: ` `,
-      },
-      {
-        type: `<length>`,
-        value: `2px`,
-      },
-    ]);
-  });
-  it(`should resolve format`, () => {
-    const oneValue = parseCSSValue(`1px`);
-    expect(margin.getFormat(oneValue)).to.eql(`all`);
+// ToDo: implementation
+describe.skip(`value-parser/properties/margin`, () => {
+    it(`should parse unknown syntax`, () => {
+        const twoValues = parseCSSValue(`1px`);
+        expect(twoValues).to.eql([
+            {
+                type: `<length>`,
+                value: `1px`,
+            },
+            {
+                type: `<SEP>`,
+                value: ` `,
+            },
+            {
+                type: `<length>`,
+                value: `2px`,
+            },
+        ]);
+    });
+    it(`should resolve format`, () => {
+        const oneValue = parseCSSValue(`1px`);
+        expect(margin.getFormat(oneValue)).to.eql(`all`);
 
-    const twoValues = parseCSSValue(`1px 2px`);
-    expect(margin.getFormat(twoValues)).to.eql(`horizontal-vertical`);
+        const twoValues = parseCSSValue(`1px 2px`);
+        expect(margin.getFormat(twoValues)).to.eql(`horizontal-vertical`);
 
-    const threeValues = parseCSSValue(`1px 2px 3px`);
-    expect(margin.getFormat(threeValues)).to.eql(`top-horizontal-bottom`);
+        const threeValues = parseCSSValue(`1px 2px 3px`);
+        expect(margin.getFormat(threeValues)).to.eql(`top-horizontal-bottom`);
 
-    const fourValues = parseCSSValue(`1px 2px 3px 4px`);
-    expect(margin.getFormat(fourValues)).to.eql(`top-right-bottom-left`);
+        const fourValues = parseCSSValue(`1px 2px 3px 4px`);
+        expect(margin.getFormat(fourValues)).to.eql(`top-right-bottom-left`);
 
-    const invalid = parseCSSValue(`1px 2px 3px 4px 5px`);
-    expect(margin.getFormat(invalid)).to.eql(`invalid`);
-  });
-  describe(`classification`, () => {
-    it(`should resolve all formats`, () => {
-      const singleValue = parseCSSValue(`1px`);
-      expect(margin.classify(singleValue), `single value`).to.eql({
-        "margin-top": { value: [singleValue[0]] },
-        "margin-right": { value: [singleValue[0]] },
-        "margin-bottom": { value: [singleValue[0]] },
-        "margin-left": { value: [singleValue[0]] },
-      });
+        const invalid = parseCSSValue(`1px 2px 3px 4px 5px`);
+        expect(margin.getFormat(invalid)).to.eql(`invalid`);
+    });
+    describe(`classification`, () => {
+        it(`should resolve all formats`, () => {
+            const singleValue = parseCSSValue(`1px`);
+            expect(margin.classify(singleValue), `single value`).to.eql({
+                'margin-top': { value: [singleValue[0]] },
+                'margin-right': { value: [singleValue[0]] },
+                'margin-bottom': { value: [singleValue[0]] },
+                'margin-left': { value: [singleValue[0]] },
+            });
 
-      const twoValues = parseCSSValue(`1px 2px`);
-      expect(margin.classify(twoValues), `two values`).to.eql({
-        "margin-top": { value: [twoValues[2]] },
-        "margin-right": { value: [twoValues[0]] },
-        "margin-bottom": { value: [twoValues[2]] },
-        "margin-left": { value: [twoValues[0]] },
-      });
+            const twoValues = parseCSSValue(`1px 2px`);
+            expect(margin.classify(twoValues), `two values`).to.eql({
+                'margin-top': { value: [twoValues[2]] },
+                'margin-right': { value: [twoValues[0]] },
+                'margin-bottom': { value: [twoValues[2]] },
+                'margin-left': { value: [twoValues[0]] },
+            });
 
-      const threeValues = parseCSSValue(`1px 2px 3px`);
-      expect(margin.classify(threeValues), `three values`).to.eql({
-        "margin-top": { value: [threeValues[0]] },
-        "margin-right": { value: [threeValues[2]] },
-        "margin-bottom": { value: [threeValues[4]] },
-        "margin-left": { value: [threeValues[2]] },
-      });
+            const threeValues = parseCSSValue(`1px 2px 3px`);
+            expect(margin.classify(threeValues), `three values`).to.eql({
+                'margin-top': { value: [threeValues[0]] },
+                'margin-right': { value: [threeValues[2]] },
+                'margin-bottom': { value: [threeValues[4]] },
+                'margin-left': { value: [threeValues[2]] },
+            });
 
-      const fourValues = parseCSSValue(`1px 2px 3px 4px`);
-      expect(margin.classify(threeValues), `four values`).to.eql({
-        "margin-top": { value: [fourValues[0]] },
-        "margin-right": { value: [fourValues[2]] },
-        "margin-bottom": { value: [fourValues[4]] },
-        "margin-left": { value: [fourValues[2]] },
-      });
-    });
-    it(`should resolve params`, () => {
-      const ast = parseCSSValue(`var(--size)`);
-      const sizeParam = parseCSSValue(`5px`);
-      const cssVars = {
-        size: sizeParam,
-      };
+            const fourValues = parseCSSValue(`1px 2px 3px 4px`);
+            expect(margin.classify(threeValues), `four values`).to.eql({
+                'margin-top': { value: [fourValues[0]] },
+                'margin-right': { value: [fourValues[2]] },
+                'margin-bottom': { value: [fourValues[4]] },
+                'margin-left': { value: [fourValues[2]] },
+            });
+        });
+        it(`should resolve params`, () => {
+            const ast = parseCSSValue(`var(--size)`);
+            const sizeParam = parseCSSValue(`5px`);
+            const cssVars = {
+                size: sizeParam,
+            };
 
-      expect(margin.classify(ast, { cssVars }), `single value`).to.eql({
-        "margin-top": {
-          value: [cssVars.size[0]],
-          resolved: [
-            [
-              { origin: ast, nodes: [ast[0]] },
-              { origin: cssVars.size, nodes: [cssVars.size[0]] },
-            ],
-          ],
-        },
-        "margin-right": {
-          value: [cssVars.size[0]],
-          resolved: [
-            [
-              { origin: ast, nodes: [ast[0]] },
-              { origin: cssVars.size, nodes: [cssVars.size[0]] },
-            ],
-          ],
-        },
-        "margin-bottom": {
-          value: [cssVars.size[0]],
-          resolved: [
-            [
-              { origin: ast, nodes: [ast[0]] },
-              { origin: cssVars.size, nodes: [cssVars.size[0]] },
-            ],
-          ],
-        },
-        "margin-left": {
-          value: [cssVars.size[0]],
-          resolved: [
-            [
-              { origin: ast, nodes: [ast[0]] },
-              { origin: cssVars.size, nodes: [cssVars.size[0]] },
-            ],
-          ],
-        },
-      });
+            expect(margin.classify(ast, { cssVars }), `single value`).to.eql({
+                'margin-top': {
+                    value: [cssVars.size[0]],
+                    resolved: [
+                        [
+                            { origin: ast, nodes: [ast[0]] },
+                            { origin: cssVars.size, nodes: [cssVars.size[0]] },
+                        ],
+                    ],
+                },
+                'margin-right': {
+                    value: [cssVars.size[0]],
+                    resolved: [
+                        [
+                            { origin: ast, nodes: [ast[0]] },
+                            { origin: cssVars.size, nodes: [cssVars.size[0]] },
+                        ],
+                    ],
+                },
+                'margin-bottom': {
+                    value: [cssVars.size[0]],
+                    resolved: [
+                        [
+                            { origin: ast, nodes: [ast[0]] },
+                            { origin: cssVars.size, nodes: [cssVars.size[0]] },
+                        ],
+                    ],
+                },
+                'margin-left': {
+                    value: [cssVars.size[0]],
+                    resolved: [
+                        [
+                            { origin: ast, nodes: [ast[0]] },
+                            { origin: cssVars.size, nodes: [cssVars.size[0]] },
+                        ],
+                    ],
+                },
+            });
+        });
     });
-  });
 });
diff --git a/packages/css-value-parser/test/types.d.ts b/packages/css-value-parser/test/types.d.ts
index bd9ea6e6..bda91a1f 100644
--- a/packages/css-value-parser/test/types.d.ts
+++ b/packages/css-value-parser/test/types.d.ts
@@ -1,19 +1,19 @@
-declare module "@webref/css" {
-  interface SpecData {
-    properties: Record<
-      string,
-      {
-        name: string;
-        value?: string;
-        initial: string;
-      }
-    >;
-    valuespaces: Record<
-      string,
-      {
-        value?: string;
-      }
-    >;
-  }
-  export function listAll(): Promise<Record<string, SpecData>>;
+declare module '@webref/css' {
+    interface SpecData {
+        properties: Record<
+            string,
+            {
+                name: string;
+                value?: string;
+                initial: string;
+            }
+        >;
+        valuespaces: Record<
+            string,
+            {
+                value?: string;
+            }
+        >;
+    }
+    export function listAll(): Promise<Record<string, SpecData>>;
 }
diff --git a/packages/css-value-parser/test/value-parser.spec.ts b/packages/css-value-parser/test/value-parser.spec.ts
index 0e6f0174..a780e008 100644
--- a/packages/css-value-parser/test/value-parser.spec.ts
+++ b/packages/css-value-parser/test/value-parser.spec.ts
@@ -1,648 +1,648 @@
 import {
-  parseCSSValue,
-  stringifyCSSValue,
-  customIdent,
-  dashedIdent,
-  literal,
-  cssWideKeyword,
-  space,
-  invalid,
-  comment,
-  string,
-  integer,
-  number,
-  length,
-  percentage,
-  angle,
-  time,
-  flex,
-  call,
-  unknownUnit,
-  frequency,
-  resolution,
-  color,
-} from "@tokey/css-value-parser";
-import { expect } from "chai";
+    parseCSSValue,
+    stringifyCSSValue,
+    customIdent,
+    dashedIdent,
+    literal,
+    cssWideKeyword,
+    space,
+    invalid,
+    comment,
+    string,
+    integer,
+    number,
+    length,
+    percentage,
+    angle,
+    time,
+    flex,
+    call,
+    unknownUnit,
+    frequency,
+    resolution,
+    color,
+} from '@tokey/css-value-parser';
+import { expect } from 'chai';
 
 describe(`value-parser`, () => {
-  interface TestDef {
-    type: string;
-    desc?: string;
-    source: string;
-    expected: ReturnType<typeof parseCSSValue>;
-  }
-  const test = ({ source, expected }: Pick<TestDef, `source` | `expected`>) => {
-    const ast = parseCSSValue(source);
-    expect(ast, `parse`).to.eql(expected);
-    expect(stringifyCSSValue(ast), `stringify`).to.equal(source);
-  };
-  const createTest = ({ type, source, expected, desc }: TestDef) => {
-    desc = desc ? ` (${desc})` : ``;
-    it(`should parse "${type}" type${desc}`, () => {
-      test({ source, expected });
+    interface TestDef {
+        type: string;
+        desc?: string;
+        source: string;
+        expected: ReturnType<typeof parseCSSValue>;
+    }
+    const test = ({ source, expected }: Pick<TestDef, `source` | `expected`>) => {
+        const ast = parseCSSValue(source);
+        expect(ast, `parse`).to.eql(expected);
+        expect(stringifyCSSValue(ast), `stringify`).to.equal(source);
+    };
+    const createTest = ({ type, source, expected, desc }: TestDef) => {
+        desc = desc ? ` (${desc})` : ``;
+        it(`should parse "${type}" type${desc}`, () => {
+            test({ source, expected });
+        });
+    };
+    describe(`space`, () => {
+        [
+            {
+                type: `space`,
+                source: ` `,
+                expected: [space({ value: ` `, start: 0, end: 1 })],
+            },
+            {
+                type: `space`,
+                desc: `with before&after`,
+                source: `\t   \n`,
+                expected: [
+                    space({
+                        value: ` `,
+                        before: `\t`,
+                        after: `  \n`,
+                        start: 0,
+                        end: 5,
+                    }),
+                ],
+            },
+        ].forEach(createTest);
     });
-  };
-  describe(`space`, () => {
-    [
-      {
-        type: `space`,
-        source: ` `,
-        expected: [space({ value: ` `, start: 0, end: 1 })],
-      },
-      {
-        type: `space`,
-        desc: `with before&after`,
-        source: `\t   \n`,
-        expected: [
-          space({
-            value: ` `,
-            before: `\t`,
-            after: `  \n`,
-            start: 0,
-            end: 5,
-          }),
-        ],
-      },
-    ].forEach(createTest);
-  });
-  describe(`literals`, () => {
-    [
-      {
-        type: `comma`,
-        source: `,`,
-        expected: [literal({ value: `,`, start: 0, end: 1 })],
-      },
-      {
-        type: `slash`,
-        source: `/`,
-        expected: [literal({ value: `/`, start: 0, end: 1 })],
-      },
-      {
-        type: `+`,
-        source: `+`,
-        expected: [literal({ value: `+`, start: 0, end: 1 })],
-      },
-      {
-        type: `-`,
-        source: `-`,
-        expected: [literal({ value: `-`, start: 0, end: 1 })],
-      },
-      {
-        type: `(`,
-        source: `(`,
-        expected: [literal({ value: `(`, start: 0, end: 1 })],
-      },
-    ].forEach(createTest);
-  });
-  describe(`css-wide-keyword`, () => {
-    [
-      {
-        type: `inherit`,
-        source: `inherit`,
-        expected: [cssWideKeyword({ value: `inherit`, start: 0, end: 7 })],
-      },
-      {
-        type: `unset`,
-        source: `unset`,
-        expected: [cssWideKeyword({ value: `unset`, start: 0, end: 5 })],
-      },
-      {
-        type: `initial`,
-        source: `initial`,
-        expected: [cssWideKeyword({ value: `initial`, start: 0, end: 7 })],
-      },
-      {
-        type: `inherit`,
-        desc: `case-insensitive`,
-        source: `iNhErIt`,
-        expected: [cssWideKeyword({ value: `iNhErIt`, start: 0, end: 7 })],
-      },
-      {
-        type: `unset`,
-        desc: `case-insensitive`,
-        source: `uNsEt`,
-        expected: [cssWideKeyword({ value: `uNsEt`, start: 0, end: 5 })],
-      },
-      {
-        type: `initial`,
-        desc: `case-insensitive`,
-        source: `InItIaL`,
-        expected: [cssWideKeyword({ value: `InItIaL`, start: 0, end: 7 })],
-      },
-    ].forEach(createTest);
-  });
-  describe(`ident`, () => {
-    describe(`custom-ident`, () => {
-      [
-        {
-          type: `<custom-ident>`,
-          source: `abc`,
-          expected: [
-            customIdent({
-              value: `abc`,
-              start: 0,
-              end: 3,
-            }),
-          ],
-        },
-        {
-          type: `<custom-ident>`,
-          desc: `with dashes`,
-          source: `-a-b-c-`,
-          expected: [
-            customIdent({
-              value: `-a-b-c-`,
-              start: 0,
-              end: 7,
-            }),
-          ],
-        },
-      ].forEach(createTest);
+    describe(`literals`, () => {
+        [
+            {
+                type: `comma`,
+                source: `,`,
+                expected: [literal({ value: `,`, start: 0, end: 1 })],
+            },
+            {
+                type: `slash`,
+                source: `/`,
+                expected: [literal({ value: `/`, start: 0, end: 1 })],
+            },
+            {
+                type: `+`,
+                source: `+`,
+                expected: [literal({ value: `+`, start: 0, end: 1 })],
+            },
+            {
+                type: `-`,
+                source: `-`,
+                expected: [literal({ value: `-`, start: 0, end: 1 })],
+            },
+            {
+                type: `(`,
+                source: `(`,
+                expected: [literal({ value: `(`, start: 0, end: 1 })],
+            },
+        ].forEach(createTest);
     });
-    describe(`dashed-ident`, () => {
-      [
-        {
-          type: `<dashed-ident>`,
-          source: `--abc`,
-          expected: [
-            dashedIdent({
-              value: `--abc`,
-              start: 0,
-              end: 5,
-            }),
-          ],
-        },
-      ].forEach(createTest);
+    describe(`css-wide-keyword`, () => {
+        [
+            {
+                type: `inherit`,
+                source: `inherit`,
+                expected: [cssWideKeyword({ value: `inherit`, start: 0, end: 7 })],
+            },
+            {
+                type: `unset`,
+                source: `unset`,
+                expected: [cssWideKeyword({ value: `unset`, start: 0, end: 5 })],
+            },
+            {
+                type: `initial`,
+                source: `initial`,
+                expected: [cssWideKeyword({ value: `initial`, start: 0, end: 7 })],
+            },
+            {
+                type: `inherit`,
+                desc: `case-insensitive`,
+                source: `iNhErIt`,
+                expected: [cssWideKeyword({ value: `iNhErIt`, start: 0, end: 7 })],
+            },
+            {
+                type: `unset`,
+                desc: `case-insensitive`,
+                source: `uNsEt`,
+                expected: [cssWideKeyword({ value: `uNsEt`, start: 0, end: 5 })],
+            },
+            {
+                type: `initial`,
+                desc: `case-insensitive`,
+                source: `InItIaL`,
+                expected: [cssWideKeyword({ value: `InItIaL`, start: 0, end: 7 })],
+            },
+        ].forEach(createTest);
     });
-  });
-  describe(`textual`, () => {
-    [
-      {
-        type: `<string>`,
-        desc: `double quotes`,
-        source: `"abc"`,
-        expected: [string({ value: `"abc"`, start: 0, end: 5 })],
-      },
-      {
-        type: `<string>`,
-        desc: `single quotes`,
-        source: `'abc'`,
-        expected: [string({ value: `'abc'`, start: 0, end: 5 })],
-      },
-      {
-        type: `<string>`,
-        desc: `escaped in double quotes`,
-        source: `"ab\\"c'd'"`,
-        expected: [string({ value: `"ab\\"c'd'"`, start: 0, end: 10 })],
-      },
-      {
-        type: `<string>`,
-        desc: `escaped in single quotes`,
-        source: `'ab\\'c"d"'`,
-        expected: [string({ value: `'ab\\'c"d"'`, start: 0, end: 10 })],
-      },
-      {
-        type: `<string>`,
-        desc: `escaped newline`,
-        source: `"abc\\\n"`,
-        expected: [string({ value: `"abc\\\n"`, start: 0, end: 7 })],
-      },
-    ].forEach(createTest);
-  });
-  describe(`functions`, () => {
-    [
-      {
-        type: `call`,
-        source: `custom-call()`,
-        expected: [
-          call({
-            value: `custom-call`,
-            args: [],
-            start: 0,
-            end: 13,
-          }),
-        ],
-      },
-      {
-        type: `call`,
-        desc: `with argument`,
-        source: `custom-call(abc)`,
-        expected: [
-          call({
-            value: `custom-call`,
-            args: [customIdent({ value: `abc`, start: 12, end: 15 })],
-            start: 0,
-            end: 16,
-          }),
-        ],
-      },
-      {
-        type: `call`,
-        desc: `space before & after args`,
-        source: `custom-call(   abc  )`,
-        expected: [
-          call({
-            value: `custom-call`,
-            args: [customIdent({ value: `abc`, start: 15, end: 18 })],
-            before: `   `,
-            after: `  `,
-            start: 0,
-            end: 21,
-          }),
-        ],
-      },
-      {
-        type: `call`,
-        desc: `url`,
-        source: `url()`,
-        expected: [
-          call({
-            value: `url`,
-            args: [],
-            start: 0,
-            end: 5,
-          }),
-        ],
-      },
-      // ToDo: figure out how to provide build-in/custom function parser or maybe just validators
-      // {type: `<url>`, source: `url("http://www.site.com")`, expected: [{type: `<url>`, value: `"http://www.site.com"`}]},
-      // // ToDo: add url/src cases: https://www.w3.org/TR/css-values-4/#urls
-    ].forEach(createTest);
-  });
-  describe(`numeric`, () => {
-    describe(`integer`, () => {
-      [
-        {
-          type: `<integer>`,
-          source: `123`,
-          expected: [integer({ value: `123`, start: 0, end: 3 })],
-        },
-        {
-          /*note: type <zero> is parsed as an integer: https://www.w3.org/TR/css-values-4/#zero-value */
-          type: `<integer>`,
-          desc: `zero`,
-          source: `0`,
-          expected: [integer({ value: `0`, start: 0, end: 1 })],
-        },
-        {
-          type: `<integer>`,
-          desc: `sign +`,
-          source: `+5`,
-          expected: [integer({ value: `+5`, start: 0, end: 2 })],
-        },
-        {
-          type: `<integer>`,
-          desc: `sign -`,
-          source: `-5`,
-          expected: [integer({ value: `-5`, start: 0, end: 2 })],
-        },
-      ].forEach(createTest);
+    describe(`ident`, () => {
+        describe(`custom-ident`, () => {
+            [
+                {
+                    type: `<custom-ident>`,
+                    source: `abc`,
+                    expected: [
+                        customIdent({
+                            value: `abc`,
+                            start: 0,
+                            end: 3,
+                        }),
+                    ],
+                },
+                {
+                    type: `<custom-ident>`,
+                    desc: `with dashes`,
+                    source: `-a-b-c-`,
+                    expected: [
+                        customIdent({
+                            value: `-a-b-c-`,
+                            start: 0,
+                            end: 7,
+                        }),
+                    ],
+                },
+            ].forEach(createTest);
+        });
+        describe(`dashed-ident`, () => {
+            [
+                {
+                    type: `<dashed-ident>`,
+                    source: `--abc`,
+                    expected: [
+                        dashedIdent({
+                            value: `--abc`,
+                            start: 0,
+                            end: 5,
+                        }),
+                    ],
+                },
+            ].forEach(createTest);
+        });
     });
-    describe(`number`, () => {
-      [
-        {
-          type: `<number>`,
-          desc: `fractions`,
-          source: `1.5`,
-          expected: [number({ value: `1.5`, start: 0, end: 3 })],
-        },
-        {
-          type: `<number>`,
-          desc: `start with dot`,
-          source: `.5`,
-          expected: [number({ value: `.5`, start: 0, end: 2 })],
-        },
-        {
-          type: `<number>`,
-          desc: `sign +`,
-          source: `+5.5`,
-          expected: [number({ value: `+5.5`, start: 0, end: 4 })],
-        },
-        {
-          type: `<number>`,
-          desc: `sign -`,
-          source: `-5.5`,
-          expected: [number({ value: `-5.5`, start: 0, end: 4 })],
-        },
-        {
-          type: `<number>`,
-          desc: `exponential`,
-          source: `1.5e55`,
-          expected: [number({ value: `1.5e55`, start: 0, end: 6 })],
-        },
-        {
-          // ToDo: make sure +- exponential works in CSS
-          type: `<number>`,
-          desc: `sign,`,
-          source: `-55.55E-55`,
-          expected: [number({ value: `-55.55E-55`, start: 0, end: 10 })],
-        },
-      ].forEach(createTest);
+    describe(`textual`, () => {
+        [
+            {
+                type: `<string>`,
+                desc: `double quotes`,
+                source: `"abc"`,
+                expected: [string({ value: `"abc"`, start: 0, end: 5 })],
+            },
+            {
+                type: `<string>`,
+                desc: `single quotes`,
+                source: `'abc'`,
+                expected: [string({ value: `'abc'`, start: 0, end: 5 })],
+            },
+            {
+                type: `<string>`,
+                desc: `escaped in double quotes`,
+                source: `"ab\\"c'd'"`,
+                expected: [string({ value: `"ab\\"c'd'"`, start: 0, end: 10 })],
+            },
+            {
+                type: `<string>`,
+                desc: `escaped in single quotes`,
+                source: `'ab\\'c"d"'`,
+                expected: [string({ value: `'ab\\'c"d"'`, start: 0, end: 10 })],
+            },
+            {
+                type: `<string>`,
+                desc: `escaped newline`,
+                source: `"abc\\\n"`,
+                expected: [string({ value: `"abc\\\n"`, start: 0, end: 7 })],
+            },
+        ].forEach(createTest);
     });
-  });
-  describe(`units`, () => {
-    describe(`length`, () => {
-      [
-        ...[
-          `em`,
-          `ex`,
-          `cap`,
-          `ch`,
-          `ic`,
-          `rem`,
-          `lh`,
-          `rlh`,
-          `vw`,
-          `vh`,
-          `vi`,
-          `vb`,
-          `vmin`,
-          `vmax`,
-          `cm`,
-          `mm`,
-          `Q`,
-          `in`,
-          `pt`,
-          `pc`,
-        ].map((unit: any) => ({
-          type: `<length>`,
-          desc: unit + ` integer`,
-          source: `5` + unit,
-          expected: [
-            length({
-              value: `5`,
-              unit,
-              integer: true,
-              start: 0,
-              end: 1 + unit.length,
-            }),
-          ],
-        })),
-      ].forEach(createTest);
+    describe(`functions`, () => {
+        [
+            {
+                type: `call`,
+                source: `custom-call()`,
+                expected: [
+                    call({
+                        value: `custom-call`,
+                        args: [],
+                        start: 0,
+                        end: 13,
+                    }),
+                ],
+            },
+            {
+                type: `call`,
+                desc: `with argument`,
+                source: `custom-call(abc)`,
+                expected: [
+                    call({
+                        value: `custom-call`,
+                        args: [customIdent({ value: `abc`, start: 12, end: 15 })],
+                        start: 0,
+                        end: 16,
+                    }),
+                ],
+            },
+            {
+                type: `call`,
+                desc: `space before & after args`,
+                source: `custom-call(   abc  )`,
+                expected: [
+                    call({
+                        value: `custom-call`,
+                        args: [customIdent({ value: `abc`, start: 15, end: 18 })],
+                        before: `   `,
+                        after: `  `,
+                        start: 0,
+                        end: 21,
+                    }),
+                ],
+            },
+            {
+                type: `call`,
+                desc: `url`,
+                source: `url()`,
+                expected: [
+                    call({
+                        value: `url`,
+                        args: [],
+                        start: 0,
+                        end: 5,
+                    }),
+                ],
+            },
+            // ToDo: figure out how to provide build-in/custom function parser or maybe just validators
+            // {type: `<url>`, source: `url("http://www.site.com")`, expected: [{type: `<url>`, value: `"http://www.site.com"`}]},
+            // // ToDo: add url/src cases: https://www.w3.org/TR/css-values-4/#urls
+        ].forEach(createTest);
     });
-    describe(`percentage`, () => {
-      [
-        {
-          type: `<percentage>`,
-          source: `5%`,
-          expected: [
-            percentage({
-              value: `5`,
-              unit: `%`,
-              integer: true,
-              start: 0,
-              end: 2,
-            }),
-          ],
-        },
-      ].forEach(createTest);
+    describe(`numeric`, () => {
+        describe(`integer`, () => {
+            [
+                {
+                    type: `<integer>`,
+                    source: `123`,
+                    expected: [integer({ value: `123`, start: 0, end: 3 })],
+                },
+                {
+                    /*note: type <zero> is parsed as an integer: https://www.w3.org/TR/css-values-4/#zero-value */
+                    type: `<integer>`,
+                    desc: `zero`,
+                    source: `0`,
+                    expected: [integer({ value: `0`, start: 0, end: 1 })],
+                },
+                {
+                    type: `<integer>`,
+                    desc: `sign +`,
+                    source: `+5`,
+                    expected: [integer({ value: `+5`, start: 0, end: 2 })],
+                },
+                {
+                    type: `<integer>`,
+                    desc: `sign -`,
+                    source: `-5`,
+                    expected: [integer({ value: `-5`, start: 0, end: 2 })],
+                },
+            ].forEach(createTest);
+        });
+        describe(`number`, () => {
+            [
+                {
+                    type: `<number>`,
+                    desc: `fractions`,
+                    source: `1.5`,
+                    expected: [number({ value: `1.5`, start: 0, end: 3 })],
+                },
+                {
+                    type: `<number>`,
+                    desc: `start with dot`,
+                    source: `.5`,
+                    expected: [number({ value: `.5`, start: 0, end: 2 })],
+                },
+                {
+                    type: `<number>`,
+                    desc: `sign +`,
+                    source: `+5.5`,
+                    expected: [number({ value: `+5.5`, start: 0, end: 4 })],
+                },
+                {
+                    type: `<number>`,
+                    desc: `sign -`,
+                    source: `-5.5`,
+                    expected: [number({ value: `-5.5`, start: 0, end: 4 })],
+                },
+                {
+                    type: `<number>`,
+                    desc: `exponential`,
+                    source: `1.5e55`,
+                    expected: [number({ value: `1.5e55`, start: 0, end: 6 })],
+                },
+                {
+                    // ToDo: make sure +- exponential works in CSS
+                    type: `<number>`,
+                    desc: `sign,`,
+                    source: `-55.55E-55`,
+                    expected: [number({ value: `-55.55E-55`, start: 0, end: 10 })],
+                },
+            ].forEach(createTest);
+        });
     });
-    describe(`angle`, () => {
-      [
-        ...[`deg`, `grad`, `rad`, `turn`].map((unit: any) => ({
-          type: `<angle>`,
-          desc: unit,
-          source: `5` + unit,
-          expected: [
-            angle({
-              value: `5`,
-              unit,
-              integer: true,
-              start: 0,
-              end: 1 + unit.length,
-            }),
-          ],
-        })),
-      ].forEach(createTest);
+    describe(`units`, () => {
+        describe(`length`, () => {
+            [
+                ...[
+                    `em`,
+                    `ex`,
+                    `cap`,
+                    `ch`,
+                    `ic`,
+                    `rem`,
+                    `lh`,
+                    `rlh`,
+                    `vw`,
+                    `vh`,
+                    `vi`,
+                    `vb`,
+                    `vmin`,
+                    `vmax`,
+                    `cm`,
+                    `mm`,
+                    `Q`,
+                    `in`,
+                    `pt`,
+                    `pc`,
+                ].map((unit: any) => ({
+                    type: `<length>`,
+                    desc: unit + ` integer`,
+                    source: `5` + unit,
+                    expected: [
+                        length({
+                            value: `5`,
+                            unit,
+                            integer: true,
+                            start: 0,
+                            end: 1 + unit.length,
+                        }),
+                    ],
+                })),
+            ].forEach(createTest);
+        });
+        describe(`percentage`, () => {
+            [
+                {
+                    type: `<percentage>`,
+                    source: `5%`,
+                    expected: [
+                        percentage({
+                            value: `5`,
+                            unit: `%`,
+                            integer: true,
+                            start: 0,
+                            end: 2,
+                        }),
+                    ],
+                },
+            ].forEach(createTest);
+        });
+        describe(`angle`, () => {
+            [
+                ...[`deg`, `grad`, `rad`, `turn`].map((unit: any) => ({
+                    type: `<angle>`,
+                    desc: unit,
+                    source: `5` + unit,
+                    expected: [
+                        angle({
+                            value: `5`,
+                            unit,
+                            integer: true,
+                            start: 0,
+                            end: 1 + unit.length,
+                        }),
+                    ],
+                })),
+            ].forEach(createTest);
+        });
+        describe(`time`, () => {
+            [
+                ...[`s`, `ms`].map((unit: any) => ({
+                    type: `<time>`,
+                    desc: unit,
+                    source: `5` + unit,
+                    expected: [
+                        time({
+                            value: `5`,
+                            unit,
+                            integer: true,
+                            start: 0,
+                            end: 1 + unit.length,
+                        }),
+                    ],
+                })),
+            ].forEach(createTest);
+        });
+        describe(`frequency`, () => {
+            [
+                ...[`Hz`, `KHz`].map((unit: any) => ({
+                    type: `<frequency>`,
+                    desc: unit,
+                    source: `5` + unit,
+                    expected: [
+                        frequency({
+                            value: `5`,
+                            unit,
+                            integer: true,
+                            start: 0,
+                            end: 1 + unit.length,
+                        }),
+                    ],
+                })),
+            ].forEach(createTest);
+        });
+        describe(`resolution`, () => {
+            [
+                ...[`dpi`, `dpcm`, `dppx`].map((unit: any) => ({
+                    type: `<resolution>`,
+                    desc: unit,
+                    source: `5` + unit,
+                    expected: [
+                        resolution({
+                            value: `5`,
+                            unit,
+                            integer: true,
+                            start: 0,
+                            end: 1 + unit.length,
+                        }),
+                    ],
+                })),
+            ].forEach(createTest);
+        });
+        describe(`flex`, () => {
+            [
+                {
+                    type: `<flex>`,
+                    source: `5fr`,
+                    expected: [
+                        flex({
+                            value: `5`,
+                            unit: `fr`,
+                            integer: true,
+                            start: 0,
+                            end: 3,
+                        }),
+                    ],
+                },
+            ].forEach(createTest);
+        });
+        describe(`unknown`, () => {
+            [
+                {
+                    type: `unknown-unit`,
+                    source: `5unknown`,
+                    expected: [
+                        unknownUnit({
+                            value: `5`,
+                            unit: `unknown`,
+                            integer: true,
+                            start: 0,
+                            end: 8,
+                        }),
+                    ],
+                },
+            ].forEach(createTest);
+        });
+        it(`should flag non integer amount`, () => {
+            test({
+                source: `5.5em`,
+                expected: [
+                    length({
+                        value: `5.5`,
+                        unit: `em`,
+                        integer: false,
+                        start: 0,
+                        end: 5,
+                    }),
+                ],
+            });
+        });
     });
-    describe(`time`, () => {
-      [
-        ...[`s`, `ms`].map((unit: any) => ({
-          type: `<time>`,
-          desc: unit,
-          source: `5` + unit,
-          expected: [
-            time({
-              value: `5`,
-              unit,
-              integer: true,
-              start: 0,
-              end: 1 + unit.length,
-            }),
-          ],
-        })),
-      ].forEach(createTest);
+    describe(`color`, () => {
+        describe(`RGB hexadecimal`, () => {
+            [
+                {
+                    type: `<color>`,
+                    desc: `6 digits hex`,
+                    source: `#0F1e3D`,
+                    expected: [color({ value: `#0F1e3D`, start: 0, end: 7 })],
+                },
+                {
+                    type: `<color>`,
+                    desc: `3 digits hex`,
+                    source: `#012`,
+                    expected: [color({ value: `#012`, start: 0, end: 4 })],
+                },
+                {
+                    type: `<color>`,
+                    desc: `4 digits hex`,
+                    source: `#0123`,
+                    expected: [color({ value: `#0123`, start: 0, end: 5 })],
+                },
+                {
+                    type: `<color>`,
+                    desc: `8 digits hex`,
+                    source: `#01234567`,
+                    expected: [color({ value: `#01234567`, start: 0, end: 9 })],
+                },
+            ].forEach(createTest);
+        });
     });
-    describe(`frequency`, () => {
-      [
-        ...[`Hz`, `KHz`].map((unit: any) => ({
-          type: `<frequency>`,
-          desc: unit,
-          source: `5` + unit,
-          expected: [
-            frequency({
-              value: `5`,
-              unit,
-              integer: true,
-              start: 0,
-              end: 1 + unit.length,
-            }),
-          ],
-        })),
-      ].forEach(createTest);
+    describe(`comment`, () => {
+        [
+            {
+                type: `comment`,
+                source: `/*123*/`,
+                expected: [comment({ value: `/*123*/`, start: 0, end: 7 })],
+            },
+            {
+                type: `comment`,
+                desc: `special chars`,
+                source: `/*'"/ +-#,\n\t\r\f()[]{}\\*\\/*/`,
+                expected: [
+                    comment({
+                        value: `/*'"/ +-#,\n\t\r\f()[]{}\\*\\/*/`,
+                        start: 0,
+                        end: 26,
+                    }),
+                ],
+            },
+        ].forEach(createTest);
     });
-    describe(`resolution`, () => {
-      [
-        ...[`dpi`, `dpcm`, `dppx`].map((unit: any) => ({
-          type: `<resolution>`,
-          desc: unit,
-          source: `5` + unit,
-          expected: [
-            resolution({
-              value: `5`,
-              unit,
-              integer: true,
-              start: 0,
-              end: 1 + unit.length,
-            }),
-          ],
-        })),
-      ].forEach(createTest);
+    describe(`invalid`, () => {
+        [
+            {
+                type: `invalid`,
+                desc: `standalone hash`,
+                source: `#`,
+                expected: [invalid({ value: `#`, start: 0, end: 1 })],
+            },
+            {
+                type: `invalid`,
+                desc: `unknown hex length`,
+                source: `#1 #12 #12345 #1234567 #123456789`,
+                expected: [
+                    invalid({ value: `#`, start: 0, end: 1 }),
+                    integer({ value: `1`, start: 1, end: 2 }),
+                    space({ value: ` `, start: 2, end: 3 }),
+                    invalid({ value: `#`, start: 3, end: 4 }),
+                    integer({ value: `12`, start: 4, end: 6 }),
+                    space({ value: ` `, start: 6, end: 7 }),
+                    invalid({ value: `#`, start: 7, end: 8 }),
+                    integer({ value: `12345`, start: 8, end: 13 }),
+                    space({ value: ` `, start: 13, end: 14 }),
+                    invalid({ value: `#`, start: 14, end: 15 }),
+                    integer({ value: `1234567`, start: 15, end: 22 }),
+                    space({ value: ` `, start: 22, end: 23 }),
+                    invalid({ value: `#`, start: 23, end: 24 }),
+                    integer({ value: `123456789`, start: 24, end: 33 }),
+                ],
+            },
+        ].forEach(createTest);
     });
-    describe(`flex`, () => {
-      [
-        {
-          type: `<flex>`,
-          source: `5fr`,
-          expected: [
-            flex({
-              value: `5`,
-              unit: `fr`,
-              integer: true,
-              start: 0,
-              end: 3,
-            }),
-          ],
-        },
-      ].forEach(createTest);
-    });
-    describe(`unknown`, () => {
-      [
-        {
-          type: `unknown-unit`,
-          source: `5unknown`,
-          expected: [
-            unknownUnit({
-              value: `5`,
-              unit: `unknown`,
-              integer: true,
-              start: 0,
-              end: 8,
-            }),
-          ],
-        },
-      ].forEach(createTest);
-    });
-    it(`should flag non integer amount`, () => {
-      test({
-        source: `5.5em`,
-        expected: [
-          length({
-            value: `5.5`,
-            unit: `em`,
-            integer: false,
-            start: 0,
-            end: 5,
-          }),
-        ],
-      });
-    });
-  });
-  describe(`color`, () => {
-    describe(`RGB hexadecimal`, () => {
-      [
-        {
-          type: `<color>`,
-          desc: `6 digits hex`,
-          source: `#0F1e3D`,
-          expected: [color({ value: `#0F1e3D`, start: 0, end: 7 })],
-        },
-        {
-          type: `<color>`,
-          desc: `3 digits hex`,
-          source: `#012`,
-          expected: [color({ value: `#012`, start: 0, end: 4 })],
-        },
-        {
-          type: `<color>`,
-          desc: `4 digits hex`,
-          source: `#0123`,
-          expected: [color({ value: `#0123`, start: 0, end: 5 })],
-        },
-        {
-          type: `<color>`,
-          desc: `8 digits hex`,
-          source: `#01234567`,
-          expected: [color({ value: `#01234567`, start: 0, end: 9 })],
-        },
-      ].forEach(createTest);
-    });
-  });
-  describe(`comment`, () => {
-    [
-      {
-        type: `comment`,
-        source: `/*123*/`,
-        expected: [comment({ value: `/*123*/`, start: 0, end: 7 })],
-      },
-      {
-        type: `comment`,
-        desc: `special chars`,
-        source: `/*'"/ +-#,\n\t\r\f()[]{}\\*\\/*/`,
-        expected: [
-          comment({
-            value: `/*'"/ +-#,\n\t\r\f()[]{}\\*\\/*/`,
-            start: 0,
-            end: 26,
-          }),
-        ],
-      },
-    ].forEach(createTest);
-  });
-  describe(`invalid`, () => {
-    [
-      {
-        type: `invalid`,
-        desc: `standalone hash`,
-        source: `#`,
-        expected: [invalid({ value: `#`, start: 0, end: 1 })],
-      },
-      {
-        type: `invalid`,
-        desc: `unknown hex length`,
-        source: `#1 #12 #12345 #1234567 #123456789`,
-        expected: [
-          invalid({ value: `#`, start: 0, end: 1 }),
-          integer({ value: `1`, start: 1, end: 2 }),
-          space({ value: ` `, start: 2, end: 3 }),
-          invalid({ value: `#`, start: 3, end: 4 }),
-          integer({ value: `12`, start: 4, end: 6 }),
-          space({ value: ` `, start: 6, end: 7 }),
-          invalid({ value: `#`, start: 7, end: 8 }),
-          integer({ value: `12345`, start: 8, end: 13 }),
-          space({ value: ` `, start: 13, end: 14 }),
-          invalid({ value: `#`, start: 14, end: 15 }),
-          integer({ value: `1234567`, start: 15, end: 22 }),
-          space({ value: ` `, start: 22, end: 23 }),
-          invalid({ value: `#`, start: 23, end: 24 }),
-          integer({ value: `123456789`, start: 24, end: 33 }),
-        ],
-      },
-    ].forEach(createTest);
-  });
-  // ToDo: add case insensitive tests
-  /**
+    // ToDo: add case insensitive tests
+    /**
    some components cannot be parsed directly without a syntax context
    - <ratio>: https://www.w3.org/TR/css-values-4/#ratios
    - <image>: https://www.w3.org/TR/css-values-4/#images
    - <position>: https://www.w3.org/TR/css-values-4/#position
    */
-  it(`should parse flat ast nodes`, () => {
-    test({
-      source: `1px 2px,3px`,
-      expected: [
-        length({
-          value: `1`,
-          unit: `px`,
-          integer: true,
-          start: 0,
-          end: 3,
-        }),
-        space({
-          value: ` `,
-          start: 3,
-          end: 4,
-        }),
-        length({
-          value: `2`,
-          unit: `px`,
-          integer: true,
-          start: 4,
-          end: 7,
-        }),
-        literal({
-          value: `,`,
-          start: 7,
-          end: 8,
-        }),
-        length({
-          value: `3`,
-          unit: `px`,
-          integer: true,
-          start: 8,
-          end: 11,
-        }),
-      ],
+    it(`should parse flat ast nodes`, () => {
+        test({
+            source: `1px 2px,3px`,
+            expected: [
+                length({
+                    value: `1`,
+                    unit: `px`,
+                    integer: true,
+                    start: 0,
+                    end: 3,
+                }),
+                space({
+                    value: ` `,
+                    start: 3,
+                    end: 4,
+                }),
+                length({
+                    value: `2`,
+                    unit: `px`,
+                    integer: true,
+                    start: 4,
+                    end: 7,
+                }),
+                literal({
+                    value: `,`,
+                    start: 7,
+                    end: 8,
+                }),
+                length({
+                    value: `3`,
+                    unit: `px`,
+                    integer: true,
+                    start: 8,
+                    end: 11,
+                }),
+            ],
+        });
     });
-  });
 });
diff --git a/packages/experiments/test/tsconfig.json b/packages/experiments/test/tsconfig.json
index e042a3bb..bf308c46 100644
--- a/packages/experiments/test/tsconfig.json
+++ b/packages/experiments/test/tsconfig.json
@@ -4,8 +4,5 @@
     "outDir": "../dist/test",
     "types": ["mocha"]
   },
-  "references": [
-    { "path": "../src" },
-    { "path": "../../test-kit/src" }
-  ]
+  "references": [{ "path": "../src" }, { "path": "../../test-kit/src" }]
 }
diff --git a/packages/imports-parser/test/tsconfig.json b/packages/imports-parser/test/tsconfig.json
index e042a3bb..bf308c46 100644
--- a/packages/imports-parser/test/tsconfig.json
+++ b/packages/imports-parser/test/tsconfig.json
@@ -4,8 +4,5 @@
     "outDir": "../dist/test",
     "types": ["mocha"]
   },
-  "references": [
-    { "path": "../src" },
-    { "path": "../../test-kit/src" }
-  ]
+  "references": [{ "path": "../src" }, { "path": "../../test-kit/src" }]
 }
diff --git a/packages/url-tokenizer/test/tsconfig.json b/packages/url-tokenizer/test/tsconfig.json
index e042a3bb..bf308c46 100644
--- a/packages/url-tokenizer/test/tsconfig.json
+++ b/packages/url-tokenizer/test/tsconfig.json
@@ -4,8 +4,5 @@
     "outDir": "../dist/test",
     "types": ["mocha"]
   },
-  "references": [
-    { "path": "../src" },
-    { "path": "../../test-kit/src" }
-  ]
+  "references": [{ "path": "../src" }, { "path": "../../test-kit/src" }]
 }
diff --git a/tsconfig.json b/tsconfig.json
index 3471a16f..75b6f62a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,6 @@
     { "path": "./packages/url-tokenizer/src" },
     { "path": "./packages/url-tokenizer/test" },
     { "path": "./packages/experiments/src" },
-    { "path": "./packages/experiments/test" },
+    { "path": "./packages/experiments/test" }
   ]
 }

From a8a5f1ce45a90bf9dd356df585e036c0c41f55af Mon Sep 17 00:00:00 2001
From: Barak Igal <baraki@wix.com>
Date: Sun, 2 Jan 2022 13:53:00 +0200
Subject: [PATCH 15/16] update lock

---
 package-lock.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package-lock.json b/package-lock.json
index 89dd82ef..e2c93dbe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2317,6 +2317,7 @@
       }
     },
     "packages/css-value-parser": {
+      "name": "@tokey/css-value-parser",
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {

From 6dccf728c7d4f763a39a5083045fdcf6617f9bed Mon Sep 17 00:00:00 2001
From: Barak Igal <baraki@wix.com>
Date: Sun, 2 Jan 2022 14:54:01 +0200
Subject: [PATCH 16/16] * remove private from css-value-parser * add missing
 reference

---
 demos/client/tsconfig.json             | 6 ++++--
 packages/css-value-parser/package.json | 1 -
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/demos/client/tsconfig.json b/demos/client/tsconfig.json
index 191fef12..121f4682 100644
--- a/demos/client/tsconfig.json
+++ b/demos/client/tsconfig.json
@@ -1,6 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "../dist"
-  }
+    "outDir": "../dist",
+    "noEmit": true
+  },
+  "references": [{ "path": "../../packages/css-value-parser/src" }]
 }
diff --git a/packages/css-value-parser/package.json b/packages/css-value-parser/package.json
index 92b9c5e5..f49f6baf 100644
--- a/packages/css-value-parser/package.json
+++ b/packages/css-value-parser/package.json
@@ -1,6 +1,5 @@
 {
   "name": "@tokey/css-value-parser",
-  "private": true,
   "description": "value parser for css",
   "version": "0.0.1",
   "main": "dist/index.js",