Не работайте хорошо с производственной сборкой React - PullRequest
Новая
       26

Не работайте хорошо с производственной сборкой React

0 голосов
/ 22 ноября 2018

При использовании aphrodite с производственной сборкой React расширения стиля работают не очень хорошо.Некоторые из экспортируемых стилей Object.

Я не могу найти решение этой проблемы.

Среда

  • Aphrodite@0.5.6
  • React@16.4.1
  • TypeScript@2.7.1

Код 

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: сборка для разработки 

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: сборка для производства 

._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:...
...