@wix/site-service-interactions 1.0.13 → 1.0.14

package/src/implementations/coreInteractions.ts

@@ -19,117 +19,117 @@ import { getV2ConfigStyleHeadContent } from './v2/configStyleHeadContent'
 import { getV2ModulePreloadHeadContent } from './v2/interactionsScriptContent'
 import { getAuthoredStylesCss } from './v2/authoredStyles'
 import {
-    getInteractConfigEntries,
-    getInteractiveKeys,
-    getResolvedConfigEntries,
-    resolveInteractKeyConflicts,
+	getInteractConfigEntries,
+	getInteractiveKeys,
+	getResolvedConfigEntries,
+	resolveInteractKeyConflicts,
 } from './configEntries'
 
 /** An entry without interactions contributes CSS only; nothing has to load Interact for it. */
 const getRuntimeConfigs = (entries: InteractConfigEntry[]): InteractConfig[] =>
-    entries.map(({ interact }) => interact).filter(({ interactions }) => interactions.length > 0)
+	entries.map(({ interact }) => interact).filter(({ interactions }) => interactions.length > 0)
 
 const initInteract = (entries: InteractConfigEntry[], isReducedMotion: boolean) => {
-    // Bundled runtime is v1. v2 on the client is the CDN loader.
-    Interact.forceReducedMotion = isReducedMotion
-    Interact.setup({
-        scrollOptionsGetter: () => globalThis.document.getElementById('site-root'),
-        allowA11yTriggers: true,
-        viewEnter: {
-            useSafeViewEnter: true,
-        },
-    })
-    for (const { interact } of entries) {
-        Interact.create(interact as InteractV1Config)
-    }
+	// Bundled runtime is v1. v2 on the client is the CDN loader.
+	Interact.forceReducedMotion = isReducedMotion
+	Interact.setup({
+		scrollOptionsGetter: () => globalThis.document.getElementById('site-root'),
+		allowA11yTriggers: true,
+		viewEnter: {
+			useSafeViewEnter: true,
+		},
+	})
+	for (const { interact } of entries) {
+		Interact.create(interact as InteractV1Config)
+	}
 }
 
 const getV2HeadContent = (entries: InteractConfigEntry[]): string => {
-    const generatedCss = entries
-        .map(({ interact }) => getV2ConfigCss(interact).trim())
-        .filter(Boolean)
-        .join('\n')
-    const css = [getAuthoredStylesCss(entries).trim(), generatedCss].filter(Boolean).join('\n')
+	const generatedCss = entries
+		.map(({ interact }) => getV2ConfigCss(interact).trim())
+		.filter(Boolean)
+		.join('\n')
+	const css = [getAuthoredStylesCss(entries).trim(), generatedCss].filter(Boolean).join('\n')
 
-    return (
-        (getRuntimeConfigs(entries).length ? getV2ModulePreloadHeadContent() : '') +
-        (css ? getV2ConfigStyleHeadContent(css) : '')
-    )
+	return (
+		(getRuntimeConfigs(entries).length ? getV2ModulePreloadHeadContent() : '') +
+		(css ? getV2ConfigStyleHeadContent(css) : '')
+	)
 }
 
 const initRuntime = (
-    entries: InteractConfigEntry[],
-    isReducedMotion: boolean,
-    getService: ServicesManager['getService'],
-    useV2: boolean
+	entries: InteractConfigEntry[],
+	isReducedMotion: boolean,
+	getService: ServicesManager['getService'],
+	useV2: boolean
 ) => {
-    const runtimeConfigs = getRuntimeConfigs(entries)
-    if (!runtimeConfigs.length) {
-        return
-    }
+	const runtimeConfigs = getRuntimeConfigs(entries)
+	if (!runtimeConfigs.length) {
+		return
+	}
 
-    const pageId = getService(PagesDefinition).currentPageId()
-    if (!pageId) {
-        return
-    }
+	const pageId = getService(PagesDefinition).currentPageId()
+	if (!pageId) {
+		return
+	}
 
-    const { addTopComponent } = getService(ProvideComponentServiceDefinition)
+	const { addTopComponent } = getService(ProvideComponentServiceDefinition)
 
-    if (!useV2) {
-        // v1 serializes a single config and has no path for authored-style CSS, so anything beyond
-        // that would be silently dropped.
-        if (entries.length > 1 || entries.some(({ styles }) => styles?.length)) {
-            throw new Error('Multiple interactions config entries and authored styles require Interact v2.')
-        }
-        addTopComponent(createInteractionsScriptElement(runtimeConfigs[0], isReducedMotion, pageId))
-        return
-    }
+	if (!useV2) {
+		// v1 serializes a single config and has no path for authored-style CSS, so anything beyond
+		// that would be silently dropped.
+		if (entries.length > 1 || entries.some(({ styles }) => styles?.length)) {
+			throw new Error('Multiple interactions config entries and authored styles require Interact v2.')
+		}
+		addTopComponent(createInteractionsScriptElement(runtimeConfigs[0], isReducedMotion, pageId))
+		return
+	}
 
-    addTopComponent(createV2InteractionsScriptElement(runtimeConfigs, isReducedMotion, pageId))
+	addTopComponent(createV2InteractionsScriptElement(runtimeConfigs, isReducedMotion, pageId))
 }
 
 const getInteractiveComps = (entries: InteractConfigEntry[]): Set<string> => {
-    const keys = new Set<string>()
-    for (const entry of entries) {
-        getInteractiveKeys(entry).forEach(key => keys.add(key))
-    }
-    return keys
+	const keys = new Set<string>()
+	for (const entry of entries) {
+		getInteractiveKeys(entry).forEach((key) => keys.add(key))
+	}
+	return keys
 }
 
 export const coreInteractions = (config: IInteractionsServiceConfig, getService: ServicesManager['getService']) => {
-    const { reducedMotion: isReducedMotion } = getService(DeviceInfoDefinition)
-    const { isOpen } = getService(ExperimentsDefinition)
-    const useV2 = isOpen('specs.thunderbolt.vsm_interactions_v2')
-    // The v1 runtime has no preset registration and doesn't understand LEGACY_* names; skip
-    // aliasing on those paths so named reaction effects remain resolvable.
-    const entries = resolveInteractKeyConflicts((useV2 ? getResolvedConfigEntries : getInteractConfigEntries)(config))
+	const { reducedMotion: isReducedMotion } = getService(DeviceInfoDefinition)
+	const { isOpen } = getService(ExperimentsDefinition)
+	const useV2 = isOpen('specs.thunderbolt.vsm_interactions_v2')
+	// The v1 runtime has no preset registration and doesn't understand LEGACY_* names; skip
+	// aliasing on those paths so named reaction effects remain resolvable.
+	const entries = resolveInteractKeyConflicts((useV2 ? getResolvedConfigEntries : getInteractConfigEntries)(config))
 
-    if (useV2) {
-        // Both belong in the head: the preload links only help while the document is still parsing,
-        // and the generated CSS hides elements before their entrance effect, so it has to apply
-        // before the body renders.
-        if (!process.env.browser) {
-            const headContent = getV2HeadContent(entries)
-            // GENERAL rather than setHead's AFTER_SECURITY default: thunderbolt only reads the
-            // after-security bucket on its SEO path, so the default drops this on every normal
-            // request. GENERAL reaches the document as raw markup before `</head>`.
-            if (headContent) {
-                getService(HeadAppenderDefinition).setHead(headContent, HeadContentType.GENERAL)
-            }
-        }
+	if (useV2) {
+		// Both belong in the head: the preload links only help while the document is still parsing,
+		// and the generated CSS hides elements before their entrance effect, so it has to apply
+		// before the body renders.
+		if (!process.env.browser) {
+			const headContent = getV2HeadContent(entries)
+			// GENERAL rather than setHead's AFTER_SECURITY default: thunderbolt only reads the
+			// after-security bucket on its SEO path, so the default drops this on every normal
+			// request. GENERAL reaches the document as raw markup before `</head>`.
+			if (headContent) {
+				getService(HeadAppenderDefinition).setHead(headContent, HeadContentType.GENERAL)
+			}
+		}
 
-        initRuntime(entries, isReducedMotion, getService, true)
-    } else if (isOpen('specs.thunderbolt.interactionsInSsr')) {
-        // Emits the config and loader scripts. Works in both environments: SSR serves markup the
-        // parser executes, and on the client the loader's ref revives it into a script that runs —
-        // which is what pages rendered only on the client (password-protected / members-only,
-        // client-side navigation) need, since they never get a server-rendered document.
-        initRuntime(entries, isReducedMotion, getService, false)
-    } else {
-        initInteract(entries, isReducedMotion)
-    }
+		initRuntime(entries, isReducedMotion, getService, true)
+	} else if (isOpen('specs.thunderbolt.interactionsInSsr')) {
+		// Emits the config and loader scripts. Works in both environments: SSR serves markup the
+		// parser executes, and on the client the loader's ref revives it into a script that runs —
+		// which is what pages rendered only on the client (password-protected / members-only,
+		// client-side navigation) need, since they never get a server-rendered document.
+		initRuntime(entries, isReducedMotion, getService, false)
+	} else {
+		initInteract(entries, isReducedMotion)
+	}
 
-    return {
-        interactiveComps: getInteractiveComps(entries),
-    }
+	return {
+		interactiveComps: getInteractiveComps(entries),
+	}
 }

package/src/implementations/interactions.ts

@@ -3,16 +3,16 @@ import type { IInteractionsService, IInteractionsServiceConfig } from '../defini
 import { coreInteractions } from './coreInteractions'
 
 export const createInteractions = (
-    config: IInteractionsServiceConfig,
-    getService: ServicesManager['getService']
+	config: IInteractionsServiceConfig,
+	getService: ServicesManager['getService']
 ): IInteractionsService => {
-    const { interactiveComps } = coreInteractions(config, getService)
+	const { interactiveComps } = coreInteractions(config, getService)
 
-    const getConfigPath = (path: string) => path.replace(/\[[^\]]+]/g, '[]')
+	const getConfigPath = (path: string) => path.replace(/\[[^\]]+]/g, '[]')
 
-    const hasInteractions: IInteractionsService['hasInteractions'] = path => interactiveComps.has(getConfigPath(path))
+	const hasInteractions: IInteractionsService['hasInteractions'] = (path) => interactiveComps.has(getConfigPath(path))
 
-    return {
-        hasInteractions,
-    }
+	return {
+		hasInteractions,
+	}
 }

package/src/implementations/interactionsExternal.ts

@@ -5,21 +5,21 @@ import { coreInteractions } from './coreInteractions'
 import { hasClickTriggerCss, wixInteractElementCss } from './stylesToAdd'
 
 export const createInteractionsExternal = (
-    config: IInteractionsServiceConfig,
-    getService: ServicesManager['getService']
+	config: IInteractionsServiceConfig,
+	getService: ServicesManager['getService']
 ): IInteractionsService => {
-    const provideCssService = getService(ProvideCssDefinition)
+	const provideCssService = getService(ProvideCssDefinition)
 
-    const styles = [wixInteractElementCss, hasClickTriggerCss]
-    const cssToAdd = styles.join('\n')
+	const styles = [wixInteractElementCss, hasClickTriggerCss]
+	const cssToAdd = styles.join('\n')
 
-    provideCssService.addStyle(cssToAdd)
+	provideCssService.addStyle(cssToAdd)
 
-    const { interactiveComps } = coreInteractions(config, getService)
+	const { interactiveComps } = coreInteractions(config, getService)
 
-    const hasInteractions: IInteractionsService['hasInteractions'] = path => interactiveComps.has(path)
+	const hasInteractions: IInteractionsService['hasInteractions'] = (path) => interactiveComps.has(path)
 
-    return {
-        hasInteractions,
-    }
+	return {
+		hasInteractions,
+	}
 }

package/src/implementations/interactionsService.ts

@@ -6,15 +6,15 @@ import { createInteractions } from './interactions'
 import { createInteractionsExternal } from './interactionsExternal'
 
 export const InteractionsService = implementStaticService(
-    InteractionsDefinition,
-    ({ config, getService }: StaticServiceFactoryOpts<IInteractionsServiceConfig>) => {
-        return createInteractions(config, getService)
-    }
+	InteractionsDefinition,
+	({ config, getService }: StaticServiceFactoryOpts<IInteractionsServiceConfig>) => {
+		return createInteractions(config, getService)
+	}
 )
 
 export const InteractionsServiceExternal = implementStaticService(
-    InteractionsDefinition,
-    ({ config, getService }: StaticServiceFactoryOpts<IInteractionsServiceConfig>) => {
-        return createInteractionsExternal(config, getService)
-    }
+	InteractionsDefinition,
+	({ config, getService }: StaticServiceFactoryOpts<IInteractionsServiceConfig>) => {
+		return createInteractionsExternal(config, getService)
+	}
 )

package/src/implementations/reviveScriptElement.ts

@@ -16,14 +16,14 @@
  * connected, and `connect()` returns early for them, so only the first instance serves a key.
  */
 export const reviveScriptElement = (rendered: HTMLScriptElement | null) => {
-    if (!rendered?.isConnected) {
-        return
-    }
+	if (!rendered?.isConnected) {
+		return
+	}
 
-    const executable = globalThis.document.createElement('script')
-    executable.type = rendered.type
-    executable.id = rendered.id
-    executable.textContent = rendered.textContent
+	const executable = globalThis.document.createElement('script')
+	executable.type = rendered.type
+	executable.id = rendered.id
+	executable.textContent = rendered.textContent
 
-    rendered.replaceWith(executable)
+	rendered.replaceWith(executable)
 }

package/src/implementations/v2/InteractionsScriptElement.tsx

@@ -11,32 +11,27 @@ const DANGEROUSLY_SET_INNER_HTML = ['dangerously', 'Set', 'Inner', 'HTML']
  * element early. `\u003c` is valid JSON that `JSON.parse` reads back as `<`.
  */
 const serializeConfigForScriptElement = (config: InteractConfig | InteractConfig[]): string =>
-    JSON.stringify(config).replace(/</g, '\\u003c')
+	JSON.stringify(config).replace(/</g, '\\u003c')
 
 export const createV2InteractionsScriptElement =
-    (config: InteractConfig | InteractConfig[], isReducedMotion: boolean, pageId: string): FunctionComponent =>
-    () => {
-        // This ID is also interpolated into raw module-script text. Percent-encoding removes
-        // script delimiters and template-literal syntax while keeping the ID deterministic.
-        const safePageId = encodeURIComponent(pageId)
-        const configId = `interactions-config-${safePageId}`
-        const interactionsScriptContent = getV2InteractionsScriptContent(configId, isReducedMotion)
-        const configProps = {
-            [DANGEROUSLY_SET_INNER_HTML.join('')]: { __html: serializeConfigForScriptElement(config) },
-        }
-        const loaderProps = {
-            [DANGEROUSLY_SET_INNER_HTML.join('')]: { __html: interactionsScriptContent },
-        }
+	(config: InteractConfig | InteractConfig[], isReducedMotion: boolean, pageId: string): FunctionComponent =>
+	() => {
+		// This ID is also interpolated into raw module-script text. Percent-encoding removes
+		// script delimiters and template-literal syntax while keeping the ID deterministic.
+		const safePageId = encodeURIComponent(pageId)
+		const configId = `interactions-config-${safePageId}`
+		const interactionsScriptContent = getV2InteractionsScriptContent(configId, isReducedMotion)
+		const configProps = {
+			[DANGEROUSLY_SET_INNER_HTML.join('')]: { __html: serializeConfigForScriptElement(config) },
+		}
+		const loaderProps = {
+			[DANGEROUSLY_SET_INNER_HTML.join('')]: { __html: interactionsScriptContent },
+		}
 
-        return (
-            <>
-                <script type="application/json" id={configId} {...configProps} />
-                <script
-                    type="module"
-                    id={`interactions-loader-${safePageId}`}
-                    ref={reviveScriptElement}
-                    {...loaderProps}
-                />
-            </>
-        )
-    }
+		return (
+			<>
+				<script type="application/json" id={configId} {...configProps} />
+				<script type="module" id={`interactions-loader-${safePageId}`} ref={reviveScriptElement} {...loaderProps} />
+			</>
+		)
+	}

package/src/implementations/v2/authoredStyles.ts

@@ -3,106 +3,101 @@ import type { InteractConfigEntry, InteractStyleRule } from '../../definition'
 const SELECTOR_TOKEN = /"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|[()[\]]|,/g
 
 const escapeCssString = (value: string): string =>
-    value
-        .replace(/\\/g, '\\\\')
-        .replace(/"/g, '\\"')
-        .replace(/\n/g, '\\a ')
-        .replace(/\r/g, '\\d ')
-        .replace(/\f/g, '\\c ')
+	value.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\a ').replace(/\r/g, '\\d ').replace(/\f/g, '\\c ')
 
 const splitSelectorList = (selector: string): string[] => {
-    const parts: string[] = []
-    let depth = 0
-    let start = 0
+	const parts: string[] = []
+	let depth = 0
+	let start = 0
 
-    SELECTOR_TOKEN.lastIndex = 0
-    for (let match = SELECTOR_TOKEN.exec(selector); match; match = SELECTOR_TOKEN.exec(selector)) {
-        const token = match[0]
-        if (token === '(' || token === '[') {
-            depth++
-        } else if (token === ')' || token === ']') {
-            depth--
-        } else if (token === ',' && depth === 0) {
-            parts.push(selector.slice(start, match.index))
-            start = match.index + 1
-        }
-    }
+	SELECTOR_TOKEN.lastIndex = 0
+	for (let match = SELECTOR_TOKEN.exec(selector); match; match = SELECTOR_TOKEN.exec(selector)) {
+		const token = match[0]
+		if (token === '(' || token === '[') {
+			depth++
+		} else if (token === ')' || token === ']') {
+			depth--
+		} else if (token === ',' && depth === 0) {
+			parts.push(selector.slice(start, match.index))
+			start = match.index + 1
+		}
+	}
 
-    parts.push(selector.slice(start))
-    return parts.map(part => part.trim()).filter(Boolean)
+	parts.push(selector.slice(start))
+	return parts.map((part) => part.trim()).filter(Boolean)
 }
 
 const indentCssBlock = (css: string): string =>
-    css
-        .split('\n')
-        .map(line => (line ? `  ${line}` : line))
-        .join('\n')
+	css
+		.split('\n')
+		.map((line) => (line ? `  ${line}` : line))
+		.join('\n')
 
 const renderProperties = (properties: Record<string, string>): string =>
-    Object.entries(properties)
-        .map(([property, value]) => `  ${property}: ${value};`)
-        .join('\n')
+	Object.entries(properties)
+		.map(([property, value]) => `  ${property}: ${value};`)
+		.join('\n')
 
 const wrapWithConditions = (block: string, rule: InteractStyleRule): string => {
-    let result = block
-    if (rule['@container']) {
-        result = `@container ${rule['@container']} {\n${indentCssBlock(result)}\n}`
-    }
-    if (rule['@media']) {
-        result = `@media ${rule['@media']} {\n${indentCssBlock(result)}\n}`
-    }
-    if (rule['@supports']) {
-        result = `@supports ${rule['@supports']} {\n${indentCssBlock(result)}\n}`
-    }
-    return result
+	let result = block
+	if (rule['@container']) {
+		result = `@container ${rule['@container']} {\n${indentCssBlock(result)}\n}`
+	}
+	if (rule['@media']) {
+		result = `@media ${rule['@media']} {\n${indentCssBlock(result)}\n}`
+	}
+	if (rule['@supports']) {
+		result = `@supports ${rule['@supports']} {\n${indentCssBlock(result)}\n}`
+	}
+	return result
 }
 
 const buildRuleSelector = (namespace: string, rule: InteractStyleRule): string => {
-    const scopeWrapper = `[data-interact-key="${escapeCssString(namespace)}"]`
-    const scopeRoot = `${scopeWrapper} > :first-child`
+	const scopeWrapper = `[data-interact-key="${escapeCssString(namespace)}"]`
+	const scopeRoot = `${scopeWrapper} > :first-child`
 
-    if (!rule.key) {
-        if (!rule.selector) {
-            return scopeRoot
-        }
-        return splitSelectorList(rule.selector)
-            .map(selector => `${scopeRoot} ${selector}`)
-            .join(', ')
-    }
+	if (!rule.key) {
+		if (!rule.selector) {
+			return scopeRoot
+		}
+		return splitSelectorList(rule.selector)
+			.map((selector) => `${scopeRoot} ${selector}`)
+			.join(', ')
+	}
 
-    const escapedKey = escapeCssString(rule.key)
-    const keyWrapper = rule.key === namespace ? scopeWrapper : `${scopeWrapper} [data-interact-key="${escapedKey}"]`
-    const keyRoot = `${keyWrapper} > :first-child`
-    if (!rule.selector) {
-        return keyRoot
-    }
+	const escapedKey = escapeCssString(rule.key)
+	const keyWrapper = rule.key === namespace ? scopeWrapper : `${scopeWrapper} [data-interact-key="${escapedKey}"]`
+	const keyRoot = `${keyWrapper} > :first-child`
+	if (!rule.selector) {
+		return keyRoot
+	}
 
-    const separator = /^\s/.test(rule.selector) ? ' ' : ''
-    return splitSelectorList(rule.selector)
-        .map(selector => `${keyRoot}${separator}${selector}`)
-        .join(', ')
+	const separator = /^\s/.test(rule.selector) ? ' ' : ''
+	return splitSelectorList(rule.selector)
+		.map((selector) => `${keyRoot}${separator}${selector}`)
+		.join(', ')
 }
 
 const getEntryStylesCss = ({ namespace, styles = [] }: InteractConfigEntry): string => {
-    if (!styles.length) {
-        return ''
-    }
-    if (!namespace) {
-        throw new Error('Interactions config entries with authored styles must define a namespace.')
-    }
+	if (!styles.length) {
+		return ''
+	}
+	if (!namespace) {
+		throw new Error('Interactions config entries with authored styles must define a namespace.')
+	}
 
-    return styles
-        .map(rule => {
-            const properties = renderProperties(rule.properties)
-            if (!properties) {
-                return ''
-            }
-            const block = `${buildRuleSelector(namespace, rule)} {\n${properties}\n}`
-            return wrapWithConditions(block, rule)
-        })
-        .filter(Boolean)
-        .join('\n\n')
+	return styles
+		.map((rule) => {
+			const properties = renderProperties(rule.properties)
+			if (!properties) {
+				return ''
+			}
+			const block = `${buildRuleSelector(namespace, rule)} {\n${properties}\n}`
+			return wrapWithConditions(block, rule)
+		})
+		.filter(Boolean)
+		.join('\n\n')
 }
 
 export const getAuthoredStylesCss = (entries: InteractConfigEntry[]): string =>
-    entries.map(getEntryStylesCss).filter(Boolean).join('\n\n')
+	entries.map(getEntryStylesCss).filter(Boolean).join('\n\n')

package/src/implementations/v2/cdnUrls.ts

@@ -3,4 +3,4 @@ export const INTERACT_V2_IMPORT_URL = 'https://cdn.jsdelivr.net/npm/@wix/interac
 export const LEGACY_WIX_MOTION_PRESETS_IMPORT_URL = 'https://cdn.jsdelivr.net/npm/@wix/wix-motion-presets@1.2.0/+esm'
 
 export const MOTION_PRESETS_IMPORT_URL =
-    'https://cdn.jsdelivr.net/npm/@wix/motion-presets@1.0.7/dist/browser/motion-presets.min.js'
+	'https://cdn.jsdelivr.net/npm/@wix/motion-presets@1.0.7/dist/browser/motion-presets.min.js'

package/src/implementations/v2/clickTriggerCss.ts

@@ -7,38 +7,38 @@ const escapeCssAttr = (value: string): string => value.replace(/\\/g, '\\\\').re
  * plus the `[data-interact-key="…"]` prefix from `CSSRuleToString`.
  */
 const getInteractionSourceSelector = (
-    interaction: Pick<Interaction, 'key' | 'selector' | 'listContainer' | 'listItemSelector'>
+	interaction: Pick<Interaction, 'key' | 'selector' | 'listContainer' | 'listItemSelector'>
 ): string => {
-    const { key, selector, listContainer, listItemSelector } = interaction
-    const attrSelector = `[data-interact-key="${escapeCssAttr(key)}"]`
+	const { key, selector, listContainer, listItemSelector } = interaction
+	const attrSelector = `[data-interact-key="${escapeCssAttr(key)}"]`
 
-    if (listContainer) {
-        const itemFilter = listItemSelector ? ` > ${listItemSelector}` : ''
-        const inner = selector ? `${listContainer}${itemFilter} ${selector}` : `${listContainer}${itemFilter || ' > *'}`
+	if (listContainer) {
+		const itemFilter = listItemSelector ? ` > ${listItemSelector}` : ''
+		const inner = selector ? `${listContainer}${itemFilter} ${selector}` : `${listContainer}${itemFilter || ' > *'}`
 
-        return `${attrSelector} ${inner}`
-    }
+		return `${attrSelector} ${inner}`
+	}
 
-    if (selector) {
-        return `${attrSelector} ${selector}`
-    }
+	if (selector) {
+		return `${attrSelector} ${selector}`
+	}
 
-    return `${attrSelector} > :first-child`
+	return `${attrSelector} > :first-child`
 }
 
 /** Emits `cursor: pointer` for click interaction triggers (`'activate' || 'click'`), one rule per unique source selector. */
 export const getClickTriggerCss = (config: InteractConfig): string => {
-    const selectors = [
-        ...new Set(
-            config.interactions
-                .filter(({ trigger }) => trigger === 'activate' || trigger === 'click')
-                .map(getInteractionSourceSelector)
-        ),
-    ]
-
-    if (!selectors.length) {
-        return ''
-    }
-
-    return selectors.map(selector => `${selector} {\ncursor: pointer;\n}`).join('\n')
+	const selectors = [
+		...new Set(
+			config.interactions
+				.filter(({ trigger }) => trigger === 'activate' || trigger === 'click')
+				.map(getInteractionSourceSelector)
+		),
+	]
+
+	if (!selectors.length) {
+		return ''
+	}
+
+	return selectors.map((selector) => `${selector} {\ncursor: pointer;\n}`).join('\n')
 }

package/src/implementations/v2/configCss.ts

@@ -11,8 +11,8 @@ Interact.registerEffects(motionPresets as unknown as PresetRegistry)
 
 /** Emit animation FOUC CSS and click-trigger cursor rules. */
 export const getV2ConfigCss = (config: InteractConfig): string => {
-    const animationCss = generate(config, true).trim()
-    const clickCss = getClickTriggerCss(config).trim()
+	const animationCss = generate(config, true).trim()
+	const clickCss = getClickTriggerCss(config).trim()
 
-    return [animationCss, clickCss].filter(Boolean).join('\n')
+	return [animationCss, clickCss].filter(Boolean).join('\n')
 }