feat(parser): new style parser (#681)

Co-authored-by: Copilot <[email protected]>

Author: tenphi

.changeset/olive-ants-remember.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+A brand new style parser that supports all kinds of css syntax and nested custom tasty syntax.

.cursor/rules/parser.mdc

@@ -0,0 +1,8 @@
+---
+description: If the task requires information about how styles are parsed in `tasty`.
+globs: 
+alwaysApply: false
+---
+The specification of the style parser is described in [parser.md](mdc:src/parser/parser.md)
+This part of the styles handling only covers the parsing of string values. Though, boolean and number styles can be converted to string.
+Style-2-state mapping and responsive values are handled separately in [styles.ts](mdc:src/tasty/utils/styles.ts) and [responsive.ts](mdc:src/tasty/utils/responsive.ts)

.github/workflows/codeql-analysis.yml

@@ -38,11 +38,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v3

.github/workflows/main.yml

@@ -21,15 +21,15 @@ jobs:
     outputs:
       published: ${{ steps.changesets.outputs.published }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.2
+          version: 10.14.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
@@ -59,16 +59,16 @@ jobs:
       NODE_OPTIONS: --max-old-space-size=4096
       CHROMATIC_RETRIES: 5
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.2
+          version: 10.14.0
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Download storybook cache
         with:
           path: |
@@ -77,7 +77,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-storybook
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'

.github/workflows/pull-request.yml

@@ -25,14 +25,14 @@ jobs:
       name: Canary package in NPM
       url: https://www.npmjs.com/package/@cube-dev/ui-kit/v/${{ steps.publish.outputs.version }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.2
+          version: 10.14.0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
@@ -79,21 +79,21 @@ jobs:
     name: 'Tests & lint'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.2
+          version: 10.14.0
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Download eslint cache
         with:
           path: |
             **/.eslintcache
           key: ${{ runner.os }}-eslint
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
@@ -105,7 +105,7 @@ jobs:
         run: pnpm lint
 
       - name: Run the tests
-        run: pnpm test -- --no-cache
+        run: pnpm test:no-cache
 
   deploy-chromatic:
     name: 'Prepare Storybook for review & tests'
@@ -117,16 +117,16 @@ jobs:
       CHROMATIC_RETRIES: 5
       LOG_LEVEL: 'error'
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.2
+          version: 10.14.0
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Download storybook cache
         with:
           path: |
@@ -135,7 +135,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-storybook
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'

.github/workflows/size-limit.yml

@@ -23,14 +23,14 @@ jobs:
       REPORT_FOLDER: './size-limit-report'
       NODE_OPTIONS: --max-old-space-size=4096
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.2
+          version: 10.14.0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'

.nvmrc

@@ -1 +1 @@
-18.19.1
+20.19.2

.size-limit.cjs

@@ -20,20 +20,20 @@ module.exports = [
         }),
       );
     },
-    limit: '281kB',
+    limit: '282kB',
   },
   {
     name: 'Tree shaking (just a Button)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ Button }',
-    limit: '23 kB',
+    limit: '24 kB',
   },
   {
     name: 'Tree shaking (just an Icon)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ AiIcon }',
-    limit: '12 kB',
+    limit: '13 kB',
   },
 ];

package.json

@@ -10,7 +10,7 @@
   "module": "dist/es/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "packageManager": "pnpm@9.12.2",
+  "packageManager": "pnpm@10.14.0",
   "exports": {
     ".": {
       "import": "./dist/es/index.js",
@@ -28,6 +28,7 @@
     "build:esm": "tsc -p tsconfig.es.json",
     "watch": "pnpm build:esm --watch",
     "test": "jest",
+    "test:no-cache": "jest --no-cache",
     "test-cover": "jest --coverage",
     "test-watch": "jest --watch",
     "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
@@ -102,6 +103,7 @@
   },
   "devDependencies": {
     "@actions/core": "^1.11.1",
+    "@eslint/js": "^9.25.1",
     "@actions/exec": "^1.1.1",
     "@actions/github": "^6.0.0",
     "@changesets/changelog-github": "^0.4.4",
@@ -182,7 +184,7 @@
   ],
   "license": "MIT",
   "engines": {
-    "node": ">=18.19.1",
-    "pnpm": "^9.0.0"
+    "node": ">=20.19.2",
+    "pnpm": "^10.0.0"
   }
 }