├── ReadmeSrc
├── .env_example
├── scripts
│ ├── updateData.js
│ └── fetchData.js
├── img
│ ├── info.svg
│ ├── download.svg
│ ├── tag.svg
│ └── star.svg
├── Readme.js
├── package.json
├── Readme.md
├── Rows.js
└── yarn.lock
├── es-css-modules
├── .babelrc
├── index.html
├── button.js
├── button.css
├── package.json
└── gulpfile.babel.js
├── stylable
├── .babelrc
├── index.html
├── button.js
├── button.st.css
├── webpack.config.js
├── package.json
└── main.css
├── pre-style
├── _vars.scss
├── app.scss
├── .babelrc
├── PreStyleConfig.js
├── index.html
├── webpack.config.js
├── button.js
└── package.json
├── cxs
├── .babelrc
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── linaria
├── .babelrc
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── .gitignore
├── webpage
├── public
│ ├── favicon.ico
│ ├── manifest.json
│ └── index.html
├── src
│ ├── App.test.js
│ ├── index.js
│ ├── components
│ │ ├── Navbar.js
│ │ ├── Filter.js
│ │ ├── Seo.js
│ │ └── Table.js
│ ├── App.js
│ └── registerServiceWorker.js
├── .gitignore
└── package.json
├── .prettierrc
├── react-css-components
├── .babelrc
├── index.html
├── webpack.config.js
├── button.js
├── styles.react.css
└── package.json
├── babel-plugin-pre-style
├── PreStyleConfig.js
├── atomic.css
├── index.html
├── webpack.config.js
├── atomic.css.classNames.js
├── package.json
└── button.js
├── babel-plugin-css-in-js
├── .babelrc
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── stilr
├── makefile
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── aphrodite
├── bootstrap.js
├── webpack.config.js
├── index.html
├── other
│ └── generate-css-file.js
├── package.json
└── button.js
├── style-it
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── j2c
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── css-ns
├── css-ns.js
├── webpack.config.js
├── index.html
├── button.js
├── package.json
└── button.css
├── cssobj
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── react-jss
├── webpack.config.js
├── index.html
├── jss.js
├── package.json
└── button.js
├── smart-css
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── classy
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── csjs
├── webpack.config.js
├── index.html
├── button.js
├── package.json
└── styles.js
├── electron-css
├── index.html
├── webpack.config.js
├── package.json
└── index.js
├── freestyler
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── nano-css
├── index.html
├── nano.js
├── webpack.config.js
├── package.json
└── button.js
├── radium
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── css-light
├── index.html
├── webpack.config.js
├── base.js
├── package.json
└── button.js
├── hiccup-css
├── webpack.config.js
├── index.html
├── button.js
├── package.json
└── styles.js
├── react-css-builder
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── react-inline-css
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── react-inline-style
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── react-look
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── react-statics-styles
├── webpack.config.js
├── index.html
├── gulpfile.js
├── package.json
└── button.jsx
├── react-theme
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── glamor
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── react-free-style
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── react-native-web
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── react-stylematic
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── scope-styles
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── emotion
├── index.html
├── button.emotion.css
├── webpack.config.js
├── package.json
└── button.js
├── glamorous
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── jsxstyle
├── index.html
├── webpack.config.js
├── button.js
└── package.json
├── reactcss
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── restyles
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── typestyle
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── uranium
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── cssx-loader
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── react-styl
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── styled-jsx
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── superstyle
├── index.html
├── webpack.config.js
├── button.js
└── package.json
├── css-constructor
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── i-css
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── bloody-react-styled
├── index.html
├── webpack.config.js
├── button.css
├── button.js
└── package.json
├── styled-components
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── stile-react-media-queries
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── react-fela
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── react-vstyle
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── styling
├── index.html
├── button.js
├── button.styling.js
├── webpack.config.js
└── package.json
├── css-loader
├── index.html
├── button.js
├── button.css
├── webpack.config.js
└── package.json
├── hyperstyles
├── index.html
├── button.css
├── webpack.config.js
├── button.js
└── package.json
├── react-style
├── index.html
├── webpack.config.js
├── package.json
└── button.js
├── react-inline
├── index.html
├── package.json
└── button.js
├── styletron-react
├── webpack.config.js
├── index.html
├── package.json
└── button.js
├── react-styleable
├── index.html
├── button.css
├── button.js
├── webpack.config.js
└── package.json
├── react-css-modules
├── index.html
├── button.css
├── button.js
├── webpack.config.js
└── package.json
├── react-cssom
├── index.html
├── webpack.config.js
├── button.css
├── package.json
└── button.js
├── .travis.yml
└── LICENSE
/ReadmeSrc/.env_example:
--------------------------------------------------------------------------------
1 | GITHUB_TOKEN = YOURKEY
--------------------------------------------------------------------------------
/es-css-modules/.babelrc:
--------------------------------------------------------------------------------
1 | { "presets": ["es2015", "react"] }
2 |
--------------------------------------------------------------------------------
/stylable/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env", "react"]
3 | }
4 |
--------------------------------------------------------------------------------
/pre-style/_vars.scss:
--------------------------------------------------------------------------------
1 | //Sass Variables
2 | $bgc: #ff0000;
3 | $hoverBgc: #fff;
4 |
--------------------------------------------------------------------------------
/cxs/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015",
4 | "react"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/linaria/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "env",
4 | "react"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | lib/
2 | node_modules/
3 | bundle.css
4 | bundle.js
5 | .idea
6 | .vscode
7 | .env
--------------------------------------------------------------------------------
/webpage/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MicheleBertoli/css-in-js/HEAD/webpage/public/favicon.ico
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "bracketSpacing": false,
4 | "semi": false,
5 | "printWidth": 80
6 | }
7 |
--------------------------------------------------------------------------------
/react-css-components/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | presets: ['es2015', 'react'],
3 | plugins: ['transform-object-rest-spread']
4 | }
5 |
--------------------------------------------------------------------------------
/pre-style/app.scss:
--------------------------------------------------------------------------------
1 | @import 'vars'; // Can be used in Pre-Style with "prependedFiles" option
2 | @import 'atomic'; // <- Generated by Pre-Style
3 |
--------------------------------------------------------------------------------
/pre-style/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react"],
3 | "plugins": [
4 | ["pre-style", { "config": "PreStyleConfig.js" }]
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/babel-plugin-pre-style/PreStyleConfig.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | destination: './',
3 | outputFile: 'atomic.css',
4 | nameSpaces: ['styled'],
5 | };
6 |
--------------------------------------------------------------------------------
/babel-plugin-css-in-js/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015",
4 | "react"
5 | ],
6 | "plugins": [
7 | "css-in-js"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/stilr/makefile:
--------------------------------------------------------------------------------
1 | extract-styles:
2 | @node -p "require('babel/register')({ignore: false});; var s = require('stilr'); require('./button.js'); s.render()" > ./bundle.css
3 |
--------------------------------------------------------------------------------
/pre-style/PreStyleConfig.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | destination: './',
3 | outputFile: '_atomic.scss',
4 | prependedFiles: ['_vars.scss'],
5 | nameSpaces: ['styled'],
6 | };
7 |
--------------------------------------------------------------------------------
/aphrodite/bootstrap.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom'
3 | import Button from './button';
4 |
5 | ReactDOM.render(Electron-css - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/freestyler/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | css-light - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/nano-css/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | nano-css - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/radium/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel?stage=0'
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/csjs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | csjs - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/css-light/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | css-light - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/css-light/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel?stage=0'
7 | }]
8 | }
9 | };
10 |
--------------------------------------------------------------------------------
/cxs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | cxs - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/hiccup-css/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel?stage=0'
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/j2c/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | j2c - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/react-css-builder/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel'
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/react-inline-css/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel'
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/react-inline-style/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel'
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/react-look/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel?stage=0'
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/react-statics-styles/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(bower_components)/,
6 | loader: 'babel?stage=0'
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/react-theme/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel?stage=0'
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/classy/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | classy - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/glamor/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | glamor - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/radium/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | radium - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/react-free-style/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel?stage=0'
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/react-native-web/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel?stage=0'
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/react-stylematic/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel?stage=0'
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/scope-styles/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel?stage=0'
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/aphrodite/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | aphrodite - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/emotion/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | emotion - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/glamorous/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | glamorous - CSS in JS
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/jsxstyle/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jsxstyle - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/pre-style/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Pre-Style - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/react-jss/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-jss - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/reactcss/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | reactcss - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/restyles/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | restyles - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/smart-css/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | smart-css - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/typestyle/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | TypeStyle - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/uranium/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | uranium - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/cssx-loader/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | cssx-loader - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/nano-css/nano.js:
--------------------------------------------------------------------------------
1 | import {create} from 'nano-css';
2 | import {addon as addonRule} from 'nano-css/addon/rule';
3 |
4 | const nano = create();
5 |
6 | addonRule(nano);
7 |
8 | const {rule} = nano;
9 |
10 | export {
11 | rule
12 | };
13 |
--------------------------------------------------------------------------------
/react-look/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-look - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/react-styl/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-styl - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/react-theme/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-theme - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/reactcss/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loaders: ['babel', 'react-map-styles']
7 | }]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/styled-jsx/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | styled-jsx - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/superstyle/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | superstyle - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/scope-styles/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | scope-styles - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/css-constructor/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | css-constructor - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/hiccup-css/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | @thi.ng/hiccup-css - CSS in JS
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/i-css/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | i-css - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/react-free-style/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-free-style - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/react-inline-css/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-inline-css - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/react-stylematic/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-stylematic - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/webpage/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 |
5 | it("renders without crashing", () => {
6 | const div = document.createElement("div");
7 | ReactDOM.render(bloody-react-styled - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/react-css-builder/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-css-builder - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/react-inline-style/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-inline-style - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/styled-components/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | styled-components - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/react-css-components/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-css-components - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/cssobj/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | cssobj - CSS in JS
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/cxs/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 |
3 | module.exports = {
4 |
5 | module: {
6 | loaders: [{
7 | test: /\.jsx?$/,
8 | exclude: /(node_modules|bower_components)/,
9 | loader: 'babel'
10 | }]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/react-styl/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel'
7 | }]
8 | },
9 | node: {
10 | fs: 'empty'
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/style-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Style It - CSS in JS
5 |
6 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/stile-react-media-queries/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | stile + react-media-queries - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/css-ns/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | css-ns - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/react-fela/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-fela - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/react-vstyle/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-vstyle - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/stilr/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | stilr - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/linaria/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | linaria - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/stylable/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | stylable - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/styling/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | styling - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/css-loader/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | css-loader - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/hyperstyles/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | hyperstyles - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/i-css/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /(\.jsx|\.js)$/,
5 | loader: 'babel',
6 | exclude: /(node_modules|bower_components)/,
7 | query: {
8 | presets: ['es2015', 'react']
9 | }
10 | }]
11 | }
12 | };
--------------------------------------------------------------------------------
/react-fela/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.js$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel',
7 | query: {
8 | presets: ['es2015', 'react']
9 | }
10 | }]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/react-style/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-style - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/typestyle/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.js$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel',
7 | query: {
8 | presets: ['es2015', 'react']
9 | }
10 | }]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/uranium/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.js$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel',
7 | query: {
8 | presets: ['es2015', 'react']
9 | }
10 | }]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/react-inline/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-inline - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/react-vstyle/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel',
7 | query: {
8 | presets: ['es2015', 'react']
9 | }
10 | }]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/styletron-react/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.js$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel',
7 | query: {
8 | presets: ['es2015', 'react']
9 | }
10 | }]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/babel-plugin-pre-style/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | pre-style - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/glamorous/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [
4 | {
5 | test: /\.js$/,
6 | exclude: /node_modules/,
7 | loader: 'babel',
8 | query: {
9 | presets: ['env', 'react']
10 | }
11 | }
12 | ]
13 | }
14 | }
--------------------------------------------------------------------------------
/react-native-web/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React Native Web - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/react-styleable/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-styleable - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/styled-components/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.js$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel',
7 | query: {
8 | presets: ['es2015', 'react']
9 | }
10 | }]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/styletron-react/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | styletron-react - CSS in JS
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/react-css-modules/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-css-modules - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/es-css-modules/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | es-css-modules - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/react-statics-styles/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-statics-styles - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/babel-plugin-css-in-js/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | babel-plugin-css-in-js - CSS in JS
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/glamor/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [
4 | {
5 | test: /\.js$/,
6 | exclude: /(node_modules|bower_components)/,
7 | loader: 'babel',
8 | query: {
9 | presets: ['es2015', 'react']
10 | }
11 | }
12 | ]
13 | }
14 | }
--------------------------------------------------------------------------------
/react-cssom/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-cssom - CSS in JS
6 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/react-css-components/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.jsx?$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel',
7 | }, {
8 | test: /\.react.css$/,
9 | loader: 'babel!react-css-components/webpack',
10 | }]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/styled-jsx/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.js$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel',
7 | query: {
8 | presets: ['es2015', 'react'],
9 | plugins: ['styled-jsx/babel']
10 | }
11 | }]
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "8"
4 | cache: yarn
5 | install:
6 | - cd webpage
7 | - yarn
8 | script:
9 | - yarn build
10 | deploy:
11 | provider: pages
12 | skip_cleanup: true
13 | github_token: $GITHUB_TOKEN # Set in travis-ci.org dashboard
14 | on:
15 | branch: master
16 | local_dir: webpage/build
17 |
--------------------------------------------------------------------------------
/css-light/base.js:
--------------------------------------------------------------------------------
1 | import {Component} from 'react';
2 | import {css, inject} from 'css-light';
3 |
4 | export class Comp extends Component {
5 | componentWillMount() {
6 | if (this.css) {
7 | if (!this.css['@@once']) {
8 | this.css['@@once'] = 1;
9 | inject(css(this.css()));
10 | }
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/css-constructor/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [{
4 | test: /\.js$/,
5 | exclude: /(node_modules|bower_components)/,
6 | loader: 'babel',
7 | query: {
8 | presets: ['es2015', 'react'],
9 | plugins: ['transform-decorators-legacy']
10 | }
11 | }]
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/react-css-components/button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { Container, Button } from './styles.react.css';
4 |
5 | const Component = () => (
6 |
7 | Click me!
8 |
9 | );
10 |
11 | ReactDOM.render(
7 | Click me!
8 |
9 | );
10 | }
11 | });
12 |
13 | React.render(
8 | Click me!
9 |
10 | );
11 | }
12 | });
13 |
14 | React.render(
8 | Click me!
9 |
10 | );
11 | }
12 | });
13 |
14 | React.render(
8 | Click me!
9 |
10 | );
11 | }
12 | });
13 |
14 | React.render(
7 |
8 |
9 | Click me!
10 |
11 |
12 |
8 | Click me!
9 |
10 | );
11 | }
12 | });
13 |
14 | React.render(
9 | Click me!
10 |
11 | );
12 | }
13 | });
14 |
15 | render(
11 | Click me!
12 |
13 | );
14 | }
15 | };
16 |
17 | React.render(
10 | Click me!
11 |
12 | );
13 | }
14 | };
15 |
16 | React.render(
12 | Click me!
13 |
14 | );
15 | }
16 | };
17 |
18 | React.render(
14 | Click me!
15 |
16 | );
17 | }
18 | };
19 |
20 | React.render(
20 | Click me!
21 | ,
22 | document.getElementById('content')
23 | );
24 |
--------------------------------------------------------------------------------
/jsxstyle/button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import {Block} from 'jsxstyle';
4 |
5 | const styles = {
6 | button: {
7 | backgroundColor: '#ff0000',
8 | width: '320px',
9 | padding: '20px',
10 | borderRadius: '5px',
11 | border: 'none',
12 | outline: 'none'
13 | }
14 | };
15 |
16 | const Button = props => (
17 |
18 | Click me!
19 |
20 | );
21 |
22 | ReactDOM.render(
3 | info
4 |
8 |
--------------------------------------------------------------------------------
/hyperstyles/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hyperstyles-css-in-js",
3 | "version": "1.0.0",
4 | "description": "hyperstyles - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Colin Gourlay",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^0.13.3",
12 | "hyperstyles": "^3.3.0"
13 | },
14 | "devDependencies": {
15 | "babel-loader": "^5.1.3",
16 | "css-loader": "^0.15.6",
17 | "extract-text-webpack-plugin": "^0.8.0",
18 | "style-loader": "^0.12.3",
19 | "webpack": "^1.9.9"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/babel-plugin-pre-style/atomic.css.classNames.js:
--------------------------------------------------------------------------------
1 | module.exports = { '.✨PLACEHOLDER✨{text-align:center;}': 'A',
2 | '.✨PLACEHOLDER✨{background-color:red;}': 'B',
3 | '.✨PLACEHOLDER✨{width:320px;}': 'C',
4 | '.✨PLACEHOLDER✨{padding:20px;}': 'D',
5 | '.✨PLACEHOLDER✨{border-radius:5px;}': 'E',
6 | '.✨PLACEHOLDER✨{border:none;}': 'F',
7 | '.✨PLACEHOLDER✨{outline:none;}': 'G',
8 | '.✨PLACEHOLDER✨:hover{color:#fff;}': 'H',
9 | '.✨PLACEHOLDER✨:active{position:relative;}': 'I',
10 | '.✨PLACEHOLDER✨:active{top:2px;}': 'J',
11 | '@media (max-width:480px){.✨PLACEHOLDER✨{width:160px;}}': 'K' };
--------------------------------------------------------------------------------
/i-css/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "i-css-css-in-js",
3 | "version": "1.0.0",
4 | "description": "i-css - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "i-css": "^1.0.4",
12 | "react": "^15.0.1",
13 | "react-dom": "^15.0.1"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.18.2",
17 | "babel-loader": "^6.2.4",
18 | "babel-preset-es2015": "^6.6.0",
19 | "babel-preset-react": "^6.5.0",
20 | "webpack": "^1.13.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/linaria/webpack.config.js:
--------------------------------------------------------------------------------
1 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
2 |
3 | module.exports = {
4 | module: {
5 | rules: [
6 | {
7 | test: /\.js$/,
8 | exclude: /(node_modules|bower_components)/,
9 | use: ['babel-loader', 'linaria/loader']
10 | },
11 | {
12 | test: /\.css$/,
13 | use: ExtractTextPlugin.extract({
14 | fallback: "style-loader",
15 | use: "css-loader"
16 | }),
17 | },
18 | ]
19 | },
20 | plugins: [
21 | new ExtractTextPlugin("styles.css"),
22 | ],
23 | }
24 |
--------------------------------------------------------------------------------
/ReadmeSrc/img/download.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | download
4 |
7 |
--------------------------------------------------------------------------------
/cxs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-cxs-css-in-js",
3 | "version": "1.0.0",
4 | "description": "react-cxs - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "cxs": "^6.2.0",
12 | "react": "^16.2.0",
13 | "react-dom": "^16.2.0"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.26.0",
17 | "babel-loader": "^6.4.1",
18 | "babel-preset-es2015": "^6.24.1",
19 | "babel-preset-react": "^6.24.1",
20 | "webpack": "^1.15.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/glamor/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "glamor-css-css-in-js",
3 | "version": "1.0.0",
4 | "description": "glamor - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "glamor": "^2.1.0",
12 | "react": "^15.2.1",
13 | "react-dom": "^15.2.1"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.18.2",
17 | "babel-loader": "^6.2.4",
18 | "babel-preset-es2015": "^6.9.0",
19 | "babel-preset-react": "^6.11.1",
20 | "webpack": "^1.13.1"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/react-styleable/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-styleable-css-in-js",
3 | "version": "1.0.0",
4 | "description": "react-styleable - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^0.13.3",
12 | "react-styleable": "^1.4.0"
13 | },
14 | "devDependencies": {
15 | "babel-loader": "^5.1.3",
16 | "css-loader": "^0.15.6",
17 | "extract-text-webpack-plugin": "^0.8.0",
18 | "style-loader": "^0.12.3",
19 | "webpack": "^1.9.9"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/restyles/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "restyles-css-in-js",
3 | "version": "1.0.0",
4 | "description": "restyles - css-in-js",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^15.6.1",
12 | "react-dom": "^15.6.1",
13 | "restyles": "^2.0.1"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.25.0",
17 | "babel-loader": "^7.1.1",
18 | "babel-preset-env": "^1.6.0",
19 | "babel-preset-react": "^6.24.1",
20 | "webpack": "^3.3.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/react-css-modules/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-css-modules-css-in-js",
3 | "version": "1.0.0",
4 | "description": "react-css-modules - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^0.13.3",
12 | "react-css-modules": "^3.0.2"
13 | },
14 | "devDependencies": {
15 | "babel-loader": "^5.1.3",
16 | "css-loader": "^0.15.6",
17 | "extract-text-webpack-plugin": "^0.8.0",
18 | "style-loader": "^0.12.3",
19 | "webpack": "^1.9.9"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/react-statics-styles/gulpfile.js:
--------------------------------------------------------------------------------
1 | require('babel/register')({
2 | only: /\.jsx$/,
3 | optional: [
4 | 'runtime',
5 | 'es7.classProperties',
6 | 'es7.decorators',
7 | ],
8 | });
9 |
10 | var gulp = require('gulp');
11 | var babel = require("gulp-babel");
12 | var revertPath = require('gulp-revert-path');
13 | var styles = require('gulp-react-statics-styles');
14 |
15 | gulp.task('componentsCSS', function() {
16 | return gulp.src('./button.jsx')
17 | .pipe(babel({
18 | stage: 0
19 | }))
20 | .pipe(revertPath())
21 | .pipe(styles())
22 | .pipe(gulp.dest('./'));
23 | });
24 |
--------------------------------------------------------------------------------
/typestyle/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "typestyle-css-in-js",
3 | "version": "1.0.0",
4 | "description": "typestyle - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Bradley Ayers",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^15.3.0",
12 | "react-dom": "^15.3.0",
13 | "typestyle": "^0.22.3"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.11.4",
17 | "babel-loader": "^6.2.4",
18 | "babel-preset-es2015": "^6.9.0",
19 | "babel-preset-react": "^6.11.1",
20 | "webpack": "^1.13.1"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/react-cssom/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-cssom-css-in-js",
3 | "version": "1.0.0",
4 | "description": "react-cssom - css-in-js",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^15.6.1",
12 | "react-cssom": "^1.0.0",
13 | "react-dom": "^15.6.1"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.25.0",
17 | "babel-loader": "^7.1.1",
18 | "babel-preset-env": "^1.6.0",
19 | "babel-preset-react": "^6.24.1",
20 | "webpack": "^3.3.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/styled-jsx/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styled-jsx-css-in-js",
3 | "version": "1.0.0",
4 | "description": "styled-jsx - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^15.3.0",
12 | "react-dom": "^15.3.0",
13 | "styled-jsx": "0.0.7"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.11.4",
17 | "babel-loader": "^6.2.4",
18 | "babel-preset-es2015": "^6.9.0",
19 | "babel-preset-react": "^6.11.1",
20 | "webpack": "^1.13.1"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/superstyle/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "superstyle-css-in-js",
3 | "version": "1.0.0",
4 | "description": "superstyle - css-in-js",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^15.6.1",
12 | "react-dom": "^15.6.1",
13 | "superstyle": "^1.0.0-1"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.25.0",
17 | "babel-loader": "^7.1.1",
18 | "babel-preset-env": "^1.6.0",
19 | "babel-preset-react": "^6.24.1",
20 | "webpack": "^3.3.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/react-vstyle/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-vstyle-css-in-js",
3 | "version": "1.0.0",
4 | "description": "react-vstyle - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^15.1.0",
12 | "react-dom": "^15.1.0",
13 | "react-vstyle": "^0.1.0",
14 | "vstyle": "^0.1.2"
15 | },
16 | "devDependencies": {
17 | "babel-loader": "^6.2.4",
18 | "babel-preset-es2015": "^6.9.0",
19 | "babel-preset-react": "^6.5.0",
20 | "webpack": "^1.13.1"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/react-inline/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-inline-css-in-js",
3 | "version": "1.0.0",
4 | "description": "react-inline - CSS in JS",
5 | "scripts": {
6 | "build": "react-inline-extract --follow-requires --ignore-dependencies --ignore-node-core --vendor-prefixes --bundle ../bundle.css --babelize . lib/ button && webpack ./lib/button.js bundle.js"
7 | },
8 | "author": "Martin Andert",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^0.13.3",
12 | "react-inline": "^0.6.3"
13 | },
14 | "devDependencies": {
15 | "babel-runtime": "^5.4.7",
16 | "webpack": "^1.9.10"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/uranium/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "uranium-css-in-js",
3 | "version": "1.0.0",
4 | "description": "uranium - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "15.3.2",
12 | "react-dom": "15.3.2",
13 | "uranium": "github:tuckerconnelly/uranium"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.18.2",
17 | "babel-loader": "^6.2.8",
18 | "babel-preset-es2015": "^6.18.0",
19 | "babel-preset-react": "^6.16.0",
20 | "webpack": "^1.13.3"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/react-cssom/button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import ReactCSSOM from 'react-cssom';
4 |
5 | class Container extends React.Component {
6 | render() {
7 | return {this.props.children}
;
8 | }
9 | }
10 |
11 | Container.displayName = 'Container';
12 |
13 | class Button extends React.Component {
14 | render() {
15 | return {this.props.children} ;
16 | }
17 | }
18 |
19 | Button.displayName = 'Button';
20 |
21 | ReactDOM.render(
22 |
23 | Click me!
24 | ,
25 | document.getElementById('content')
26 | );
27 |
--------------------------------------------------------------------------------
/ReadmeSrc/img/tag.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | tag
4 |
7 |
--------------------------------------------------------------------------------
/glamorous/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "glamor-css-css-in-js",
3 | "version": "1.0.0",
4 | "description": "glamorous - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "glamor": "^2.2.0",
12 | "glamorous": "^4.12.5",
13 | "react": "^16.3",
14 | "react-dom": "^16.3"
15 | },
16 | "devDependencies": {
17 | "babel-core": "^6.18.2",
18 | "babel-loader": "^6.2.4",
19 | "babel-preset-env": "^1.3.2",
20 | "babel-preset-react": "^6.11.1",
21 | "webpack": "^1.13.1"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/react-jss/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-jss-css-in-js",
3 | "version": "2.0.0",
4 | "description": "react-jss - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "jss": "^3.6.0",
12 | "jss-vendor-prefixer": "^2.0.0",
13 | "jss-camel-case": "^1.0.2",
14 | "jss-default-unit": "^2.1.1",
15 | "jss-nested": "^1.0.3",
16 | "react": "^0.13.3",
17 | "react-jss": "^2.0.5"
18 | },
19 | "devDependencies": {
20 | "babel-loader": "^5.1.3",
21 | "webpack": "^1.9.9"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/cssx-loader/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cssx-loader-css-in-js",
3 | "version": "1.0.0",
4 | "description": "cssx-loader - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "cssx": "^3.8.0",
12 | "react": "^15.0.1",
13 | "react-dom": "^15.0.1"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.18.2",
17 | "babel-loader": "^6.2.4",
18 | "babel-preset-es2015": "^6.6.0",
19 | "babel-preset-react": "^6.5.0",
20 | "cssx-loader": "^3.8.0",
21 | "webpack": "^1.13.0"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/jsxstyle/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jsxstyle-css-in-js",
3 | "version": "1.0.0",
4 | "description": "jsxstyle - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js -o bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "jsxstyle": "^2.1.1",
12 | "react": "^16.4.1",
13 | "react-dom": "^16.4.1"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.26.3",
17 | "babel-loader": "^7.1.4",
18 | "babel-preset-env": "^1.7.0",
19 | "babel-preset-react": "^6.24.1",
20 | "webpack": "^4.12.0",
21 | "webpack-command": "^0.2.1"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/react-fela/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-fela-css-in-js",
3 | "version": "1.0.0",
4 | "description": "react-fela - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "fela": "^1.1.0",
12 | "react": "^15.3.0",
13 | "react-dom": "^15.3.0",
14 | "react-fela": "^2.1.0"
15 | },
16 | "devDependencies": {
17 | "babel-core": "^6.11.4",
18 | "babel-loader": "^6.2.4",
19 | "babel-preset-es2015": "^6.9.0",
20 | "babel-preset-react": "^6.11.1",
21 | "webpack": "^1.13.1"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/styled-components/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styled-components-css-in-js",
3 | "version": "1.0.0",
4 | "description": "styled-components - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^16.3.0",
12 | "react-dom": "^16.3.0",
13 | "styled-components": "^3.2.6"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.11.4",
17 | "babel-loader": "^6.2.4",
18 | "babel-preset-es2015": "^6.9.0",
19 | "babel-preset-react": "^6.11.1",
20 | "webpack": "^1.13.1"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/stylable/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "stylable-css-in-js",
3 | "version": "1.0.0",
4 | "description": "stylable - css-in-js",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^16.2.0",
12 | "react-dom": "^16.2.0",
13 | "stylable": "^5.0.2",
14 | "stylable-integration": "^6.0.1"
15 | },
16 | "devDependencies": {
17 | "babel-core": "^6.26.0",
18 | "babel-loader": "^7.1.2",
19 | "babel-preset-env": "^1.6.1",
20 | "babel-preset-react": "^6.24.1",
21 | "webpack": "^3.10.0"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/ReadmeSrc/Readme.js:
--------------------------------------------------------------------------------
1 | const moment = require('moment')
2 | const table = require('markdown-table')
3 |
4 | const {getRows, headers} = require('./Rows')
5 |
6 | function getDate() {
7 | return moment().format('LL')
8 | }
9 |
10 | function getTable() {
11 | const data = require('../webpage/src/data.json')
12 |
13 | const rows = getRows(data.rows)
14 | const align = headers.map(x => 'c')
15 | align[0] = 'l'
16 | align[headers.length - 1] = 'l'
17 | const pad = false
18 |
19 | rows.unshift(headers)
20 |
21 | return table(rows, {
22 | align,
23 | pad
24 | })
25 | }
26 |
27 | module.exports = {
28 | getDate,
29 | getTable
30 | }
31 |
--------------------------------------------------------------------------------
/babel-plugin-css-in-js/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel-plugin-css-in-js",
3 | "version": "1.0.0",
4 | "description": "babel-plugin-css-in-js - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Martin Andert",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^0.14.2",
12 | "react-dom": "^0.14.2"
13 | },
14 | "devDependencies": {
15 | "babel-core": "^6.1.21",
16 | "babel-loader": "^6.1.0",
17 | "babel-plugin-css-in-js": "^1.2.2",
18 | "babel-preset-es2015": "^6.1.18",
19 | "babel-preset-react": "^6.1.18",
20 | "webpack": "^1.12.6"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/stylable/main.css:
--------------------------------------------------------------------------------
1 | .button1977411557💠root .button1977411557💠container {
2 | text-align: center;
3 | }
4 |
5 | .button1977411557💠root .button1977411557💠button {
6 | background-color: #ff0000;
7 | width: 320px;
8 | padding: 20px;
9 | border-radius: 5px;
10 | border: none;
11 | outline: none;
12 | }
13 |
14 | .button1977411557💠root .button1977411557💠button:hover {
15 | color: #fff;
16 | }
17 |
18 | .button1977411557💠root .button1977411557💠button:active {
19 | position: relative;
20 | top: 2px;
21 | }
22 |
23 | @media (max-width: 480px) {
24 | .button1977411557💠root .button1977411557💠button {
25 | width: 160px
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/stile-react-media-queries/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "stile-react-media-queries",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "button.js",
6 | "scripts": {
7 | "build": "webpack button.js bundle.js"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "babel-loader": "^6.2.1",
13 | "babel-plugin-transform-object-rest-spread": "^6.3.13",
14 | "babel-preset-es2015": "^6.3.13",
15 | "babel-preset-react": "^6.3.13",
16 | "react": "^0.14.6",
17 | "react-dom": "^0.14.6",
18 | "react-media-queries": "^2.0.1",
19 | "stile": "^2.0.0",
20 | "webpack": "^1.12.11"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/emotion/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "emotion-css-in-js",
3 | "version": "1.0.0",
4 | "description": "emotion - css-in-js",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "emotion": "^6.0.3",
12 | "react": "^15.6.1",
13 | "react-dom": "^15.6.1"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.25.0",
17 | "babel-loader": "^7.1.1",
18 | "babel-preset-env": "^1.6.0",
19 | "babel-preset-react": "^6.24.1",
20 | "css-loader": "^0.28.4",
21 | "style-loader": "^0.18.2",
22 | "webpack": "^3.3.0"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/styletron-react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styletron-react-css-in-js",
3 | "version": "1.0.0",
4 | "description": "styletron-react - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^15.3.0",
12 | "react-dom": "^15.3.0",
13 | "styletron-client": "^2.1.2",
14 | "styletron-react": "^2.1.2"
15 | },
16 | "devDependencies": {
17 | "babel-core": "^6.11.4",
18 | "babel-loader": "^6.2.4",
19 | "babel-preset-es2015": "^6.9.0",
20 | "babel-preset-react": "^6.11.1",
21 | "webpack": "^1.13.1"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/aphrodite/other/generate-css-file.js:
--------------------------------------------------------------------------------
1 | import {writeFileSync} from 'fs'
2 | import {resolve} from 'path'
3 | import React from 'react'
4 | import ReactDOMServer from 'react-dom/server'
5 | import {StyleSheetServer} from 'aphrodite'
6 | import Button from '../button'
7 |
8 | generateCSSFile(
9 |
3 | star
4 |
6 |
--------------------------------------------------------------------------------
/css-constructor/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "css-constructor-css-in-js",
3 | "version": "1.0.0",
4 | "description": "css-constructor - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "css-constructor": "0.1.1",
12 | "react": "^15.3.0",
13 | "react-dom": "^15.3.0"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.11.4",
17 | "babel-loader": "^6.2.4",
18 | "babel-plugin-transform-decorators-legacy": "^1.3.4",
19 | "babel-preset-es2015": "^6.9.0",
20 | "babel-preset-react": "^6.11.1",
21 | "webpack": "^1.13.1"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/uranium/button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import Uranium from 'uranium';
4 |
5 | const styles = {
6 | container: {
7 | textAlign: 'center'
8 | },
9 | button: {
10 | backgroundColor: '#ff0000',
11 | width: 320,
12 | padding: 20,
13 | borderRadius: 5,
14 | border: 'none',
15 | outline: 'none',
16 | '@media (max-width: 480px)': {
17 | width: 160
18 | }
19 | }
20 | };
21 |
22 | const Button = Uranium(() => (
23 |
24 |
25 | Click me!
26 |
27 |
28 | ));
29 |
30 | render(
22 | Click me!
23 |
24 | );
25 | }
26 | });
27 |
28 | React.render(
16 |
22 | Click me!
23 |
24 |
25 | );
26 |
27 | ReactDOM.render(
6 |
10 | CSS in JS
11 |
12 |
24 |
25 | );
26 | };
27 |
28 | export default Navbar;
29 |
--------------------------------------------------------------------------------
/emotion/button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import styled from 'emotion/react'
4 |
5 | const Container = styled('div')`
6 | textAlign: center;
7 | `;
8 |
9 | const Button = styled('button')`
10 | backgroundColor: #ff0000;
11 | width: 320px;
12 | padding: 20px;
13 | borderRadius: 5px;
14 | border: none;
15 | outline: none;
16 | &:hover {
17 | color: #fff;
18 | }
19 | &:active {
20 | position: relative;
21 | top: 2px;
22 | }
23 | @media (max-width: 480px) {
24 | width: 160px;
25 | }
26 | `;
27 |
28 | const App = () => (
29 |
30 | Click me!
31 |
32 | );
33 |
34 | render(
30 | Click me!
31 |
32 | , document.getElementById('content'));
33 |
--------------------------------------------------------------------------------
/style-it/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "style-it-css-in-js",
3 | "version": "1.0.0",
4 | "description": "Reactive Style - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^15.3.0",
12 | "react-dom": "^15.3.0",
13 | "style-it": "^1.2.9"
14 | },
15 | "babel": {
16 | "presets": [
17 | "es2015",
18 | "stage-1",
19 | "react"
20 | ]
21 | },
22 | "devDependencies": {
23 | "babel-loader": "^6.2.4",
24 | "babel-preset-es2015": "^6.13.2",
25 | "babel-preset-react": "^6.11.1",
26 | "babel-preset-stage-1": "^6.13.0",
27 | "webpack": "^1.13.1"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/react-css-components/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-css-components-css-in-js",
3 | "version": "1.0.0",
4 | "description": "react-css-components - CSS in JS",
5 | "scripts": {
6 | "build": "webpack ./button.js bundle.js"
7 | },
8 | "author": "Michele Bertoli",
9 | "license": "MIT",
10 | "dependencies": {
11 | "react": "^15.1.0",
12 | "react-dom": "^15.1.0"
13 | },
14 | "devDependencies": {
15 | "babel-loader": "^6.2.4",
16 | "babel-plugin-transform-object-rest-spread": "^6.8.0",
17 | "babel-preset-es2015": "^6.9.0",
18 | "babel-preset-react": "^6.5.0",
19 | "css-loader": "^0.23.1",
20 | "react-css-components": "^0.6.9",
21 | "style-loader": "^0.13.1",
22 | "webpack": "^1.13.1"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/styled-components/button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import styled from 'styled-components';
4 |
5 | const Container = styled.div`
6 | text-align: center;
7 | `;
8 |
9 | const Button = styled.button`
10 | background-color: #ff0000;
11 | width: 320px;
12 | padding: 20px;
13 | border-radius: 5px;
14 | border: none;
15 | outline: none;
16 | &:hover {
17 | color: #fff;
18 | }
19 | &:active {
20 | position: relative;
21 | top: 2px;
22 | }
23 | @media (max-width: 480px) {
24 | width: 160px;
25 | }
26 | `;
27 |
28 | const App = () => (
29 |
30 | Click me!
31 |
32 | );
33 |
34 | render(
23 |
24 | Click me!
25 |
26 |
27 | )
28 | }
29 | }
30 |
31 | React.render(
25 | Click me!
26 |
27 | );
28 | }
29 | }
30 |
31 | React.render(
30 | Click me!
31 |
32 | );
33 |
34 | ReactDOM.render(
30 |
31 | Click me!
32 |
33 |
34 | );
35 |
36 | render(
6 | {props.filters.map((x, index) => {
7 | return (
8 |
9 |
10 |
18 |
19 | );
20 | })}
21 |
34 | Click me!
35 |
36 | , document.getElementById('content'));
--------------------------------------------------------------------------------
/react-styl/button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactStyl from 'react-styl';
3 |
4 | ReactStyl(`
5 |
6 | .container
7 | text-align: center
8 |
9 | .button
10 | background-color: #ff0000
11 | width: 320px
12 | padding: 20px
13 | border-radius: 5px
14 | border: none
15 | outline: none
16 | &:hover
17 | color: #fff
18 | &:active
19 | position: relative
20 | top: 2px
21 |
22 | @media (max-width: 480px)
23 | .button
24 | width: 160px
25 |
26 | `);
27 |
28 | const Button = React.createClass({
29 | render() {
30 | return (
31 |
32 | Click me!
33 |
34 | );
35 | }
36 | });
37 |
38 | ReactStyl.addStylesheet();
39 |
40 | React.render(
28 |
29 | Click me!
30 |
31 |
32 | );
33 |
34 | ReactDOM.render(
33 | Click me!
34 |
35 | );
36 | }
37 | }
38 |
39 | render(
32 | Click me!
33 |
34 | );
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/pre-style/button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './app.scss';
4 |
5 | const styles = {
6 | container: PreStyle`
7 | text-align: center;
8 | `,
9 | button: PreStyle`
10 | background-color: $bgc; //<- Look Sass in my JS :D
11 | border: none;
12 | border-radius: 5px;
13 | outline: none;
14 | padding: 20px;
15 | width: 320px;
16 |
17 | &:hover {
18 | color: $hoverBgc;
19 | }
20 |
21 | &:active {
22 | position: relative;
23 | top: 2px;
24 | }
25 |
26 | @media (max-width: 480px) {
27 | width: 160px;
28 | }
29 | `
30 | };
31 |
32 | const Component = () => (
33 |
34 | Click me!
35 |
36 | );
37 |
38 | ReactDOM.render(
32 | Click me!
33 |
34 | );
35 | }
36 | }
37 |
38 | render(
33 | Click me!
34 |
35 | );
36 | }
37 | }
38 |
39 | React.render(
32 | Click me!
33 |
34 | );
35 | }
36 | }
37 |
38 | React.render(
28 | Click me!
29 |
30 | );
31 | }
32 | });
33 |
34 | if (typeof window !== 'undefined') {
35 | React.render(
24 |
25 | Click me!
26 |
27 |
28 | );
29 | }
30 | }
31 |
32 | document.getElementById('react-stylesheet').textContent = StyleSheet.renderToString();
33 | ReactDOM.render(
29 | Click me!
30 |
31 | );
32 | }
33 | }
34 |
35 | if (typeof window !== 'undefined') {
36 | React.render(
34 | Click me!
35 |
36 | );
37 | }
38 | }
39 |
40 | React.render(
34 | Click me!
35 |
36 |
37 | );
38 | }
39 | });
40 |
41 | React.render(
34 | Click me!
35 |
36 | );
37 | }
38 | }
39 |
40 | ReactDOM.render(
36 | Click me!
37 |
38 | );
39 | }
40 | });
41 |
42 | Button = useSheet(Button, styles);
43 |
44 | React.render(
38 | Click me!
39 |
40 | );
41 | }
42 | });
43 |
44 | SmartCSS.injectStyles();
45 |
46 | React.render(
36 | Click me!
37 |
38 | );
39 | }
40 | }
41 |
42 | ReactDOM.render(
34 | Click me!
35 |
37 | );
38 | }
39 | };
40 |
41 | React.render(
39 | Click me!
40 |
41 | );
42 |
43 | const App = () => (
44 |
45 | Click me!
46 |
47 | );
48 |
49 | render(
31 | Click me!
32 |
33 | );
34 |
35 | const styleElements = document.getElementsByClassName('_styletron_hydrate_');
36 |
37 | render(
38 |
39 | ,
41 | document.getElementById('content')
42 | );
43 |
--------------------------------------------------------------------------------
/css-constructor/button.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import css from 'css-constructor';
4 |
5 | class Container extends Component {
6 |
7 | @css`
8 | text-align: center;
9 | `;
10 |
11 | render() {
12 | return {this.props.children}
;
13 | }
14 |
15 | }
16 |
17 | class Button extends Component {
18 |
19 | @css`
20 | background-color: #ff0000;
21 | width: 320px;
22 | padding: 20px;
23 | border-radius: 5px;
24 | border: none;
25 | outline: none;
26 | &:hover {
27 | color: #fff;
28 | }
29 | &:active {
30 | position: relative;
31 | top: 2px;
32 | }
33 | @media (max-width: 480px) {
34 | & {
35 | width: 160px;
36 | }
37 | }
38 | `;
39 |
40 | render() {
41 | return {this.props.children} ;
42 | }
43 |
44 | }
45 |
46 | const App = () => (
47 |
48 | Click me!
49 |
50 | );
51 |
52 | render(
32 |
33 | Click me!
34 |
35 |
36 | );
37 | }
38 | });
39 |
40 | React.render(
38 | Click me!
39 |
40 | );
41 | }
42 | }
43 |
44 | render(
38 |
39 | Click me!
40 |
41 |
42 | );
43 | }
44 | });
45 |
46 | React.render(
17 | Click me!
18 |
43 |
44 | );
45 |
46 | const App = () => (
47 |
48 | Click me!
49 |
50 | );
51 |
52 | render(
39 | Click me!
40 |
41 | );
42 | }
43 | }
44 |
45 | renderCss(document.getElementById('rootCss')); //call it once in root component
46 | ReactDOM.render(
48 |
49 | Click me!
50 |
51 |
52 | )
53 | }
54 | }
55 |
56 | React.render(
36 | Click me!
37 |
38 | ));
39 |
40 | const renderer = createRenderer();
41 | const mountNode = document.getElementById('stylesheet');
42 |
43 | render(
44 |
45 | ,
47 | document.getElementById('content')
48 | );
49 |
--------------------------------------------------------------------------------
/hiccup-css/styles.js:
--------------------------------------------------------------------------------
1 | import { css } from "@thi.ng/hiccup-css/css";
2 | import { at_media } from "@thi.ng/hiccup-css/media";
3 | import { injectStyleSheet } from "@thi.ng/hiccup-css/inject";
4 | import { px } from "@thi.ng/hiccup-css/units";
5 |
6 | injectStyleSheet(
7 | css(
8 | [
9 | [".container",
10 | {
11 | "text-align": "center"
12 | }],
13 | [".button",
14 | {
15 | "background-color": "#ff0000",
16 | width: px(320),
17 | padding: px(20),
18 | "border-radius": px(5),
19 | border: "none",
20 | outline: "none",
21 | },
22 | [":hover",
23 | {
24 | color: "#fff",
25 | }],
26 | [":active",
27 | {
28 | position: "relative",
29 | top: px(2),
30 | }]],
31 | at_media(
32 | { screen: true, "max-width": px(640) },
33 | [
34 | ".button", {
35 | width: px(160)
36 | }
37 | ]
38 | )
39 | ],
40 | { scope: "_foo" }
41 | )
42 | );
43 |
44 | export default {
45 | button: "button_foo",
46 | container: "container_foo",
47 | };
--------------------------------------------------------------------------------
/stile-react-media-queries/button.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ReactDOM from "react-dom"
3 | import { createStyleSheet } from "stile"
4 |
5 | import { MediaProvider, matchMedia } from "react-media-queries"
6 | import createMediaQueryGetter from "react-media-queries/lib/createMediaQueryGetter"
7 | import createMediaQueryListener from "react-media-queries/lib/createMediaQueryListener"
8 |
9 | const Button = ({ mediaQuery }) => (
10 |
11 |
17 | Click me!
18 |
19 |
20 | )
21 |
22 | const styles = createStyleSheet({
23 | container: {
24 | textAlign: "center",
25 | },
26 | button: {
27 | backgroundColor: "#ff0000",
28 | width: 320,
29 | padding: 20,
30 | borderRadius: 5,
31 | border: "none",
32 | outline: "none",
33 | },
34 | smallButton: {
35 | width: 160,
36 | },
37 | })
38 |
39 | const WrappedButton = matchMedia()(Button)
40 |
41 | const mediaQueries = {
42 | small: "(max-width:480px)",
43 | }
44 |
45 | const mediaQueryGetter = createMediaQueryGetter(mediaQueries)
46 | const mediaQueryListener = createMediaQueryListener(mediaQueries)
47 |
48 | ReactDOM.render(
49 |
53 | ,
55 | document.getElementById('content')
56 | )
57 |
--------------------------------------------------------------------------------
/react-vstyle/button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { createStylesRenderer, StyleSheet, registerPlugin } from 'vstyle';
4 | import { StylesRendererProvider, withRenderStyles } from 'react-vstyle';
5 | import nestedSelectorPlugin from 'vstyle/lib/plugins/nested-selector';
6 | import mediaQueryPlugin from 'vstyle/lib/plugins/media-query';
7 | import prefixer from 'vstyle/lib/plugins/prefixer';
8 |
9 | registerPlugin(nestedSelectorPlugin);
10 | registerPlugin(mediaQueryPlugin);
11 | registerPlugin(prefixer);
12 |
13 | const styles = StyleSheet.create({
14 | container: {
15 | textAlign: 'center'
16 | },
17 | button: {
18 | backgroundColor: '#ff0000',
19 | width: '320px',
20 | padding: '20px',
21 | borderRadius: '5px',
22 | border: 'none',
23 | outline: 'none',
24 | '&:hover': {
25 | color: '#fff'
26 | },
27 | '&:active': {
28 | position: 'relative',
29 | top: '2px'
30 | },
31 | '@media (max-width: 480px)': {
32 | width: '160px'
33 | }
34 | }
35 | });
36 |
37 | const Button = withRenderStyles(({ renderStyles }) => (
38 |
39 | Click me!
40 |
41 | ))
42 |
43 | const stylesRenderer = createStylesRenderer();
44 | stylesRenderer.attach(document.getElementById('style'));
45 |
46 | ReactDOM.render(
47 |
48 | ,
50 | document.getElementById('content')
51 | );
52 |
--------------------------------------------------------------------------------
/webpage/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import Navbar from "./components/Navbar";
3 | import Table from "./components/Table";
4 | import Filter from "./components/Filter";
5 | import Seo from "./components/Seo";
6 | import { default as data } from "./data.json";
7 |
8 | class App extends Component {
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | ...data,
13 | filters: data.headers.slice(2).map(x => ({
14 | name: x,
15 | checked: false
16 | }))
17 | };
18 | this.onFilterChange = this.onFilterChange.bind(this);
19 | }
20 |
21 | onFilterChange(index) {
22 | this.setState({
23 | ...this.state,
24 | filters: [
25 | ...this.state.filters.slice(0, index),
26 | {
27 | ...this.state.filters[index],
28 | checked: !this.state.filters[index].checked
29 | },
30 | ...this.state.filters.slice(index + 1)
31 | ]
32 | });
33 | }
34 |
35 | render() {
36 | return (
37 |
61 | );
62 | }
63 | }
64 |
65 | export default App;
66 |
--------------------------------------------------------------------------------
/webpage/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React App
24 |
25 |
26 |
27 | You need to enable JavaScript to run this app.
28 |
29 |
30 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/ReadmeSrc/Readme.md:
--------------------------------------------------------------------------------
1 | [](https://travis-ci.org/MicheleBertoli/css-in-js)
2 |
3 | # CSS in JS
4 |
5 | React: [CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js) techniques comparison.
6 |
7 | ## Usage
8 |
9 | Inside each package folder, run:
10 |
11 | ```bash
12 | npm i
13 | npm run build && open index.html
14 | ```
15 |
16 | ## Features
17 |
18 | **How to read the table**
19 |
20 | More ticks doesn't mean "better", it depends on your needs.
21 | For example, if a package supports the css file extraction you can run the autoprefixing at build time.
22 |
23 | ```mmd
24 | return scripts.getTable()
25 | ```
26 |
27 | ```mmd
28 | return '> This list has been auto-updated ([?](https://github.com/albinotonnina/mmarkdown)) on ' + scripts.getDate()
29 | ```
30 |
31 | ## Testimonials
32 |
33 | > ["Wow, this totally makes my week!"](https://twitter.com/dan_abramov/status/604260877622202368) - Dan Abramov
34 |
35 | > ["nice compilation of css-in-js techniques"](https://twitter.com/tjholowaychuk/status/739812614239195136) - TJ Holowaychuk
36 |
37 | [SurviveJS / Styling React](http://survivejs.com/webpack_react/styling_react/) by Juho Vepsäläinen
38 |
39 | [The Case for CSS Modules](http://markdalgleish.github.io/presentation-the-case-for-css-modules) by Mark Dalgleish
40 |
41 | [First Class Styles](https://markdalgleish.github.io/presentation-first-class-styles) by Mark Dalgleish
42 |
43 | [Styling React.JS applications](https://www.youtube.com/watch?v=19gqsBc_Cx0) by Max Stoiber
44 |
45 | ## Contributing
46 |
47 | If your package is not listed here, feel free to add it.
48 |
49 | 1. Create a new folder named `package-name` in the root folder.
50 | 2. Implement the red button example using the package.
51 | 3. Add a new entry to [data.json](webpage/src/data.json).
52 | 4. Rename `ReadmeSrc/.env_example` to `ReadmeSrc/.env` and set a [Github access token](https://github.com/settings/tokens) to retrieve data from Github.
53 | 5. Re-generate the data with: `cd ReadmeSrc && yarn && yarn update-data && yarn generate-readme`.
54 |
--------------------------------------------------------------------------------
/webpage/src/components/Seo.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import Helmet from "react-helmet";
4 |
5 | const absoluteUrl = path => `https://michelebertoli.github.io/css-in-js${path}`;
6 | const seoImageURL = path => `https://michelebertoli.github.io${path}`;
7 |
8 | const getMetaTags = ({ title, description, url, twitter, image }) => {
9 | const metaTags = [
10 | { itemprop: "name", content: title },
11 | { itemprop: "description", content: description },
12 | { name: "description", content: description },
13 | { name: "twitter:title", content: title },
14 | { name: "twitter:description", content: description },
15 | { name: "twitter:creator", content: twitter },
16 | { name: "og:title", content: title },
17 | { name: "og:type", content: "website" },
18 | { name: "og:url", content: url },
19 | { name: "og:description", content: description },
20 | { name: "og:site_name", content: "CSS-in-JS" },
21 | { name: "og:locale", content: "en_EN" }
22 | ];
23 |
24 | if (image) {
25 | metaTags.push({ itemprop: "image", content: seoImageURL(image) });
26 | metaTags.push({ name: "twitter:image:src", content: seoImageURL(image) });
27 | metaTags.push({ name: "og:image", content: seoImageURL(image) });
28 | metaTags.push({ name: "twitter:card", content: "summary_large_image" });
29 | } else {
30 | metaTags.push({ name: "twitter:card", content: "summary" });
31 | }
32 |
33 | return metaTags;
34 | };
35 |
36 | const getHtmlAttributes = () => {
37 | let result = {
38 | lang: "en"
39 | };
40 | return result;
41 | };
42 |
43 | const Seo = ({ title, description, path, twitter, image }) => (
44 |
15 | {link.text}
16 |
17 | ));
18 | return join(linkTags, " + ");
19 | };
20 |
21 | const symbol = value => {
22 | if (value === true) {
23 | return "✓";
24 | } else if (value === false) {
25 | return "";
26 | } else {
27 | return "?";
28 | }
29 | };
30 |
31 | const defaultFallback = (options, field) => options[field] || options.default;
32 |
33 | const tdValue = {
34 | Package: links,
35 | Version: value => value,
36 | default: symbol
37 | };
38 |
39 | const thStyles = {
40 | Package: { width: 180 },
41 | Version: { width: 90 },
42 | default: {}
43 | };
44 |
45 | const CellTd = options => {
46 | const { header, value } = options;
47 | const cellFormatter = defaultFallback(tdValue, header);
48 | return {cellFormatter(value)} ;
49 | };
50 |
51 | const CellTh = options => {
52 | const { header } = options;
53 | const additionalOptions = defaultFallback(thStyles, header);
54 | return {header} ;
55 | };
56 |
57 | const Row = options => {
58 | const { row, headers } = options;
59 | return (
60 | {headers.map(x =>
61 | );
62 | };
63 |
64 | const Table = options => {
65 | const { headers, rows, filters } = options;
66 | let filteredRows = rows.filter(row => {
67 | return filters.reduce((flag, filter) => {
68 | return flag && (filter.checked ? !!row[filter.name] : true);
69 | }, true);
70 | });
71 |
72 | return (
73 |
74 |
75 | {headers.map(x =>
76 |
77 |
78 | {filteredRows.map((row, index) => (
79 | |
80 | ))}
81 |
82 |
83 | );
84 | };
85 |
86 | export default Table;
87 |
--------------------------------------------------------------------------------
/webpage/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | export default function register() {
12 | if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
13 | window.addEventListener("load", () => {
14 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
15 | navigator.serviceWorker
16 | .register(swUrl)
17 | .then(registration => {
18 | registration.onupdatefound = () => {
19 | const installingWorker = registration.installing;
20 | installingWorker.onstatechange = () => {
21 | if (installingWorker.state === "installed") {
22 | if (navigator.serviceWorker.controller) {
23 | // At this point, the old content will have been purged and
24 | // the fresh content will have been added to the cache.
25 | // It's the perfect time to display a "New content is
26 | // available; please refresh." message in your web app.
27 | console.log("New content is available; please refresh.");
28 | } else {
29 | // At this point, everything has been precached.
30 | // It's the perfect time to display a
31 | // "Content is cached for offline use." message.
32 | console.log("Content is cached for offline use.");
33 | }
34 | }
35 | };
36 | };
37 | })
38 | .catch(error => {
39 | console.error("Error during service worker registration:", error);
40 | });
41 | });
42 | }
43 | }
44 |
45 | export function unregister() {
46 | if ("serviceWorker" in navigator) {
47 | navigator.serviceWorker.ready.then(registration => {
48 | registration.unregister();
49 | });
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/ReadmeSrc/scripts/fetchData.js:
--------------------------------------------------------------------------------
1 | require('dotenv').load()
2 | const fs = require('fs')
3 | const axios = require('axios')
4 | const merge = require('lodash/fp/merge')
5 | const delay = require('delay')
6 |
7 | const data = require('../../webpage/src/data.json')
8 |
9 | // https://github.com/settings/tokens
10 | const access_token = process.env.GITHUB_TOKEN
11 |
12 | async function getPackagesData() {
13 | return Promise.all(data.rows.map(getPackageData))
14 | }
15 |
16 | async function getPackageData(solution, index) {
17 | await delay(5000 * index)
18 | console.log(`Package ${index + 1}: ${solution.Package[0].text}`)
19 | return Promise.all(solution.Package.map(getRepoStats))
20 | }
21 |
22 | async function getRepoStats(repo) {
23 | return Promise.all([getNpmStats(repo.npm), getGithubStats(repo.github)])
24 | }
25 |
26 | async function getNpmStats(npm) {
27 | const npmData = await getNpmData(npm)
28 | const downloads = await getNpmDownloads(npm)
29 | return {
30 | ...downloads,
31 | ...npmData
32 | }
33 | }
34 |
35 | // don't use "latest" API endpoint due to failure w/ scoped packages
36 | // https://github.com/npm/registry/issues/45
37 | const getNpmData = npm =>
38 | axios.get(`https://registry.npmjs.org/${npm}`).then(response => ({
39 | version: response.data["dist-tags"].latest
40 | }))
41 |
42 | // using monthly DL stats since npm API seems to return "0" for most weekly stats
43 | const getNpmDownloads = npm =>
44 | axios
45 | .get(`https://api.npmjs.org/downloads/point/last-month/${npm}`)
46 | .then(response => ({ downloads: response.data.downloads }))
47 |
48 | const getIssueCount = (github, state) =>
49 | axios
50 | .get(
51 | `https://api.github.com/search/issues?access_token=${access_token}&q=repo:${github}+type:issue+state:${state}`
52 | )
53 | .then(response => response.data.total_count)
54 |
55 | const getGithubRepoStats = github =>
56 | axios
57 | .get(`https://api.github.com/repos/${github}?access_token=${access_token}`)
58 | .then(response => response.data)
59 |
60 | async function getGithubStats(github) {
61 | const repoData = await getGithubRepoStats(github)
62 | const { open_issues, stargazers_count } = repoData
63 | const closed_issues = await getIssueCount(github, 'closed')
64 | return {
65 | closed_issues,
66 | open_issues,
67 | stargazers_count
68 | }
69 | }
70 |
71 | async function fetchData() {
72 | try {
73 | const remoteData = await getPackagesData()
74 |
75 | const remoteDataForMerge = remoteData.map(repos => ({
76 | 'Package Stats': repos.map(repo => ({
77 | autogenerated: {
78 | npmData: repo[0],
79 | githubData: repo[1]
80 | }
81 | }))
82 | }))
83 |
84 | return merge(data, {
85 | rows: data.rows.map((row, index) => merge(row, remoteDataForMerge[index]))
86 | })
87 | } catch (error) {
88 | console.log('error', error)
89 | }
90 | }
91 |
92 | module.exports = fetchData
93 |
--------------------------------------------------------------------------------
/ReadmeSrc/Rows.js:
--------------------------------------------------------------------------------
1 | const headers = [
2 | 'Package',
3 | 'Version',
4 | 'Automatic Vendor Prefixing',
5 | 'Pseudo Classes',
6 | 'Media Queries',
7 | 'Styles As Object Literals',
8 | 'Extract CSS File',
9 | 'Package Stats'
10 | ]
11 |
12 | const iconImage = ({icon, value, alt, link}) =>
13 | `${iconImage(args)} `
16 |
17 | const divWithIcon = args => `${subWithIcon(args)}
`
18 |
19 | const link = obj => `[${obj.text}](${obj.href})`
20 |
21 | const version = obj => obj
22 |
23 | const symbol = obj => (obj === true ? '✓' : '')
24 |
25 | const links = obj => {
26 | return obj
27 | .map((package, index) => {
28 | const {
29 | autogenerated: {githubData, npmData},
30 | text,
31 | href,
32 | npm
33 | } = package
34 |
35 | const spacer = index > 0 ? '___________________________
' : ''
36 |
37 | const stars = `${subWithIcon({
38 | link: `https://www.npmjs.com/package/${npm}`,
39 | icon: 'tag',
40 | value: npmData.version,
41 | alt: 'npm version'
42 | }) +
43 | ' ' +
44 | subWithIcon({
45 | link: `${href}/stargazers`,
46 | icon: 'star',
47 | value: intAsCommaSeparated(githubData.stargazers_count),
48 | alt: 'stars on Github'
49 | })}
`
50 |
51 | return spacer + `[${text}](${href})` + stars
52 | })
53 | .join('')
54 | }
55 |
56 | const stats = obj => {
57 | return obj
58 | .map((package, index) => {
59 | const {
60 | autogenerated: {githubData, npmData},
61 | npm,
62 | href
63 | } = package
64 |
65 | const spacer = index > 0 ? '____________
' : ''
66 |
67 | const issues = divWithIcon({
68 | link: `${href}/issues`,
69 | icon: 'info',
70 | value: githubData.open_issues + '/' + githubData.closed_issues,
71 | alt: 'open / closed issues'
72 | })
73 |
74 | const lastMonthDl = divWithIcon({
75 | link: `https://www.npmjs.com/package/${npm}`,
76 | icon: 'download',
77 | value: intAsCommaSeparated(npmData.downloads),
78 | alt: 'monthly downloads'
79 | })
80 |
81 | return spacer + issues + lastMonthDl
82 | })
83 | .join('')
84 | }
85 |
86 | const formatters = {
87 | Package: links,
88 | Version: version,
89 | 'Package Stats': stats,
90 | default: symbol
91 | }
92 |
93 | const defaultFallback = (options, field) => options[field] || options.default
94 |
95 | const row = obj =>
96 | headers.map(header => {
97 | const formatter = defaultFallback(formatters, header)
98 |
99 | return header === 'Package' || header === 'Package Stats'
100 | ? formatter(
101 | obj[header].map((ob, index) => {
102 | const ddd = {
103 | ...obj['Package'][index],
104 | ...obj['Package Stats'][index]
105 | }
106 | return ddd
107 | })
108 | )
109 | : formatter(obj[header])
110 | })
111 |
112 | function getRows(rows) {
113 | const out = rows.map(row)
114 | return out
115 | }
116 |
117 | const intAsCommaSeparated = (number) => number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
118 |
119 | module.exports = {getRows, headers}
120 |
--------------------------------------------------------------------------------
/ReadmeSrc/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 |
4 |
5 | ansi-regex@^2.0.0:
6 | version "2.1.1"
7 | resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
8 |
9 | ansi-regex@^3.0.0:
10 | version "3.0.0"
11 | resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
12 |
13 | axios@^0.18.0:
14 | version "0.18.0"
15 | resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
16 | dependencies:
17 | follow-redirects "^1.3.0"
18 | is-buffer "^1.1.5"
19 |
20 | camelcase@^4.1.0:
21 | version "4.1.0"
22 | resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
23 |
24 | cliui@^4.0.0:
25 | version "4.1.0"
26 | resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
27 | dependencies:
28 | string-width "^2.1.1"
29 | strip-ansi "^4.0.0"
30 | wrap-ansi "^2.0.0"
31 |
32 | code-point-at@^1.0.0:
33 | version "1.1.0"
34 | resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
35 |
36 | cross-spawn@^5.0.1:
37 | version "5.1.0"
38 | resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
39 | dependencies:
40 | lru-cache "^4.0.1"
41 | shebang-command "^1.2.0"
42 | which "^1.2.9"
43 |
44 | debug@^3.1.0:
45 | version "3.1.0"
46 | resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
47 | dependencies:
48 | ms "2.0.0"
49 |
50 | decamelize@^1.1.1:
51 | version "1.2.0"
52 | resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
53 |
54 | delay@^2.0.0:
55 | version "2.0.0"
56 | resolved "https://registry.yarnpkg.com/delay/-/delay-2.0.0.tgz#9112eadc03e4ec7e00297337896f273bbd91fae5"
57 | dependencies:
58 | p-defer "^1.0.0"
59 |
60 | dotenv@^5.0.1:
61 | version "5.0.1"
62 | resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
63 |
64 | escape-string-regexp@^1.0.5:
65 | version "1.0.5"
66 | resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
67 |
68 | execa@^0.7.0:
69 | version "0.7.0"
70 | resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
71 | dependencies:
72 | cross-spawn "^5.0.1"
73 | get-stream "^3.0.0"
74 | is-stream "^1.1.0"
75 | npm-run-path "^2.0.0"
76 | p-finally "^1.0.0"
77 | signal-exit "^3.0.0"
78 | strip-eof "^1.0.0"
79 |
80 | find-up@^2.1.0:
81 | version "2.1.0"
82 | resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
83 | dependencies:
84 | locate-path "^2.0.0"
85 |
86 | follow-redirects@^1.3.0:
87 | version "1.4.1"
88 | resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.4.1.tgz#d8120f4518190f55aac65bb6fc7b85fcd666d6aa"
89 | dependencies:
90 | debug "^3.1.0"
91 |
92 | fs-extra@^5.0.0:
93 | version "5.0.0"
94 | resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd"
95 | dependencies:
96 | graceful-fs "^4.1.2"
97 | jsonfile "^4.0.0"
98 | universalify "^0.1.0"
99 |
100 | get-caller-file@^1.0.1:
101 | version "1.0.2"
102 | resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
103 |
104 | get-stream@^3.0.0:
105 | version "3.0.0"
106 | resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
107 |
108 | graceful-fs@^4.1.2, graceful-fs@^4.1.6:
109 | version "4.1.11"
110 | resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
111 |
112 | invert-kv@^1.0.0:
113 | version "1.0.0"
114 | resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
115 |
116 | is-buffer@^1.1.5:
117 | version "1.1.6"
118 | resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
119 |
120 | is-fullwidth-code-point@^1.0.0:
121 | version "1.0.0"
122 | resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
123 | dependencies:
124 | number-is-nan "^1.0.0"
125 |
126 | is-fullwidth-code-point@^2.0.0:
127 | version "2.0.0"
128 | resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
129 |
130 | is-stream@^1.1.0:
131 | version "1.1.0"
132 | resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
133 |
134 | isexe@^2.0.0:
135 | version "2.0.0"
136 | resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
137 |
138 | jsonfile@^4.0.0:
139 | version "4.0.0"
140 | resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
141 | optionalDependencies:
142 | graceful-fs "^4.1.6"
143 |
144 | lcid@^1.0.0:
145 | version "1.0.0"
146 | resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
147 | dependencies:
148 | invert-kv "^1.0.0"
149 |
150 | locate-path@^2.0.0:
151 | version "2.0.0"
152 | resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
153 | dependencies:
154 | p-locate "^2.0.0"
155 | path-exists "^3.0.0"
156 |
157 | lodash@^4.17.5:
158 | version "4.17.10"
159 | resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
160 |
161 | lru-cache@^4.0.1:
162 | version "4.1.2"
163 | resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.2.tgz#45234b2e6e2f2b33da125624c4664929a0224c3f"
164 | dependencies:
165 | pseudomap "^1.0.2"
166 | yallist "^2.1.2"
167 |
168 | markdown-table@^1.1.2:
169 | version "1.1.2"
170 | resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.2.tgz#c78db948fa879903a41bce522e3b96f801c63786"
171 |
172 | mem@^1.1.0:
173 | version "1.1.0"
174 | resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
175 | dependencies:
176 | mimic-fn "^1.0.0"
177 |
178 | mimic-fn@^1.0.0:
179 | version "1.2.0"
180 | resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
181 |
182 | mmarkdown@^1.0.0:
183 | version "1.0.0"
184 | resolved "https://registry.yarnpkg.com/mmarkdown/-/mmarkdown-1.0.0.tgz#f75481a7a954b60830e1016ca36a0d92857c6b30"
185 | dependencies:
186 | fs-extra "^5.0.0"
187 | path-extra "^4.2.1"
188 | yargs "^11.0.0"
189 |
190 | moment@^2.22.1:
191 | version "2.22.1"
192 | resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.1.tgz#529a2e9bf973f259c9643d237fda84de3a26e8ad"
193 |
194 | ms@2.0.0:
195 | version "2.0.0"
196 | resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
197 |
198 | npm-run-path@^2.0.0:
199 | version "2.0.2"
200 | resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
201 | dependencies:
202 | path-key "^2.0.0"
203 |
204 | number-is-nan@^1.0.0:
205 | version "1.0.1"
206 | resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
207 |
208 | os-locale@^2.0.0:
209 | version "2.1.0"
210 | resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
211 | dependencies:
212 | execa "^0.7.0"
213 | lcid "^1.0.0"
214 | mem "^1.1.0"
215 |
216 | p-defer@^1.0.0:
217 | version "1.0.0"
218 | resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
219 |
220 | p-finally@^1.0.0:
221 | version "1.0.0"
222 | resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
223 |
224 | p-limit@^1.1.0:
225 | version "1.2.0"
226 | resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c"
227 | dependencies:
228 | p-try "^1.0.0"
229 |
230 | p-locate@^2.0.0:
231 | version "2.0.0"
232 | resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
233 | dependencies:
234 | p-limit "^1.1.0"
235 |
236 | p-try@^1.0.0:
237 | version "1.0.0"
238 | resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
239 |
240 | path-exists@^3.0.0:
241 | version "3.0.0"
242 | resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
243 |
244 | path-extra@^4.2.1:
245 | version "4.2.1"
246 | resolved "https://registry.yarnpkg.com/path-extra/-/path-extra-4.2.1.tgz#c792f63109c51b79314a93fa34ab09dfc0dc1a33"
247 | dependencies:
248 | escape-string-regexp "^1.0.5"
249 | replace-ext "^1.0.0"
250 |
251 | path-key@^2.0.0:
252 | version "2.0.1"
253 | resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
254 |
255 | pseudomap@^1.0.2:
256 | version "1.0.2"
257 | resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
258 |
259 | replace-ext@^1.0.0:
260 | version "1.0.0"
261 | resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
262 |
263 | require-directory@^2.1.1:
264 | version "2.1.1"
265 | resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
266 |
267 | require-main-filename@^1.0.1:
268 | version "1.0.1"
269 | resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
270 |
271 | set-blocking@^2.0.0:
272 | version "2.0.0"
273 | resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
274 |
275 | shebang-command@^1.2.0:
276 | version "1.2.0"
277 | resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
278 | dependencies:
279 | shebang-regex "^1.0.0"
280 |
281 | shebang-regex@^1.0.0:
282 | version "1.0.0"
283 | resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
284 |
285 | signal-exit@^3.0.0:
286 | version "3.0.2"
287 | resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
288 |
289 | string-width@^1.0.1:
290 | version "1.0.2"
291 | resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
292 | dependencies:
293 | code-point-at "^1.0.0"
294 | is-fullwidth-code-point "^1.0.0"
295 | strip-ansi "^3.0.0"
296 |
297 | string-width@^2.0.0, string-width@^2.1.1:
298 | version "2.1.1"
299 | resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
300 | dependencies:
301 | is-fullwidth-code-point "^2.0.0"
302 | strip-ansi "^4.0.0"
303 |
304 | strip-ansi@^3.0.0, strip-ansi@^3.0.1:
305 | version "3.0.1"
306 | resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
307 | dependencies:
308 | ansi-regex "^2.0.0"
309 |
310 | strip-ansi@^4.0.0:
311 | version "4.0.0"
312 | resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
313 | dependencies:
314 | ansi-regex "^3.0.0"
315 |
316 | strip-eof@^1.0.0:
317 | version "1.0.0"
318 | resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
319 |
320 | universalify@^0.1.0:
321 | version "0.1.1"
322 | resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
323 |
324 | which-module@^2.0.0:
325 | version "2.0.0"
326 | resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
327 |
328 | which@^1.2.9:
329 | version "1.3.0"
330 | resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
331 | dependencies:
332 | isexe "^2.0.0"
333 |
334 | wrap-ansi@^2.0.0:
335 | version "2.1.0"
336 | resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
337 | dependencies:
338 | string-width "^1.0.1"
339 | strip-ansi "^3.0.1"
340 |
341 | y18n@^3.2.1:
342 | version "3.2.1"
343 | resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
344 |
345 | yallist@^2.1.2:
346 | version "2.1.2"
347 | resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
348 |
349 | yargs-parser@^9.0.2:
350 | version "9.0.2"
351 | resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
352 | dependencies:
353 | camelcase "^4.1.0"
354 |
355 | yargs@^11.0.0:
356 | version "11.0.0"
357 | resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.0.0.tgz#c052931006c5eee74610e5fc0354bedfd08a201b"
358 | dependencies:
359 | cliui "^4.0.0"
360 | decamelize "^1.1.1"
361 | find-up "^2.1.0"
362 | get-caller-file "^1.0.1"
363 | os-locale "^2.0.0"
364 | require-directory "^2.1.1"
365 | require-main-filename "^1.0.1"
366 | set-blocking "^2.0.0"
367 | string-width "^2.0.0"
368 | which-module "^2.0.0"
369 | y18n "^3.2.1"
370 | yargs-parser "^9.0.2"
371 |
--------------------------------------------------------------------------------
