Comments (10)
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.
Related Issues (20)
- Add in Acorn parsing of AST generated by each file
- Add Styletron HOT 4
- Add in theming functionality to libraries that support it
- Add ability to customize window/preview size (i.e. make draggable)
- Create an image meta tag (i.e. for Slack, Twitter, etc. previews)
- add google analytics (or any analytics) HOT 3
- Lazy Load Snippets
- Allow for multi-file mode
- Add a favicon/icon/branding/etc.
- Fix service worker refresh
- Only update an individual file in query params _when_ it differs from "master" record
- Replace add button with cancel button
- Move add button to the right of the rightmost file on desktop
- Add logo or link to repo/documentation for each of the libraries
- Clicking the SVG Icon does not toggle Select
- Select options on Firefox on OSX are too light to read
- Make code backgrounds same as header colors
- Fix Deploy
- Text in the menu is hard to see HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from css-in-js-playground.