chore: enable trusted package publishing (#349)

Author: MartinCupela

.github/workflows/pr.yml

@@ -8,10 +8,10 @@ jobs:
     name: Test
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 24
       - name: Build
         run: >
           yarn run build:ci

.github/workflows/release.yml

@@ -7,15 +7,19 @@ on:
         default: false
         type: boolean
 
+permissions:
+  id-token: write  # Required for OIDC
+  contents: write
+
 jobs:
   package_release:
     name: Release from "${{ github.ref_name }}" branch
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 24
       - name: Build
         run: >
           yarn run build:ci

.nvmrc

@@ -1 +1 @@
-v16
+v24

package.json

@@ -59,14 +59,13 @@
     "@types/prettier": "^2.6.3",
     "dedent": "^0.7.0",
     "glob": "^8.0.3",
+    "postcss": "^8.5.6",
     "prettier": "^2.7.1",
     "sass": "^1.85.1",
-    "semantic-release": "^18.0.1",
+    "semantic-release": "^25.0.2",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-sass-guidelines": "^8.0.0",
-    "tree-sitter": "^0.20.0",
-    "tree-sitter-css": "^0.19.0",
     "ts-node": "^10.8.2",
     "typescript": "^4.7.4"
   },

scripts/parser.ts

@@ -2,9 +2,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import glob from 'glob';
 import * as sass from 'sass';
-import Parser, { SyntaxNode } from 'tree-sitter';
-// @ts-ignore
-import CSS from 'tree-sitter-css';
+import postcss, { Root, Rule, Declaration, Comment, Container } from 'postcss';
 
 type SDK = 'Angular' | 'React';
 
@@ -15,11 +13,9 @@ export type ComponentInfo = {
 };
 
 export const extractComponents = (fromGlob: string) => {
-  const parser = new Parser();
-  parser.setLanguage(CSS);
-
   const componentInfos: ComponentInfo[] = [];
   const files = glob.sync(fromGlob);
+
   files.forEach((file) => {
     const [, componentName] = file.split(/.*\/(.*)-(theme|layout|variables)\.scss$/);
     // sass fails to resolve the `../utils` file for some reason, therefore
@@ -33,25 +29,27 @@ export const extractComponents = (fromGlob: string) => {
       loadPaths: [path.resolve('./src/v2/styles')],
     });
 
+    const css = compilation.css;
+    const root: Root = postcss.parse(css);
+
     let sdkRestriction: SDK | undefined = undefined;
     let variableType: 'layout' | 'theme' | undefined = undefined;
-    const ast = parser.parse(compilation.css);
-    ast.rootNode.descendantsOfType('rule_set').forEach((ruleSet) => {
-      const ruleSetComment = extractComment(ruleSet);
+
+    root.walkRules((rule: Rule) => {
+      const ruleSetComment = extractLeadingComment(rule);
       if (ruleSetComment) {
         const matches = ruleSetComment.match(/Angular|React/g);
         if (matches) {
           sdkRestriction = matches[0] as SDK;
         }
       }
-      for (let i = 0; i < ruleSet.descendantsOfType('declaration').length; i++) {
-        const node = ruleSet.descendantsOfType('declaration')[i];
-        const identifier = node.text;
-        if (identifier.startsWith('--str-chat')) {
+
+      rule.walkDecls((decl: Declaration) => {
+        // custom property name is in decl.prop
+        if (decl.prop.startsWith('--str-chat')) {
           variableType = file.includes('theme') ? 'theme' : 'layout';
-          break;
         }
-      }
+      });
     });
 
     if (variableType) {
@@ -73,14 +71,19 @@ export const extractComponents = (fromGlob: string) => {
   return componentInfos;
 };
 
-const extractComment = (node: SyntaxNode) => {
-  if (node.previousSibling?.type === 'comment') {
-    const match = node.previousSibling.text.match(/\*\s*(.+?)\*\//)!;
-    if (match) {
-      const [, comment] = match;
-      return comment.trim();
-    }
-  } else {
-    return undefined;
+const extractLeadingComment = (rule: Rule): string | undefined => {
+  const parent = rule.parent as Container | undefined;
+  if (!parent || !('nodes' in parent) || !parent.nodes) return;
+
+  const idx = parent.nodes.indexOf(rule);
+  if (idx <= 0) return;
+
+  const prev = parent.nodes[idx - 1];
+  if (prev.type === 'comment') {
+    // PostCSS comment text is everything inside /* ... */
+    const comment = (prev as Comment).text;
+    return comment.trim();
   }
+
+  return undefined;
 };