element-vir 5.3.0 → 5.4.2

package/dist/cjs/augments/array.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterOutArrayIndexes = void 0;
+function filterOutArrayIndexes(array, indexes) {
+    return array.filter((_, index) => !indexes.includes(index));
+}
+exports.filterOutArrayIndexes = filterOutArrayIndexes;

package/dist/cjs/augments/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/functional-element/define-functional-element.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineFunctionalElement = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const element_events_1 = require("./element-events");
+const element_properties_1 = require("./element-properties");
+const functional_element_1 = require("./functional-element");
+const render_callback_1 = require("./render-callback");
+function defineFunctionalElement(functionalElementInit) {
+    var _a;
+    const eventsMap = (0, element_events_1.createEventDescriptorMap)(functionalElementInit.events);
+    const anonymousClass = (_a = class extends functional_element_1.FunctionalElementBaseClass {
+            constructor() {
+                super();
+                this.initCalled = false;
+                this.instanceProps = (0, element_properties_1.createPropertyProxy)(functionalElementInit.props, this);
+                const initProps = functionalElementInit.props || {};
+                Object.keys(initProps).forEach((propName) => {
+                    const functionalElementInstance = this;
+                    (0, decorators_js_1.property)()(functionalElementInstance, propName);
+                    functionalElementInstance[propName] = initProps[propName];
+                });
+            }
+            createRenderParams() {
+                return (0, render_callback_1.createRenderParams)(this, eventsMap);
+            }
+            render() {
+                const renderParams = this.createRenderParams();
+                if (!this.initCalled && functionalElementInit.initCallback) {
+                    this.initCalled = true;
+                    functionalElementInit.initCallback(renderParams);
+                }
+                return functionalElementInit.renderCallback(renderParams);
+            }
+        },
+        _a.tagName = functionalElementInit.tagName,
+        _a.styles = functionalElementInit.styles || (0, lit_1.css) ``,
+        _a.initInput = functionalElementInit,
+        _a.events = eventsMap,
+        _a.renderCallback = functionalElementInit.renderCallback,
+        _a.props = (0, element_properties_1.createPropertyDescriptorMap)(functionalElementInit.props),
+        _a);
+    window.customElements.define(functionalElementInit.tagName, anonymousClass);
+    return anonymousClass;
+}
+exports.defineFunctionalElement = defineFunctionalElement;

package/dist/cjs/functional-element/directives/assign-with-clean-up.directive.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assignWithCleanup = void 0;
+const lit_1 = require("lit");
+const async_directive_js_1 = require("lit/async-directive.js");
+const directive_js_1 = require("lit/directive.js");
+const directive_util_1 = require("./directive-util");
+/**
+ * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
+ * the directive call is wrapped in this function.
+ */
+function assignWithCleanup(propertyDescriptor, value, cleanupCallback) {
+    return assignWithCleanupDirective(propertyDescriptor.propName, value, cleanupCallback);
+}
+exports.assignWithCleanup = assignWithCleanup;
+class AssignWithCleanupDirectiveClass extends async_directive_js_1.AsyncDirective {
+    constructor(partInfo) {
+        super(partInfo);
+        this.element = (0, directive_util_1.extractFunctionalElement)(partInfo, 'assign');
+    }
+    disconnected() {
+        if (this.lastValue != undefined && this.lastCallback != undefined) {
+            this.lastCallback(this.lastValue);
+        }
+    }
+    render(propName, value, cleanupCallback, equalityCheck = (a, b) => a === b) {
+        if (!(propName in this.element.instanceProps)) {
+            throw new Error(`${this.element.tagName} element has no property of name "${propName}"`);
+        }
+        // reference equality check!
+        if (!equalityCheck(this.lastValue, value)) {
+            cleanupCallback(this.lastValue);
+        }
+        this.element.instanceProps[propName] = value;
+        this.lastValue = value;
+        this.lastCallback = cleanupCallback;
+        return lit_1.noChange;
+    }
+}
+const assignWithCleanupDirective = (0, directive_js_1.directive)(AssignWithCleanupDirectiveClass);

package/dist/cjs/functional-element/directives/assign.directive.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assign = void 0;
+const lit_1 = require("lit");
+const directive_js_1 = require("lit/directive.js");
+const directive_util_1 = require("./directive-util");
+/**
+ * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
+ * the directive call is wrapped in this function.
+ */
+function assign(propertyDescriptor, value) {
+    return assignDirective(propertyDescriptor.propName, value);
+}
+exports.assign = assign;
+const assignDirective = (0, directive_js_1.directive)(class extends directive_js_1.Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        this.element = (0, directive_util_1.extractFunctionalElement)(partInfo, 'assign');
+    }
+    render(propName, value) {
+        if (!(propName in this.element.instanceProps)) {
+            throw new Error(`${this.element.tagName} element has no property of name "${propName}"`);
+        }
+        this.element.instanceProps[propName] = value;
+        return lit_1.noChange;
+    }
+});

package/dist/cjs/functional-element/directives/directive-util.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assertsIsElementPartInfo = exports.extractElement = exports.extractFunctionalElement = void 0;
+const directive_js_1 = require("lit/directive.js");
+const functional_element_1 = require("../functional-element");
+function extractFunctionalElement(partInfo, directiveName) {
+    return extractElement(partInfo, directiveName, functional_element_1.FunctionalElementBaseClass);
+}
+exports.extractFunctionalElement = extractFunctionalElement;
+function extractElement(partInfo, directiveName, constructorClass) {
+    assertsIsElementPartInfo(partInfo, directiveName);
+    const element = partInfo.element;
+    if (!(element instanceof constructorClass)) {
+        throw new Error(`${directiveName} attached to non ${constructorClass.name} element.`);
+    }
+    return element;
+}
+exports.extractElement = extractElement;
+function assertsIsElementPartInfo(partInfo, directiveName) {
+    if (partInfo.type !== directive_js_1.PartType.ELEMENT) {
+        throw new Error(`${directiveName} directive can only be attached directly to an element.`);
+    }
+    if (!partInfo.element) {
+        throw new Error(`${directiveName} directive found no element`);
+    }
+}
+exports.assertsIsElementPartInfo = assertsIsElementPartInfo;

package/dist/cjs/functional-element/directives/listen.directive.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listen = void 0;
+const lit_1 = require("lit");
+const directive_js_1 = require("lit/directive.js");
+const directive_util_1 = require("./directive-util");
+function listen(eventType, listener) {
+    return listenDirective(eventType, listener);
+}
+exports.listen = listen;
+/**
+ * The directive generics here are not strong enough to maintain their values. Thus, the directive
+ * call is wrapped in the function above.
+ */
+const listenDirective = (0, directive_js_1.directive)(class extends directive_js_1.Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        this.element = (0, directive_util_1.extractElement)(partInfo, 'listen', HTMLElement);
+    }
+    resetListener(listenerMetaData) {
+        if (this.lastListenerMetaData) {
+            this.element.removeEventListener(this.lastListenerMetaData.eventType, this.lastListenerMetaData.listener);
+        }
+        this.element.addEventListener(listenerMetaData.eventType, listenerMetaData.listener);
+        this.lastListenerMetaData = listenerMetaData;
+    }
+    createListenerMetaData(eventType, callback) {
+        return {
+            eventType,
+            callback,
+            listener: (event) => { var _a; return (_a = this.lastListenerMetaData) === null || _a === void 0 ? void 0 : _a.callback(event); },
+        };
+    }
+    render(eventTypeInput, callback) {
+        const eventType = typeof eventTypeInput === 'string' ? eventTypeInput : eventTypeInput.type;
+        if (typeof eventType !== 'string') {
+            throw new Error(`Cannot listen to an event with a name that is not a string. Given event name: "${eventType}"`);
+        }
+        if (this.lastListenerMetaData && this.lastListenerMetaData.eventType === eventType) {
+            /**
+             * Store the callback here so we don't have to update the attached listener every
+             * time the callback is updated.
+             */
+            this.lastListenerMetaData.callback = callback;
+        }
+        else {
+            this.resetListener(this.createListenerMetaData(eventType, callback));
+        }
+        return lit_1.noChange;
+    }
+});

package/dist/cjs/functional-element/directives/on-dom-created.directive.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onDomCreated = void 0;
+const directive_js_1 = require("lit/directive.js");
+const directive_util_1 = require("./directive-util");
+const directiveName = 'onDomCreated';
+/** Only fires once, when the element has been created. */
+exports.onDomCreated = (0, directive_js_1.directive)(class extends directive_js_1.Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        (0, directive_util_1.assertsIsElementPartInfo)(partInfo, directiveName);
+    }
+    update(partInfo, [callback]) {
+        (0, directive_util_1.assertsIsElementPartInfo)(partInfo, directiveName);
+        const newElement = partInfo.element;
+        if (newElement !== this.element) {
+            // use requestAnimationFrame here so it can fire property changes outside of a render loop
+            requestAnimationFrame(() => callback(newElement));
+            this.element = newElement;
+        }
+        return this.render(callback);
+    }
+    render(callback) {
+        return undefined;
+    }
+});

package/dist/cjs/functional-element/directives/on-resize.directive.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onResize = void 0;
+const directive_js_1 = require("lit/directive.js");
+const directive_util_1 = require("./directive-util");
+const directiveName = 'onResize';
+exports.onResize = (0, directive_js_1.directive)(class extends directive_js_1.Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        this.resizeObserver = new ResizeObserver((entries) => this.fireCallback(entries));
+        (0, directive_util_1.assertsIsElementPartInfo)(partInfo, directiveName);
+    }
+    fireCallback(entries) {
+        var _a;
+        const resizeEntry = entries[0];
+        if (!resizeEntry) {
+            console.error(entries);
+            throw new Error(`${directiveName} observation triggered but the first entry was empty.`);
+        }
+        (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, { target: resizeEntry.target, contentRect: resizeEntry.contentRect });
+    }
+    update(partInfo, [callback]) {
+        (0, directive_util_1.assertsIsElementPartInfo)(partInfo, directiveName);
+        this.callback = callback;
+        const newElement = partInfo.element;
+        // if the element changes we need to observe the new one
+        if (newElement !== this.element) {
+            if (this.element) {
+                this.resizeObserver.unobserve(this.element);
+            }
+            this.resizeObserver.observe(newElement);
+            this.element = newElement;
+        }
+        return this.render(callback);
+    }
+    render(callback) {
+        return undefined;
+    }
+});

package/dist/cjs/functional-element/element-events.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEventDescriptorMap = exports.defineElementEvent = void 0;
+const typed_event_1 = require("../typed-event/typed-event");
+function defineElementEvent() {
+    return (0, typed_event_1.defineTypedEvent)();
+}
+exports.defineElementEvent = defineElementEvent;
+function createEventDescriptorMap(eventsInit) {
+    if (!eventsInit) {
+        return {};
+    }
+    return Object.keys(eventsInit)
+        .filter((currentElementEventKey) => {
+        if (typeof currentElementEventKey !== 'string') {
+            throw new Error(`Expected event key of type string but got type "${typeof currentElementEventKey}" for key ${currentElementEventKey}`);
+        }
+        if (currentElementEventKey === '') {
+            throw new Error(`Got empty string for events key.`);
+        }
+        return true;
+    })
+        .reduce((accum, currentElementEventKey) => {
+        const eventObject = (0, typed_event_1.defineTypedEvent)()(currentElementEventKey);
+        accum[currentElementEventKey] = eventObject;
+        return accum;
+    }, {});
+}
+exports.createEventDescriptorMap = createEventDescriptorMap;

package/dist/cjs/functional-element/element-properties.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPropertyDescriptorMap = exports.createPropertyProxy = void 0;
+function assertValidPropertyName(propertyName, propsInitMap, elementTagName) {
+    if (typeof propertyName !== 'string') {
+        throw new Error(`Property name must be a string, got type "${typeof propertyName}" from: "${String(propertyName)}" for ${elementTagName}`);
+    }
+    if (!(propertyName in propsInitMap)) {
+        throw new Error(`Property name "${propertyName}" does not exist on ${elementTagName}.`);
+    }
+}
+function createPropertyProxy(propsInitMap, element) {
+    if (!propsInitMap) {
+        return {};
+    }
+    const props = Object.keys(propsInitMap).reduce((accum, propertyName) => {
+        accum[propertyName] = element[propertyName];
+        return accum;
+    }, {});
+    const propsProxy = new Proxy(props, {
+        get: (_target, propertyName) => {
+            assertValidPropertyName(propertyName, propsInitMap, element.tagName);
+            return element[propertyName];
+        },
+        set: (_target, propertyName, value) => {
+            assertValidPropertyName(propertyName, propsInitMap, element.tagName);
+            element[propertyName] = value;
+            return true;
+        },
+    });
+    return propsProxy;
+}
+exports.createPropertyProxy = createPropertyProxy;
+function createPropertyDescriptorMap(propertyInit) {
+    if (!propertyInit) {
+        return {};
+    }
+    return Object.keys(propertyInit)
+        .filter((key) => {
+        if (typeof key === 'string') {
+            return true;
+        }
+        else {
+            throw new Error(`Property init cannot have non string keys: "${key}"`);
+        }
+    })
+        .reduce((accum, currentKey) => {
+        accum[currentKey] = {
+            propName: currentKey,
+            initValue: propertyInit[currentKey],
+        };
+        return accum;
+    }, {});
+}
+exports.createPropertyDescriptorMap = createPropertyDescriptorMap;

package/dist/cjs/functional-element/functional-element.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FunctionalElementBaseClass = void 0;
+const lit_1 = require("lit");
+class FunctionalElementBaseClass extends lit_1.LitElement {
+}
+exports.FunctionalElementBaseClass = FunctionalElementBaseClass;

package/dist/cjs/functional-element/render-callback.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRenderParams = void 0;
+const augment_vir_1 = require("augment-vir");
+function createRenderParams(element, eventsMap) {
+    const renderParams = {
+        /**
+         * These two dispatch properties do the same thing but their interfaces are different.
+         * DispatchEvent's type interface is much stricter.
+         */
+        dispatch: (event) => element.dispatchEvent(event),
+        genericDispatch: (event) => element.dispatchEvent(event),
+        setProps: (partialProps) => {
+            (0, augment_vir_1.getObjectTypedKeys)(partialProps).forEach((propKey) => {
+                element.instanceProps[propKey] = partialProps[propKey];
+            });
+        },
+        host: element,
+        props: element.instanceProps,
+        events: eventsMap,
+    };
+    return renderParams;
+}
+exports.createRenderParams = createRenderParams;

package/dist/cjs/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.requireAllCustomElementsToBeFunctionalElement = void 0;
+__exportStar(require("./functional-element/define-functional-element"), exports);
+__exportStar(require("./functional-element/directives/assign-with-clean-up.directive"), exports);
+__exportStar(require("./functional-element/directives/assign.directive"), exports);
+__exportStar(require("./functional-element/directives/directive-util"), exports);
+__exportStar(require("./functional-element/directives/listen.directive"), exports);
+__exportStar(require("./functional-element/directives/on-dom-created.directive"), exports);
+__exportStar(require("./functional-element/directives/on-resize.directive"), exports);
+__exportStar(require("./functional-element/element-events"), exports);
+__exportStar(require("./functional-element/element-properties"), exports);
+__exportStar(require("./functional-element/functional-element"), exports);
+__exportStar(require("./functional-element/render-callback"), exports);
+var require_functional_element_1 = require("./require-functional-element");
+Object.defineProperty(exports, "requireAllCustomElementsToBeFunctionalElement", { enumerable: true, get: function () { return require_functional_element_1.requireAllCustomElementsToBeFunctionalElement; } });
+__exportStar(require("./template-transforms/vir-css/vir-css"), exports);
+__exportStar(require("./template-transforms/vir-html/vir-html"), exports);
+__exportStar(require("./typed-event/typed-event"), exports);

package/dist/cjs/require-functional-element.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.requireAllCustomElementsToBeFunctionalElement = exports.functionalElementRequired = void 0;
+exports.functionalElementRequired = false;
+function requireAllCustomElementsToBeFunctionalElement() {
+    exports.functionalElementRequired = true;
+}
+exports.requireAllCustomElementsToBeFunctionalElement = requireAllCustomElementsToBeFunctionalElement;

package/dist/cjs/template-transforms/has-static-tag-name.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasStaticTagName = void 0;
+function hasStaticTagName(value) {
+    return (typeof value === 'function' &&
+        value.hasOwnProperty('tagName') &&
+        typeof value.tagName === 'string' &&
+        value.tagName.includes('-'));
+}
+exports.hasStaticTagName = hasStaticTagName;

package/dist/cjs/template-transforms/transform-template.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformTemplate = exports.getTransformedTemplate = exports.makeCheckTransform = void 0;
+const array_1 = require("../augments/array");
+function makeCheckTransform(name, check, transform) {
+    return {
+        name,
+        check,
+        transform,
+    };
+}
+exports.makeCheckTransform = makeCheckTransform;
+/**
+ * The transformed templates are written to a map so that we can preserve reference equality between
+ * calls. Without maintaining reference equality between html`` calls, lit-element reconstructs all
+ * of its children on every render.
+ *
+ * This is a WeakMap because we only care about the transformed array value as long as the original
+ * template array key exists.
+ */
+const transformedTemplateStrings = new WeakMap();
+function getTransformedTemplate(templateStringsKey, values, fallbackTransform) {
+    const alreadyTransformedTemplateStrings = transformedTemplateStrings.get(templateStringsKey);
+    const templateTransform = alreadyTransformedTemplateStrings !== null && alreadyTransformedTemplateStrings !== void 0 ? alreadyTransformedTemplateStrings : fallbackTransform();
+    if (!alreadyTransformedTemplateStrings) {
+        transformedTemplateStrings.set(templateStringsKey, templateTransform);
+    }
+    const transformedValuesArray = (0, array_1.filterOutArrayIndexes)(values, templateTransform.valueIndexDeletions);
+    return { strings: templateTransform.templateStrings, values: transformedValuesArray };
+}
+exports.getTransformedTemplate = getTransformedTemplate;
+function transformTemplate(inputTemplateStrings, inputValues, checksAndTransforms, assertValidString) {
+    const newStrings = [];
+    const newRaws = [];
+    const valueDeletions = [];
+    inputTemplateStrings.forEach((currentTemplateString, index) => {
+        var _a;
+        const lastNewStringsIndex = newStrings.length - 1;
+        const lastNewString = newStrings[lastNewStringsIndex];
+        const currentValueIndex = index - 1;
+        const currentValue = inputValues[currentValueIndex];
+        let validTransform;
+        assertValidString && assertValidString(currentTemplateString);
+        if (typeof lastNewString === 'string') {
+            validTransform = (_a = checksAndTransforms.find((checkAndTransform) => {
+                return checkAndTransform.check(lastNewString, currentTemplateString, currentValue);
+            })) === null || _a === void 0 ? void 0 : _a.transform;
+            if (validTransform) {
+                newStrings[lastNewStringsIndex] =
+                    lastNewString + validTransform(currentValue) + currentTemplateString;
+                valueDeletions.push(currentValueIndex);
+            }
+        }
+        if (!validTransform) {
+            newStrings.push(currentTemplateString);
+        }
+        const currentRawLitString = inputTemplateStrings.raw[index];
+        if (validTransform) {
+            newRaws[lastNewStringsIndex] =
+                newRaws[lastNewStringsIndex] + validTransform(currentValue) + currentRawLitString;
+        }
+        else {
+            newRaws.push(currentRawLitString);
+        }
+    });
+    const newTemplateStrings = Object.assign([], newStrings, {
+        raw: newRaws,
+    });
+    return {
+        templateStrings: newTemplateStrings,
+        valueIndexDeletions: valueDeletions,
+    };
+}
+exports.transformTemplate = transformTemplate;

package/dist/cjs/template-transforms/vir-css/css-transform.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformCssTemplate = void 0;
+const has_static_tag_name_1 = require("../has-static-tag-name");
+const transform_template_1 = require("../transform-template");
+const cssChecksAndTransforms = [
+    (0, transform_template_1.makeCheckTransform)('tag name css selector interpolation', (lastNewString, currentLitString, currentValue) => {
+        return (0, has_static_tag_name_1.hasStaticTagName)(currentValue);
+    }, (input) => 
+    // cast is safe because the check method above verifies that this value is a VirElement
+    input.tagName),
+];
+function transformCssTemplate(inputTemplateStrings, inputValues) {
+    return (0, transform_template_1.transformTemplate)(inputTemplateStrings, inputValues, cssChecksAndTransforms);
+}
+exports.transformCssTemplate = transformCssTemplate;

package/dist/cjs/template-transforms/vir-css/vir-css.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.css = void 0;
+const lit_1 = require("lit");
+const transform_template_1 = require("../transform-template");
+const css_transform_1 = require("./css-transform");
+function css(inputTemplateStrings, ...inputValues) {
+    const transformedTemplate = (0, transform_template_1.getTransformedTemplate)(inputTemplateStrings, inputValues, () => {
+        return (0, css_transform_1.transformCssTemplate)(inputTemplateStrings, inputValues);
+    });
+    const cssResult = (0, lit_1.css)(transformedTemplate.strings, 
+    /** The filter will remove the FunctionalElement elements */
+    ...transformedTemplate.values);
+    return cssResult;
+}
+exports.css = css;