├── .travis.yml
├── .npmignore
├── docs
    ├── logo.png
    ├── system.js
    ├── Link.js
    ├── theme.js
    ├── Pre.js
    ├── Heading.js
    ├── Box.js
    ├── Text.js
    ├── Button.js
    ├── Logo.js
    ├── App.js
    └── index.html
├── test.js.snap
├── .gitignore
├── .babelrc
├── LICENSE.md
├── package.json
├── src
    └── index.js
├── test.js
├── test.js.md
└── README.md


/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 9.0
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | docs
2 | .nyc_output
3 | coverage
4 | test.js*
5 | 


--------------------------------------------------------------------------------
/docs/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnblk/axs/HEAD/docs/logo.png


--------------------------------------------------------------------------------
/test.js.snap:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnblk/axs/HEAD/test.js.snap


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .nyc_output
2 | coverage
3 | dist
4 | package-lock.json
5 | yarn-lock.json
6 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "env",
4 |     "stage-0",
5 |     "react"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/docs/system.js:
--------------------------------------------------------------------------------
 1 | import objss from 'objss'
 2 | 
 3 | const system = (...funcs) => props => funcs
 4 |   .map(func => func(props))
 5 |   .filter(obj => obj !== null)
 6 |   .map(objss)
 7 |   .join('')
 8 | 
 9 | export default system
10 | 


--------------------------------------------------------------------------------
/docs/Link.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Base from '../src'
 3 | 
 4 | const Link = props =>
 5 |   <Base.a
 6 |     {...props}
 7 |     css={`
 8 |       font-weight: bold;
 9 |       color: inherit;
10 |     `}
11 |   />
12 | 
13 | export default Link
14 | 


--------------------------------------------------------------------------------
/docs/theme.js:
--------------------------------------------------------------------------------
 1 | const theme = {
 2 |   fontSizes: [
 3 |     12, 16, 20, 24, 32, 48, 64, 96, 128
 4 |   ],
 5 |   space: [
 6 |     0, 4, 8, 16, 32, 64, 128, 256
 7 |   ],
 8 |   colors: {
 9 |     black: '#000',
10 |     blue: '#07c'
11 |   }
12 | }
13 | 
14 | export default theme
15 | 


--------------------------------------------------------------------------------
/docs/Pre.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Text from './Text'
 3 | 
 4 | const Pre = props =>
 5 |   <Text
 6 |     {...props}
 7 |     is='pre'
 8 |     m={0}
 9 |     css={`
10 |       font-family: Menlo, monospace;
11 |       font-size: 14px;
12 |       overflow: auto;
13 |     `}
14 |   />
15 | 
16 | export default Pre
17 | 


--------------------------------------------------------------------------------
/docs/Heading.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Text from './Text'
 3 | 
 4 | const Heading = props =>
 5 |   <Text
 6 |     {...props}
 7 |     is='h1'
 8 |     fontSize={[
 9 |       6, 7, 8
10 |     ]}
11 |     css={`
12 |       line-height: 1.25;
13 |       margin: 0;
14 |     `}
15 |   />
16 | 
17 | export default Heading
18 | 


--------------------------------------------------------------------------------
/docs/Box.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Base from '../src'
 3 | import { width, space, color } from 'styled-system'
 4 | import { withTheme } from 'theming'
 5 | import system from './system'
 6 | 
 7 | const Box = withTheme(props =>
 8 |   <Base {...props}
 9 |     css={system(
10 |       width,
11 |       space,
12 |       color
13 |     )(props) + props.css}
14 |   />
15 | )
16 | 
17 | export default Box
18 | 


--------------------------------------------------------------------------------
/docs/Text.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Base from '../src'
 3 | import { fontSize, fontWeight, space, color } from 'styled-system'
 4 | import { withTheme } from 'theming'
 5 | import system from './system'
 6 | 
 7 | const Text = withTheme(props =>
 8 |   <Base {...props}
 9 |     css={system(
10 |       fontSize,
11 |       fontWeight,
12 |       space,
13 |       color
14 |     )(props) + props.css}
15 |   />
16 | )
17 | 
18 | export default Text
19 | 


--------------------------------------------------------------------------------
/docs/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Base from '../src'
 3 | import { withTheme } from 'theming'
 4 | 
 5 | const Button = withTheme(({ theme, ...props }) =>
 6 |   <Base.a
 7 |     {...props}
 8 |     css={`
 9 |       display: inline-block;
10 |       text-decoration: none;
11 |       font-weight: bold;
12 |       padding-left: 24px;
13 |       padding-right: 24px;
14 |       padding-top: 12px;
15 |       padding-bottom: 12px;
16 |       border-radius: 8px;
17 |       color: #fff;
18 |       background-color: #000;
19 |       transition-property: background-color;
20 |       transition-duration: .2s;
21 |       transition-timing-function: ease-out;
22 |       &:hover {
23 |         background-color: ${theme.colors.blue};
24 |       }
25 |     `}
26 |   />
27 | )
28 | 
29 | export default Button
30 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # The MIT License (MIT)
 3 | Copyright (c) 2016 – 2017 Brent Jackson
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 
11 | 


--------------------------------------------------------------------------------
/docs/Logo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Base from '../src'
 3 | 
 4 | const M = 'M'
 5 | const L = 'L'
 6 | 
 7 | const a = 2 // edge offset
 8 | const b = 8 - a
 9 | const c = 16 - a // outer edge offset
10 | const base = 12.5
11 | const tri = [
12 |   M, a, base, L, c, base,
13 |   L, 8, base - b * Math.sqrt(3),
14 |   'z'
15 | ].join(' ')
16 | 
17 | const rad = deg => Math.PI * deg / 180
18 | const H = (c - a) * 2/4
19 | const A = Math.cos(rad(30)) * H
20 | const B = Math.sin(rad(30)) * H
21 | 
22 | const shiftx = n => n + A
23 | const shifty = n => n + B
24 | const handle = [
25 |   M, shiftx(a), shifty(base),
26 |   L, shiftx(8), shifty(base) - b * Math.sqrt(3)
27 | ].join(' ')
28 | 
29 | const Logo = ({
30 |   size = 768,
31 |   color = 'currentcolor',
32 |   ...props
33 | }) =>
34 |   <Base
35 |     {...props}
36 |     is='svg'
37 |     viewBox='0 0 16 16'
38 |     width={size}
39 |     height={size}
40 |     fill='none'
41 |     stroke={color}
42 |     css={`
43 |       display: block;
44 |       margin: 0;
45 |       overflow: visible;
46 |     `}>
47 |     <path d={tri} />
48 |     <path d={handle} />
49 |   </Base>
50 | 
51 | export default Logo
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "axs",
 3 |   "version": "4.0.0-1",
 4 |   "description": "Stupid simple style components for React",
 5 |   "main": "dist/index.js",
 6 |   "module": "dist/index.es.js",
 7 |   "scripts": {
 8 |     "prepublish": "babel src -d dist && babel src/index.js -o dist/index.es.js --no-babelrc --presets=stage-0,react",
 9 |     "start": "x0 dev docs/App.js -o",
10 |     "build": "x0 build docs/App.js --static -d docs",
11 |     "logo": "repng docs/Logo.js -w 768 -h 768 -o docs -f logo",
12 |     "size": "npm run prepublish && bundlesize",
13 |     "cover": "nyc report --reporter=html --reporter=lcov",
14 |     "test": "nyc ava"
15 |   },
16 |   "keywords": [
17 |     "react",
18 |     "react-component",
19 |     "style",
20 |     "stylis",
21 |     "ui",
22 |     "css",
23 |     "css-in-js"
24 |   ],
25 |   "author": "Brent Jackson",
26 |   "license": "MIT",
27 |   "devDependencies": {
28 |     "@compositor/x0": "^3.0.2",
29 |     "ava": "^0.24.0",
30 |     "babel-cli": "^6.26.0",
31 |     "babel-preset-env": "^1.6.1",
32 |     "babel-preset-react": "^6.24.1",
33 |     "babel-preset-stage-0": "^6.24.1",
34 |     "babel-register": "^6.26.0",
35 |     "bundlesize": "^0.15.3",
36 |     "nyc": "^11.4.1",
37 |     "objss": "^1.0.3",
38 |     "react-test-renderer": "^16.2.0",
39 |     "repng": "^1.0.1",
40 |     "styled-system": "^1.1.1",
41 |     "theming": "^1.3.0"
42 |   },
43 |   "dependencies": {
44 |     "html-tags": "^2.0.0",
45 |     "prop-types": "^15.6.0",
46 |     "react": "^16.2.0",
47 |     "stylis": "^3.4.5"
48 |   },
49 |   "ava": {
50 |     "require": [
51 |       "babel-register"
52 |     ],
53 |     "babel": "inherit"
54 |   },
55 |   "bundlesize": [
56 |     {
57 |       "path": "src/index.js",
58 |       "maxSize": "0.8 kb"
59 |     },
60 |     {
61 |       "path": "dist/index.js",
62 |       "maxSize": "1.8 kb"
63 |     }
64 |   ]
65 | }
66 | 


--------------------------------------------------------------------------------
/docs/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { ThemeProvider } from 'theming'
 3 | import Base, { Style } from '../src'
 4 | import theme from './theme'
 5 | 
 6 | import Box from './Box'
 7 | import Logo from './Logo'
 8 | import Heading from './Heading'
 9 | import Text from './Text'
10 | import Pre from './Pre'
11 | import Button from './Button'
12 | import Link from './Link'
13 | 
14 | const App = props => (
15 |   <React.Fragment>
16 |     <meta name='viewport' content='width=device-width,initial-scale=1' />
17 |     <title>Axs</title>
18 |     <meta name='description' content={description} />
19 |     <meta name='twitter:site' content='@jxnblk' />
20 |     <meta name='twitter:card' content='summary' />
21 |     <meta name='twitter:title' content='Axs' />
22 |     <meta name='twitter:description' content={description} />
23 |     <meta name='twitter:image' content='http://jxnblk.com/axs/logo.png' />
24 |     <ThemeProvider theme={theme}>
25 |       <React.Fragment>
26 |         <Style css={basecss} />
27 |         <Box px={[ 4, 5 ]} py={3}>
28 |           <Logo size={256} />
29 |           <Heading>
30 |             Axs
31 |           </Heading>
32 |           <Text fontWeight={700} mb={4}>
33 |             {description}
34 |           </Text>
35 |           <Pre mb={4}>npm i axs</Pre>
36 |           <Button
37 |             href='https://github.com/jxnblk/axs'
38 |             children='GitHub'
39 |           />
40 |         </Box>
41 |         <Box px={[ 4, 5 ]} py={3}>
42 |           <Pre children={example} />
43 |         </Box>
44 |         <Box is='footer' px={[ 4, 5 ]} py={3}>
45 |           <Link href='http://jxnblk.com'>
46 |             Made by Jxnblk
47 |           </Link>
48 |         </Box>
49 |       </React.Fragment>
50 |     </ThemeProvider>
51 |   </React.Fragment>
52 | )
53 | 
54 | const basecss = `
55 | * { box-sizing: border-box }
56 | body {
57 |   font-family: -apple-system, system-ui, sans-serif;
58 |   line-height: 1.5;
59 |   margin: 0;
60 | }
61 | `
62 | const description = 'Stupid simple style components for React'
63 | const example = `const Heading = props =>
64 |   <Base.h2 {...props} css='color:tomato;' />`
65 | 
66 | export default App
67 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import stylis from 'stylis'
 4 | import tags from 'html-tags'
 5 | 
 6 | let _id = 0
 7 | let cache = {}
 8 | const uuid = () => 'x' + (_id++).toString(36)
 9 | 
10 | const createCSS = css => {
11 |   const className = cache[css] || uuid()
12 |   const rules = stylis('.' + className, css)
13 |   const cached = !!cache[css]
14 |   cache[css] = className
15 | 
16 |   // This might need adjustments
17 |   if (cached) return { rules: false, className }
18 | 
19 |   return { rules, className }
20 | }
21 | 
22 | const reset = () => {
23 |   _id = 0
24 |   cache = {}
25 | }
26 | 
27 | export const Style = props => (
28 |   <style
29 |     dangerouslySetInnerHTML={{
30 |       __html: props.css
31 |     }}
32 |   />
33 | )
34 | 
35 | export class Base extends React.Component {
36 |   static reset = reset
37 | 
38 |   static propTypes = {
39 |     css: PropTypes.string,
40 |     innerRef: PropTypes.func,
41 |     is: PropTypes.oneOfType([
42 |       PropTypes.string,
43 |       PropTypes.func
44 |     ])
45 |   }
46 | 
47 |   static defaultProps = {
48 |     is: 'div',
49 |     css: ''
50 |   }
51 | 
52 |   constructor (props) {
53 |     super()
54 | 
55 |     this.state = createCSS(props.css)
56 |   }
57 | 
58 |   componentWillReceiveProps (next) {
59 |     if (next.css === this.props.css) return
60 |     delete cache[this.props.css]
61 |     const nextState = createCSS(next.css)
62 |     this.setState(nextState)
63 |   }
64 | 
65 |   render () {
66 |     const {
67 |       is,
68 |       css,
69 |       innerRef,
70 |       ...props
71 |     } = this.props
72 |     const { rules, className } = this.state
73 |     const Comp = is
74 | 
75 |     if (typeof Comp === 'function') {
76 |       return <Comp {...this.props} is={undefined} />
77 |     }
78 | 
79 |     return (
80 |       <React.Fragment>
81 |         {rules && <Style css={rules} />}
82 |         <Comp
83 |           {...props}
84 |           ref={innerRef}
85 |           className={className}
86 |         />
87 |       </React.Fragment>
88 |     )
89 |   }
90 | }
91 | 
92 | tags.forEach(tag => {
93 |   Base[tag] = props => <Base is={tag} {...props} />
94 | })
95 | 
96 | export default Base
97 | 


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
 1 | import test from 'ava'
 2 | import React from 'react'
 3 | import { create as render } from 'react-test-renderer'
 4 | import Base, { Style } from './src'
 5 | 
 6 | test.afterEach(() => {
 7 |   Base.reset()
 8 | })
 9 | 
10 | test('renders', t => {
11 |   const a = render(<Base />).toJSON()
12 |   t.snapshot(a)
13 | })
14 | 
15 | test('Style renders', t => {
16 |   const a = render(<Style css='.tomato{color:tomato;}' />).toJSON()
17 |   t.snapshot(a)
18 | })
19 | 
20 | test('renders with css prop', t => {
21 |   const a = render(<Base css='color:tomato;' />).toJSON()
22 |   t.snapshot(a)
23 | })
24 | 
25 | test('renders with decorated HTML element key', t => {
26 |   const a = render(<Base.h2 css='color:tomato;' />).toJSON()
27 |   t.snapshot(a)
28 |   t.is(a[1].type, 'h2')
29 | })
30 | 
31 | test('caches results', t => {
32 |   const a = render(
33 |     <React.Fragment>
34 |       <Base css='color:magenta;' />
35 |       <Base css='color:magenta;' />
36 |     </React.Fragment>
37 |   ).toJSON()
38 |   t.snapshot(a)
39 | })
40 | 
41 | test('Base.reset() clears cache', t => {
42 |   const a = render(<Base css='color:magenta;' />).toJSON()
43 |   Base.reset()
44 |   const b = render(<Base css='color:magenta;' />).toJSON()
45 |   t.snapshot(a)
46 |   t.snapshot(b)
47 |   t.deepEqual(a[0], b[0])
48 | })
49 | 
50 | test('Updates styles on css change', t => {
51 |   const base = render(<Base css='color:tomato;' />)
52 |   const a = base.toJSON()
53 |   base.update(<Base css='color:green;' />)
54 |   const b = base.toJSON()
55 |   t.is(a[1].props.className, 'x0')
56 |   t.is(b[1].props.className, 'x1')
57 |   t.snapshot(a)
58 |   t.snapshot(b)
59 | })
60 | 
61 | test('Skips update when css is the same', t => {
62 |   const base = render(<Base css='color:tomato;' />)
63 |   const a = base.toJSON()
64 |   base.update(<Base css='color:tomato;' />)
65 |   const b = base.toJSON()
66 |   t.is(a[1].props.className, 'x0')
67 |   t.is(b[1].props.className, 'x0')
68 |   t.deepEqual(a, b)
69 |   t.snapshot(a)
70 |   t.snapshot(b)
71 | })
72 | 
73 | test('Extends Axs components', t => {
74 |   const A = props => (
75 |     <Base {...props}
76 |       css={`
77 |         color: tomato;
78 |         ${props.css}
79 |       `}
80 |     />
81 |   )
82 |   const a = render(<Base is={A} css='font-size:32px;' />).toJSON()
83 |   t.regex(a[0].props.dangerouslySetInnerHTML.__html, /color:tomato;font-size:32px/)
84 |   t.snapshot(a)
85 | })
86 | 
87 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta charset='utf-8'>
 3 | 
 4 | <meta name="viewport" content="width=device-width,initial-scale=1"/><title>Axs</title><meta name="description" content="Stupid simple style components for React"/><meta name="twitter:site" content="@jxnblk"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Axs"/><meta name="twitter:description" content="Stupid simple style components for React"/><meta name="twitter:image" content="http://jxnblk.com/axs/logo.png"/><style>
 5 | * { box-sizing: border-box }
 6 | body {
 7 |   font-family: -apple-system, system-ui, sans-serif;
 8 |   line-height: 1.5;
 9 |   margin: 0;
10 | }
11 | </style><style>.x0{padding-left:32px;padding-right:32px;padding-top:16px;padding-bottom:16px;-webkit-undefined;-ms-flex-undefined;undefined;}@media screen and (min-width:40em){.x0{padding-left:64px;padding-right:64px;}}</style><div theme="[object Object]" px="4,5" py="3" class="x0"><style>.x1{display:block;margin:0;overflow:visible;}</style><svg viewBox="0 0 16 16" width="256" height="256" fill="none" stroke="currentcolor" class="x1"><path d="M 2 12.5 L 14 12.5 L 8 2.107695154586736 z"></path><path d="M 7.196152422706632 15.5 L 13.196152422706632 5.107695154586736"></path></svg><style>.x2{font-size:64px;line-height:1.25;margin:0;}@media screen and (min-width:40em){.x2{font-size:96px;}}@media screen and (min-width:52em){.x2{font-size:128px;}}</style><h1 theme="[object Object]" font-size="6,7,8" class="x2">Axs</h1><style>.x3{font-weight:700;margin-bottom:32px;-webkit-undefined;-ms-flex-undefined;undefined;}</style><div theme="[object Object]" font-weight="700" mb="4" class="x3">Stupid simple style components for React</div><style>.x4{margin:0px;margin-bottom:32px;font-family:Menlo,monospace;font-size:14px;overflow:auto;}</style><pre theme="[object Object]" mb="4" m="0" class="x4">npm i axs</pre><style>.x5{display:inline-block;text-decoration:none;font-weight:bold;padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;border-radius:8px;color:#fff;background-color:#000;-webkit-transition-property:background-color;transition-property:background-color;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}.x5:hover{background-color:#07c;}</style><a href="https://github.com/jxnblk/axs" class="x5">GitHub</a></div><div theme="[object Object]" px="4,5" py="3" class="x0"><style>.x6{margin:0px;font-family:Menlo,monospace;font-size:14px;overflow:auto;}</style><pre theme="[object Object]" m="0" class="x6">const Heading = props =&gt;
12 |   &lt;Base.h2 {...props} css=&#x27;color:tomato;&#x27; /&gt;</pre></div><footer theme="[object Object]" px="4,5" py="3" class="x0"><style>.x7{font-weight:bold;color:inherit;}</style><a href="http://jxnblk.com" class="x7">Made by Jxnblk</a></footer>
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/test.js.md:
--------------------------------------------------------------------------------
  1 | # Snapshot report for `test.js`
  2 | 
  3 | The actual snapshot is saved in `test.js.snap`.
  4 | 
  5 | Generated by [AVA](https://ava.li).
  6 | 
  7 | ## Base.reset() clears cache
  8 | 
  9 | > Snapshot 1
 10 | 
 11 |     [
 12 |       <style
 13 |         dangerouslySetInnerHTML={
 14 |           {
 15 |             __html: '.x0{color:magenta;}',
 16 |           }
 17 |         }
 18 |       />,
 19 |       <div
 20 |         className="x0"
 21 |       />,
 22 |     ]
 23 | 
 24 | > Snapshot 2
 25 | 
 26 |     [
 27 |       <style
 28 |         dangerouslySetInnerHTML={
 29 |           {
 30 |             __html: '.x0{color:magenta;}',
 31 |           }
 32 |         }
 33 |       />,
 34 |       <div
 35 |         className="x0"
 36 |       />,
 37 |     ]
 38 | 
 39 | ## Extends Axs components
 40 | 
 41 | > Snapshot 1
 42 | 
 43 |     [
 44 |       <style
 45 |         dangerouslySetInnerHTML={
 46 |           {
 47 |             __html: '.x1{color:tomato;font-size:32px;}',
 48 |           }
 49 |         }
 50 |       />,
 51 |       <div
 52 |         className="x1"
 53 |       />,
 54 |     ]
 55 | 
 56 | ## Skips update when css is the same
 57 | 
 58 | > Snapshot 1
 59 | 
 60 |     [
 61 |       <style
 62 |         dangerouslySetInnerHTML={
 63 |           {
 64 |             __html: '.x0{color:tomato;}',
 65 |           }
 66 |         }
 67 |       />,
 68 |       <div
 69 |         className="x0"
 70 |       />,
 71 |     ]
 72 | 
 73 | > Snapshot 2
 74 | 
 75 |     [
 76 |       <style
 77 |         dangerouslySetInnerHTML={
 78 |           {
 79 |             __html: '.x0{color:tomato;}',
 80 |           }
 81 |         }
 82 |       />,
 83 |       <div
 84 |         className="x0"
 85 |       />,
 86 |     ]
 87 | 
 88 | ## Style renders
 89 | 
 90 | > Snapshot 1
 91 | 
 92 |     <style
 93 |       dangerouslySetInnerHTML={
 94 |         {
 95 |           __html: '.tomato{color:tomato;}',
 96 |         }
 97 |       }
 98 |     />
 99 | 
100 | ## Updates styles on css change
101 | 
102 | > Snapshot 1
103 | 
104 |     [
105 |       <style
106 |         dangerouslySetInnerHTML={
107 |           {
108 |             __html: '.x0{color:tomato;}',
109 |           }
110 |         }
111 |       />,
112 |       <div
113 |         className="x0"
114 |       />,
115 |     ]
116 | 
117 | > Snapshot 2
118 | 
119 |     [
120 |       <style
121 |         dangerouslySetInnerHTML={
122 |           {
123 |             __html: '.x1{color:green;}',
124 |           }
125 |         }
126 |       />,
127 |       <div
128 |         className="x1"
129 |       />,
130 |     ]
131 | 
132 | ## caches results
133 | 
134 | > Snapshot 1
135 | 
136 |     [
137 |       <style
138 |         dangerouslySetInnerHTML={
139 |           {
140 |             __html: '.x0{color:magenta;}',
141 |           }
142 |         }
143 |       />,
144 |       <div
145 |         className="x0"
146 |       />,
147 |       <div
148 |         className="x0"
149 |       />,
150 |     ]
151 | 
152 | ## renders
153 | 
154 | > Snapshot 1
155 | 
156 |     [
157 |       '',
158 |       <div
159 |         className="x0"
160 |       />,
161 |     ]
162 | 
163 | ## renders with css prop
164 | 
165 | > Snapshot 1
166 | 
167 |     [
168 |       <style
169 |         dangerouslySetInnerHTML={
170 |           {
171 |             __html: '.x0{color:tomato;}',
172 |           }
173 |         }
174 |       />,
175 |       <div
176 |         className="x0"
177 |       />,
178 |     ]
179 | 
180 | ## renders with decorated HTML element key
181 | 
182 | > Snapshot 1
183 | 
184 |     [
185 |       <style
186 |         dangerouslySetInnerHTML={
187 |           {
188 |             __html: '.x0{color:tomato;}',
189 |           }
190 |         }
191 |       />,
192 |       <h2
193 |         className="x0"
194 |       />,
195 |     ]
196 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # Axs
  3 | 
  4 | Stupid simple style components for React
  5 | 
  6 | If you know React and you know CSS, you already know how to use this.
  7 | 
  8 | [![Build Status][badge]][travis]
  9 | 
 10 | [badge]: https://img.shields.io/travis/jxnblk/axs/master.svg?style=flat-square
 11 | [travis]: https://travis-ci.org/jxnblk/axs
 12 | 
 13 | <img src='docs/logo.png?raw=true' width='256' height='256' />
 14 | 
 15 | ```sh
 16 | npm i axs
 17 | ```
 18 | 
 19 | ```jsx
 20 | const Heading = props =>
 21 |   <Base.h2
 22 |     {...props}
 23 |     css={`
 24 |       color: tomato;
 25 |     `}
 26 |   />
 27 | ```
 28 | 
 29 | > A hand axe is a prehistoric stone tool... the longest-used tool in human history.
 30 | 
 31 | ## Features
 32 | 
 33 | - Minimal API surface area
 34 | - One component, three props
 35 | - React component-based API
 36 | - Server side rendering with no additional setup
 37 | - No custom Babel plugins or additional configuration needed
 38 | - Works in iframes
 39 | - 0.7 kb in under 100 LOC
 40 | 
 41 | ## Usage
 42 | 
 43 | ### Basic
 44 | 
 45 | Create components by wrapping the Base component and passing props and a `css` prop to add style.
 46 | 
 47 | ```jsx
 48 | const Heading = props =>
 49 |   <Base
 50 |     {...props}
 51 |     css={`
 52 |       color: tomato;
 53 |     `}
 54 |   />
 55 | ```
 56 | 
 57 | ### CSS syntax
 58 | 
 59 | The `css` prop uses [stylis][stylis] for a CSS-like syntax that allows pseudo-classes, media queries, animations, and nested selectors to be defined inline.
 60 | See the [stylis docs][stylis] for more info.
 61 | 
 62 | ```jsx
 63 | const Heading = props =>
 64 |   <Base
 65 |     {...props}
 66 |     css={`
 67 |       color: tomato;
 68 |       &:hover {
 69 |         color: black;
 70 |       }
 71 |     `}
 72 |   />
 73 | ```
 74 | 
 75 | ### HTML elements
 76 | 
 77 | To change the underlying HTML element, pass a tag name to the `is` prop.
 78 | 
 79 | ```jsx
 80 | const Heading = props =>
 81 |   <Base
 82 |     is='h1'
 83 |     {...props}
 84 |     css={`
 85 |       color: tomato;
 86 |     `}
 87 |   />
 88 | ```
 89 | 
 90 | Alternatively, the Base component is decorated with keys for all valid HTML elements, which map to the `is` prop.
 91 | 
 92 | ```jsx
 93 | const Heading = props =>
 94 |   <Base.h1
 95 |     {...props}
 96 |     css={`
 97 |       color: tomato;
 98 |     `}
 99 |   />
100 | ```
101 | 
102 | When using the component, the underlying element can be changed on a per-instance basis using the `is` prop.
103 | This is especially helpful for ensuring the use of correct HTML semantics, while keeping the component styles decoupled.
104 | 
105 | ```jsx
106 | <Heading is='h2'>
107 |   Hello
108 | </Heading>
109 | ```
110 | 
111 | ### Dynamic styles
112 | 
113 | Styles can be set dynamically based on props.
114 | 
115 | ```jsx
116 | const Heading = props =>
117 |   <Base.h2
118 |     {...props}
119 |     css={`
120 |       color: ${props.color};
121 |     `}
122 |   />
123 | ```
124 | 
125 | Using the component above with a custom `color` passed as a prop would look like this:
126 | 
127 | ```jsx
128 | <Heading color='tomato'>
129 |   Hello
130 | </Heading>
131 | ```
132 | 
133 | **Note:** unlike other libraries like [styled-components][styled-components], the `css` prop takes a string, not a tagged template literal, so passing functions into the `css` prop will do nothing.
134 | 
135 | ### Removing style props
136 | 
137 | To remove props used for styling from the underlying HTML element, use [destructuring][destructuring] to pick out the props used for styling.
138 | 
139 | ```jsx
140 | const Heading = ({ color, ...props }) =>
141 |   <Base.h2
142 |     {...props}
143 |     css={`
144 |       color: ${color};
145 |     `}
146 |   />
147 | ```
148 | 
149 | ### Styling other components
150 | 
151 | To style other components, pass the component to the `is` prop.
152 | 
153 | ```jsx
154 | const Link = props =>
155 |   <Base
156 |     is={ReactRouter.Link}
157 |     {...props}
158 |     css={`
159 |       color: #07c;
160 |     `}
161 |   />
162 | ```
163 | 
164 | ### Extending components
165 | 
166 | To make an Axs component extensible, pass the `css` prop argument to the Base component's `css` prop after the base styles.
167 | 
168 | ```jsx
169 | const Heading = ({ css, ...props }) =>
170 |   <Base.h2
171 |     {...props}
172 |     css={`
173 |       font-size: 32px;
174 |       ${css}
175 |     `}
176 |   />
177 | ```
178 | 
179 | To make an extension from the base Heading component, pass it to the `is` prop.
180 | 
181 | ```jsx
182 | const BigHeading = props =>
183 |   <Base
184 |     {...props}
185 |     is={Heading}
186 |     css={`
187 |       font-size: 64px;
188 |     `}
189 |   />
190 | ```
191 | 
192 | ### Server side rendering
193 | 
194 | Server side rendering works without the need for any additional setup.
195 | This is because CSS rulesets are created within the Base component,
196 | which then renders an inline `<style>` element with the component's CSS.
197 | 
198 | To render in Node.js, be sure to use [CommonJS module syntax](https://nodejs.org/api/modules.html) or transpile ES modules to CommonJS syntax with a tool like [Babel](https://babeljs.io).
199 | 
200 | ```js
201 | const React = require('react')
202 | const { renderToString } = require('react-dom')
203 | const Base = require('axs')
204 | 
205 | const html = renderToString(
206 |   React.createElement(Base, {
207 |     css: `
208 |       color: tomato;
209 |     `
210 |   }, 'Hello')
211 | )
212 | ```
213 | 
214 | ### Pseudo-classes
215 | 
216 | Since Axs uses [stylis][stylis] to parse strings to valid CSS,
217 | pseudo-classes can be added to components with a syntax like the following.
218 | The `&` refers to the component's generated className.
219 | 
220 | ```jsx
221 | const Link = props =>
222 |   <Base.a
223 |     {...props}
224 |     css={`
225 |       color: #07c;
226 |       text-decoration: none;
227 |       &:hover {
228 |         text-decoration: underline;
229 |       }
230 |     `}
231 |   />
232 | ```
233 | 
234 | ### Media queries
235 | 
236 | Media queries can also be handled inline with [stylis][stylis] syntax.
237 | 
238 | ```jsx
239 | const Heading = props =>
240 |   <Base.h2
241 |     {...props}
242 |     css={`
243 |       font-size: 32px;
244 |       @media screen and (min-width: 40em) {
245 |         font-size: 48px;
246 |       }
247 |     `}
248 |   />
249 | ```
250 | 
251 | ### Animation
252 | 
253 | CSS animations can also be handled with [stylis][stylis] syntax.
254 | 
255 | ```jsx
256 | const Heading = props =>
257 |   <Base.h2
258 |     {...props}
259 |     css={`
260 |       font-size: 32px;
261 |       animation-name: pop;
262 |       animation-timing-function: ease-in;
263 |       animation-duration: .2s;
264 | 
265 |       @keyframes pop {
266 |         0% { transform: scale(.75); }
267 |         50% { transform: scale(1.125); }
268 |         100% { transform: scale(1); }
269 |       }
270 |     `}
271 |   />
272 | ```
273 | 
274 | ### Theming
275 | 
276 | Theming can be added to any Axs component using the [theming][theming] library.
277 | 
278 | ```jsx
279 | import React from 'react'
280 | import Base from 'axs'
281 | import { withTheme, ThemeProvider } from 'theming'
282 | import theme from './theme'
283 | 
284 | const Heading = withTheme(({ color, theme, ...props }) =>
285 |   <Base.h2
286 |     {...props}
287 |     css={`
288 |       color: ${theme.blue};
289 |     `}
290 |   />
291 | )
292 | 
293 | const App = props => (
294 |   <ThemeProvider theme={theme}>
295 |     <Heading>
296 |       Hello
297 |     </Heading>
298 |   </ThemeProvider>
299 | )
300 | ```
301 | 
302 | ## API
303 | 
304 | ### Base
305 | 
306 | The Base component is a primitive React component that takes CSS as a prop, generates a unique className,
307 | and renders an inline style element along with the component.
308 | The `css` prop takes a string in a CSS-like syntax and uses [stylis][stylis] to create valid CSS rules.
309 | By default the Base component renders an HTML `<div>` element.
310 | To change the underlying HTML element, pass a tag to the `is` prop or use one of the keyed Base components.
311 | 
312 | ```jsx
313 | <Base
314 |   is='h2'
315 |   css='color:tomato;'
316 | />
317 | ```
318 | 
319 | ```jsx
320 | // using a Base component key
321 | <Base.h2
322 |   css='color:tomato;'
323 | />
324 | ```
325 | 
326 | Prop | Type | Description
327 | ---|---|---
328 | `css` | String | [stylis][stylis] compatible CSS string to apply to the component
329 | `is` | String or Component | sets the underlying HTML tag or React component to style
330 | `innerRef` | Function | callback to get the component's [React ref](https://reactjs.org/docs/refs-and-the-dom.html)
331 | 
332 | ## Motivation
333 | 
334 | React provides a powerful, functional API for rendering HTML with JavaScript.
335 | Creating styles for HTML can follow a similar pattern.
336 | By building on top of the React API, Axs is meant to make styling components effortless
337 | and require as little new syntax as possible.
338 | While other CSS-in-JS libraries add custom factory functions, methods, and additional utilities,
339 | Axs relies solely on React components and props for its API.
340 | The hope is that this makes Axs quicker to learn, easier to use, and more interoperable with the rest of the React ecosystem.
341 | 
342 | Axs also uses React to render inline style tags rather than adding custom DOM-related code,
343 | which makes using the library for server-side rendering work in the same way other React components do.
344 | This also means components can be rendered to other documents, such as in iframes,
345 | without the need for custom APIs or additional functionality.
346 | 
347 | 
348 | ### Related
349 | 
350 | - [styled-components](https://github.com/styled-components/styled-components)
351 | - [glamor](https://github.com/threepointone/glamor)
352 | - [glamorous](https://github.com/paypal/glamorous)
353 | - [emotion](https://github.com/emotion-js/emotion)
354 | - [styled-jsx](https://github.com/zeit/styled-jsx)
355 | - [jsxstyle](https://github.com/smyte/jsxstyle)
356 | - [styled-system](https://github.com/jxnblk/styled-system)
357 | - [nano-style](https://github.com/jxnblk/nano-style)
358 | - [cxs](https://github.com/jxnblk/cxs)
359 | 
360 | 
361 | [MIT License](LICENSE.md)
362 | 
363 | [stylis]: https://github.com/thysultan/stylis.js
364 | [styled-components]: https://github.com/styled-components/styled-components
365 | [destructuring]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
366 | [theming]: https://github.com/cssinjs/theming
367 | 
368 | 


--------------------------------------------------------------------------------