nano-css

[streamich]

What are your thoughts on adding nano-css? I could possibly submit a PR.

[DSchau]

I would love to! I just saw this library yesterday, but I could get to it tonight probably! Otherwise PRs very welcome!

…

On Mar 19, 2018, 5:06 AM -0500, Va Da ***@***.***>, wrote: What are your thoughts on adding nano-css? I could possibly submit a PR. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[DSchau]

@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.

[streamich]

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);

[DSchau]

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.

[streamich]

Any luck?

[DSchau]

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.

[streamich]

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.

[DSchau]

Would that work in the browser.. ?

[DSchau]

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!

[streamich]

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.