@symbiote-native/vue 0.4.0 → 1.0.0

package/build/runtime-helpers/index.d.ts

@@ -1,28 +1,52 @@
 export * from '@vue/runtime-core';
 import { type ObjectDirective } from '@vue/runtime-core';
 import { type ISymbioteNode } from '@symbiote-native/engine';
+export { Teleport, type ITeleportTarget } from '../create-portal';
+export declare function normalizeProps(props: Record<string, unknown> | null | undefined): Record<string, unknown> | null;
+export declare function normalizeStyle(value: unknown): unknown;
+export declare function mergeProps(...args: Record<string, unknown>[]): Record<string, unknown>;
 export declare const vShow: ObjectDirective<ISymbioteNode, boolean>;
-export declare const Teleport: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    to: {
-        type: null;
-        default: null;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    to: {
-        type: null;
-        default: null;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    disabled: boolean;
-    to: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const vModelText: ObjectDirective<ISymbioteNode, unknown>;
+type ISystemModifier = 'ctrl' | 'shift' | 'alt' | 'meta';
+type IEventModifier = ISystemModifier | 'stop' | 'prevent' | 'self' | 'left' | 'middle' | 'right' | 'exact';
+type IModifierGuardableEvent = {
+    stopPropagation?: () => void;
+    preventDefault?: () => void;
+    target?: unknown;
+    currentTarget?: unknown;
+    button?: number;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+};
+type IEventHandler<TEvent> = ((event: TEvent, ...args: never[]) => unknown) & {
+    _withMods?: Record<string, IEventHandler<TEvent>>;
+};
+/**
+ * Render-function/compiled-template equivalent of `v-on.stop`/`.prevent`/`.self`/etc. `fn` is
+ * typed as required, matching upstream Vue's own declaration — its runtime-only `!fn` guard below
+ * (for a compiler-generated call site that could pass a falsy handler) isn't reflected in the
+ * type there either.
+ */
+export declare function withModifiers<TEvent extends IModifierGuardableEvent>(fn: IEventHandler<TEvent>, modifiers: readonly IEventModifier[]): IEventHandler<TEvent>;
+type IKeyedEvent = {
+    key?: string;
+};
+type IKeyedHandler<TEvent extends IKeyedEvent> = ((event: TEvent) => unknown) & {
+    _withKeys?: Record<string, (event: TEvent) => unknown>;
+};
+/**
+ * Render-function/compiled-template equivalent of `v-on.enter`/`.esc`/etc. No-ops on any event
+ * without a `.key` field (e.g. Symbiote's Pressable `onPress`) — same as upstream Vue's own
+ * behavior on a non-keyboard DOM event, not a Symbiote-specific gap. `TextInput`'s `onKeyPress`
+ * carries `nativeEvent.key`, so that is the applicable Symbiote event shape.
+ */
+export declare function withKeys<TEvent extends IKeyedEvent>(fn: IKeyedHandler<TEvent>, modifiers: readonly string[]): (event: TEvent) => unknown;
+/**
+ * Reads the class map a `<style module>` SFC block compiles onto the component's own options
+ * (`__cssModules`, set by @symbiote-native/css-parser's SFC compiler — see the
+ * `symbiote-sfc-style-compiler` skill). Warns and returns an empty map exactly like upstream Vue
+ * does when the current component has no such block, rather than throwing.
+ */
+export declare function useCssModule(name?: string): Record<string, string>;

package/build/runtime-helpers/index.js

@@ -6,11 +6,100 @@
 // real HTMLElement - we have no DOM, so this module supplies our OWN implementation under the
 // same export name instead of leaving `v-show` a silent no-op.
 //
-// Scope: this covers only Vue's own template directives (v-show, Teleport); native-element
-// v-model is a separate, out-of-scope case.
+// Scope: Vue's own template directives (v-show, Teleport) and, since host-primitive lowering
+// landed, `v-model` on an ELEMENT — see vModelText below for why that stopped being out of scope.
 export * from '@vue/runtime-core';
-import { defineComponent, h, Teleport as VueTeleport, } from '@vue/runtime-core';
-import { isSymbioteNode, setNativeProps, whenCommitted, } from '@symbiote-native/engine';
+import { getCurrentInstance, mergeProps as baseMergeProps, normalizeClass, normalizeStyle as baseNormalizeStyle, warn, } from '@vue/runtime-core';
+import { requestCommitFor, setNativeProps, setProp, whenCommitted, } from '@symbiote-native/engine';
+import { descriptorFor, SWITCH_TAG } from '@symbiote-native/components';
+// Shadows runtime-core's own Teleport for every compiled `from 'vue'` import (see the header):
+// same component, plus a runtime guard on `to`. Lives in ../create-portal so the adapter's portal
+// sits where every other adapter's does; re-exported here because THIS is the module Metro
+// rewrites `vue` to, and an `export *` alone would resolve `Teleport` to the unguarded original.
+export { Teleport } from '../create-portal/index.js';
+// Shadows @vue/shared's own `normalizeProps` for every compiled `from 'vue'` import, for ONE
+// divergence: a FUNCTION-valued `style` survives it.
+//
+// `v-bind="obj"` compiles to `_normalizeProps(_guardReactiveProps(obj))`, and Vue's version runs
+// `normalizeStyle` over the style key. That helper knows array / string / object and returns
+// `undefined` for a function — so `style: ({ pressed }) => …` arriving inside a spread is destroyed
+// before any adapter code runs, with no error and nothing red. A functional style is a React Native
+// idiom the engine resolves in `routeProp` (`isStyleCallback`); Vue's normaliser is DOM-shaped and
+// cannot know that.
+//
+// Measured 2026-09-01 through the real SFC pipeline, which is the ONLY path that reaches this:
+// `h(Component, { ...bag })` skips `normalizeProps` entirely and shows the style arriving intact,
+// so a probe written that way reports the bug as absent.
+//
+//   <View v-bind="bag">       fn style   committed {testID}              <- style gone
+//   <Pressable v-bind="bag">  fn style   committed {testID}              <- style gone
+//   either, object style                 committed {testID, opacity}     <- fine
+//
+// EVERY primitive, not only the stateful ones — both arms measured. Only `style`: `normalizeClass`
+// has no equivalent hazard that anyone has shown, and an override wider than the measured defect is
+// how one adapter's problem becomes a shared law.
+//
+// MIRRORS Vue's four lines rather than delegating to them, because hiding the key from the original
+// and restoring it afterwards would mutate the caller's object twice. The normalisation itself is
+// still Vue's — only the dispatch is ours, and `normalize-props.test.ts` pins it against the
+// compiled path.
+export function normalizeProps(props) {
+    if (!props)
+        return null;
+    const { class: klass, style } = props;
+    if (klass && typeof klass !== 'string')
+        props.class = normalizeClass(klass);
+    if (style && typeof style !== 'function')
+        props.style = baseNormalizeStyle(style);
+    return props;
+}
+// The SECOND door to the same defect, and the one the first fix missed. `v-bind="rest"` standing
+// beside a separate `:style="fn"` does not compile to `normalizeProps` at all — it compiles to
+// `mergeProps`, whose own `style` branch is `ret.style = normalizeStyle([ret.style, toMerge.style])`.
+// The array branch of `normalizeStyle` drops a function element, so the callback dies here too:
+//
+//   <View v-bind="bag" />                  normalizeProps   <- fixed above
+//   <View v-bind="rest" :style="fn" />     mergeProps       <- fixed here
+//   <View :style="fn" />                   neither          <- was never broken
+//
+// Delegates the whole merge — classes, event-handler concatenation, key precedence — and only
+// rescues the callback afterwards, scanning the args in mergeProps' own order so LAST wins. A
+// later non-function `style` clears it again, which is that same precedence.
+//
+// The merge itself cannot be preserved when one side is a callback: a function returns a COMPLETE
+// style, so there is nothing to merge it into. It replaces, which is also how React Native's own
+// contract reads it (`Pressable.js`: `ViewStyleProp | ((state) => ViewStyleProp)` — the callback is
+// top-level, never an array element, so `:style="[a, fn]"` is out of contract here exactly as it is
+// there, and is deliberately NOT rescued).
+// The THIRD door, and the one that decides whether the state-style split can leave the transforms
+// at all. A `:style` binding on a lowered element compiles to `_normalizeStyle(expr)` whenever the
+// compiler cannot keep it on the cheap patch-flag path — an inline arrow and a call expression both
+// do, a bare identifier does not. So `<Pressable :style="({pressed}) => …" />` loses its callback
+// here, and today nothing notices because the lowering transform rewrites that attribute into a
+// resting/active pair before Vue ever emits the helper.
+//
+// A TOP-LEVEL function is preserved; one nested inside an array is not, and that asymmetry is the
+// contract rather than an omission. React Native types the prop
+// `ViewStyleProp | ((state) => ViewStyleProp)` (`Pressable.js`), so the callback is top-level or it
+// is not a callback, and the engine's `isStyleCallback` reads it the same way. Rescuing an array
+// element would invent a shape neither side supports.
+export function normalizeStyle(value) {
+    if (typeof value === 'function')
+        return value;
+    return baseNormalizeStyle(value);
+}
+export function mergeProps(...args) {
+    const merged = baseMergeProps(...args);
+    let callback;
+    for (const arg of args) {
+        if (arg === null || arg === undefined || !('style' in arg))
+            continue;
+        callback = typeof arg.style === 'function' ? arg.style : undefined;
+    }
+    if (callback !== undefined)
+        merged.style = callback;
+    return merged;
+}
 // whenCommitted, not a direct call: Vue's `mounted` hook fires synchronously during the patch
 // pass, but this renderer coalesces the actual Fabric commit onto a microtask
 // (surface.requestCommit()), so the node may have no committed tag yet - the same async-commit
@@ -28,31 +117,226 @@ export const vShow = {
     // Drop a still-pending first-commit wait if the element unmounts before it ever lands.
     unmounted: el => pendingShowCommits.get(el)?.(),
 };
-// Teleport's `to` in the DOM world is usually a CSS-selector string ('body', '#modal-root'); we
-// have no querySelector, so `to` here must be an already-mounted host node - e.g. a ref to a
-// persistent "overlay host" View rendered once near the app root. This wrapper shadows
-// runtime-core's own Teleport purely to validate `to` BEFORE handing it to the real Teleport: a
-// wrong value throws immediately here instead of silently corrupting the retained tree deep
-// inside insert/remove. Scope: same-surface targets only (see the React createPortal twin,
-// create-portal.ts) - Vue's own Teleport internals work unmodified once `to` resolves to a real
-// ISymbioteNode.
-export const Teleport = defineComponent({
-    name: 'Teleport',
-    inheritAttrs: false,
-    props: {
-        to: { type: null, default: null },
-        disabled: { type: Boolean, default: false },
+const modelStates = new WeakMap();
+// Runtime guards, not casts: both slots are read out of untyped bags — `vnode.props` and
+// `node.props` are `Record<string, unknown>` — and `typeof x === 'function'` alone narrows to the
+// bare `Function`, which carries no signature.
+function isModelAssign(value) {
+    return typeof value === 'function';
+}
+function isValueChangeListener(value) {
+    return typeof value === 'function';
+}
+// Vue merges duplicate handlers into an array, so the assigner is either a function or a list of
+// them — the same shape upstream's `getModelAssigner` normalises.
+function modelAssigner(props) {
+    const bound = props?.['onUpdate:modelValue'] ?? props?.['onUpdate:value'];
+    if (isModelAssign(bound))
+        return bound;
+    if (!Array.isArray(bound))
+        return undefined;
+    const fns = bound.filter(isModelAssign);
+    return value => fns.forEach(fn => fn(value));
+}
+function modelText(value) {
+    if (typeof value === 'string')
+        return value;
+    return value === undefined || value === null ? '' : String(value);
+}
+// `.trim` and `.number` are pure transforms of the text and behave exactly as upstream. `.lazy` is
+// NOT: upstream implements it by listening to `change` instead of `input`, and this renderer has
+// only the one native stream (RN fires `onChange` per keystroke), so there is no second event to
+// switch to. It warns rather than silently behaving like the eager form.
+function applyModelModifiers(state, text) {
+    const trimmed = state.trim ? text.trim() : text;
+    if (!state.number)
+        return trimmed;
+    const parsed = Number.parseFloat(trimmed);
+    return Number.isNaN(parsed) ? trimmed : parsed;
+}
+function modelStateFor(el) {
+    const existing = modelStates.get(el);
+    if (existing !== undefined)
+        return existing;
+    const state = {
+        assign: undefined,
+        appListener: undefined,
+        trim: false,
+        number: false,
+        listener: (text, event) => {
+            state.appListener?.(text, event);
+            state.assign?.(applyModelModifiers(state, text));
+        },
+    };
+    modelStates.set(el, state);
+    return state;
+}
+// Re-read every beat rather than installed once: the app's own `onValueChange` binding is written
+// by `patchProp` during the same patch, so anything captured earlier is either missing or stale. A
+// prop that is already OUR listener means nothing overwrote it and the app half is unchanged.
+function syncModelListener(el, state) {
+    const current = el.props.onValueChange;
+    if (current === state.listener)
+        return;
+    state.appListener = isValueChangeListener(current) ? current : undefined;
+    setProp(el, 'onValueChange', state.listener);
+}
+// Vue's compiler picks the directive by ELEMENT, and for anything it does not recognise as a DOM
+// input it emits `vModelText` — including a lowered `<symbiote-switch>`. Stringifying there is what
+// upstream must do (a DOM input's value IS a string) and what we must not: the Switch behavior
+// reads `props.value === true`, so `String(true)` pins the control OFF and no tap can move it.
+// Device-confirmed on `examples/vue-sfc` 2026-09-02, both switches on `CanaryScreen`.
+//
+// Resolved through the shared descriptor table rather than a literal Fabric name, so the check
+// follows the platform the bundle actually loaded (iOS `Switch`, Android `AndroidSwitch`) instead
+// of carrying a copy of both.
+const SWITCH_COMPONENT = descriptorFor(SWITCH_TAG).component;
+function isSwitchNode(el) {
+    return el.component === SWITCH_COMPONENT;
+}
+function syncModelValue(el, value) {
+    // The READ half needs no branch: the behavior calls `onValueChange(value, event)` for both
+    // primitives, and `applyModelModifiers` passes a non-string through untouched.
+    if (isSwitchNode(el)) {
+        setProp(el, 'value', value === true);
+        requestCommitFor(el);
+        return;
+    }
+    setProp(el, 'value', modelText(value));
+    // The behavior's `afterCommit` is what turns a changed `value` into the stale-safe
+    // setTextAndSelection command, and nothing else in this patch is going to ask for a commit — the
+    // template no longer carries a `value` binding at all once `v-model` owns it.
+    requestCommitFor(el);
+}
+export const vModelText = {
+    // `created` runs BEFORE props are patched, which is exactly what the value half needs: the
+    // behavior seeds its `lastNativeText` mirror from `value` on the FIRST commit, and a value that
+    // arrives after that seed reads as a divergence and commands redundant text down to native.
+    created(el, { value, modifiers }) {
+        const state = modelStateFor(el);
+        state.trim = modifiers.trim === true;
+        state.number = modifiers.number === true;
+        if (modifiers.lazy === true) {
+            warn('v-model.lazy has no effect here: this renderer has one native text stream, so there is no ' +
+                'second event to defer to.');
+        }
+        syncModelValue(el, value);
+    },
+    mounted(el, { value }, vnode) {
+        const state = modelStateFor(el);
+        state.assign = modelAssigner(vnode.props);
+        syncModelListener(el, state);
+        syncModelValue(el, value);
+    },
+    updated(el, { value }, vnode) {
+        const state = modelStateFor(el);
+        state.assign = modelAssigner(vnode.props);
+        syncModelListener(el, state);
+        syncModelValue(el, value);
+    },
+    unmounted(el) {
+        modelStates.delete(el);
     },
-    setup(props, { slots }) {
-        return () => {
-            const { to } = props;
-            if (typeof to === 'string') {
-                throw new Error(`Teleport target must be a host node ref, not a CSS-selector string ("${to}") — symbiote has no querySelector. Pass a ref to an already-rendered element instead (e.g. <View ref="overlayHost" />, then :to="overlayHost").`);
-            }
-            if (to != null && !isSymbioteNode(to)) {
-                throw new Error('Teleport target is not a real host node — did you forget `.value` on a ref, or pass something symbiote never rendered?');
-            }
-            return h(VueTeleport, { to, disabled: props.disabled }, slots);
-        };
+};
+const SYSTEM_MODIFIERS = [
+    'ctrl',
+    'shift',
+    'alt',
+    'meta',
+];
+const MODIFIER_GUARDS = {
+    stop: event => {
+        event.stopPropagation?.();
+        return false;
+    },
+    prevent: event => {
+        event.preventDefault?.();
+        return false;
     },
-});
+    self: event => event.target !== event.currentTarget,
+    ctrl: event => !event.ctrlKey,
+    shift: event => !event.shiftKey,
+    alt: event => !event.altKey,
+    meta: event => !event.metaKey,
+    left: event => event.button !== 0,
+    middle: event => event.button !== 1,
+    right: event => event.button !== 2,
+    exact: (event, modifiers) => SYSTEM_MODIFIERS.some(modifier => event[`${modifier}Key`] && !modifiers.includes(modifier)),
+};
+/**
+ * Render-function/compiled-template equivalent of `v-on.stop`/`.prevent`/`.self`/etc. `fn` is
+ * typed as required, matching upstream Vue's own declaration — its runtime-only `!fn` guard below
+ * (for a compiler-generated call site that could pass a falsy handler) isn't reflected in the
+ * type there either.
+ */
+export function withModifiers(fn, modifiers) {
+    if (!fn)
+        return fn;
+    const cache = fn._withMods ?? (fn._withMods = {});
+    const cacheKey = modifiers.join('.');
+    return (cache[cacheKey] ??= ((event, ...args) => {
+        for (const modifier of modifiers) {
+            if (MODIFIER_GUARDS[modifier](event, modifiers))
+                return undefined;
+        }
+        return fn(event, ...args);
+    }));
+}
+const KEY_ALIASES = {
+    esc: 'escape',
+    space: ' ',
+    up: 'arrow-up',
+    left: 'arrow-left',
+    right: 'arrow-right',
+    down: 'arrow-down',
+    delete: 'backspace',
+};
+// \B (non-word-boundary), not a bare capture: without it, "Enter" hyphenates to "-enter" (a
+// leading dash) instead of "enter", since the very first character is otherwise still a match.
+function hyphenate(camelCase) {
+    return camelCase.replace(/\B([A-Z])/g, '-$1').toLowerCase();
+}
+/**
+ * Render-function/compiled-template equivalent of `v-on.enter`/`.esc`/etc. No-ops on any event
+ * without a `.key` field (e.g. Symbiote's Pressable `onPress`) — same as upstream Vue's own
+ * behavior on a non-keyboard DOM event, not a Symbiote-specific gap. `TextInput`'s `onKeyPress`
+ * carries `nativeEvent.key`, so that is the applicable Symbiote event shape.
+ */
+export function withKeys(fn, modifiers) {
+    const cache = fn._withKeys ?? (fn._withKeys = {});
+    const cacheKey = modifiers.join('.');
+    return (cache[cacheKey] ??= (event) => {
+        if (event.key == null)
+            return undefined;
+        const eventKey = hyphenate(event.key);
+        if (modifiers.some(modifier => modifier === eventKey || KEY_ALIASES[modifier] === eventKey)) {
+            return fn(event);
+        }
+        return undefined;
+    });
+}
+/**
+ * Reads the class map a `<style module>` SFC block compiles onto the component's own options
+ * (`__cssModules`, set by @symbiote-native/css-parser's SFC compiler — see the
+ * `symbiote-sfc-style-compiler` skill). Warns and returns an empty map exactly like upstream Vue
+ * does when the current component has no such block, rather than throwing.
+ */
+export function useCssModule(name = '$style') {
+    const instance = getCurrentInstance();
+    if (!instance) {
+        warn('useCssModule must be called inside setup()');
+        return {};
+    }
+    const modules = instance.type
+        .__cssModules;
+    if (!modules) {
+        warn('Current instance does not have CSS modules injected.');
+        return {};
+    }
+    const cssModule = modules[name];
+    if (!cssModule) {
+        warn(`Current instance does not have CSS module named "${name}".`);
+        return {};
+    }
+    return cssModule;
+}

package/build/state-style.d.ts

@@ -0,0 +1 @@
+export { resolveStateStyle, type IPressStateArgument, type IResolvedStateStyle, } from '@symbiote-native/components/state-style';

package/build/state-style.js

@@ -0,0 +1,13 @@
+// Re-export only. The implementation is shared (`@symbiote-native/components`) because two adapters
+// had written byte-identical copies; this file exists so the code a transform EMITS keeps importing
+// from the adapter package the app already depends on, rather than reaching past it.
+//
+// Imported from the SUBPATH, not the barrel: every adapter barrel re-exports
+// `@symbiote-native/components` wholesale, so a name on that barrel silently becomes public API on
+// all five — which is how a transform internal nearly shipped as a supported export.
+//
+// Present on every adapter, including those with no lowering transform yet: a per-framework subpath
+// that four of five declare is exactly the silent gap `tests/package-subpath-parity.test.ts` exists
+// to catch, and the file costs a re-export. Deliberately NOT on the public barrel — the emitted
+// code names it, app code does not.
+export { resolveStateStyle, } from '@symbiote-native/components/state-style';

package/build/utils/normalize-attrs.d.ts

@@ -1 +1,2 @@
+export declare function normalizeVueAttrKey(key: string): string;
 export declare function normalizeVueAttrs(attrs: Record<string, unknown>): Record<string, unknown>;

package/build/utils/normalize-attrs.js

@@ -12,19 +12,27 @@ const KEBAB_SEGMENT = /-([a-z])/g;
 function toCamel(key) {
     return key.replace(KEBAB_SEGMENT, (_match, char) => char.toUpperCase());
 }
+// The per-KEY half, for the path that never sees a whole attrs bag: a host primitive lowered to
+// its intrinsic tag by the SFC transformer reaches the renderer one patchProp call at a time,
+// with no component in between to fold the bag. Returns the key unchanged (same string identity)
+// whenever there is nothing to convert, which is every key on the hot path.
+export function normalizeVueAttrKey(key) {
+    if (!key.includes('-'))
+        return key;
+    if (key.startsWith('aria-') || key.startsWith('data-'))
+        return key;
+    return toCamel(key);
+}
+// Always returns a PLAIN copy, never the input. An earlier version handed the input back when no
+// key needed converting - which is every SFC/TSX bag, since `@press` / `:style` already arrive
+// camel - and that gave callers Vue's attrs PROXY to read from. In production, not just dev, that
+// proxy's get trap is `track(target, "get", "")` before every value
+// (runtime-core.esm-bundler.js:8357), so each of Pressable's ~16 per-render attr reads paid two
+// map lookups it did not need. The copy loop reads every key through the trap once regardless, so
+// the only thing the early return ever saved was this one object.
 export function normalizeVueAttrs(attrs) {
-    let changed = false;
     const out = {};
-    for (const key of Object.keys(attrs)) {
-        if (key.includes('-') && !key.startsWith('aria-') && !key.startsWith('data-')) {
-            out[toCamel(key)] = attrs[key];
-            changed = true;
-        }
-        else {
-            out[key] = attrs[key];
-        }
-    }
-    // Return the original object when nothing converted (the already-camel / TSX path): avoids a
-    // per-render allocation and keeps attrs identity stable.
-    return changed ? out : attrs;
+    for (const key of Object.keys(attrs))
+        out[normalizeVueAttrKey(key)] = attrs[key];
+    return out;
 }

package/metro-css-parser.cjs

@@ -9,4 +9,5 @@
 // directly instead, since it needs the individual parse/compile functions, not a Metro transformer
 // object. createCssMetroTransformer is a factory — babelTransformerPath needs the actual
 // {transform, getCacheKey} object it returns, not the css-parser package barrel.
-module.exports = require('@symbiote-native/css-parser').createCssMetroTransformer();
+module.exports =
+  require('@symbiote-native/css-parser').createCssMetroTransformer();