Add style support to the artifacts app

Test Plan:
Note that the header, when rendered, is magenta.

wchargin-branch: stylish-artifacts
This commit is contained in:
William Chargin 2018-03-19 15:31:08 -07:00
parent bbecf00615
commit d18cb945af
4 changed files with 55 additions and 2 deletions

View File

@ -3,6 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"aphrodite": "^2.1.0",
"autoprefixer": "7.1.6", "autoprefixer": "7.1.6",
"babel-core": "6.26.0", "babel-core": "6.26.0",
"babel-eslint": "7.2.3", "babel-eslint": "7.2.3",

View File

@ -1,6 +1,7 @@
// @flow // @flow
import React from "react"; import React from "react";
import {StyleSheet, css} from "aphrodite/no-important";
type Props = {}; type Props = {};
type State = {}; type State = {};
@ -9,8 +10,16 @@ export default class App extends React.Component<Props, State> {
render() { render() {
return ( return (
<div> <div>
<h1>Hello, world!</h1> <header className={css(styles.header)}>
<h1>Artifact editor</h1>
</header>
</div> </div>
); );
} }
} }
const styles = StyleSheet.create({
header: {
color: "#f0f",
},
});

View File

@ -2,6 +2,16 @@ import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import App from "./App"; import App from "./App";
import {StyleSheetTestUtils} from "aphrodite/no-important";
beforeEach(() => {
StyleSheetTestUtils.suppressStyleInjection();
});
afterEach(() => {
StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
});
// Check that PropTypes check out. // Check that PropTypes check out.
it("renders without crashing", () => { it("renders without crashing", () => {
const div = document.createElement("div"); const div = document.createElement("div");

View File

@ -134,6 +134,14 @@ anymatch@^1.3.0:
micromatch "^2.1.5" micromatch "^2.1.5"
normalize-path "^2.0.0" normalize-path "^2.0.0"
aphrodite@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-2.1.0.tgz#bc88191d12759c2baee6af414a7cd788c2e02880"
dependencies:
asap "^2.0.3"
inline-style-prefixer "^4.0.0"
string-hash "^1.1.3"
app-root-path@^2.0.0: app-root-path@^2.0.0:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.0.1.tgz#cd62dcf8e4fd5a417efc664d2e5b10653c651b46" resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.0.1.tgz#cd62dcf8e4fd5a417efc664d2e5b10653c651b46"
@ -231,7 +239,7 @@ arrify@^1.0.0, arrify@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
asap@~2.0.3: asap@^2.0.3, asap@~2.0.3:
version "2.0.6" version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@ -1059,6 +1067,10 @@ boom@5.x.x:
dependencies: dependencies:
hoek "4.x.x" hoek "4.x.x"
bowser@^1.7.3:
version "1.9.3"
resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.3.tgz#6643ae4d783f31683f6d23156976b74183862162"
boxen@^1.2.1: boxen@^1.2.1:
version "1.3.0" version "1.3.0"
resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b" resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@ -1662,6 +1674,12 @@ css-color-names@0.0.4:
version "0.0.4" version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
css-in-js-utils@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.0.tgz#5af1dd70f4b06b331f48d22a3d86e0786c0b9435"
dependencies:
hyphenate-style-name "^1.0.2"
css-loader@0.28.7: css-loader@0.28.7:
version "0.28.7" version "0.28.7"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
@ -3164,6 +3182,10 @@ husky@^0.14.3:
normalize-path "^1.0.0" normalize-path "^1.0.0"
strip-indent "^2.0.0" strip-indent "^2.0.0"
hyphenate-style-name@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@~0.4.13: iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@~0.4.13:
version "0.4.19" version "0.4.19"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@ -3238,6 +3260,13 @@ ini@^1.3.4, ini@~1.3.0:
version "1.3.5" version "1.3.5"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
inline-style-prefixer@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-4.0.0.tgz#30a03df1b346ba6b1fb8a812bc3c9dabef48022d"
dependencies:
bowser "^1.7.3"
css-in-js-utils "^2.0.0"
inquirer@3.3.0, inquirer@^3.0.6: inquirer@3.3.0, inquirer@^3.0.6:
version "3.3.0" version "3.3.0"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
@ -6094,6 +6123,10 @@ strict-uri-encode@^1.0.0:
version "1.1.0" version "1.1.0"
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
string-hash@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
string-length@^1.0.1: string-length@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac" resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"