import { ResolvedDeclarations } from '@glitz/core' ; export type Options = { ignoreProperties ? : string | RegExp | ( string | RegExp ) [ ] ; } ; export let createDevToolTransformer = ( ) => declarations => declarations ; if ( process . env . NODE_ENV !== 'production' ) { if ( typeof document !== 'undefined' ) { const hyphenateRegex = /(?:^(ms|moz|webkit))|[A-Z]/g ; const propertyCache = { } ; const defaultIgnores = [ 'font-display' , 'src' , 'unicode-range' ] ; function hyphenateProperty ( property ) { return property in propertyCache ? propertyCache [ property ] : ( propertyCache [ property ] = property . replace ( hyphenateRegex , '-$&' ) . toLowerCase ( ) ) ; } const dummy = document . createElement ( 'div' ) . style ; function validateDeclaration ( property , fullValue ) { const [ value , priority ] = String ( fullValue ) . split ( /(?: !(important))$/ ) ; dummy . setProperty ( property , value , priority ) ; const isValid = dummy . length > 0 ; while ( dummy . length > 0 ) { dummy . removeProperty ( dummy [ dummy . length - 1 ] ) ; } return isValid ; } type AnyObject = { [ property ] : any ; } ; const issueValue = '%o' ; function issueFormatter ( message , object , highlight = { } ) { const issueArgs = [ ] ; const issueObject = { } ; for ( const key in object ) { const isIssue = key in highlight ; issueObject [ isIssue ? `%c${ key }%c` : key ] = isIssue ? issueValue : object [ key ] ; if ( isIssue ) { issueArgs . push ( 'font-weight: bold; text-decoration: underline' , 'font-weight: normal; text-decoration: none' , object [ key ] ) ; } } let block = JSON . stringify ( issueObject , null , 2 ) ; for ( const key in highlight ) { block = block . replace ( `  "%c${ key }%c": "${ issueValue }"` , `  %c"${ key }"%c: ${ issueValue }` ) ; } return [ `${ message }\n\n${ block }` , ... issueArgs ] ; } createDevToolTransformer = ( options = { } ) => { const ignores = defaultIgnores . concat ( options . ignoreProperties || [ ] ) ; return declarations => { const properties = Object . keys ( declarations ) ; for ( const property of properties ) { const hyphenatedProperty = hyphenateProperty ( property ) ; const value = declarations [ property ] ; if ( ! ignores . every ( ignore => ( typeof ignore === 'string' && ignore !== hyphenatedProperty ) || ( ignore instanceof RegExp && ! ignore . test ( hyphenatedProperty ) ) ) ) { continue ; } if ( Array . isArray ( value ) ) { for ( const entry of value ) { if ( ! validateDeclaration ( hyphenatedProperty , entry as string | number ) ) { console . warn ( ... issueFormatter ( `The browser ignored the CSS fallback value \`${ entry }\` in:` , declarations , { [ property ] : value , } ) ) ; } } } else if ( value ) { if ( ! validateDeclaration ( hyphenatedProperty , value ) ) { console . warn ( ... issueFormatter ( `The browser ignored the CSS in:` , declarations , { [ property ] : value , } ) ) ; } } } return declarations ; } ; } ; } } export default createDevToolTransformer ( ) ;