The create-react-toolbox-emotion-app from hawkins

Document exact steps in process to configure project

This needs to go somewhere in the readme but I'm away so adding this as a TODO:

Eject from Create React App (yarn run eject)
Install react toolbox, emotion (yarn add react-toolbox emotion)
Add emotion to babel config

  "babel": {
    "presets": [
      "react-app"
-   ]
+   ],
+   "plugins": [
+     "emotion/babel"
+   ]
  },

Prevent CSS rules from being applied to *.emotion.css files in both Webpack configs

{
  test: /\.css$/,
+ exclude: /\.emotion\.css$/,
  use" [
    /* ... */
  ]
}

Use React Toolbox's configuration for 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?

Add config for *.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
+       }
+     }
+   })
+ }

Use CSS Modules instead of vanilla CSS insrc/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;

Add demonstration files

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;

You may also want to add this line to your .gitignore

*.emotion.css

Use object rules for loader config

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

Compose RT and E

Just show an example of composing styles somehow between the two libs, or decide this is not useful and explain why somewhere

hawkins / create-react-toolbox-emotion-app Goto Github PK

create-react-toolbox-emotion-app's People

Contributors

Stargazers

Watchers

create-react-toolbox-emotion-app's Issues

Document exact steps in process to configure project

Use object rules for loader config

Compose RT and E

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent