css-modules & aphrodite examples
This commit is contained in:
Sérgio Ramos
parent
b9ccacbad9
commit
00da2f4171
|
|
@ -0,0 +1,8 @@
|
|||
#*
|
||||
*.o
|
||||
*.pyc
|
||||
*~
|
||||
extern/
|
||||
node_modules/
|
||||
tmp
|
||||
vendor/
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
|
||||
# testing
|
||||
coverage
|
||||
|
||||
# production
|
||||
build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
npm-debug.log
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { configure } from '@kadira/storybook';
|
||||
|
||||
function loadStories() {
|
||||
require('../src/stories');
|
||||
}
|
||||
|
||||
configure(loadStories, module);
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "aphrodite-spike",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"react-scripts": "0.6.1",
|
||||
"@kadira/storybook": "^2.21.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"aphrodite": "^0.6.0",
|
||||
"color": "^0.11.3",
|
||||
"react": "^15.3.2",
|
||||
"react-dom": "^15.3.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject",
|
||||
"storybook": "start-storybook -p 9009 -s public",
|
||||
"build-storybook": "build-storybook -s public"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<title>Aphrodite CSS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
import Button from './button';
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Hello</h1>
|
||||
<Button>Button</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet, css } from 'aphrodite';
|
||||
import color from 'color';
|
||||
import hoverTransition from './mixins/hover-transition';
|
||||
|
||||
import variables from './variables.json';
|
||||
import h3 from './globals/h3'; // this is just to showcase style dependencies (not mixins)
|
||||
|
||||
const primaryHover = hoverTransition({
|
||||
type: 'button',
|
||||
hover: color(variables.color.cta.primary).darken(0.2).rgbString(),
|
||||
color: variables.color.cta.primary
|
||||
});
|
||||
|
||||
const secondaryHover = hoverTransition({
|
||||
type: 'button',
|
||||
hover: color(variables.color.cta.secondary).darken(0.2).rgbString(),
|
||||
color: variables.color.cta.secondary
|
||||
});
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
display: 'block',
|
||||
verticalAlign: 'top',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: 10,
|
||||
margin: 0,
|
||||
border: 'none',
|
||||
':hover': {
|
||||
textDecoration: 'none'
|
||||
},
|
||||
':disabled': {
|
||||
color: 'black'
|
||||
}
|
||||
},
|
||||
primary: {
|
||||
...primaryHover,
|
||||
color: 'white'
|
||||
},
|
||||
secondary: {
|
||||
...secondaryHover,
|
||||
color: 'black',
|
||||
lineHeight: 25
|
||||
}
|
||||
});
|
||||
|
||||
const Button = (props) => {
|
||||
const {
|
||||
className = '',
|
||||
children = '',
|
||||
primary = true,
|
||||
secondary = false
|
||||
} = props;
|
||||
|
||||
const _styles = [
|
||||
styles.button,
|
||||
(primary || !secondary) ? styles.primary : styles.secondary,
|
||||
h3 // this is just to showcase style dependencies (not mixins)
|
||||
];
|
||||
|
||||
return (
|
||||
<button {...props} className={`${css(..._styles)} ${className}`}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { StyleSheet } from 'aphrodite';
|
||||
|
||||
import variables from '../variables.json';
|
||||
|
||||
export default StyleSheet.create({
|
||||
h3: {
|
||||
fontSize: 13
|
||||
}
|
||||
}).h3;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
const transition = 'ease-in-out all 0.5s';
|
||||
|
||||
const types = {
|
||||
button: ({
|
||||
type,
|
||||
color,
|
||||
hover
|
||||
}) => {
|
||||
return {
|
||||
backgroundColor: color,
|
||||
transition,
|
||||
':hover': {
|
||||
backgroundColor: hover,
|
||||
transition
|
||||
}
|
||||
};
|
||||
},
|
||||
text: ({
|
||||
type,
|
||||
color,
|
||||
hover
|
||||
}) => {
|
||||
return {
|
||||
color,
|
||||
transition,
|
||||
':hover': {
|
||||
color: hover,
|
||||
transition,
|
||||
textDecoration: 'underline'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export default (props) => {
|
||||
return types[props.type](props);
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import React from 'react';
|
||||
import { storiesOf, action, linkTo } from '@kadira/storybook';
|
||||
import Button from '../button';
|
||||
|
||||
storiesOf('Button', module)
|
||||
.add('with text', () => (
|
||||
<Button onClick={action('clicked')}>Hello Button</Button>
|
||||
))
|
||||
.add('with some emoji', () => (
|
||||
<Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
|
||||
))
|
||||
.add('secondary', () => (
|
||||
<Button secondary={true}>Hello Button</Button>
|
||||
));
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"font": {
|
||||
"primary": "'freddiesflowerstitle-webfont', 'Times', serif",
|
||||
"secondary": "'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif",
|
||||
"tertiary": "Georgia, Times, 'Times New Roman', serif"
|
||||
},
|
||||
"color": {
|
||||
"background": "#f2f2f2",
|
||||
"primary": {
|
||||
"main": "#ccc",
|
||||
"dark": "#222",
|
||||
"mid": "#959595",
|
||||
"light": "#f4f4f4"
|
||||
},
|
||||
"warning": "#C93F3F",
|
||||
"valid": "#547954",
|
||||
"cta": {
|
||||
"primary": "#60b4d6",
|
||||
"secondary": "#e5eef2"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"presets": [
|
||||
"react",
|
||||
"es2015"
|
||||
],
|
||||
"plugins": [
|
||||
["transform-object-rest-spread", {
|
||||
"useBuiltIns": true
|
||||
}],
|
||||
"add-module-exports",
|
||||
"transform-es2015-modules-commonjs",
|
||||
"react-hot-loader/babel"
|
||||
],
|
||||
"sourceMaps": "both"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/node_modules
|
||||
coverage
|
||||
.nyc_output
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"extends": "semistandard",
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 7,
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
},
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"babel",
|
||||
"react"
|
||||
],
|
||||
"rules": {
|
||||
"generator-star-spacing": 0,
|
||||
"babel/generator-star-spacing": 1,
|
||||
"space-before-function-paren": [2, "never"],
|
||||
"react/jsx-uses-react": 2,
|
||||
"react/jsx-uses-vars": 2,
|
||||
"react/react-in-jsx-scope": 2,
|
||||
"object-curly-newline": ["error", {
|
||||
"minProperties": 1
|
||||
}],
|
||||
"sort-vars": ["error", {
|
||||
"ignoreCase": true
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/node_modules
|
||||
coverage
|
||||
.nyc_output
|
||||
npm-debug.log
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
const Storybook = require('@kadira/storybook');
|
||||
|
||||
Storybook.configure(() => {
|
||||
require('../stories');
|
||||
}, module);
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
{
|
||||
"name": "redux-thunks-spike",
|
||||
"private": true,
|
||||
"license": "private",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --open --config webpack.config.js",
|
||||
"lint": "eslint .",
|
||||
"test": "NODE_ENV=test nyc ava test/*.js --fail-fast --verbose --tap",
|
||||
"open": "nyc report --reporter=html & open coverage/index.html",
|
||||
"coverage": "nyc check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"build-storybook": "build-storybook"
|
||||
},
|
||||
"dependencies": {
|
||||
"autoprefixer": "^6.5.1",
|
||||
"babel-eslint": "^7.0.0",
|
||||
"babel-loader": "^6.2.5",
|
||||
"babel-plugin-add-module-exports": "^0.2.1",
|
||||
"babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.16.0",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-preset-es2015": "^6.16.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"babel-preset-react-hmre": "^1.1.1",
|
||||
"babel-runtime": "^6.11.6",
|
||||
"css-loader": "^0.25.0",
|
||||
"postcss-loader": "^1.0.0",
|
||||
"postcss-modules-values": "^1.2.2",
|
||||
"postcss-nested": "^1.0.0",
|
||||
"react": "^15.3.2",
|
||||
"react-dom": "^15.3.2",
|
||||
"react-hot-loader": "^3.0.0-beta.6",
|
||||
"style-loader": "^0.13.1",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack-dev-server": "^1.16.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@kadira/storybook": "^2.24.1",
|
||||
"ava": "^0.16.0",
|
||||
"babel-register": "^6.16.3",
|
||||
"enzyme": "^2.5.1",
|
||||
"eslint": "^3.8.1",
|
||||
"eslint-config-semistandard": "^7.0.0",
|
||||
"eslint-config-standard": "^6.2.0",
|
||||
"eslint-plugin-babel": "^3.3.0",
|
||||
"eslint-plugin-promise": "^3.3.0",
|
||||
"eslint-plugin-react": "^6.4.1",
|
||||
"eslint-plugin-standard": "^2.0.1",
|
||||
"nyc": "^8.3.1",
|
||||
"react-addons-test-utils": "^15.3.2"
|
||||
},
|
||||
"ava": {
|
||||
"require": [
|
||||
"babel-register"
|
||||
],
|
||||
"babel": "inherit"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
# postcss + css-modules
|
||||
|
||||
#### src/showcase
|
||||
|
||||
contains all the files to showcase the components
|
||||
|
||||
#### src/components
|
||||
|
||||
contains all the css files and react components
|
||||
|
||||
## usage
|
||||
|
||||
## todo
|
||||
|
||||
- [ ] mixins (https://github.com/postcss/postcss-mixins)
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
@value color_primary_dark, font_primary, font_secondary, font_tertiary from "./variables.css";
|
||||
|
||||
.base {
|
||||
:global {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p,
|
||||
li {
|
||||
color: color_primary_dark;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: font_primary;
|
||||
}
|
||||
|
||||
h4,
|
||||
p,
|
||||
li {
|
||||
font-family: font_secondary;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
h5,
|
||||
p,
|
||||
li {
|
||||
& > a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 14px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 10px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 6px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: font_tertiary;
|
||||
font-style: italic;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
letter-spacing: -0.025em;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
select,
|
||||
a {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Removes the grey background when you tap on a link in IOS */
|
||||
button,
|
||||
a {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
const React = require('react');
|
||||
const styles = require('./index.css');
|
||||
|
||||
module.exports = ({
|
||||
children
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.base}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@value font_primary: "freddiesflowerstitle-webfont", "Times", serif;
|
||||
@value font_secondary: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
@value font_tertiary: Georgia, Times, "Times New Roman", serif;
|
||||
|
||||
@value color_primary: #ccc;
|
||||
@value color_primary_dark: #222;
|
||||
@value color_primary_mid: #959595;
|
||||
@value color_primary_light: #f4f4f4;
|
||||
@value color_warning: #C93F3F;
|
||||
@value color_valid: #547954;
|
||||
@value color_cta_primary: #60b4d6;
|
||||
@value color_cta_secondary: #e5eef2;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
const React = require('react');
|
||||
|
||||
module.exports = (props) => {
|
||||
return (
|
||||
<button>
|
||||
{props.children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
@value color_background from "../base/variables.css";
|
||||
|
||||
.container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.container::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@media (min-width: 544px) {
|
||||
.container {
|
||||
max-width: 576px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 940px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
const React = require('react');
|
||||
const styles = require('./index.css');
|
||||
|
||||
module.exports = ({
|
||||
children
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
Button: require('./button'),
|
||||
Container: require('./container'),
|
||||
Base: require('./base')
|
||||
};
|
||||
|
|
@ -0,0 +1 @@
|
|||
module.exports = require('./components');
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
const ReactDOM = require('react-dom');
|
||||
const React = require('react');
|
||||
|
||||
const render = () => {
|
||||
const Root = require('./root');
|
||||
|
||||
ReactDOM.render(
|
||||
<Root />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
};
|
||||
|
||||
render();
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept('./root', render);
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
const React = require('react');
|
||||
const ReactHotLoader = require('react-hot-loader');
|
||||
|
||||
const {
|
||||
Button,
|
||||
Container,
|
||||
Base
|
||||
} = require('../');
|
||||
|
||||
const {
|
||||
AppContainer
|
||||
} = ReactHotLoader;
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<AppContainer>
|
||||
<Base>
|
||||
<Container>
|
||||
<p>Hello</p>
|
||||
<Button>Hello</Button>
|
||||
</Container>
|
||||
</Base>
|
||||
</AppContainer>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!doctype html>
|
||||
<html lang='en-US'>
|
||||
<head>
|
||||
<title>React Boilerplate</title>
|
||||
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id='root'></div>
|
||||
<script src='/static/bundle.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
const React = require('react');
|
||||
const Storybook = require('@kadira/storybook');
|
||||
|
||||
const Home = require('../src/client/containers/home');
|
||||
|
||||
const homeStories = Storybook.storiesOf('Home', module);
|
||||
|
||||
homeStories.add('with nothing', () => (
|
||||
<Home />
|
||||
));
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
const test = require('ava');
|
||||
const enzyme = require('enzyme');
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
shallow
|
||||
} = enzyme;
|
||||
|
||||
test('renders <Home> without exploding', (t) => {
|
||||
const Home = require('../src/client/containers/home');
|
||||
const wrapper = shallow(<Home />);
|
||||
t.deepEqual(wrapper.length, 1);
|
||||
});
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
|
||||
const config = {
|
||||
debug: true,
|
||||
devtool: 'eval',
|
||||
context: path.join(__dirname, './src'),
|
||||
entry: [
|
||||
'webpack-dev-server/client?http://localhost:8080',
|
||||
'webpack/hot/only-dev-server',
|
||||
'react-hot-loader/patch',
|
||||
'./showcase/index.js'
|
||||
],
|
||||
output: {
|
||||
path: path.join(__dirname, './static'),
|
||||
publicPath: '/static/',
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoErrorsPlugin()
|
||||
],
|
||||
postcss: () => {
|
||||
return [
|
||||
require('postcss-modules-values'),
|
||||
require('postcss-nested'),
|
||||
require('autoprefixer')
|
||||
];
|
||||
},
|
||||
module: {
|
||||
loaders: [{
|
||||
test: /js?$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, './src')
|
||||
],
|
||||
loaders: ['babel']
|
||||
}, {
|
||||
test: /\.json?$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, './src')
|
||||
],
|
||||
loaders: ['json']
|
||||
}, {
|
||||
test: /\.css$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, './src')
|
||||
],
|
||||
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
const devServer = {
|
||||
hot: true,
|
||||
compress: true,
|
||||
lazy: false,
|
||||
publicPath: config.output.publicPath,
|
||||
historyApiFallback: {
|
||||
index: './static/index.html'
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Object.assign({
|
||||
devServer
|
||||
}, config);
|
||||
Loading…
Reference in New Issue