hawkins / create-react-toolbox-emotion-app Goto Github PK
View Code? Open in Web Editor NEWCreate React App with React Toolbox and Emotion
Home Page: https://github.com/tkh44/emotion/issues/79#issuecomment-313150409
Create React App with React Toolbox and Emotion
Home Page: https://github.com/tkh44/emotion/issues/79#issuecomment-313150409
This needs to go somewhere in the readme but I'm away so adding this as a TODO:
yarn run eject
)yarn add react-toolbox emotion
) "babel": {
"presets": [
"react-app"
- ]
+ ],
+ "plugins": [
+ "emotion/babel"
+ ]
},
*.emotion.css
files in both Webpack configs{
test: /\.css$/,
+ exclude: /\.emotion\.css$/,
use" [
/* ... */
]
}
css-loader
in dev config require.resolve('style-loader'),
- {
- loader: require.resolve('css-loader'),
- options: {
- importLoaders: 1,
- },
- },
+ "css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]"
... and in prod config
- {
- loader: require.resolve('css-loader'),
- options: {
- importLoaders: 1,
- minimize: true,
- sourceMap: true,
- },
- },
+ "css-loader?minimize&sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]",
TODO: Are string configs deprecated?
*.emotion.css
files in dev config {
test: /\.css$\,
/* ... */
},
+ {
+ test: /\.emotion\.css$/,
+ use: [
+ "style-loader",
+ "css-loader"
+ ]
+ }
... and in prod config
{
test: /\.css$\,
/* ... */
},
+ {
+ test: /emotion\.css$/,
+ use: ExtractTextPlugin.extract({
+ fallback: "style-loader",
+ use: {
+ loader: "css-loader",
+ options: {
+ sourceMap: true
+ }
+ }
+ })
+ }
src/App.css
+.app {
text-align: center;
}
+.appLogo {
+ animation: appLogoSpin infinite 20s linear;
height: 80px;
}
+.appHeader {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
+.appIntro {
font-size: large;
}
+@keyframes appLogoSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
... and in src/App.js
:
import React, { Component } from "react";
import logo from "./logo.svg";
+import styles from "./App.css";
class App extends Component {
render() {
return (
+ <div className={styles.app}>
+ <div className={styles.appHeader}>
+ <img src={logo} className={styles.appLogo} alt="logo" />
<h2>Welcome to React</h2>
</div>
+ <p className={styles.appIntro}>
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
src/css/theme.css
:
$color-primary: $palette-pink-700;
src/reactToolboxExample.js
:
import React from "react";
import { Button } from "react-toolbox/lib/button";
export default () => (
<Button accent raised>
Themed with `react-toolbox`
</Button>
);
src/emotionExample.js
:
import React from "react";
import styled from "emotion/react";
const H1 = styled.h1`
color: #ff4081;
`;
const Code = styled.code`
color: rgb(35, 93, 230);
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
&:after { content: "\`" };
&:before { content: "\`" };
`;
export default () => <H1>This was styled with <Code>emotion</Code>!</H1>;
include them in src/App.js
:
import React, { Component } from "react";
+import ThemeProvider from "react-toolbox/lib/ThemeProvider";
+import ReactToolboxExample from "./reactToolboxExample";
+import EmotionExample from "./emotionExample";
+import theme from "./css/theme.css";
import logo from "./logo.svg";
import styles from "./App.css";
class App extends Component {
render() {
return (
+ <ThemeProvider theme={theme}>
<div className={styles.app}>
<div className={styles.appHeader}>
<img src={logo} className={styles.appLogo} alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className={styles.appIntro}>
To get started, edit <code>src/App.js</code> and save to reload.
</p>
+ <ReactToolboxExample />
+ <EmotionExample />
</div>
</ThemeProvider>
);
}
}
export default App;
.gitignore
*.emotion.css
I.e., convert string config settings in step 5 and similar to a more readable object format, despite it not following "recommended practices" from react toolbox, since it goes against webpack's best practices anyway. Can't find the most appropriate resource that explains all of this, but here's one trivial example: https://webpack.github.io/docs/using-loaders.html#configuration
Just show an example of composing styles somehow between the two libs, or decide this is not useful and explain why somewhere
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.