@wix/zero-config-implementation 1.17.0 → 1.19.0

package/dist/utils/css-class.d.ts

@@ -1,5 +1,9 @@
+export declare function isGlobalSemanticClass(className: string): boolean;
 /**
- * Returns true if the class name looks like a global semantic class —
- * i.e. not a CSS Module hash-suffixed class.
+ * Picks the best semantic class from a list of class names.
+ * Prefers a class without a BEM modifier (e.g. `card__header`) over one with
+ * a modifier (e.g. `card__header--active`), since the base class is more
+ * stable as a selector or element name. Falls back to the first semantic class
+ * found if all candidates have modifiers.
  */
-export declare function isGlobalSemanticClass(className: string): boolean;
+export declare function findPreferredSemanticClass(classNames: string[]): string | undefined;

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.17.0",
+  "version": "1.19.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -75,5 +75,5 @@
       ]
     }
   },
-  "falconPackageHash": "453ef72fecd4eac2958f740eea8a7764343b089244f2a0afdd2b9d15"
+  "falconPackageHash": "c023fc2f7c36ad9d9d7f5d3e24b22d292e138350cb6a48ae6964e8a0"
 }

package/src/converters/to-editor-component.ts

@@ -16,7 +16,7 @@ import type {
   ElementItem,
 } from '../schema'
 import { ELEMENTS } from '../schema'
-import { isGlobalSemanticClass } from '../utils/css-class'
+import { findPreferredSemanticClass } from '../utils/css-class'
 import { buildDataItem } from './data-item-builder'
 import { formatDisplayName } from './utils'
 
@@ -45,7 +45,7 @@ function buildEditorElement(component: ComponentInfoWithCss): EditorElement {
 
 function buildSelector(rootElement?: ExtractedElement): string {
   if (rootElement?.attributes.class) {
-    const semanticClass = rootElement.attributes.class.split(' ').find(isGlobalSemanticClass)
+    const semanticClass = findPreferredSemanticClass(rootElement.attributes.class.split(' '))
     if (semanticClass) return `.${semanticClass}`
   }
   return rootElement?.tag ?? ''

package/src/information-extractors/react/extractors/core/tree-builder.ts

@@ -8,7 +8,7 @@
 import { pascalCase } from 'case-anything'
 import { type DefaultTreeAdapterMap, parseFragment } from 'parse5'
 import { TRACE_ATTR } from '../../../../component-renderer'
-import { isGlobalSemanticClass } from '../../../../utils/css-class'
+import { findPreferredSemanticClass } from '../../../../utils/css-class'
 import { PRESETS_WRAPPER_CLASS_NAME } from '../../utils/mock-generator'
 import type { CssPropertiesData } from '../css-properties'
 import { addTextProperties } from '../css-properties'
@@ -172,7 +172,7 @@ function getElementNamePart(element: Element, getElementById: (id: string) => El
 
   const classAttr = getAttribute(element, 'class')
   if (classAttr) {
-    const semanticClass = classAttr.split(' ').find(isGlobalSemanticClass)
+    const semanticClass = findPreferredSemanticClass(classAttr.split(' '))
     if (semanticClass) return pascalCase(semanticClass)
   }
 

package/src/information-extractors/ts/css-imports.ts

@@ -1,26 +1,44 @@
 import * as path from 'node:path'
 import ts, { type Program } from 'typescript'
 
+const MAX_DEPTH = 100
+
 export function extractCssImports(program: Program): string[] {
   const cssFiles = new Set<string>()
+  const visited = new Set<string>()
 
-  for (const sourceFile of program.getSourceFiles()) {
-    // Skip external libraries
-    if (sourceFile.isDeclarationFile || sourceFile.fileName.includes('node_modules')) continue
+  function walk(sourceFile: ts.SourceFile, depth: number): void {
+    if (depth > MAX_DEPTH) return
+    if (visited.has(sourceFile.fileName)) return
+    visited.add(sourceFile.fileName)
 
     ts.forEachChild(sourceFile, (node) => {
-      // Look for: import './style.css' or import x from './style.css'
-      if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier)) {
-        const importPath = node.moduleSpecifier.text
-
-        if (importPath.endsWith('.css')) {
-          // Resolve relative path to an absolute disk path
-          const fullPath = path.resolve(path.dirname(sourceFile.fileName), importPath)
-          cssFiles.add(fullPath)
-        }
+      if (!ts.isImportDeclaration(node) || !ts.isStringLiteral(node.moduleSpecifier)) return
+      const importPath = node.moduleSpecifier.text
+
+      if (importPath.endsWith('.css')) {
+        const fullPath = path.resolve(path.dirname(sourceFile.fileName), importPath)
+        cssFiles.add(fullPath)
+        return
       }
+
+      // Resolve the module to a source file in the program
+      const resolved = ts.resolveModuleName(importPath, sourceFile.fileName, program.getCompilerOptions(), ts.sys)
+      const resolvedFileName = resolved.resolvedModule?.resolvedFileName
+      if (!resolvedFileName) return
+
+      const resolvedSource = program.getSourceFile(resolvedFileName)
+      // Skip declaration files (.d.ts and @types packages)
+      if (!resolvedSource || resolvedSource.isDeclarationFile) return
+      walk(resolvedSource, depth + 1)
     })
   }
 
+  for (const sourceFile of program.getSourceFiles()) {
+    // Only start walks from project source files (skip .d.ts and node_modules)
+    if (sourceFile.isDeclarationFile || sourceFile.fileName.includes('node_modules')) continue
+    walk(sourceFile, 0)
+  }
+
   return Array.from(cssFiles)
 }

package/src/utils/css-class.ts

@@ -1,14 +1,48 @@
 /**
- * Matches CSS Module hash suffixes: one or more underscores followed by a
- * segment containing at least one digit (e.g. `_x7k9p2`, `__3xKqP`).
- * BEM modifiers like `--primary` or `--active` contain no digits and won't match.
+ * A lowercase kebab-case word: starts with a letter, followed by lowercase
+ * letters, digits, or hyphens. e.g. `menu`, `item-label`, `foo2`
  */
-const CSS_MODULE_HASH_PATTERN = /_+\w*\d\w*$/
+const KEBAB_WORD = '[a-z][a-z0-9-]*'
 
 /**
- * Returns true if the class name looks like a global semantic class —
- * i.e. not a CSS Module hash-suffixed class.
+ * An optional BEM element suffix: `__` followed by a kebab word.
+ * e.g. `__item-label` in `menu__item-label`
  */
+const OPTIONAL_BEM_ELEMENT = `(__${KEBAB_WORD})?`
+
+/**
+ * A single BEM modifier suffix: `--` followed by a kebab word.
+ * e.g. `--primary` in `button--primary`
+ */
+const BEM_MODIFIER = `--${KEBAB_WORD}`
+
+/**
+ * A semantic CSS class name following BEM conventions: a kebab-case block,
+ * optionally followed by a `__element` and/or one or more `--modifier` parts.
+ * All parts must be lowercase — this rejects CSS Module hash suffixes which
+ * contain uppercase letters (e.g. `root__SvhJ-`) or leading underscores
+ * (e.g. `_root_x7k9p2`).
+ */
+const SEMANTIC_CLASS_PATTERN = new RegExp(`^${KEBAB_WORD}${OPTIONAL_BEM_ELEMENT}(${BEM_MODIFIER})*$`)
+
+/**
+ * Matches a class that has at least one BEM modifier (`--`).
+ * Used to deprioritize modifier classes in favour of the base class.
+ */
+const HAS_BEM_MODIFIER = new RegExp(BEM_MODIFIER)
+
 export function isGlobalSemanticClass(className: string): boolean {
-  return !CSS_MODULE_HASH_PATTERN.test(className)
+  return SEMANTIC_CLASS_PATTERN.test(className)
+}
+
+/**
+ * Picks the best semantic class from a list of class names.
+ * Prefers a class without a BEM modifier (e.g. `card__header`) over one with
+ * a modifier (e.g. `card__header--active`), since the base class is more
+ * stable as a selector or element name. Falls back to the first semantic class
+ * found if all candidates have modifiers.
+ */
+export function findPreferredSemanticClass(classNames: string[]): string | undefined {
+  const semanticClasses = classNames.filter(isGlobalSemanticClass)
+  return semanticClasses.find((className) => !HAS_BEM_MODIFIER.test(className)) ?? semanticClasses[0]
 }