aphrodite
aphrodite copied to clipboard
Khan
Don't work well with production build of React
When using aphrodite with production build of React, the style extensions are doesn't works well.
Some of exported styles are Object.
I can't find out how to resolve this problem.
Environment
Code
import { StyleSheet } from 'aphrodite/no-important'
const GLOBALS = '__GLOBAL_STYLES__'
const globalExtension = {
selectorHandler: (selector: string, baseSelector: string, generateSubtreeStyles: any) =>
baseSelector.includes(GLOBALS) ? generateSubtreeStyles(selector) : null)
}
// @ts-ignore
const extended = StyleSheet.extend([globalExtension])
// normalize
const styles = extended.StyleSheet.create({
[GLOBALS]: {
html: {
...styles...
},
}
})
export default extended.css(styles[GLOBALS])
CASE: Development build
html{height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-
style:scrollbar;-webkit-tap-highlight-color:transparent;}body{height:100%;font-size:1rem;font-
family:"Gotham SSm A","Gotham SSm B",-apple-system,BlinkMacSystemFont,Hiragino Sans,"Hiragino
Kaku Gothic ProN","Original Yu Gothic","Yu Gothic",Meiryo,sans-serif;font-
weight:normal;margin:0px;text-align:left;background-color:white;color:#3B434B;overflow-
y:scroll;}#main{height:100%;}*, *::before, *::after{-moz-box-sizing:border-box;box-sizing:border-
box;}h1, h2, h3, h4, h5, h6{line-height:1.25;margin:0px;margin-bottom:1em;}ul{list-
style:none;padding:0px;margin:0px;}p{font-size:.875rem;line-height:1.75;margin:0px;margin-
bottom:1em;}@media (min-width: 992px){p{font-size:1rem;}}a{text-decoration:none;}a,
button{outline:none;}table{border-collapse:collapse;}img{vertical-align:middle;}
CASE: Production build
._ul6ryz{html:[object Object];body:[object Object];#main:[object Object];*, *::before, *::after:[object
Object];h1, h2, h3, h4, h5, h6:[object Object];ul:[object Object];p:[object Object];a:[object Object];a,
button:[object Object];table:[object Object];img:[object Object];}._1owj03d{background-
image:url("/assets/images/backgrounds/onbord.jpg") !important;}.om:...
