• Stars
    star
    160
  • Rank 234,703 (Top 5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Transform between CSS, JS Objects and JSX props

CSS to JS

All Contributors

Coverage

Transform between CSS, JS Objects and JSX props.

We're all doing CSS-in-JS these days, but there doesn't seem to be a real consensus on the best way to do it. Some people like writing plain old CSS, template literals, object styles and others write styles as props on their React components.

To help ease the transition between those different forms, we've made a tool that transforms the code for you.

Run locally

Fork the repo then:

git clone [email protected]:<YOUR-USERNAME>/css-to-js.git
cd css-to-js
yarn
yarn start

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Sara Vieira

🤔 💻 🎨

Nimo Beeren

💻 🤔 📆 🚇

Firmino Alves

💻

Nathan Thorpe

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

More Repositories

1

fiddly

Create beautiful and simple HTML pages from your Readme.md files
JavaScript
1,008
star
2

awesome-talks

Awesome Talks Curated By the Community
JavaScript
810
star
3

make-frontend-shit-again

Vue
748
star
4

starter-book

A book starter to kickstart your writing journey 🎉
JavaScript
336
star
5

postcss-caralho

PostCSS plugin for that changes curse words after ! to !important because why not ?
JavaScript
242
star
6

styled-loaders

Loaders Built with Preact and Styled Components
JavaScript
210
star
7

styled-flex-component

Flex Element for not writing any more custom flex styles because fuck that
JavaScript
209
star
8

svg-to-jsx

Figma plugin to copy svg as a react component
HTML
194
star
9

react-social-sharing

React Implementation of @mxstbr https://sharingbuttons.io
JavaScript
172
star
10

awesome-female-workshop-leads

Awesome female workshop leads in the programming community
154
star
11

apollo-link-state-example

JavaScript
99
star
12

next-fullstack-starter

A nextjs full stack starter for your dreams
TypeScript
84
star
13

magic-instruments

Magic Instruments .- Play music with the world
HTML
83
star
14

prism-theme-night-owl

A port of the popular VSCode theme Night Owl by Sarah Drasner to prism.
CSS
81
star
15

cssx

CSS in MDX
JavaScript
80
star
16

magic-piano

Magic Piano - Play piano with the world
76
star
17

useClippy

Put your clippy in your react app as hook because why not?
TypeScript
72
star
18

stop-microspending

Seriously I need to stop
JavaScript
70
star
19

tld.party

Damn, that's a lot of TLD
Vue
70
star
20

blender-resources

A list of resources and tools that have helped me learn blender
JavaScript
70
star
21

svg-to-jsx-electron

Transform SVG to JSX
JavaScript
69
star
22

graphql-portfolio

Personal Website
JavaScript
62
star
23

blender-to-the-web

JavaScript
59
star
24

webpack.wtf

WTF moments in Webpack
JavaScript
44
star
25

open-source-stickers

Stickers made by the community that anyone can download and print
39
star
26

rick-morty-random-episode

Get a random Rick and Morty Episode
JavaScript
39
star
27

curse-words

Words shared between babel-caralho and postcss-caralho
JavaScript
37
star
28

should-i-use-react-or-vue

Play to find out
JavaScript
36
star
29

worldcup-graphql

A GraphQL endpoint for the world cup data because why not ?
JavaScript
35
star
30

graphiql-material-theme

Material Theme for the GraphiQL IDE
CSS
33
star
31

letslearngraphql.com

Website for the GraphQL Workshop
JavaScript
32
star
32

stuff-i-use

Ruby
32
star
33

pixler

Convert any image into pixel "art"
JavaScript
31
star
34

movie-mash

A self hosted movie tracker
TypeScript
30
star
35

npmdrinkinggame.party

CSS
30
star
36

BURNITDOWN

Shows an explosion when a page has more than one tracker on the page
JavaScript
28
star
37

airportsnear.me

Find airports near you or any location you input
JavaScript
28
star
38

uirecord

A UI to manage your Meilisearch instances
JavaScript
28
star
39

mother

Why use lorem when you can use random reviews from mother! ?
JavaScript
26
star
40

99-problems-graphql-aint-one

Talk for LvivJS 2018
JavaScript
25
star
41

bake-component

A CLI for generating several types of react components.
JavaScript
23
star
42

css-to-my-html

Vue
22
star
43

ui-libraries

Do you like writing the same components over and over again? Neither do I
21
star
44

prism-theme-converter

VSCode to prism theme converter
JavaScript
21
star
45

caninameit

A cli tool to help you see a npm name is already taken because this a problem now 😱
JavaScript
20
star
46

emoji-list

Created with CodeSandbox
JavaScript
19
star
47

styleguide-driven-development

Slides
JavaScript
18
star
48

booking-lite

Make booking bearable
CSS
17
star
49

preact-cli-plugin-flow

Use flow with the Preact CLI
JavaScript
17
star
50

graphql-simple-server-tutorial

JavaScript
16
star
51

preact-cli-postcss

Removes default postcss config and instead will use postcss.config.js
JavaScript
16
star
52

styled

The styled-components `preact-cli` template.
JavaScript
15
star
53

lint.ninja

"Make Linting great again" - @okonet
JavaScript
14
star
54

upleveled-css-in-react

Sandboxes and Resources
14
star
55

parcel-preact

Minimal Parcel Preact Test
JavaScript
14
star
56

obsidian-notes-publish-plugin

An Obsidian plugin to publish your notes
CSS
13
star
57

shitty-horror-movie.club

JavaScript
13
star
58

ArrayFTW

Website for the coming soon of array ftw
JavaScript
13
star
59

30-30

30 React Components in 30ish days
JavaScript
12
star
60

storybook-boilerplate

Boilerplate for Storybook
JavaScript
12
star
61

webdev.wtf

CSS
11
star
62

dumb-ideas-generator

JavaScript
11
star
63

blender-to-web-v2

JavaScript
10
star
64

vue-graphql-love

Presentation about Vue + GraphQL and Apollo
JavaScript
10
star
65

babel-plugin-caralho

Babel plugin for writing curse words instead of important because reasons
JavaScript
10
star
66

css-generators

A list of CSS generators to making cool shit with CSS easier.
Vue
10
star
67

random-simpsons-episode

Gives you a random simpsons episode to watch on your bored days
CSS
10
star
68

isthereuber-native

JavaScript
9
star
69

react-payment-request

JavaScript
9
star
70

fuck-this-thing

JavaScript
9
star
71

lets-play-retro-games

All the retro games you can dream off
TypeScript
8
star
72

react-jsonbox

React wrapper to use jsonbox easily
JavaScript
8
star
73

speaker-info

Speaker info Maker so you don't have to google yourself
Vue
8
star
74

brainfork

A podcast about tech and mental heath.
Vue
8
star
75

build-dumb-sht

JavaScript
8
star
76

next-starter-template

My NextJS Starter with NextAuth, Tailwind & prisma
TypeScript
8
star
77

meme-website

New meme website - HOOOKS
JavaScript
8
star
78

react-styleguidist-boilerplate

Boilerplate for React Styleguidist
JavaScript
8
star
79

micro-netlify

A tiny microservice that makes adding authentication with Netlify to your application easy.
JavaScript
7
star
80

preact-cli-lodash

Minify your build when using lodash and preact-cli
JavaScript
7
star
81

all-airports

JavaScript
7
star
82

rust-for-all

Rust
7
star
83

programming-misconceptions

Pogramming Misconceptions
7
star
84

stop-div-fest

JavaScript
7
star
85

razzle-apollo-live

JavaScript
6
star
86

gcal-link

Create Google Calendar Links
JavaScript
6
star
87

human-blahaj

Want to see blåhaj's doing human things?
JavaScript
6
star
88

randomoji

GET A RANDOM EMOJI
JavaScript
6
star
89

flo-to-drip

Convert Flo exported data to Drip
JavaScript
6
star
90

useless-api

An API for useless facts because why not
JavaScript
6
star
91

jsonbox

JavaScript
5
star
92

Flexy

A simple yet customisable flexbox grid
CSS
5
star
93

imadethis.xyz

"Useless is not worthless" - @charliegerard
JavaScript
5
star
94

worst-movies-list

Created with CodeSandbox
Vue
5
star
95

coffee-tracker

A coffee tracker for coffee snobs like me
JavaScript
5
star
96

IsometricModelStarter

JavaScript
4
star
97

Kanye-Weast

Created with CodeSandbox
Vue
4
star
98

rssx

A minimalistic RSS reader
TypeScript
4
star
99

personal-site

JavaScript
4
star
100

css-blocks

JavaScript
4
star