CSS in JS documentation

brave · Oct 27, 2016 · 77868c2 · 77868c2
1 parent 463c53d
commit 77868c2
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 0 deletions.
diff --git a/docs/style.md b/docs/style.md
@@ -0,0 +1,106 @@
+# Overview
+
+All applicable styles should be colocated with their corresponding JavaScript component using [Aphrodite](https://github.com/Khan/aphrodite).
+
+## Legacy
+
+All legacy styles are processed with [Less](http://lesscss.org/) and can be found in the /less directory. These should still be maintained but all future CSS should be written in JavaScript and kept inside their component file.
+
+## Example
+
+Here is an example of a React component styled with Aphrodite.
+
+Aphrodite will automatically create a `<style>` tag in the document `<head>` to put its generated styles in.
+
+```jsx
+const React = require('react')
+const ImmutableComponent = require('./immutableComponent')
+const Aphrodite = require('aphrodite')
+const StyleSheet = Aphrodite.StyleSheet
+const css = Aphrodite.css
+
+class Button extends ImmutableComponent {
+  render () {
+    return <span className={css(styles.browserButton)} 
+      disabled={this.props.disabled}
+      data-l10n-id={this.props.l10nId}
+      data-button-value={this.props.dataButtonValue}
+      onClick={this.props.onClick} />
+  }
+}
+
+const styles = StyleSheet.create({
+  browserButton: {
+    cursor: 'default',
+    display: 'inline-block',
+    lineHeight: '25px',
+    width: '25px',
+    height: '25px',
+
+    ':hover': {
+      color: 'black'
+    },
+
+    '@media (min-width: 500px)': {
+      width: '100px'
+    }
+  }
+})
+
+module.exports = Button
+```
+
+A few things to note:
+
+1. All multi-word properties become camel cased (lineHeight instead of line-height).
+2. Pseudo selectors and media queries can be given their own class or be nested within a selector.
+
+## Passing Styles to Child Components
+
+With Aphrodite, styles can be treated as props and passed down from parent to child. Here is an example:
+
+```jsx
+// addEditBookmarkHanger.js
+
+const React = require('react')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+const Button = require('../../../js/components/button')
+const Aphrodite = require('aphrodite')
+const StyleSheet = Aphrodite.StyleSheet
+const css = Aphrodite.css
+
+class AddEditBookmarkHanger extends ImmutableComponent {
+  render () {
+    <Button styles={[styles.hangerButton, styles.hangerText]} />
+  }
+}
+
+const styles = StyleSheet.create({
+  hangerButton: {
+    width: '50px',
+    height: '25px',
+
+    ':hover': {
+      color: orange
+    }
+  },
+
+  hangerText: {
+    fontSize: '20px'
+  }
+})
+
+// button.js
+
+const React = require('react')
+const ImmutableComponent = require('./immutableComponent')
+const Aphrodite = require('aphrodite')
+const StyleSheet = Aphrodite.StyleSheet
+const css = Aphrodite.css
+
+class Button extends ImmutableComponent {
+  render () {
+    return <span className={css(this.props.styles)} />
+  }
+}
+```
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
   "dependencies": {
     "abp-filter-parser-cpp": "1.2.x",
     "acorn": "3.2.0",
+    "aphrodite": "^1.0.0",
     "async": "^2.0.1",
     "electron-localshortcut": "^0.6.0",
     "electron-prebuilt": "brave/electron-prebuilt",