@wix/zero-config-implementation 1.16.0 → 1.18.0

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

@@ -0,0 +1,9 @@
+export declare function isGlobalSemanticClass(className: string): boolean;
+/**
+ * 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 findPreferredSemanticClass(classNames: string[]): string | undefined;

package/package.json

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

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

@@ -16,6 +16,7 @@ import type {
   ElementItem,
 } from '../schema'
 import { ELEMENTS } from '../schema'
+import { findPreferredSemanticClass } from '../utils/css-class'
 import { buildDataItem } from './data-item-builder'
 import { formatDisplayName } from './utils'
 
@@ -44,7 +45,8 @@ function buildEditorElement(component: ComponentInfoWithCss): EditorElement {
 
 function buildSelector(rootElement?: ExtractedElement): string {
   if (rootElement?.attributes.class) {
-    return `.${rootElement.attributes.class.split(' ')[0]}`
+    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,6 +8,7 @@
 import { pascalCase } from 'case-anything'
 import { type DefaultTreeAdapterMap, parseFragment } from 'parse5'
 import { TRACE_ATTR } from '../../../../component-renderer'
+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'
@@ -169,6 +170,12 @@ function getElementNamePart(element: Element, getElementById: (id: string) => El
     }
   }
 
+  const classAttr = getAttribute(element, 'class')
+  if (classAttr) {
+    const semanticClass = findPreferredSemanticClass(classAttr.split(' '))
+    if (semanticClass) return pascalCase(semanticClass)
+  }
+
   return normalizeTagName(element.tagName)
 }
 

package/src/utils/css-class.ts

@@ -0,0 +1,48 @@
+/**
+ * A lowercase kebab-case word: starts with a letter, followed by lowercase
+ * letters, digits, or hyphens. e.g. `menu`, `item-label`, `foo2`
+ */
+const KEBAB_WORD = '[a-z][a-z0-9-]*'
+
+/**
+ * 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 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]
+}