@wix/zero-config-implementation 1.91.0 → 1.92.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.91.0",
+  "version": "1.92.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "7232f116f870e20fe94caa49ba503a0a945ec4eed14c9f9b55544590"
+  "falconPackageHash": "db2c3fec617a486d30e2d52ed7e239747365a40d14666a5ea04cf07d"
 }

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

@@ -166,6 +166,71 @@ describe('toEditorReactComponent display conversion', () => {
   })
 })
 
+describe('toEditorReactComponent selector conversion', () => {
+  it.each([
+    ['a', 'a___'],
+    ['div', 'div_'],
+    ['span', 'span'],
+  ])('pads the root selector %j to at least four characters', (tag, expectedSelector) => {
+    const rootElement = createElementWithDisplayMatcher(tag, matcherDataFromCss(''))
+
+    const editorElement = toEditorReactComponent(createComponent(rootElement)).editorElement
+
+    expect(editorElement?.selector).toBe(expectedSelector)
+  })
+
+  it('pads a short semantic class selector', () => {
+    const rootElement = createSemanticElement({
+      traceId: 'trace-root',
+      name: 'root',
+      className: 'a',
+    })
+
+    const editorElement = toEditorReactComponent(createComponent(rootElement)).editorElement
+
+    expect(editorElement?.selector).toBe('.a__')
+  })
+
+  it('pads short inline and ref element selectors', () => {
+    const inlineElement: ExtractedElement = {
+      traceId: 'trace-link',
+      name: 'link',
+      tag: 'a',
+      attributes: {},
+      extractorData: new Map<string, unknown>(),
+      children: [],
+    }
+    const refElement: ExtractedElement = {
+      traceId: 'trace-action-button',
+      name: 'actionButton',
+      tag: 'div',
+      attributes: {},
+      extractorData: new Map<string, unknown>([
+        [
+          'ref-element',
+          {
+            elementPropsPath: 'actionButton',
+            refComponentType: 'test.Button',
+            selector: '.a',
+          },
+        ],
+      ]),
+      children: [],
+    }
+    const rootElement = createSemanticElement({
+      traceId: 'trace-root',
+      name: 'root',
+      className: 'root',
+      children: [inlineElement, refElement],
+    })
+
+    const elements = toEditorReactComponent(createComponent(rootElement)).editorElement?.elements
+
+    expect(elements?.link?.inlineElement?.selector).toBe('a___')
+    expect(elements?.actionButton?.refElement?.selector).toBe('.a__')
+  })
+})
+
 function cssInfoFromStylesheet(cssString: string): ExtractedCssInfo {
   const api = parseCss(cssString)
   const properties = new Map<string, string>()

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

@@ -34,6 +34,8 @@ import type { StateClassTrigger } from './state-class-trigger'
 import { buildStatesBlock } from './states-builder'
 import { formatDisplayName } from './utils'
 
+const MINIMUM_SELECTOR_LENGTH = 4
+
 /**
  * Merges native and custom state blocks. Native states take precedence on any
  * key collision (e.g. an author wrapping `isDisabled` in `ElementState<>` does not
@@ -140,9 +142,13 @@ function getSemanticBlockName(element: ExtractedElement | undefined): string | u
 function buildSelector(rootElement?: ExtractedElement): string {
   if (rootElement?.attributes.class) {
     const semanticClass = findPreferredSemanticClass(normalizeClassNames(rootElement.attributes.class))
-    if (semanticClass) return `.${semanticClass}`
+    if (semanticClass) return padSelector(`.${semanticClass}`)
   }
-  return rootElement?.tag ?? ''
+  return padSelector(rootElement?.tag ?? '')
+}
+
+function padSelector(selector: string): string {
+  return selector.padEnd(MINIMUM_SELECTOR_LENGTH, '_')
 }
 
 function buildInnerElementDisplayName(element: ExtractedElement, ancestorSemanticClasses: string[]): string {
@@ -206,7 +212,7 @@ function buildElements(
       result[buildRefElementManifestKey(refElementMatch.elementPropsPath, parentElementPropsPath)] = {
         elementType: ELEMENTS.ELEMENT_TYPE.refElement,
         refElement: {
-          selector: refElementMatch.selector,
+          selector: padSelector(refElementMatch.selector),
           type: refElementMatch.refComponentType,
         },
       }