nano-css about css-in-js-playground HOT 10 OPEN

from css-in-js-playground.

@streamich I attempted to add this dependency, but I'm running into some issues with some addons, specifically addonKeyframes (import {addon as addonKeyframes} from 'nano-css/addon/keyframes').

I receive the following error in my console:

Error: Addon "keyframes" is missing the following dependencies:
 require("nano-css/addon/putRaw").addon(renderer);
 require("nano-css/addon/put").addon(renderer);

neither of those files exist in the node_modules/nano-css/addon directory.

from css-in-js-playground.

put and putRaw addons are set on nano instance automatically. Can you please share the code where you apply the keyframes addon?

It should be something like this:

import {create} from 'nano-css';
import {addon as addonKeyframes} from 'nano-css/addon/keyframes';

const nano = create();

addonKeyframes(nano);

from css-in-js-playground.

Hmm... you're right! I just copied the code from https://github.com/streamich/nano-css/blob/HEAD/docs/Installation.md, so it must be something with my setup.

Will investigate! Here's a CodeSandbox demonstrating that the issue does not occur.

from css-in-js-playground.

Any luck?

from css-in-js-playground.

Hi! Sort of...

So nano-css does things a bit differently than most other libraries, and seems to be basically require a helper file (that adds all the addons to the nano instance).

Unfortunately, how CSS in JS Playground works is that it basically mimics local imports, and doesn't have full support for import/export so it's a bug fix I'll have to make to support it.

Shouldn't take me too much longer.

from css-in-js-playground.

You could use my in-memory file system to hold files memfs; and then you would have to implement your custom require function. That would basically mimic NodeJS environment.

from css-in-js-playground.

Would that work in the browser.. ?

from css-in-js-playground.

Yes it will 🙃

So basically I've done something semi-similar, I use URL encoded params to hold the data and replace export default with a new Function() that returns. So I can get this working one way or another!

from css-in-js-playground.

Well then just keep it your way. But if you will use an in-memory file system, you will need to write your own require function, which is module module in Nodejs. I have done that, long time ago, this is what it looked like: https://github.com/streamich/portable-bundle-browser-micro/tree/master/lib

But that's I guess too complex fo this project.

from css-in-js-playground.