@wix/zero-config-implementation 1.15.0 → 1.17.0

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

@@ -0,0 +1,5 @@
+/**
+ * Returns true if the class name looks like a global semantic class —
+ * i.e. not a CSS Module hash-suffixed class.
+ */
+export declare function isGlobalSemanticClass(className: string): boolean;

package/package.json

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

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

@@ -16,6 +16,7 @@ import type {
   ElementItem,
 } from '../schema'
 import { ELEMENTS } from '../schema'
+import { isGlobalSemanticClass } 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 = rootElement.attributes.class.split(' ').find(isGlobalSemanticClass)
+    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 { isGlobalSemanticClass } 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 = classAttr.split(' ').find(isGlobalSemanticClass)
+    if (semanticClass) return pascalCase(semanticClass)
+  }
+
   return normalizeTagName(element.tagName)
 }
 

package/src/utils/css-class.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+const CSS_MODULE_HASH_PATTERN = /_+\w*\d\w*$/
+
+/**
+ * Returns true if the class name looks like a global semantic class —
+ * i.e. not a CSS Module hash-suffixed class.
+ */
+export function isGlobalSemanticClass(className: string): boolean {
+  return !CSS_MODULE_HASH_PATTERN.test(className)
+}