Skip to content

Instantly share code, notes, and snippets.

@geelen geelen/chain.js
Created Dec 6, 2017

Embed
What would you like to do?
const chain = rules => {
class ChainLink {
constructor(rules) {
this.rules = rules;
}
toString() {
return this.rules
}
}
Object.keys(rules).forEach(option => {
Object.defineProperty(ChainLink.prototype, option, {
get() {
return new ChainLink(this.rules.concat(rules[option]));
}
});
});
return new ChainLink([rules.default]);
};
import chain from './chain.js'
import { css } from 'styled-components'
export const flex = chain({
default: css`display: flex;`,
inline: css`display: inline-flex;`,
vertical: css`flex-direction: column;`,
align_center: css`align-items: center;`,
align_start: css`align-items: flex-start;`,
align_end: css`align-items: flex-end;`,
align_stretch: css`align-items: stretch;`,
center: css`justify-content: center;`,
center_both: css`justify-content: center; align-items: center;`,
justify_start: css`justify-content: flex-start;`,
justify_end: css`justify-content: flex-end;`,
wrap: css`flex-wrap: wrap;`,
})
export const typography = chain({
xxxl: css`font-size: 1.75rem;
${breakpoints.phone`
font-size: 1.5rem;
`}
`,
xxl: css`font-size: 1.5rem;
${breakpoints.phone`
font-size: 1.25rem;
`}
`,
xl: css`font-size: 1.25rem;
${breakpoints.phone`
font-size: 1.125rem;
`}
`,
l: css`font-size: 1.125rem;
${breakpoints.phone`
font-size: 1rem;
`}
`,
m: css`font-size: 1rem;`,
s: css`font-size: 0.875rem`,
xs: css`font-size: 0.8125rem`,
light: css`
font-weight: 400;
${breakpoints.retina`
-webkit-font-smoothing: antialiased;
`}
`,
medium: css`font-weight: 500;`,
bold: css`
font-weight: 700;
-webkit-font-smoothing: antialiased;
`,
center: css`text-align: center;`,
right: css`text-align: right;`,
left: css`text-align: left;`,
no_decoration: css`text-decoration: none;`,
underline: css`text-decoration: underline;`,
underline_on_hover: css`&:hover { text-decoration: underline; }`,
lh14: css`line-height: 1.4;`,
lh15: css`line-height: 1.5;`,
nowrap: css`white-space: nowrap;`,
uppercase: css`text-transform: uppercase;`,
inherit: css`font-family: inherit; font-size: inherit;`,
ellipsis: css`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`,
})
import { flex, typography } from './traits.js'
const Outer = styled.div`
${ flex.vertical.align_both };
`
const Header = styled.h1`
${ typography.xl.bold.uppercase };
`
/* etc etc */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.