├── .gitignore ├── .prettierrc ├── .travis.yml ├── LICENSE ├── README.md ├── ReadmeSrc ├── .env_example ├── Readme.js ├── Readme.md ├── Rows.js ├── img │ ├── download.svg │ ├── info.svg │ ├── star.svg │ └── tag.svg ├── package.json ├── scripts │ ├── fetchData.js │ └── updateData.js └── yarn.lock ├── aphrodite ├── bootstrap.js ├── button.js ├── index.html ├── other │ └── generate-css-file.js ├── package.json └── webpack.config.js ├── babel-plugin-css-in-js ├── .babelrc ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── babel-plugin-pre-style ├── PreStyleConfig.js ├── atomic.css ├── atomic.css.classNames.js ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── bloody-react-styled ├── button.css ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── classy ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── csjs ├── button.js ├── index.html ├── package.json ├── styles.js └── webpack.config.js ├── css-constructor ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── css-light ├── base.js ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── css-loader ├── button.css ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── css-ns ├── button.css ├── button.js ├── css-ns.js ├── index.html ├── package.json └── webpack.config.js ├── cssobj ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── cssx-loader ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── cxs ├── .babelrc ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── electron-css ├── index.html ├── index.js ├── package.json └── webpack.config.js ├── emotion ├── button.emotion.css ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── es-css-modules ├── .babelrc ├── button.css ├── button.js ├── gulpfile.babel.js ├── index.html └── package.json ├── freestyler ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── glamor ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── glamorous ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── hiccup-css ├── button.js ├── index.html ├── package.json ├── styles.js └── webpack.config.js ├── hyperstyles ├── button.css ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── i-css ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── j2c ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── jsxstyle ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── linaria ├── .babelrc ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── nano-css ├── button.js ├── index.html ├── nano.js ├── package.json └── webpack.config.js ├── pre-style ├── .babelrc ├── PreStyleConfig.js ├── _vars.scss ├── app.scss ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── radium ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-css-builder ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-css-components ├── .babelrc ├── button.js ├── index.html ├── package.json ├── styles.react.css └── webpack.config.js ├── react-css-modules ├── button.css ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-cssom ├── button.css ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-fela ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-free-style ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-inline-css ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-inline-style ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-inline ├── button.js ├── index.html └── package.json ├── react-jss ├── button.js ├── index.html ├── jss.js ├── package.json └── webpack.config.js ├── react-look ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-native-web ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-statics-styles ├── button.jsx ├── gulpfile.js ├── index.html ├── package.json └── webpack.config.js ├── react-styl ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-style ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-styleable ├── button.css ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-stylematic ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-theme ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── react-vstyle ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── reactcss ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── restyles ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── scope-styles ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── smart-css ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── stile-react-media-queries ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── stilr ├── button.js ├── index.html ├── makefile ├── package.json └── webpack.config.js ├── stylable ├── .babelrc ├── button.js ├── button.st.css ├── index.html ├── main.css ├── package.json ├── webpack.config.js └── yarn.lock ├── style-it ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── styled-components ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── styled-jsx ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── styletron-react ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── styling ├── button.js ├── button.styling.js ├── index.html ├── package.json └── webpack.config.js ├── superstyle ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── typestyle ├── button.js ├── index.html ├── package.json └── webpack.config.js ├── uranium ├── button.js ├── index.html ├── package.json └── webpack.config.js └── webpage ├── .gitignore ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── src ├── App.js ├── App.test.js ├── components │ ├── Filter.js │ ├── Navbar.js │ ├── Seo.js │ └── Table.js ├── data.json ├── index.js └── registerServiceWorker.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | lib/ 2 | node_modules/ 3 | bundle.css 4 | bundle.js 5 | .idea 6 | .vscode 7 | .env -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "bracketSpacing": false, 4 | "semi": false, 5 | "printWidth": 80 6 | } 7 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Michele Bertoli 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /ReadmeSrc/.env_example: -------------------------------------------------------------------------------- 1 | GITHUB_TOKEN = YOURKEY -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /ReadmeSrc/Readme.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/MicheleBertoli/css-in-js.svg?branch=master)](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 | -------------------------------------------------------------------------------- /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 | `${icon} ${value}` 14 | 15 | const subWithIcon = args => `${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/img/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | download 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /ReadmeSrc/img/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | info 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ReadmeSrc/img/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | star 4 | 5 | 6 | -------------------------------------------------------------------------------- /ReadmeSrc/img/tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | tag 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /ReadmeSrc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-in-js", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "repository": "https://github.com/MicheleBertoli/css-in-js.git", 6 | "author": "Michele Bertoli", 7 | "license": "MIT", 8 | "scripts": { 9 | "generate-readme": "mmarkdown", 10 | "update-data": "node ./scripts/updateData.js" 11 | }, 12 | "devDependencies": { 13 | "mmarkdown": "^1.0.0", 14 | "moment": "^2.22.1", 15 | "axios": "^0.18.0", 16 | "dotenv": "^5.0.1", 17 | "delay": "^2.0.0", 18 | "lodash": "^4.17.5" 19 | }, 20 | "mmarkdown": { 21 | "backup": false, 22 | "src": "./Readme.md", 23 | "out": "../Readme.md", 24 | "scripts": "./Readme.js" 25 | }, 26 | "dependencies": { 27 | "markdown-table": "^1.1.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /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/scripts/updateData.js: -------------------------------------------------------------------------------- 1 | const fetchData = require('./fetchData') 2 | const fs = require('fs') 3 | 4 | const writeOut = (data, path) => 5 | new Promise((resolve, reject) => 6 | fs.writeFile(path, JSON.stringify(data, null, 2), 'utf-8', err => { 7 | if (err) reject(err) 8 | else resolve(data) 9 | }) 10 | ) 11 | 12 | async function fetch() { 13 | try { 14 | const data = await fetchData() 15 | await writeOut(data, '../webpage/src/data.json') 16 | } catch (error) { 17 | console.log('error', error) 18 | } 19 | } 20 | 21 | fetch() 22 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /aphrodite/bootstrap.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom' 3 | import Button from './button'; 4 | 5 | ReactDOM.render( 33 | 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /aphrodite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | aphrodite - CSS in JS 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /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 | 33 | 34 | ); 35 | } 36 | } 37 | 38 | render( 39 | 40 | ); 41 | } 42 | } 43 | 44 | render(, document.getElementById('content')); 45 | -------------------------------------------------------------------------------- /babel-plugin-pre-style/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pre-style - CSS in JS 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /babel-plugin-pre-style/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pre-style-css-in-js", 3 | "version": "1.0.0", 4 | "description": "pre-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.6.1", 12 | "react-dom": "^15.6.1" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.25.0", 16 | "babel-loader": "^7.1.1", 17 | "babel-plugin-pre-style": "^1.0.9-alpha", 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 | -------------------------------------------------------------------------------- /babel-plugin-pre-style/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | rules: [ 4 | { 5 | test: /\.js$/, 6 | exclude: /(node_modules|bower_components)/, 7 | use: { 8 | loader: 'babel-loader', 9 | options: { 10 | presets: ['env', 'react'], 11 | plugins: [ 12 | ['pre-style', { 'config': './PreStyleConfig.js' }] 13 | ] 14 | } 15 | } 16 | }, 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /bloody-react-styled/button.css: -------------------------------------------------------------------------------- 1 | :local .container { 2 | text-align: center; 3 | } 4 | 5 | :local .button { 6 | background-color: #ff0000; 7 | width: 320px; 8 | padding: 20px; 9 | border-radius: 5px; 10 | border: none; 11 | outline: none; 12 | } 13 | 14 | :local .button:hover { 15 | color: #fff; 16 | } 17 | 18 | :local .button:active { 19 | position: relative; 20 | top: 2px; 21 | } 22 | 23 | @media (max-width: 480px) { 24 | :local .button { 25 | width: 160px 26 | } 27 | } 28 | 29 | -------------------------------------------------------------------------------- /bloody-react-styled/button.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import styled from 'bloody-react-styled'; 3 | 4 | import styles from './button.css'; 5 | 6 | @styled(styles) 7 | class Button extends Component { 8 | render() { 9 | const {locals} = styles; 10 | return ( 11 |
12 | 13 |
14 | ); 15 | } 16 | }; 17 | 18 | React.render( 37 | 38 | ); 39 | } 40 | 41 | } 42 | 43 | React.render( 9 | 10 | ); 11 | } 12 | }); 13 | 14 | React.render(; 42 | } 43 | 44 | } 45 | 46 | const App = () => ( 47 | 48 | 49 | 50 | ); 51 | 52 | render(, document.getElementById('content')); 53 | -------------------------------------------------------------------------------- /css-constructor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | css-constructor - CSS in JS 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-light/button.js: -------------------------------------------------------------------------------- 1 | import {createElement as h} from 'react'; 2 | import {render} from 'react-dom'; 3 | import {Comp} from "./base"; 4 | 5 | class Button extends Comp { 6 | css = () => ({ 7 | '.container': { 8 | ta: 'center', 9 | '.button': { 10 | bg: 'red', 11 | w: '320px', 12 | pad: '20px', 13 | bdrad: '5px', 14 | bd: 'none', 15 | outline: 'none', 16 | '&:hover': { 17 | col: '#fff', 18 | }, 19 | '&:active': { 20 | pos: 'relative', 21 | top: '2px', 22 | }, 23 | }, 24 | }, 25 | '@media (max-width: 480px)': { 26 | '.container .button': { 27 | w: '160px', 28 | }, 29 | }, 30 | }); 31 | 32 | render() { 33 | return ( 34 | h('div', {className: 'container'}, 35 | h('button', {className: 'button'}, 'Click me!') 36 | ) 37 | ); 38 | } 39 | } 40 | 41 | render(h(Button), document.getElementById('content')); 42 | -------------------------------------------------------------------------------- /css-light/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | css-light - CSS in JS 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /css-light/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-light-css-in-js", 3 | "version": "1.0.0", 4 | "description": "css-light - CSS in JS", 5 | "scripts": { 6 | "build": "webpack ./button.js bundle.js" 7 | }, 8 | "author": "Vadim Dalecky", 9 | "license": "MIT", 10 | "dependencies": { 11 | "react": "^16.0.0", 12 | "react-dom": "^16.0.0", 13 | "css-light": "1.1.0" 14 | }, 15 | "devDependencies": { 16 | "babel-loader": "^5.1.3", 17 | "webpack": "^1.9.9" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /css-loader/button.css: -------------------------------------------------------------------------------- 1 | .container { 2 | text-align: center; 3 | } 4 | 5 | .button { 6 | background-color: #ff0000; 7 | width: 320px; 8 | padding: 20px; 9 | border-radius: 5px; 10 | border: none; 11 | outline: none; 12 | } 13 | 14 | .button:hover { 15 | color: #fff; 16 | } 17 | 18 | .button:active { 19 | position: relative; 20 | top: 2px; 21 | } 22 | 23 | @media (max-width: 480px) { 24 | .button { 25 | width: 160px 26 | } 27 | } 28 | 29 | -------------------------------------------------------------------------------- /css-loader/button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './button.css'; 3 | 4 | const Button = React.createClass({ 5 | render() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | }); 13 | 14 | React.render( 8 | 9 | ); 10 | } 11 | }); 12 | 13 | React.render( 51 | 52 | ) 53 | } 54 | } 55 | 56 | React.render( 37 | 38 | ); 39 | } 40 | } 41 | 42 | ReactDOM.render( 31 | 32 | ); 33 | 34 | ReactDOM.render(, document.getElementById('content')); 35 | -------------------------------------------------------------------------------- /cxs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | cxs - CSS in JS 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /electron-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Electron-css - CSS in JS 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /electron-css/index.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {render} from 'react-dom'; 3 | import {CSS, MediaQuery} from 'electron-css'; 4 | 5 | const mobileOnly = MediaQuery({ 6 | maxWidth: '480px' 7 | }) 8 | 9 | const container = CSS({ 10 | textAlign: 'center' 11 | }); 12 | 13 | const button = CSS({ 14 | background: 'red', 15 | width: '320px', 16 | padding: '20px', 17 | borderRadius: '5px', 18 | border: 'none', 19 | outline: 'none', 20 | onHover: { 21 | color: '#fff', 22 | }, 23 | onActive: { 24 | position: 'relative', 25 | top: '2px', 26 | }, 27 | [mobileOnly]: { 28 | width: '160px' 29 | } 30 | }); 31 | 32 | render( 33 |
34 | 35 |
36 | , document.getElementById('content')); -------------------------------------------------------------------------------- /electron-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electron-css-css-in-js", 3 | "version": "1.0.0", 4 | "description": "Electron-css - CSS in JS", 5 | "scripts": { 6 | "build": "webpack ./index.js bundle.js" 7 | }, 8 | "author": "Yann Stepienik", 9 | "license": "MIT", 10 | "dependencies": { 11 | "react": "^16.0.0", 12 | "react-dom": "^16.0.0", 13 | "electron-css": "0.6.0" 14 | }, 15 | "devDependencies": { 16 | "webpack": "^3.6.0", 17 | "http-server": "^0.10.0", 18 | "babel-core": "^6.26.0", 19 | "babel-loader": "^7.1.2", 20 | "babel-preset-es2015": "^6.24.1", 21 | "babel-preset-react": "^6.24.1", 22 | "babel-plugin-transform-decorators-legacy": "^1.3.4" 23 | } 24 | } -------------------------------------------------------------------------------- /electron-css/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | module: { 6 | loaders: [ 7 | { 8 | test: /\.js$/, 9 | loader: 'babel-loader', 10 | query: { 11 | presets: ['es2015', 'react'], 12 | plugins: ["transform-decorators-legacy"] 13 | } 14 | } 15 | ] 16 | } 17 | }; -------------------------------------------------------------------------------- /emotion/button.emotion.css: -------------------------------------------------------------------------------- 1 | .css-Container-10pov3x { text-align: center; } 2 | .css-Button-1wslxb2 { background-color: #ff0000; 3 | width: 320px; 4 | padding: 20px; 5 | border-radius: 5px; 6 | border: none; 7 | outline: none; } 8 | .css-Button-1wslxb2:hover { color: #fff; } 9 | .css-Button-1wslxb2:active { position: relative; top: 2px; } 10 | @media (max-width: 480px) { 11 | .css-Button-1wslxb2 { width: 160px; } } -------------------------------------------------------------------------------- /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 | 31 | 32 | ); 33 | 34 | render(, document.getElementById('content')); 35 | -------------------------------------------------------------------------------- /emotion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | emotion - CSS in JS 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /emotion/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | rules: [ 4 | { 5 | test: /\.js$/, 6 | exclude: /(node_modules|bower_components)/, 7 | use: { 8 | loader: 'babel-loader', 9 | options: { 10 | presets: ['env', 'react'], 11 | plugins: ['emotion/babel'] 12 | } 13 | } 14 | }, 15 | { 16 | test: /\.css$/, 17 | use: [ 'style-loader', 'css-loader' ] 18 | } 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /es-css-modules/.babelrc: -------------------------------------------------------------------------------- 1 | { "presets": ["es2015", "react"] } 2 | -------------------------------------------------------------------------------- /es-css-modules/button.css: -------------------------------------------------------------------------------- 1 | .container { 2 | text-align: center; 3 | } 4 | 5 | .button { 6 | background-color: #ff0000; 7 | width: 320px; 8 | padding: 20px; 9 | border-radius: 5px; 10 | border: none; 11 | outline: none; 12 | } 13 | 14 | .button:hover { 15 | color: #fff; 16 | } 17 | 18 | .button:active { 19 | position: relative; 20 | top: 2px; 21 | } 22 | 23 | @media (max-width: 480px) { 24 | .button { 25 | width: 160px 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /es-css-modules/button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {render} from 'react-dom'; 3 | import {container, button} from './button.m.css'; 4 | 5 | const Button = React.createClass({ 6 | render() { 7 | return ( 8 |
9 | 10 |
11 | ); 12 | } 13 | }); 14 | 15 | render( 34 | 35 | ); 36 | } 37 | } 38 | 39 | render(, document.getElementById('content')); 40 | -------------------------------------------------------------------------------- /freestyler/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | css-light - CSS in JS 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /freestyler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "freestyler-css-in-js", 3 | "version": "1.0.0", 4 | "description": "freestyler - CSS in JS", 5 | "scripts": { 6 | "build": "webpack ./button.js bundle.js" 7 | }, 8 | "author": "Vadim Dalecky", 9 | "license": "MIT", 10 | "dependencies": { 11 | "react": "^16.0.0", 12 | "react-dom": "^16.0.0", 13 | "freestyler": "1.5.0" 14 | }, 15 | "devDependencies": { 16 | "webpack": "^3.6.0", 17 | "http-server": "^0.10.0", 18 | "babel-core": "^6.26.0", 19 | "babel-loader": "^7.1.2", 20 | "babel-preset-es2015": "^6.24.1", 21 | "babel-preset-react": "^6.24.1", 22 | "babel-plugin-transform-decorators-legacy": "^1.3.4" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /freestyler/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | module: { 6 | loaders: [ 7 | { 8 | test: /\.js$/, 9 | loader: 'babel-loader', 10 | query: { 11 | presets: ['es2015', 'react'], 12 | plugins: ["transform-decorators-legacy"] 13 | } 14 | } 15 | ] 16 | } 17 | }; 18 | -------------------------------------------------------------------------------- /glamor/button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { style, hover, active, media } from 'glamor'; 4 | 5 | const button = { 6 | backgroundColor: '#ff0000', 7 | width: 320, 8 | padding: 20, 9 | borderRadius: 5, 10 | border: 'none', 11 | outline: 'none' 12 | }; 13 | 14 | const Button = () => ( 15 |
16 | 24 |
25 | ); 26 | 27 | ReactDOM.render( 9 | 10 | ); 11 | } 12 | }); 13 | 14 | React.render( 15 | 16 | ); 17 | } 18 | }; 19 | 20 | React.render( 40 | 41 | ); 42 | } 43 | } 44 | 45 | renderCss(document.getElementById('rootCss')); //call it once in root component 46 | ReactDOM.render( 35 | 36 | 37 | ); 38 | } 39 | }); 40 | 41 | React.render( 19 | 20 | ); 21 | 22 | ReactDOM.render( 33 | 34 | ); 35 | 36 | render(, document.getElementById('content')); 37 | -------------------------------------------------------------------------------- /linaria/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | linaria - CSS in JS 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /linaria/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "linaria-css-in-js", 3 | "version": "1.0.0", 4 | "description": "linaria - css-in-js", 5 | "scripts": { 6 | "build": "webpack ./button.js bundle.js" 7 | }, 8 | "author": "Michele Bertoli", 9 | "license": "MIT", 10 | "dependencies": { 11 | "linaria": "0.5.0", 12 | "react": "^16.2.0", 13 | "react-dom": "^16.2.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.26.0", 17 | "babel-loader": "^7.1.2", 18 | "babel-preset-env": "^1.6.1", 19 | "babel-preset-react": "^6.24.1", 20 | "css-loader": "^0.28.7", 21 | "extract-text-webpack-plugin": "^3.0.2", 22 | "style-loader": "^0.19.1", 23 | "webpack": "^3.10.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /nano-css/button.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {render} from 'react-dom'; 3 | import {rule} from './nano'; 4 | 5 | const container = rule({ 6 | textAlign: 'center' 7 | }); 8 | 9 | const button = rule({ 10 | background: 'red', 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 | render( 29 |
30 | 31 |
32 | , document.getElementById('content')); 33 | -------------------------------------------------------------------------------- /nano-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | nano-css - 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 | -------------------------------------------------------------------------------- /nano-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nano-css-css-in-js", 3 | "version": "1.0.0", 4 | "description": "nano-css - CSS in JS", 5 | "scripts": { 6 | "build": "webpack ./button.js bundle.js" 7 | }, 8 | "author": "Vadim Dalecky", 9 | "license": "MIT", 10 | "dependencies": { 11 | "react": "^16.0.0", 12 | "react-dom": "^16.0.0", 13 | "nano-css": "0.1.0" 14 | }, 15 | "devDependencies": { 16 | "webpack": "^3.6.0", 17 | "http-server": "^0.10.0", 18 | "babel-core": "^6.26.0", 19 | "babel-loader": "^7.1.2", 20 | "babel-preset-es2015": "^6.24.1", 21 | "babel-preset-react": "^6.24.1", 22 | "babel-plugin-transform-decorators-legacy": "^1.3.4" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /nano-css/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | module: { 6 | loaders: [ 7 | { 8 | test: /\.js$/, 9 | loader: 'babel-loader', 10 | query: { 11 | presets: ['es2015', 'react'], 12 | plugins: ["transform-decorators-legacy"] 13 | } 14 | } 15 | ] 16 | } 17 | }; 18 | -------------------------------------------------------------------------------- /pre-style/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"], 3 | "plugins": [ 4 | ["pre-style", { "config": "PreStyleConfig.js" }] 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /pre-style/PreStyleConfig.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | destination: './', 3 | outputFile: '_atomic.scss', 4 | prependedFiles: ['_vars.scss'], 5 | nameSpaces: ['styled'], 6 | }; 7 | -------------------------------------------------------------------------------- /pre-style/_vars.scss: -------------------------------------------------------------------------------- 1 | //Sass Variables 2 | $bgc: #ff0000; 3 | $hoverBgc: #fff; 4 | -------------------------------------------------------------------------------- /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/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 | 35 |
36 | ); 37 | 38 | ReactDOM.render(, document.getElementById('content')); 39 | -------------------------------------------------------------------------------- /pre-style/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Pre-Style - CSS in JS 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /pre-style/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Pre-Style-css-in-js", 3 | "version": "1.0.0", 4 | "description": "Pre-Style - CSS in JS", 5 | "scripts": { 6 | "build": "webpack ./button.js bundle.js" 7 | }, 8 | "author": "Benjamin Solum", 9 | "license": "MIT", 10 | "dependencies": { 11 | "react": "^15.4.2", 12 | "react-dom": "^15.4.2" 13 | }, 14 | "devDependencies": { 15 | "autoprefixer": "6.5.0", 16 | "babel-core": "6.16.0", 17 | "babel-eslint": "7.0.0", 18 | "babel-loader": "6.2.5", 19 | "babel-plugin-pre-style": "^1.0.9-alpha", 20 | "babel-preset-es2015": "6.16.0", 21 | "babel-preset-react": "6.16.0", 22 | "css-loader": "0.25.0", 23 | "cssnano": "3.7.5", 24 | "node-sass": "3.10.0", 25 | "postcss-loader": "0.13.0", 26 | "sass-loader": "4.0.2", 27 | "style-loader": "^0.13.1", 28 | "webpack": "1.13.2" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /pre-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 | test: /\.scss$/, 9 | loader: 'style-loader!css-loader?-minimize&-import&-modules!postcss-loader!sass-loader', 10 | exclude: /(node_modules|bower_components)/, 11 | }] 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /radium/button.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import Radium from 'radium'; 3 | 4 | const styles = { 5 | container: { 6 | textAlign: 'center' 7 | }, 8 | button: { 9 | backgroundColor: '#ff0000', 10 | width: '320px', 11 | padding: '20px', 12 | borderRadius: '5px', 13 | border: 'none', 14 | outline: 'none', 15 | ':hover': { 16 | color: '#fff', 17 | }, 18 | ':active': { 19 | position: 'relative', 20 | top: '2px' 21 | }, 22 | '@media (max-width: 480px)': { 23 | width: '160px' 24 | } 25 | } 26 | }; 27 | 28 | @Radium 29 | class Button extends Component { 30 | render() { 31 | return ( 32 |
33 | 34 |
35 | ); 36 | } 37 | } 38 | 39 | React.render( 23 | 24 | ); 25 | } 26 | }); 27 | 28 | React.render( 8 | 9 | ); 10 | 11 | ReactDOM.render(, document.getElementById('content')); 12 | -------------------------------------------------------------------------------- /react-css-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | react-css-components - CSS in JS 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /react-css-components/styles.react.css: -------------------------------------------------------------------------------- 1 | Container { 2 | text-align: center; 3 | } 4 | 5 | Button { 6 | base: button; 7 | background-color: #ff0000; 8 | width: 320px; 9 | padding: 20px; 10 | border-radius: 5px; 11 | border: none; 12 | outline: none; 13 | } 14 | 15 | Button:hover { 16 | color: #fff; 17 | } 18 | 19 | Button:active { 20 | position: relative; 21 | top: 2px; 22 | } 23 | 24 | @media (max-width: 480px) { 25 | Button { 26 | width: 160px 27 | } 28 | } 29 | 30 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /react-css-modules/button.css: -------------------------------------------------------------------------------- 1 | .container { 2 | text-align: center; 3 | } 4 | 5 | .button { 6 | background-color: #ff0000; 7 | width: 320px; 8 | padding: 20px; 9 | border-radius: 5px; 10 | border: none; 11 | outline: none; 12 | } 13 | 14 | .button:hover { 15 | color: #fff; 16 | } 17 | 18 | .button:active { 19 | position: relative; 20 | top: 2px; 21 | } 22 | 23 | @media (max-width: 480px) { 24 | .button { 25 | width: 160px 26 | } 27 | } 28 | 29 | -------------------------------------------------------------------------------- /react-css-modules/button.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | 4 | import styles from './button.css'; 5 | 6 | @CSSModules(styles) 7 | class Button extends Component { 8 | render() { 9 | return ( 10 |
11 | 12 |
13 | ); 14 | } 15 | }; 16 | 17 | React.render(; 16 | } 17 | } 18 | 19 | Button.displayName = 'Button'; 20 | 21 | ReactDOM.render( 22 | 23 | 24 | , 25 | document.getElementById('content') 26 | ); 27 | -------------------------------------------------------------------------------- /react-cssom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | react-cssom - CSS in JS 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /react-cssom/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | rules: [ 4 | { 5 | test: /\.js$/, 6 | exclude: /(node_modules|bower_components)/, 7 | use: { 8 | loader: 'babel-loader', 9 | options: { 10 | presets: ['env', 'react'] 11 | } 12 | } 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /react-fela/button.js: -------------------------------------------------------------------------------- 1 | import { createRenderer } from 'fela'; 2 | import { Provider, connect } from 'react-fela'; 3 | import { render } from 'react-dom'; 4 | import React from 'react'; 5 | 6 | const container = () => ({ 7 | textAlign: 'center' 8 | }); 9 | 10 | const button = () => ({ 11 | backgroundColor: '#ff0000', 12 | width: '320px', 13 | padding: '20px', 14 | borderRadius: '5px', 15 | border: 'none', 16 | outline: 'none', 17 | ':hover': { 18 | color: '#fff' 19 | }, 20 | ':active': { 21 | position: 'relative', 22 | top: '2px' 23 | }, 24 | '@media (max-width: 480px)': { 25 | width: '160px' 26 | } 27 | }); 28 | 29 | const mapStylesToProps = props => renderer => ({ 30 | container: renderer.renderRule(container), 31 | button: renderer.renderRule(button) 32 | }) 33 | 34 | const Button = connect(mapStylesToProps)(({ styles }) => ( 35 |
36 | 37 |
38 | )); 39 | 40 | const renderer = createRenderer(); 41 | const mountNode = document.getElementById('stylesheet'); 42 | 43 | render( 44 | 45 | 35 | 36 | 37 | ); 38 | } 39 | }; 40 | 41 | React.render( 34 | 35 | 36 | ); 37 | } 38 | }); 39 | 40 | React.render( 41 | 42 | ); 43 | } 44 | }); 45 | 46 | React.render( 33 | 34 | ); 35 | } 36 | } 37 | 38 | React.render( 37 | 38 | ); 39 | } 40 | }); 41 | 42 | Button = useSheet(Button, styles); 43 | 44 | React.render( 9 | 10 | ); 11 | } 12 | } 13 | 14 | const styles = StyleSheet.create(Button, { 15 | container: { 16 | textAlign: 'center' 17 | }, 18 | button: { 19 | backgroundColor: '#ff0000', 20 | width: 320, 21 | padding: 20, 22 | borderRadius: 5, 23 | border: 'none', 24 | outline: 'none', 25 | ':hover': { 26 | color: '#fff' 27 | }, 28 | ':active': { 29 | position: 'relative', 30 | top: 2 31 | }, 32 | '@media (max-width: 480px)': { 33 | width: 160 34 | } 35 | } 36 | }) 37 | 38 | Button = Look(Button); 39 | 40 | React.render( 30 | 31 | ); 32 | } 33 | } 34 | 35 | if (typeof window !== 'undefined') { 36 | React.render( 33 | 34 | ); 35 | } 36 | }); 37 | 38 | ReactStyl.addStylesheet(); 39 | 40 | React.render( 29 | 30 | ); 31 | } 32 | }); 33 | 34 | if (typeof window !== 'undefined') { 35 | React.render( 11 | 12 | ); 13 | } 14 | }; 15 | 16 | React.render( 35 | 36 | ); 37 | } 38 | } 39 | 40 | React.render( 26 | 27 | ) 28 | } 29 | } 30 | 31 | React.render( 40 | 41 | )) 42 | 43 | const stylesRenderer = createStylesRenderer(); 44 | stylesRenderer.attach(document.getElementById('style')); 45 | 46 | ReactDOM.render( 47 | 48 | 26 | 27 | ); 28 | } 29 | } 30 | 31 | React.render( 18 | 43 | 44 | ); 45 | 46 | const App = () => ( 47 | 48 | 49 | 50 | ); 51 | 52 | render(, document.getElementById('content')); 53 | -------------------------------------------------------------------------------- /styled-jsx/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | styled-jsx - CSS in JS 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /styletron-react/button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import { styled, StyletronProvider } from 'styletron-react'; 4 | import Styletron from 'styletron-client'; 5 | 6 | const Container = styled('div', { 7 | textAlign: 'center', 8 | }); 9 | 10 | const Button = styled('button', { 11 | backgroundColor: '#ff0000', 12 | width: '320px', 13 | padding: '20px', 14 | borderRadius: '5px', 15 | border: 'none', 16 | outline: 'none', 17 | ':hover': { 18 | color: '#fff', 19 | }, 20 | ':active': { 21 | position: 'relative', 22 | top: '2px', 23 | }, 24 | '@media (max-width: 480px)': { 25 | width: '160px', 26 | }, 27 | }); 28 | 29 | const App = () => ( 30 | 31 | 32 | 33 | ); 34 | 35 | const styleElements = document.getElementsByClassName('_styletron_hydrate_'); 36 | 37 | render( 38 | 39 | 40 | , 41 | document.getElementById('content') 42 | ); 43 | -------------------------------------------------------------------------------- /styletron-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | styletron-react - CSS in JS 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /styling/button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './button.styling'; 3 | 4 | const Button = React.createClass({ 5 | render() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | }); 13 | 14 | React.render( 21 | , 22 | document.getElementById('content') 23 | ); 24 | -------------------------------------------------------------------------------- /superstyle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | superstyle - CSS in JS 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /superstyle/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | rules: [ 4 | { 5 | test: /\.js$/, 6 | exclude: /(node_modules|bower_components)/, 7 | use: { 8 | loader: 'babel-loader', 9 | options: { 10 | presets: ['env', 'react'] 11 | } 12 | } 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /typestyle/button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import { style, media } from 'typestyle'; 4 | 5 | const container = style({ 6 | textAlign: 'center' 7 | }); 8 | 9 | const Container = ({ children }) => ( 10 |
11 |
{children}
12 |
13 | ) 14 | 15 | const button = style({ 16 | backgroundColor: '#ff0000', 17 | width: '320px', 18 | padding: '20px', 19 | borderRadius: '5px', 20 | border: 'none', 21 | outline: 'none', 22 | 23 | $nest: { 24 | '&:hover': { 25 | color: '#fff' 26 | }, 27 | 28 | '&:active': { 29 | position: 'relative', 30 | top: '2px' 31 | } 32 | }, 33 | }, media({ maxWidth: 480 }, { 34 | width: '160px' 35 | })); 36 | 37 | const Button = () => ( 38 |
39 | 40 |
41 | ); 42 | 43 | const App = () => ( 44 | 45 | 46 | 47 | ); 48 | 49 | render(, document.getElementById('content')); 50 | -------------------------------------------------------------------------------- /typestyle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TypeStyle - CSS in JS 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | 27 |
28 | )); 29 | 30 | render(