Styles in head but not rendered in Component

Hello!

I just started using Glamor, converting from Aphrodite and was looking to take advantage of the aphrodite shim. In my React Storybooks, everything is working properly, but when I render in my app that mixes (css and css-in-js) I see that my components have the className hash (css-foo) and can find the same hash in the style tag on Head, but the styles aren't rendered in my component!

So then I tried the normal style() api and everything worked.

Any idea what my problem could be?

Not sure exactly. Do you have a gist / sample code?

Sure!

Here's the component

import { style, merge } from 'glamor'
import { css, StyleSheet } from 'glamor/aphrodite';

const styleSheet = style({
  color: 'blue',
});

const aphroditeStyle = StyleSheet.create({
  title: {
    color: 'red',
    fontWeight: 'bold',
  },
  subtitle: {
    textAlign: 'center',
  },
});

function HelloWorld() {
  return (
    <div>
      // does work
      <p className={aphroditeStyle.title}>Hi</p>
     // does not work
      <p className={css(aphroditeStyle.title)}>Hi</p>
      // does not work
      <p className={css(aphroditeStyle.title, aphroditeStyle.subtitle)}>Hi</p>
      // works
      <h1 className={styleSheet}>Hello World</h1>
    </div>
  );
}

Seems like the merge function is the culprit! But doesn't make sense why everything would work in a storybook

your code seems to work for me. also this seems to be errant?

const styleSheet = style({
  color: 'blue',
});

please try the latest version

After upgrading, glamor is throwing an error here

glamor/src/autoprefix.js

Line 11 in fdd60d7

return obj.indexOf(search) !== -1

Uncaught TypeError: obj.indexOf is not a function

Possibly something messed up in a css function somewhere?

Can you tell me what style threw that error?

Ah okay this was the error (probably left over syntax from our aphrodite setup)

var opacityFadeIn = {
  'from': {
    opacity: 0,
  },
  'to': {
    opacity: 1,
  },
};

var foo = StyleSheet.create({
  animationName: opacityFadeIn,
  animationDuration: '2s',
});

yeah, the aphrodite shim doesn't handle animations and fonts in a fully compatible way. I'll try to get a better error message in, cheers. all else working for you?

Yes we are in business! Thank you!!

cheers, let me know if I can help you with anything else.