Error while running examples about aphrodite HOT 19 CLOSED

It looks like the package.json in the examples dir is missing asap (and inline-style-prefix-all) as dependencies?

from aphrodite.

You could install them manually.

Or, if you have the entire aphrodite repo on disk you can npm install in the root dir before npm install in the examples dir. This should make asap (and inline-style-prefix-all) locatable.

from aphrodite.

I've installed asap and inline-style-prefix-all after the error. and It persisted.

from aphrodite.

Also, are the animations (keyframe) working? I've tested it here, and got no animations.

from aphrodite.

I just ran

git clone [email protected]:Khan/aphrodite.git
cd aphrodite
npm install
cd examples
npm install
npm run examples

and was able to view the working examples (including animations).

Maybe try a fresh clone and install?

from aphrodite.

Indeed, it works. But if you npm install --save aphrodite on a project, and import { StyleSheet, css } from 'aphrodite';, it doesn't.

from aphrodite.

Looks like that the files provided by npm install are outdated. I replaced the files and import { StyleSheet, css } from '../../../node_modules/aphrodite/dist/aphrodite.js'; and it worked

from aphrodite.

@KadoBOT it sounds like there are 2 errors here

We should add asap and inline-style-prefixer to the examples package.json, that should fix the original problem of not being able to run the examples.

It sounds like you're having a separate problem though? When you say "import { StyleSheet, css } from 'aphrodite'; doesn't work", what do you mean?

from aphrodite.

If you compare the files here from the github repo, and the files generated by the npm install aphrodite you will see that they are different, and keyframes does not work with the npm install.
I've replaced the files from the npm install with the files from this repo and it still didn't worked. After I've changed import { StyleSheet, css } from 'aphrodite'; to import { StyleSheet, css } from '../../../node_modules/aphrodite/dist/aphrodite.js'; the animation, with keyframes started to work.
Btw, it would be good if keyframes allow percentage. Right now it only accepts fixed pixel values.

from aphrodite.

@KadoBOT that's because we haven't done a publish in a while. I'll do a publish now.

from aphrodite.

Okay, I published. The new version should support keyframes.

What do you mean by Btw, it would be good if keyframes allow percentage. Right now it only accepts fixed pixel values.?

from aphrodite.

Thanks @xymostech I've created a React boilerplate that uses Aphrodite. So I'll be glad if you guys keep npm update :D

About the keyframes and percentage:
Works:

    'from': {
        height: 0
    },
    'to': {
        height: 276
    }

Does not work:

    'from': {
        height: '0%'
    },
    'to': {
        height: '100%'
    }

from aphrodite.

@KadoBOT that's a problem with CSS, not aphrodite! :(

from aphrodite.

Yeah, you are right. Thanks for updating the NPM 👯

from aphrodite.

Hey @xymostech one more thing:

Animation Works:
import { css } from 'aphrodite/dist/aphrodite';

Animation Doesn't work:
import { css } from 'aphrodite';

from aphrodite.

@KadoBOT what are you seeing that isn't working?

from aphrodite.

I have an animation that only works if I import like the first example I gave you.

const keyframes = {
  '0%': {fontSize: 12},
  '50%': {fontSize: 16},
  '100%': {fontSize: 12}
};
    animate: {
      animation: 'x 6s ease 0s infinite',
      animationName: keyframes
    }

from aphrodite.

They both work for me. Can you make sure you're using the new version of aphrodite?

from aphrodite.

Isn't recommended to change the package version? My files weren't updated because the package have the same version number as before. had to delete folder, and install again.

I deleted the folder, and did another npm install and it worked. Thanks again.

from aphrodite.