How to use the belter/src.toCSS function in belter

// A json based spec describing what kind of props the component accepts. This is used to validate any props before
        // they are passed down to the child.

        this.builtinProps = getInternalProps();
        this.props = options.props || {};

        // The dimensions of the component, e.g. { width: '300px', height: '150px' }

        var _ref = options.dimensions || {},
            _ref$width = _ref.width,
            width = _ref$width === undefined ? DEFAULT_DIMENSIONS.WIDTH : _ref$width,
            _ref$height = _ref.height,
            height = _ref$height === undefined ? DEFAULT_DIMENSIONS.HEIGHT : _ref$height;

        this.dimensions = { width: toCSS(width), height: toCSS(height) };

        this.defaultEnv = options.defaultEnv;
        this.url = options.url || options.buildUrl;
        this.domain = options.domain;
        this.bridgeUrl = options.bridgeUrl;

        this.attributes = options.attributes || {};
        this.contexts = options.contexts || { iframe: true, popup: false };
        this.defaultContext = options.defaultContext || CONTEXT.IFRAME;

        this.autoResize = _typeof(options.autoResize) === 'object' ? options.autoResize : { width: Boolean(options.autoResize), height: Boolean(options.autoResize), element: 'body' };

        this.containerTemplate = options.containerTemplate || defaultContainerTemplate;
        this.prerenderTemplate = options.prerenderTemplate || defaultPrerenderTemplate;

        this.validate = options.validate;

this.allowedParentDomains = options.allowedParentDomains || WILDCARD;

        if (Component.components[this.tag]) {
            throw new Error(`Can not register multiple components with the same tag`);
        }

        // A json based spec describing what kind of props the component accepts. This is used to validate any props before
        // they are passed down to the child.

        this.builtinProps = getInternalProps();
        this.props = options.props || {};

        // The dimensions of the component, e.g. { width: '300px', height: '150px' }

        let { width = DEFAULT_DIMENSIONS.WIDTH, height = DEFAULT_DIMENSIONS.HEIGHT } = options.dimensions || {};
        this.dimensions = { width: toCSS(width), height: toCSS(height) };

        this.defaultEnv = options.defaultEnv;
        this.url = options.url || options.buildUrl;
        this.domain = options.domain;
        this.bridgeUrl = options.bridgeUrl;

        this.attributes = options.attributes || {};
        this.contexts = options.contexts || { iframe: true, popup: false };
        this.defaultContext = options.defaultContext || CONTEXT.IFRAME;

        this.autoResize = (typeof options.autoResize === 'object')
            ? options.autoResize
            : { width: Boolean(options.autoResize), height: Boolean(options.autoResize), element: 'body' };

        this.containerTemplate = options.containerTemplate || defaultContainerTemplate;
        this.prerenderTemplate = options.prerenderTemplate || defaultPrerenderTemplate;

resize: function resize(_ref) {
        var width = _ref.width,
            height = _ref.height;


        if (width) {
            this.container.style.width = toCSS(width);
            this.element.style.width = toCSS(width);
        }

        if (height) {
            this.container.style.height = toCSS(height);
            this.element.style.height = toCSS(height);
        }
    },
    show: function show() {

event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
            if (typeof newWidth === 'number') {
                el.style.width = toCSS(newWidth);
            }

            if (typeof newHeight === 'number') {
                el.style.height = toCSS(newHeight);
            }
        });
    };

event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
            if (typeof newWidth === 'number') {
                div.style.width = toCSS(newWidth);
            }
    
            if (typeof newHeight === 'number') {
                div.style.height = toCSS(newHeight);
            }
        });

event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
            if (typeof newWidth === 'number') {
                div.style.width = toCSS(newWidth);
            }
    
            if (typeof newHeight === 'number') {
                div.style.height = toCSS(newHeight);
            }
        });

event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
            if (typeof newWidth === 'number') {
                el.style.width = toCSS(newWidth);
            }

            if (typeof newHeight === 'number') {
                el.style.height = toCSS(newHeight);
            }
        });
    };

resize: function resize(_ref) {
        var width = _ref.width,
            height = _ref.height;


        if (width) {
            this.container.style.width = toCSS(width);
            this.element.style.width = toCSS(width);
        }

        if (height) {
            this.container.style.height = toCSS(height);
            this.element.style.height = toCSS(height);
        }
    },
    show: function show() {