import { DOMElement , domElements } from '../utils/dom-elements' ; import styled , { AnyStyledComponent } from 'styled-components' ; import { getHydratedTemplateString } from '../utils/getHydratedTemplateString' ; const styledWrapper = ( tag ) => ( strings , ... expressions ) => { const hydratedTemplateString = getHydratedTemplateString ( strings ) ; return styled ( tag ) ( hydratedTemplateString , ... expressions ) ; } ; domElements . forEach ( ( domElement ) => { const proxyMethod = ( target , handler ) => { return new Proxy ( target , { apply ( attrTarget , thisArgs , args ) { const attrsFn = attrTarget . apply ( thisArgs , args ) ; return new Proxy ( attrsFn , handler ) ; } } ) ; } ; styledWrapper [ domElement ] = new Proxy ( styled [ domElement ] , { apply ( target , thisArg , args ) { const [ strings , expressions ] = args ; const hydratedTemplateString = getHydratedTemplateString ( strings ) ; return target . apply ( thisArg , [ hydratedTemplateString , expressions ] ) ; } , get ( target , attr ) { if ( attr === 'attrs' ) { return proxyMethod ( target . attrs , { apply : ( attrsFnTarget , thisArg , args ) => { const [ strings , expressions ] = args ; const hydratedTemplateString = getHydratedTemplateString ( strings ) ; return attrsFnTarget . apply ( thisArg , [ hydratedTemplateString , expressions ] ) ; } } ) ; } else if ( attr === 'withConfig' ) { return proxyMethod ( target . withConfig , { get ( target , attr ) { if ( attr === 'attrs' ) { return proxyMethod ( target . attrs , { apply ( target , thisArg , args ) { const [ strings , expressions ] = args ; const hydratedTemplateString = getHydratedTemplateString ( strings ) ; return target . apply ( thisArg , [ hydratedTemplateString , expressions ] ) ; } } ) ; } else { return target [ attr ] ; } } } ) ; } return target [ attr ] ; } } ) ; } ) ; export default styledWrapper ;