Integration with hyperscript?

[pyrossh]

I'm trying to use this with hyperscript which is used in https://github.com/skatejs/skatejs but it seems its not populating the style tag in head?

var styles = {
  navigation: style({
    fontSize: '15px',
    width: '20em',
    height: '100%',
    color: 'white',
    background: `rgba(0, 0, 0, 1)`,
    position: 'fixed',
    top: '0',
    right: '0',
    bottom: '0',
    zIndex: '2000',
    transition: 'right 0.3s ease-in-out 0s',
  }),
}

skate.h('div', styles.navigation, 'hello')

This is how it looks,

[threepointone]

yes, glamor doesn't have first class support for web components/iframes yet. working on it for v3 though.

[threepointone]

so what's happening here because you're using te minified version, is it is populating in head tag, but using CSSOM so it won't show in the elements tree. further, since it's inside this shadow dom thing, the head css doesn't affect it iirc.

[threepointone]

duplicate of #38

[treshugart]

Can confirm ^

You need to use the cssFor named export for your styles:

import { cssFor, style } from 'glamor';

// your styles
const css = style({ ... });

// and later in renderCallback()...
<style>{cssFor(css)}</style>
<div {...css} />