dschau / css-in-js-playground

A simple playground for CSS in JS solutions

css-in-js-playground

A simple CodeMirror editor showcasing the various CSS in JS styling solutions. Content is previewed live from the editor, and various styling solutions can be swapped out to see how various code snippets look in each.

Currently supported libraries

• aphrodite
• cxs
• emotion
• fela
• glamorous
• inline-styles
• jss
• jsxstyle
• linaria
• radium
• react-jss
• styled-components
• styletron
• yocss

Credits

Stripe: their excellent form mockup served as the basis for each of the current form designs.

css-in-js-playground's Issues

No matching version found for @types/react-dom@next

Just got this error during installation

➜ css-in-js-playground git:(jss) npm i
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @types/react-dom@next
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'css-in-js-playground'
npm ERR! notarget

Statically render as much as possible at build time

https://github.com/markdalgleish/static-site-generator-webpack-plugin

Fix Deploy

Description of Issue

Cloudfront invalidation does not consider a tag as master, additionally killing the npm start task causes a failure in the logs (but is skipped) so would be nice to avoid that

Proposed Solution (if applicable)

• Consider deploying on every master push
• Fix the npm start task to gracefully quit

Note: PRs are always sincerely appreciated! If fixing an issue, simply do fixes #{COMMIT_NUMBER}, i.e. fixes #20, and Github will automatically close the issue when the PR is merged.

Thank you for your contribution(s)!

Clicking the SVG Icon does not toggle Select

This is what happens when you click the select dropdown directly on the svg icon.

This is the expected behavior

Make the preview an iFrame

Style tags are probably leaking

Fix issues with elements not showing (full height not setting) in Safari for the preview

Show errors in an error boundary from code editor

Add in Acorn parsing of AST generated by each file

Description of Issue

Proposed Solution (if applicable)

Note: PRs are always sincerely appreciated! If fixing an issue, simply do fixes #{COMMIT_NUMBER}, i.e. fixes #20, and Github will automatically close the issue when the PR is merged.

Thank you for your contribution(s)!

Only update an individual file in query params _when_ it differs from "master" record

Text in the menu is hard to see

Just a suggestion

Get hot module reloading fully working

Minify code for production

Any other enhancements, as well.

This includes dynamic importing, service workers, etc. etc.

Move add button to the right of the rightmost file on desktop

Fix service worker refresh

add google analytics (or any analytics)

Google Analytics would be a great addition, just so I can track on statistics, users, etc, etc.

API key is UA-102928446-1

Select options on Firefox on OSX are too light to read

Current behavior

Expected functionality

nano-css

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

Replace add button with cancel button

Cache stored content/state

e.g. if user modifies one of the examples, pop it in local storage (or perhaps URL params)

Make code backgrounds same as header colors

Description of Issue

Make the codemirror background the same as the header background

Add logo or link to repo/documentation for each of the libraries

This should stay in sync with the select button

Only update code snippet param when/if user makes a change

Error thrown by ErrorBoundary is not as descriptive as error thrown in console

Add in theming functionality to libraries that support it

Description of Issue

Theming is a big win in CSS in JS solutions; should build it in!

Proposed Solution (if applicable)

I'd create a theme.js with the relevant shared style code. From here, I'd use a ThemeProvider to share that theme between each child component

Note: PRs are always sincerely appreciated! If fixing an issue, simply do fixes #{COMMIT_NUMBER}, i.e. fixes #20, and Github will automatically close the issue when the PR is merged.

Thank you for your contribution(s)!

Add comments to explain some of the concepts (e.g. props, composition/extension, etc.)

Thanks for the idea @knittingcodemonkey

It would be great to add some succinct, simple comments when appropriate. I don't want to get too crazy and have comments for everything, but where appropriate (which is kinda hand-wave-y), some comments could be appreciated by end users.

Remove sidebar, and add header and footer

Lets add JSS

• jss
• react-jss
• styled-jss

Add ability to customize window/preview size (i.e. make draggable)

Description of Issue

Proposed Solution (if applicable)

Note: PRs are always sincerely appreciated! If fixing an issue, simply do fixes #{COMMIT_NUMBER}, i.e. fixes #20, and Github will automatically close the issue when the PR is merged.

Thank you for your contribution(s)!

Fix weird issue with Webpack loading thing twice

Add a reset button to each snippet

A reset button would be neat for each library. This should be a secondary color (i.e. grey), and should clear the form and reset the form state (disabling the submit button in the process) on click.

I started (but never finished) in the cancel-button branch

Integrate babel instead of buble

I liked using buble instead of babel for the ease of use/payload, however, some css-in-js libs (e.g. emotion) are only made possible with a babel plugin. Others still like glamor and styled-components receive significant improvements by opting in with the plugin, so... could be worth doing

Use a web worker to defer/offload component rendering to a separate thread

Allow for multi-file mode

Create an image meta tag (i.e. for Slack, Twitter, etc. previews)

Add a favicon/icon/branding/etc.

Add emotion

Lazy Load Snippets

Fix general performance issues

Should be able to get a relatively high score on Lighthouse, not an incredibly complex tool

Add Styletron

I believe Styletron would qualify for inclusion in this playground, correct?

Toggling light/dark mode resets saved snippets/code when it should not

Add "reload" button/alert for service workers

Get manifest.json loaded as a dep of html-webpack-plugin

I've had this working before, why is it not working now... tf

Integrate .travis.yml

Add better unit tests/test coverage