Skip to content

Simple rules #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: preprocess-css
Choose a base branch
from
Open

Simple rules #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
817862f
added rules attribute for handling classes
avigoldman Dec 4, 2017
2ccdeb8
added scoping and similifed the API for creating element rules
avigoldman Dec 4, 2017
f9e7a5a
updated all the elements to use the new API
avigoldman Dec 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 11 additions & 15 deletions packages/heml-elements/src/Block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,29 +19,25 @@ export default createElement('block', {
containsText: true,

rules: {
'.block': [ { '@pseudo': 'root' }, { display: trueHide('block') }, margin, width ],

'.block__table__ie': [ 'width', 'max-width', { [margin]: ieAlignFallback } ],

'.block__table': [ { '@pseudo': 'table' }, table ],

'.block__row': [ { '@pseudo': 'row' } ],

'.block__cell': [ { '@pseudo': 'cell' }, height, background, box, padding, border, borderRadius, 'vertical-align' ]
root: [ { display: trueHide('block') }, margin, width ],
table__ie: [ 'width', 'max-width', { [margin]: ieAlignFallback } ],
table: [ table ],
row: [ ],
cell: [ height, background, box, padding, border, borderRadius, 'vertical-align' ]
},

css (Style) {
return <Style>{` block { width: 100%; } `}</Style>
},

render (attrs, contents) {
attrs.class += ' block'
const { rules, ...defaultAttrs } = attrs
return (
<div {...attrs}>
{condition('mso | IE', `<table class="block__table__ie" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
<table class='block__table' role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%'>
<tr class='block__row'>
<td class='block__cell' width='100%' align='left' valign='top'>{contents}</td>
<div {...defaultAttrs} {...rules.root}>
{condition('mso | IE', `<table class="${rules.table__ie.className.join((' '))}" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
<table {...rules.table} role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%'>
<tr {...rules.row}>
<td {...rules.cell} width='100%' align='left' valign='top'>{contents}</td>
</tr>
</table>
{condition('mso | IE', `</td></tr></table>`)}
Expand Down
18 changes: 7 additions & 11 deletions packages/heml-elements/src/Body.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,9 @@ export default createElement('body', {
containsText: true,

rules: {
'.body': [ { '@pseudo': 'root' }, background ],

'.bodyTable': [ { '@pseudo': 'table' }, '@default', background ],

'.body__content': [ { '@pseudo': 'content' }, padding, font, text ],

'.preview': [ { 'background-color': transforms.convertProp('color') } ]
root: [ background ],
table: [ '@default', background ],
content: [ padding, font, text ]
},

css (Style) {
Expand All @@ -36,14 +32,14 @@ export default createElement('body', {
},

async render (attrs, contents) {
attrs.class += ' body'
const { rules, ...defaultAttrs } = attrs

return (
<body {...attrs} style='margin: 0; width: 100%;'>
<body {...defaultAttrs} {...rules.root} style='margin: 0; width: 100%;'>
{Preview.flush()}
<table class='bodyTable' role='presentation' width='100%' align='left' border='0' cellpadding='0' cellspacing='0' style='margin: 0;'>
<table {...rules.table} role='presentation' width='100%' align='left' border='0' cellpadding='0' cellspacing='0' style='margin: 0;'>
<tr>
<td class='body__content' align='left' width='100%' valign='top'>{contents}</td>
<td {...rules.content} align='left' width='100%' valign='top'>{contents}</td>
</tr>
</table>
<div style='display:none; white-space:nowrap; font-size:15px; line-height:0;'>{'&nbsp; '.repeat(30)}</div>
Expand Down
30 changes: 11 additions & 19 deletions packages/heml-elements/src/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,11 @@ export default createElement('button', {
},

rules: {
'.button': [
{ '@pseudo': 'root' }, { display: transforms.trueHide('block') } ],

'.button__table': [
{ '@pseudo': 'table' }, margin, table ],

'.button__cell': [
{ '@pseudo': 'cell' }, background, padding, borderRadius, border, height, width, box ],

'.button__link': [
{ '@pseudo': 'link' }, background, text, font ],
'.button__text': [
{ '@pseudo': 'text' }, 'color', 'text-decoration' ]
root: [ { display: transforms.trueHide('block') } ],
table: [ margin, table ],
cell: [ background, padding, borderRadius, border, height, width, box ],
link: [ background, text, font ],
text: [ 'color', 'text-decoration' ]
},

css (Style) {
Expand All @@ -50,18 +42,18 @@ export default createElement('button', {
},

render (attrs, contents) {
attrs.class += ' button'
const { rules, ...defaultAttrs } = attrs

return (
<div {...omit(attrs, [ 'href', 'target' ])}>
<div {...omit(defaultAttrs, [ 'href', 'target' ])} {...rules.root}>
<table role='presentation' width='100%' align='left' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td>
<table role='presentation' width='auto' align='center' border='0' cellspacing='0' cellpadding='0' class='button__table'>
<table {...rules.table} role='presentation' width='auto' align='center' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td align='center' class='button__cell'>
<a {...pick(attrs, [ 'href', 'target' ])} class='button__link' style='display: inline-block;'>
<span class='button__text'>{contents}</span>
<td {...rules.cell} align='center'>
<a {...rules.link} {...pick(attrs, [ 'href', 'target' ])} style='display: inline-block;'>
<span {...rules.text}>{contents}</span>
</a>
</td>
</tr>
Expand Down
13 changes: 4 additions & 9 deletions packages/heml-elements/src/Column.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default createElement('column', {
containsText: true,

rules: {
'.column': [ { '@pseudo': 'root' }, { display: transforms.trueHide(undefined, true) }, background, box, padding, border, borderRadius, 'vertical-align' ]
root: [ { display: transforms.trueHide(undefined, true) }, background, box, padding, border, borderRadius, 'vertical-align' ]
},

css (Style) {
Expand All @@ -35,16 +35,11 @@ export default createElement('column', {
},

render (attrs, contents) {
const small = parseInt(attrs.small, 10)
const large = parseInt(attrs.large, 10)
const largeWidth = `${Math.round((100 * large) / 12)}%`
attrs.class += ` column col-sm-${small}`

delete attrs.large
delete attrs.small
const { small, large, rules, ...defaultAttrs } = attrs
const largeWidth = `${Math.round((100 * parseInt(large, 10)) / 12)}%`

return (
<td {...attrs} width={largeWidth} style={`width: ${largeWidth};`} align='left' valign='top'>
<td {...defaultAttrs} {...rules.root} class={`column col-sm-${parseInt(small, 10)}`} width={largeWidth} style={`width: ${largeWidth};`} align='left' valign='top'>
{contents.length === 0 ? '&nbsp;' : contents}
</td>)
}
Expand Down
27 changes: 12 additions & 15 deletions packages/heml-elements/src/Container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,11 @@ export default createElement('container', {
containsText: true,

rules: {
'.container': [ { '@pseudo': 'root' }, { display: trueHide('block') }, margin, width ],

'.container__table__ie': [ 'width', 'max-width', { [margin]: ieAlignFallback } ],

'.container__table': [ { '@pseudo': 'table' }, table ],

'.container__row': [ { '@pseudo': 'row' } ],

'.container__cell': [ { '@pseudo': 'cell' }, height, background, box, padding, border, borderRadius ]
root: [ { display: trueHide('block') }, margin, width ],
table__ie: [ 'width', 'max-width', { [margin]: ieAlignFallback } ],
table: [ table ],
row: [],
cell: [ height, background, box, padding, border, borderRadius ]
},

css (Style) {
Expand All @@ -41,13 +37,14 @@ export default createElement('container', {
},

render (attrs, contents) {
attrs.class += ' container'
const { rules, ...defaultAttrs } = attrs

return (
<div {...attrs}>
{condition('mso | IE', `<table class="container__table__ie" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
<table class='container__table' role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%'>
<tr class='container__row'>
<td class='container__cell' width='100%' align='left' valign='top'>{contents}</td>
<div {...defaultAttrs} {...rules.root}>
{condition('mso | IE', `<table class="${rules.table__ie.className.join((' '))}" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
<table {...rules.table} role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%'>
<tr {...rules.row}>
<td {...cell} width='100%' align='left' valign='top'>{contents}</td>
</tr>
</table>
{condition('mso | IE', `</td></tr></table>`)}
Expand Down
27 changes: 12 additions & 15 deletions packages/heml-elements/src/Hr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,11 @@ export default createElement('hr', {
children: false,

rules: {
'.hr': [ { '@pseudo': 'root' }, { display: trueHide() }, margin, width ],

'.hr__table__ie': [ 'width', 'max-width', { [margin]: ieAlignFallback } ],

'.hr__table': [ { '@pseudo': 'table' }, table ],

'.hr__row': [ { '@pseudo': 'row' } ],

'.hr__cell': [ { '@pseudo': 'cell' }, height, background, box, padding, border, borderRadius, 'vertical-align' ]
root: [ { display: trueHide() }, margin, width ],
table__ie: [ 'width', 'max-width', { [margin]: ieAlignFallback } ],
table: [ table ],
row: [ ],
cell: [ height, background, box, padding, border, borderRadius, 'vertical-align' ]
},

css (Style) {
Expand All @@ -42,13 +38,14 @@ export default createElement('hr', {


render (attrs, contents) {
attrs.class += ' hr'
const { rules, ...defaultAttrs } = attrs

return (
<div {...attrs}>
{condition('mso | IE', `<table class="hr__table__ie" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
<table class='hr__table' role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%' style='table-layout: fixed;'>
<tr class='hr__row'>
<td class='hr__cell' width='100%' align='left' valign='top'>{`&nbsp;`}</td>
<div {...defaultAttrs} {...rules.root}>
{condition('mso | IE', `<table class="${rules.table__ie.className.join((' '))}" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
<table {...rules.table} role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%' style='table-layout: fixed;'>
<tr {...rules.row}>
<td {...rules.cell} width='100%' align='left' valign='top'>{`&nbsp;`}</td>
</tr>
</table>
{condition('mso | IE', `</td></tr></table>`)}
Expand Down
21 changes: 14 additions & 7 deletions packages/heml-elements/src/Img.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default createElement('img', {
},

rules: {
'img': [ { '@pseudo': 'root' }, { display: transforms.trueHide() }, '@default' ]
root: [ { display: transforms.trueHide() }, '@default' ]
},

css (Style) {
Expand All @@ -23,20 +23,27 @@ export default createElement('img', {
display: block;
max-width: 100%;
}

.img__inline {
display: inline-block;
}
`}</Style>
},

async render (attrs, contents) {
const isBlock = !attrs.inline
let { infer, src, width, rules, inline, ...defaultAttrs } = attrs

if (!!attrs.infer && has(attrs, 'src') && !attrs.width) {
attrs.width = await getWidth(attrs.src, attrs.infer === 'retina')
if (!!infer && !!src && !width) {
width = await getWidth(src, infer === 'retina')
}

attrs.class += ` ${isBlock ? 'img__block' : 'img__inline'}`
attrs.style = isBlock ? '' : 'display: inline-block;'

return <img {...omit(attrs, 'inline', 'infer')} />

return <img {...rules.root}
src={src}
width={width || 'auto'}
{...defaultAttrs}
class={!inline ? 'img__block' : 'img__inline'} />
}
})

Expand Down
17 changes: 8 additions & 9 deletions packages/heml-elements/src/Row.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,18 @@ export default createElement('row', {
children: [ 'column' ],

rules: {
'.row': [ { '@pseudo': 'root' }, { display: transforms.trueHide('block') } ],

'.row__table': [ { '@pseudo': 'table' } ],

'.row__row': [ { '@pseudo': 'row' } ]
root: [ { display: transforms.trueHide('block') } ],
table: [ ],
row: [ ]
},

render (attrs, contents) {
attrs.class += ' row'
const { rules, ...defaultAttrs } = attrs

return (
<div {...attrs}>
<table class='row__table' width='100%' align='center' role='presentation' border='0' cellpadding='0' cellspacing='0' style='table-layout: fixed;'>
<tr class='row__row'>{contents}</tr>
<div {...defaultAttrs} {...rules.root}>
<table {...rules.table} width='100%' align='center' role='presentation' border='0' cellpadding='0' cellspacing='0' style='table-layout: fixed;'>
<tr {...rules.row}>{contents}</tr>
</table>
</div>)
},
Expand Down
27 changes: 12 additions & 15 deletions packages/heml-elements/src/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,36 @@ import HEML, { createElement, transforms } from '@heml/utils' // eslint-disable-
const Table = createElement('table', {
attrs: true,
containsText: true,
rules: {
'.table': [ { '@pseudo': 'root' }, '@default', { display: transforms.trueHide('table') } ]
},
rules: { root: [ '@default', { display: transforms.trueHide('table') } ] },

render (attrs, contents) {
attrs.class += ' table'
return <table {...attrs}>{contents}</table>
const { rules, ...defaultAttrs } = attrs

return <table {...defaultAttrs} {...rules.root}>{contents}</table>
}
})

const Tr = createElement('tr', {
attrs: true,
containsText: true,
rules: {
'.tr': [ { '@pseudo': 'root' }, '@default' ]
},
rules: { root: [ '@default' ] },

render (attrs, contents) {
attrs.class += ' tr'
return <tr {...attrs}>{contents}</tr>
const { rules, ...defaultAttrs } = attrs

return <tr {...defaultAttrs} {...rules.root}>{contents}</tr>
}
})

const Td = createElement('td', {
attrs: true,
containsText: true,
rules: {
'.td': [ { '@pseudo': 'root' }, '@default' ]
},
rules: { root: [ '@default' ] },

render (attrs, contents) {
attrs.class += ' td'
return <td {...attrs}>{contents}</td>
const { rules, ...defaultAttrs } = attrs

return <td {...defaultAttrs} {...rules.root}>{contents}</td>
}
})

Expand Down
15 changes: 8 additions & 7 deletions packages/heml-elements/src/Typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ function createTextElement (name, element = {}) {
return createElement(name, merge({
attrs: true,
rules: {
[`.${name}.${classToAdd}`]: [ { '@pseudo': 'root' }, '@default', { display: transforms.trueHide() }, margin, background, border, borderRadius, text, font ]
root: [ '@default', { display: transforms.trueHide() }, margin, background, border, borderRadius, text, font ]
},
render (attrs, contents) {
attrs.class += ` ${classToAdd} ${name}`
const { rules, ...defaultAttrs } = attrs

return <Tag {...attrs}>{contents}</Tag>
return <Tag {...defaultAttrs} {...rule.root} class={classToAdd}>{contents}</Tag>
}
}, element))
}
Expand All @@ -50,13 +50,14 @@ const A = createElement('a', {
defaultAttrs: { href: '#' },

rules: {
'.a': [ { '@pseudo': 'root' }, { '@default': true }, { display: transforms.trueHide('inline') }, 'color', 'text-decoration' ],
'.a__text': [ { '@pseudo': 'text' }, 'color', 'text-decoration' ]
root: [ '@default', { display: transforms.trueHide('inline') }, 'color', 'text-decoration' ],
text: [ 'color', 'text-decoration' ]
},

render (attrs, contents) {
attrs.class += ' a'
return <a {...attrs}><span class='a__text'>{contents}</span></a>
const { rules, ...defaultAttrs } = attrs

return <a {...defaultAttrs} {...rules.root}><span {...rules.text}>{contents}</span></a>
}
})

Expand Down
Loading