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:
parent
bbecf00615
commit
d18cb945af
|
@ -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",
|
||||||
|
|
|
@ -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",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
|
@ -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");
|
||||||
|
|
35
yarn.lock
35
yarn.lock
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue