dazl-dev · barak007 · Jan 2, 2022 · Aug 29, 2021 · Aug 31, 2021 · Sep 19, 2021
diff --git a/demos/client/css-value-syntax-parser.ts b/demos/client/css-value-syntax-parser.ts
@@ -0,0 +1,32 @@
+import { initPreview } from './view';
+import { parseValueSyntax } from '@tokey/css-value-parser';
+// import { valueDefinitions } from '../../packages/css-value-parser/src/value-definitions';
+
+const valueDefinitions = { props: {} as Record<string, { syntax: string }> };
+
+const topBar = document.getElementById('top-bar') as HTMLElement;
+const input = document.getElementById('input') as HTMLTextAreaElement;
+const output = document.getElementById('output') as HTMLElement;
+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: string) {
+    input.value = value;
+    document.dispatchEvent(new CustomEvent('playground:updateOutput'));
+}
+setValue(select.value);
diff --git 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/demos/css-value-syntax-parser.html b/demos/css-value-syntax-parser.html
@@ -0,0 +1,26 @@
+<!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",
+          "@tokey/css-value-parser": "/packages/css-value-parser/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="./client/css-value-syntax-parser.ts"></script>
+  </body>
+</html>
diff --git 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-lock.json b/package-lock.json
diff --git a/packages/core/src/helpers.ts b/packages/core/src/helpers.ts
@@ -168,6 +168,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/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-selector-parser/src/helpers.ts b/packages/css-selector-parser/src/helpers.ts
@@ -97,19 +97,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
@@ -374,8 +374,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;
@@ -384,7 +384,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();

diff --git a/packages/css-value-parser/package.json b/packages/css-value-parser/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@tokey/css-value-parser",
+  "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"
+  },
+  "devDependencies": {
+    "@webref/css": "^2.0.12"
+  },
+  "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",
+  "sideEffects": false
+}