Date: Wed, 26 Jul 2017 15:10:30 -0700
Subject: [PATCH 5/9] using
---
.babelrc | 3 +-
babel/constelation.js | 372 +++++++++++++++++++++----------
src/scenes/Home/Home.emotion.css | 54 +++--
src/scenes/Home/Home.js | 114 +++++++---
4 files changed, 362 insertions(+), 181 deletions(-)
diff --git a/.babelrc b/.babelrc
index 8b8cc80..7447227 100644
--- a/.babelrc
+++ b/.babelrc
@@ -3,7 +3,8 @@
// Preset ordering is reversed (last to first).
{
"plugins": [
- "./babel/constelation",
+ /* "./babel/constelation", */
+ "constelation-babel",
/* ["emotion/babel", { "inline": true }], */
"emotion/babel",
diff --git a/babel/constelation.js b/babel/constelation.js
index b7446c4..28efb3b 100644
--- a/babel/constelation.js
+++ b/babel/constelation.js
@@ -4,38 +4,153 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
exports.default = function (babel) {
var t = babel.types;
- // console.log(babel);
+ function buildDefaultCssProp(css) {
+ return t.jSXAttribute(t.jSXIdentifier('css'), t.jSXExpressionContainer(t.templateLiteral([t.templateElement({
+ raw: css,
+ cooked: css
+ })], [])));
+ }
+
+ function buildProps(node, defaultCss, cssProps) {
+ var css = buildDefaultCssProp(defaultCss);
+ var cssTemplate = css.value.expression;
+ var props = [css];
+
+ if (node.openingElement.attributes == null) {
+ return props;
+ }
+
+ node.openingElement.attributes.forEach(function (attribute) {
+ var name = attribute.name.name;
+
+ if (name in propsToOmit) {
+ return;
+ } else if (name === 'css') {
+ addTemplateToTemplate(cssTemplate, attribute.value.expression);
+ } else if (name in cssProps) {
+ addCssProp(cssTemplate, attribute, cssProps[name]);
+ } else if (name in booleanProps) {
+ addBooleanProp(cssTemplate, attribute, name, booleanProps[name]);
+ } else if (name === 'grow') {
+ addGrowProp(cssTemplate, attribute);
+ } else {
+ props.push(attribute);
+ }
+ });
+
+ return props;
+ }
+
+ function addCssProp(cssTemplate, attribute, name) {
+ var value = attribute.value;
+
+
+ if (t.isJSXExpressionContainer(value)) {
+ var expression = value.expression;
+
+
+ if (t.isNumericLiteral(expression)) {
+ addStringToTemplate(cssTemplate, name + ': ' + expression.extra.raw + ';');
+ } else if (t.isStringLiteral(expression)) {
+ addStringToTemplate(cssTemplate, name + ': ' + expression.value + ';');
+ } else if (t.isIdentifier(expression)) {
+ addStringToTemplate(cssTemplate, name + ': ');
+ addQuasiToTemplate(cssTemplate, t.templateElement({ raw: ';', cooked: ';' }));
+ addExpressionToTemplate(cssTemplate, t.identifier(expression.name));
+ } else if (t.isTemplateLiteral(expression)) {
+ expression.quasis[0].value.cooked = name + ': ' + expression.quasis[0].value.cooked;
+ expression.quasis[0].value.raw = name + ': ' + expression.quasis[0].value.raw;
+ addTemplateToTemplate(cssTemplate, expression);
+ addStringToTemplate(cssTemplate, ';');
+ } else if (t.isBinaryExpression(expression)) {
+ addStringToTemplate(cssTemplate, name + ': ');
+ addExpressionToTemplate(cssTemplate, expression);
+ addQuasiToTemplate(cssTemplate, t.templateElement({ raw: ';', cooked: ';' }));
+ } else if (t.isConditionalExpression(expression)) {
+ addStringToTemplate(cssTemplate, name + ': ');
+ addExpressionToTemplate(cssTemplate, expression);
+ addQuasiToTemplate(cssTemplate, t.templateElement({ raw: ';', cooked: ';' }));
+ }
+ } else if (t.isStringLiteral(value)) {
+ addStringToTemplate(cssTemplate, name + ': ' + value.value + ';');
+ }
+ }
+
+ function addBooleanProp(cssTemplate, attribute, name, _ref) {
+ var consequent = _ref.consequent,
+ alternate = _ref.alternate;
+ var value = attribute.value;
+
+
+ if (value === null) {
+ addStringToTemplate(cssTemplate, consequent);
+ } else if (t.isJSXExpressionContainer(value)) {
+ var expression = value.expression;
+
+
+ if (t.isBooleanLiteral(expression) && expression.value === true) {
+ addStringToTemplate(cssTemplate, consequent);
+ } else if (t.isIdentifier(expression)) {
+ addExpressionToTemplate(cssTemplate, t.conditionalExpression(t.binaryExpression('===', t.identifier(expression.name), t.booleanLiteral(true)), t.stringLiteral(consequent), t.stringLiteral(alternate)));
+
+ addQuasiToTemplate(cssTemplate, t.templateElement({ raw: '', cooked: '' }));
+ }
+ }
+ }
+
+ function addGrowProp(cssTemplate, attribute) {
+ var value = attribute.value;
+
+
+ if (value === null) {
+ addStringToTemplate(cssTemplate, 'flex-grow: 1;');
+ } else if (t.isJSXExpressionContainer(value)) {
+ var expression = value.expression;
+
+
+ if (t.isNumericLiteral(expression)) {
+ addStringToTemplate(cssTemplate, 'flex-grow: ' + expression.extra.raw + ';');
+ } else if (t.isStringLiteral(expression)) {
+ addStringToTemplate(cssTemplate, 'flex-grow: ' + expression.value + ';');
+ } else if (t.isIdentifier(expression)) {
+ addStringToTemplate(cssTemplate, 'flex-grow: ');
+ addQuasiToTemplate(cssTemplate, t.templateElement({ raw: ';', cooked: ';' }));
+ addExpressionToTemplate(cssTemplate, t.identifier(expression.name));
+ }
+ } else if (t.isStringLiteral(value)) {
+ addStringToTemplate(cssTemplate, 'flex-grow: ' + value.value + ';');
+ }
+ }
return {
name: "ast-transform", // not required
visitor: {
JSXElement: function JSXElement(path) {
- // console.log(path);
-
- var isView = looksLike(path, {
- node: {
- openingElement: {
- name: {
- name: 'view'
- }
- }
- }
- });
-
- if (!isView) {
+ var element = path.node && path.node.openingElement && path.node.openingElement.name;
+
+ if (!element) {
return;
}
- renameTag(path.node);
- var props = buildProps(path.node);
-
- path.node.openingElement.attributes = props;
+ if (element.name === 'view') {
+ renameTag(path.node);
+ path.node.openingElement.attributes = buildProps(path.node, defaultColCss, propsToUse);
+ } else if (element.name === 'col') {
+ renameTag(path.node);
+ path.node.openingElement.attributes = buildProps(path.node, defaultColCss, propsToUse);
+ } else if (element.name === 'row') {
+ renameTag(path.node);
+ path.node.openingElement.attributes = buildProps(path.node, defaultRowCss, propsToUse);
+ } else if (element.name === 'flex') {
+ renameTag(path.node);
+ path.node.openingElement.attributes = buildProps(path.node, defaultFlexCss, flexPropsToUse);
+ }
}
}
};
@@ -43,110 +158,121 @@ exports.default = function (babel) {
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
var propsToOmit = {
as: true
};
var propsToUse = {
- width: true,
- height: true
+ top: 'top',
+ right: 'right',
+ bottom: 'bottom',
+ left: 'left',
+ width: 'width',
+ maxWidth: 'max-width',
+ minWidth: 'min-width',
+ height: 'height',
+ maxHeight: 'max-height',
+ minHeight: 'min-height',
+
+ flex: 'flex',
+ wrap: 'flex-wrap',
+ // grow: 'flex-grow',
+ shrink: 'flex-shrink',
+ basis: 'flex-basis',
+ order: 'order',
+ alignContent: 'align-content',
+ alignSelf: 'align-self',
+ align: 'align-items',
+ justify: 'justify-content',
+ // alignVertical
+ // alignHorizontal
+
+ padding: 'padding',
+ paddingTop: 'padding-top',
+ paddingRight: 'padding-right',
+ paddingBottom: 'padding-bottom',
+ paddingLeft: 'padding-left',
+ margin: 'margin',
+ marginTop: 'margin-top',
+ marginRight: 'margin-right',
+ marginBottom: 'margin-bottom',
+ marginLeft: 'margin-left',
+
+ position: 'position',
+ overflow: 'overflow',
+ overflowX: 'overflow-x',
+ overflowY: 'overflow-y',
+ //WebkitOverflowScrolling
+ zIndex: 'z-index'
};
-var defaultCss = 'display: flex;flex-direction: column;position: relative;';
-
-function buildDefaultCssProp() {
- return {
- type: 'JSXAttribute',
- name: {
- type: 'JSXIdentifier',
- name: 'css'
- },
- value: {
- type: "JSXExpressionContainer",
- expression: {
- type: "TemplateLiteral",
- expressions: [],
- quasis: [{
- type: 'TemplateElement',
- value: {
- raw: defaultCss,
- cooked: defaultCss
- }
- // tail: true
- }]
- }
- }
- };
-}
+var flexPropsToUse = _extends({}, propsToUse, {
+ direction: 'flex-direction'
+});
-function buildCssProp(attribute) {
- var name = attribute.name.name;
- var value = void 0;
- switch (attribute.value.type) {
- case 'JSXExpressionContainer':
- {
- if (attribute.value.expression.type === 'NumericLiteral') {
- value = attribute.value.expression.extra.raw + 'px';
- } else if (attribute.value.expression.type === 'StringLiteral') {
- value = attribute.value.expression.value;
- }
- break;
- }
- case 'StringLiteral':
- {
- value = attribute.value.value;
- break;
- }
+var booleanProps = {
+ center: {
+ consequent: 'align-items: center;justify-content: center;',
+ alternate: ''
+ },
+ hidden: {
+ consequent: 'display: none;',
+ alternate: ''
+ },
+ inline: {
+ consequent: 'display: inline-flex;',
+ alternate: ''
+ },
+ fit: {
+ consequent: 'height: 100%;width: 100%;',
+ alternate: ''
+ },
+ absoluteFill: {
+ consequent: 'position: absolute;top: 0;right: 0;bottom: 0;left: 0;',
+ alternate: ''
}
- // if (attribute.value.type
- // const value = attribute.value.value
-
- return name + ': ' + value + ';'
-
- // return {
- // type: 'TemplateElement',
- // value: {
- // raw: name + ': ' + value + ';',
- // cooked: name + ': ' + value + ';'
- // }
- // };
-}
+};
-function buildProps(node) {
- var css = buildDefaultCssProp();
- var props = [css];
+var defaultFlexCss = 'name: FLEX;display: flex;flex-shrink: 0;align-content: flex-start;position: relative;';
+var defaultColCss = 'name: COL;display: flex;flex-direction: column;flex-shrink: 0;align-content: flex-start;position: relative;';
+var defaultRowCss = 'name: ROW;display: flex;flex-direction: row;flex-shrink: 0;align-content: flex-start;position: relative;';
- if (node.openingElement.attributes == null) {
- return props;
- }
+function addTemplateToTemplate(target, template) {
+ if (template.expressions.length > 0) {
+ if (target.expressions.length === target.quasis.length) {
+ var _target$expressions, _target$quasis;
- node.openingElement.attributes.forEach(function (attribute) {
- var name = attribute.name.name;
-
- if (name in propsToOmit) {
- return;
- } else if (name === 'css') {
- var _props$0$value$expres;
-
- props[0].value.expression.quasis[0].value.raw = props[0].value.expression.quasis[0].value.raw + attribute.value.expression.quasis[0].value.raw;
- props[0].value.expression.quasis[0].value.cooked = props[0].value.expression.quasis[0].value.cooked + attribute.value.expression.quasis[0].value.cooked;
- // props[0].value.expression.quasis[0].value.cooked = props[0].value.expression.quasis[0].value.cooked + buildCssProp(attribute);
- // props[0].value.expression.quasis[0].tail = false
- // (_props$0$value$expres = props[0].value.expression.quasis).push.apply(_props$0$value$expres, _toConsumableArray(attribute.value.expression.quasis));
- } else if (name in propsToUse) {
- // console.log(attribute)
- // props[0].value.expression.quasis[0].tail = false
- // props[0].value.expression.quasis.push(buildCssProp(attribute));
- props[0].value.expression.quasis[0].value.raw = props[0].value.expression.quasis[0].value.raw + buildCssProp(attribute);
- props[0].value.expression.quasis[0].value.cooked = props[0].value.expression.quasis[0].value.cooked + buildCssProp(attribute);
+ // safe to just push these
+ (_target$expressions = target.expressions).push.apply(_target$expressions, _toConsumableArray(template.expressions));
+ (_target$quasis = target.quasis).push.apply(_target$quasis, _toConsumableArray(template.quasis));
} else {
- props.push(attribute);
+ var _target$expressions2, _target$quasis2;
+
+ (_target$expressions2 = target.expressions).push.apply(_target$expressions2, _toConsumableArray(template.expressions));
+
+ // concate the first quasi, then push on the rest
+ addStringToTemplate(target, template.quasis[0].value.raw);
+ (_target$quasis2 = target.quasis).push.apply(_target$quasis2, _toConsumableArray(template.quasis.slice(1)));
}
- });
+ } else {
+ addStringToTemplate(target, template.quasis[0].value.raw);
+ }
+}
- console.log(props)
+function addStringToTemplate(template, str) {
+ var last = template.quasis.length - 1;
- return props;
+ template.quasis[last].value.raw = template.quasis[last].value.raw + str;
+ template.quasis[last].value.cooked = template.quasis[last].value.cooked + str;
+}
+
+function addQuasiToTemplate(template, quasi) {
+ template.quasis.push(quasi);
+}
+
+function addExpressionToTemplate(template, expression) {
+ template.expressions.push(expression);
}
function renameTag(node) {
@@ -175,17 +301,21 @@ function renameTag(node) {
}
}
-function looksLike(a, b) {
- return a && b && Object.keys(b).every(function (bKey) {
- var bVal = b[bKey];
- var aVal = a[bKey];
- if (typeof bVal === 'function') {
- return bVal(aVal);
- }
- return isPrimitive(bVal) ? bVal === aVal : looksLike(aVal, bVal);
- });
-}
-
-function isPrimitive(val) {
- return val == null || /^[sbn]/.test(typeof val === 'undefined' ? 'undefined' : _typeof(val));
-}
\ No newline at end of file
+// function looksLike(a, b) {
+// return (
+// a &&
+// b &&
+// Object.keys(b).every(bKey => {
+// const bVal = b[bKey]
+// const aVal = a[bKey]
+// if (typeof bVal === 'function') {
+// return bVal(aVal)
+// }
+// return isPrimitive(bVal) ? bVal === aVal : looksLike(aVal, bVal)
+// })
+// )
+// }
+//
+// function isPrimitive(val) {
+// return val == null || /^[sbn]/.test(typeof val)
+// }
diff --git a/src/scenes/Home/Home.emotion.css b/src/scenes/Home/Home.emotion.css
index bc1672a..862b796 100644
--- a/src/scenes/Home/Home.emotion.css
+++ b/src/scenes/Home/Home.emotion.css
@@ -50,39 +50,35 @@
background-color: red; }
.css-BOX_UPDATED-1pa2pyx {
background-color: green; }
-.css-Home-1wjhkv7 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- flex-direction: column;
- position: relative;
- -webkit-flex-shrink: var(--css-Home-1wjhkv7-0);
- -ms-flex-negative: var(--css-Home-1wjhkv7-0);
- flex-shrink: var(--css-Home-1wjhkv7-0);
- -webkit-align-items: center;
- -ms-flex-align: center;
- -webkit-box-align: center;
- align-items: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- -webkit-box-pack: center;
- justify-content: center;
- -webkit-flex-grow: var(--css-Home-1wjhkv7-1);
- -ms-flex-positive: var(--css-Home-1wjhkv7-1);
- flex-grow: var(--css-Home-1wjhkv7-1); }
-.css-Home-1nk0ij0 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;position: relative;width: 300px;height: 30px;
+.css-Home-1vzsxza { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-align-items: center;-ms-flex-align: center;-webkit-box-align: center;align-items: center;-webkit-justify-content: center;-ms-flex-pack: center;-webkit-box-pack: center;justify-content: center;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1; }
+.css-Home-kssq5x { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;width: 300px;height: 30px;margin: 20px;
background-color: purple; }
-.css-Home-1buck6g { height: 200px;
- width: 400px;
- background-color: var(--css-Home-1buck6g-0); }
-.css-Home-1wrvnja { font-size: 20px; }
-.css-Home-h70lla { font-size: 16px;
+.css-Home-rcx6r3 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;height: 200px;width: 400px;
+ background-color: var(--css-Home-rcx6r3-0); }
+.css-Home-1ibztja { -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-flex-basis: 40px;-ms-preferred-size: 40px;flex-basis: 40px; }
+.css-Home-1fqfn1l { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;-webkit-box-orient: horizontal;-webkit-box-direction: normal;flex-direction: row;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;height: 200px;width: 400px; }
+.css-Home-10n0dl7 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
+ background-color: red; }
+.css-Home-asuv6 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
+ background-color: green; }
+.css-Home-1twycd7 { -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-flex-basis: 20px;-ms-preferred-size: 20px;flex-basis: 20px; }
+.css-Home-cb9ahb { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
+ background-color: blue; }
+.css-Home-1ibztja { -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-flex-basis: 40px;-ms-preferred-size: 40px;flex-basis: 40px; }
+.css-Home-ypm15r { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-direction: var(--css-Home-ypm15r-0);-ms-flex-direction: var(--css-Home-ypm15r-0);-webkit-box-orient: horizontal;-webkit-box-direction: normal;flex-direction: var(--css-Home-ypm15r-0);height: 200px;width: 400px; }
+.css-Home-10n0dl7 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
+ background-color: red; }
+.css-Home-asuv6 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
+ background-color: green; }
+.css-Home-cb9ahb { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
+ background-color: blue; }
+.css-Home-18gaxx6 { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size: 20px; }
+.css-Home-15dla7k { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size: 16px;
padding: 16px;
border: 1px solid #111; }
-.css-Home-h70lla { font-size: 16px;
+.css-Home-15dla7k { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size: 16px;
padding: 16px;
border: 1px solid #111; }
-.css-Home-h70lla { font-size: 16px;
+.css-Home-15dla7k { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size: 16px;
padding: 16px;
border: 1px solid #111; }
\ No newline at end of file
diff --git a/src/scenes/Home/Home.js b/src/scenes/Home/Home.js
index 8bd5d71..4d8ac56 100644
--- a/src/scenes/Home/Home.js
+++ b/src/scenes/Home/Home.js
@@ -96,17 +96,21 @@ export default class Home extends React.Component {
const another = 0;
return (
-
{/*
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Home
-
+
Other
-
Open Fade Overlay
-
+
-
Open Overlay Light Outer
-
+
-
Open Modal Dark Outer
-
-
+
)
}
}
From 6b32780903e30abe7c369021b81869de7a2c5ecd Mon Sep 17 00:00:00 2001
From: Kyle Poole <2kylepoole@gmail.com>
Date: Thu, 27 Jul 2017 13:18:54 -0700
Subject: [PATCH 6/9] tmp
---
src/entry.static.js | 2 ++
src/scenes/Home/Home.emotion.css | 2 +-
src/scenes/Home/Home.js | 2 +-
3 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/entry.static.js b/src/entry.static.js
index a21a882..d8067ce 100644
--- a/src/entry.static.js
+++ b/src/entry.static.js
@@ -22,6 +22,8 @@ export default (locals: Object, callback: Function) => {
match({ routes, location }, (error, redirectLocation, renderProps) => {
const { html, css, ids } = extractCritical(ReactDOMServer.renderToStaticMarkup(
))
+ console.log(css);
+
callback(
null,
htmlTemplate({
diff --git a/src/scenes/Home/Home.emotion.css b/src/scenes/Home/Home.emotion.css
index 862b796..b8fd866 100644
--- a/src/scenes/Home/Home.emotion.css
+++ b/src/scenes/Home/Home.emotion.css
@@ -50,7 +50,7 @@
background-color: red; }
.css-BOX_UPDATED-1pa2pyx {
background-color: green; }
-.css-Home-1vzsxza { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-align-items: center;-ms-flex-align: center;-webkit-box-align: center;align-items: center;-webkit-justify-content: center;-ms-flex-pack: center;-webkit-box-pack: center;justify-content: center;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1; }
+.css-Home-1s18j1e { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-align-items: center;-ms-flex-align: center;-webkit-box-align: center;align-items: center;-webkit-justify-content: center;-ms-flex-pack: center;-webkit-box-pack: center;justify-content: center;-webkit-flex-grow: var(--css-Home-1s18j1e-0);-ms-flex-positive: var(--css-Home-1s18j1e-0);flex-grow: var(--css-Home-1s18j1e-0); }
.css-Home-kssq5x { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;width: 300px;height: 30px;margin: 20px;
background-color: purple; }
.css-Home-rcx6r3 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;height: 200px;width: 400px;
diff --git a/src/scenes/Home/Home.js b/src/scenes/Home/Home.js
index 4d8ac56..00ec724 100644
--- a/src/scenes/Home/Home.js
+++ b/src/scenes/Home/Home.js
@@ -98,7 +98,7 @@ export default class Home extends React.Component {
return (
Date: Tue, 1 Aug 2017 14:51:42 -0700
Subject: [PATCH 7/9] ignore emotion.css files
---
.gitignore | 4 ++++
src/scenes/Other/Other.js | 5 +++++
2 files changed, 9 insertions(+)
diff --git a/.gitignore b/.gitignore
index 4e8edbc..aac24a5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,9 @@
.DS_Store
.tern-port
+.idea/
+
node_modules/
public/
+
+*.emotion.css
diff --git a/src/scenes/Other/Other.js b/src/scenes/Other/Other.js
index 5a1e64d..f731ae2 100644
--- a/src/scenes/Other/Other.js
+++ b/src/scenes/Other/Other.js
@@ -14,8 +14,13 @@ export default class Other extends React.Component {
Other
+
+
Home
+
+
+
)
From d80eff63a3ffe7e2c9bc993f20a1c8c948b19335 Mon Sep 17 00:00:00 2001
From: Kyle Poole <2kylepoole@gmail.com>
Date: Tue, 1 Aug 2017 15:19:11 -0700
Subject: [PATCH 8/9] emotion@beta
---
.babelrc | 4 +-
package.json | 2 +-
src/entry.static.js | 5 +-
src/html.ejs | 10 ++--
webpack.config.js | 21 +++-----
yarn.lock | 125 ++++++++++++++++++++++++++------------------
6 files changed, 90 insertions(+), 77 deletions(-)
diff --git a/.babelrc b/.babelrc
index 7447227..2fbfb31 100644
--- a/.babelrc
+++ b/.babelrc
@@ -6,8 +6,8 @@
/* "./babel/constelation", */
"constelation-babel",
- /* ["emotion/babel", { "inline": true }], */
- "emotion/babel",
+ ["emotion/babel", { "extractStatic": true }],
+ /* "emotion/babel", */
// able to use `class` instead of `className` and `for` instead of `htmlFor`
"react-html-attrs",
diff --git a/package.json b/package.json
index a85e6a8..1372b1a 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
"constelation-transition-group-view": "^14.0.0",
"constelation-view": "^14.0.3",
"decko": "^1.2.0",
- "emotion": "^6.0.3",
+ "emotion": "beta",
"glamor": "next",
"glamor-react": "^3.0.0-1",
"glamor-reset": "^3.0.0-1",
diff --git a/src/entry.static.js b/src/entry.static.js
index d8067ce..a64ae2b 100644
--- a/src/entry.static.js
+++ b/src/entry.static.js
@@ -22,18 +22,15 @@ export default (locals: Object, callback: Function) => {
match({ routes, location }, (error, redirectLocation, renderProps) => {
const { html, css, ids } = extractCritical(ReactDOMServer.renderToStaticMarkup(
))
- console.log(css);
-
callback(
null,
htmlTemplate({
css,
html,
styleIds: JSON.stringify(ids),
- style: true,
+ externalStyleSheet: true,
title: 'Constelation',
js: [locals.assets.vendor, locals.assets.main],
- // js: Object.keys(locals.assets).map(key => locals.assets[key]),
}),
)
})
diff --git a/src/html.ejs b/src/html.ejs
index 777c833..7ed8c16 100644
--- a/src/html.ejs
+++ b/src/html.ejs
@@ -6,9 +6,6 @@
<%= data.title %>
- <% if (data.css) { %>
-
- <% } %>
- <% if (data.style) { %>
+ <% if (data.externalStyleSheet) { %>
<% } %>
+
+ <% if (data.css) { %>
+
+ <% } %>
+
diff --git a/webpack.config.js b/webpack.config.js
index 2e24076..874bc69 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -67,7 +67,7 @@ module.exports = function (env = {}) {
},
{
test: /emotion\.css$/,
- use: env.prod ? ExtractTextPlugin.extract({
+ use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: {
loader: 'css-loader',
@@ -75,10 +75,7 @@ module.exports = function (env = {}) {
sourceMap: true
}
}
- }) : [
- 'style-loader',
- { loader: 'css-loader' }
- ]
+ })
},
// {variable: 'data'} needed to avoid a 'with' error:
// http://stackoverflow.com/questions/18679422/issue-with-with-use-strict-and-underscore-js
@@ -108,6 +105,11 @@ module.exports = function (env = {}) {
// Needed for ejs loader
_: 'lodash',
}),
+
+ new ExtractTextPlugin({
+ filename: 'styles.css',
+ allChunks: true,
+ }),
],
}
@@ -119,10 +121,6 @@ module.exports = function (env = {}) {
// Builds the static files
config.plugins.push(
- new ExtractTextPlugin({
- filename: 'styles.css',
- allChunks: true,
- }),
new StaticSiteGeneratorPlugin({
entry: 'main',
@@ -163,11 +161,6 @@ module.exports = function (env = {}) {
debug: false,
}),
- new ExtractTextPlugin({
- filename: 'styles.css',
- allChunks: true,
- }),
-
// Minifier that understands es6 (vs Uglify)
new BabiliPlugin(),
new CompressionPlugin({
diff --git a/yarn.lock b/yarn.lock
index 7270db4..121584c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14,6 +14,10 @@
version "1.0.0"
resolved "https://registry.yarnpkg.com/@arr/map/-/map-1.0.0.tgz#bca3c97ccf003d6d0435518af6f5ba03a5e216b7"
+"@arr/reduce@^1.0.0":
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/@arr/reduce/-/reduce-1.0.0.tgz#a450b3052055987ccd6ccdcfd0e3f4a40aaba227"
+
abbrev@1:
version "1.0.9"
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
@@ -329,6 +333,10 @@ babel-core@^6.24.1, babel-core@^6.25.0:
slash "^1.0.0"
source-map "^0.5.0"
+babel-errors@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/babel-errors/-/babel-errors-1.1.1.tgz#43f7142dd3b365633c758d155bffa3ba41523794"
+
babel-eslint@^7.2.3:
version "7.2.3"
resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.3.tgz#b2fe2d80126470f5c19442dc757253a897710827"
@@ -1239,7 +1247,7 @@ boom@2.x.x:
dependencies:
hoek "2.x.x"
-bowser@^1.0.0:
+bowser@^1.6.0:
version "1.7.1"
resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.7.1.tgz#a4de8f18a1a0dc9531eb2a92a1521fb6a9ba96a5"
@@ -1374,13 +1382,6 @@ buffer@^4.3.0:
ieee754 "^1.1.4"
isarray "^1.0.0"
-buffer@^5.0.3:
- version "5.0.6"
- resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.6.tgz#2ea669f7eec0b6eda05b08f8b5ff661b28573588"
- dependencies:
- base64-js "^1.0.2"
- ieee754 "^1.1.4"
-
buffers@~0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/buffers/-/buffers-0.1.1.tgz#b24579c3bed4d6d396aeee6d9a8ae7f5482ab7bb"
@@ -1924,14 +1925,16 @@ crypto-random-string@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
-css-color-keywords@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
-
css-color-names@0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+css-in-js-utils@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215"
+ dependencies:
+ hyphenate-style-name "^1.0.2"
+
css-loader@^0.28.4:
version "0.28.4"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
@@ -1968,14 +1971,6 @@ css-selector-tokenizer@^0.7.0:
fastparse "^1.1.1"
regexpu-core "^1.0.0"
-css-to-react-native@^2.0.3:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b"
- dependencies:
- css-color-keywords "^1.0.0"
- fbjs "^0.8.5"
- postcss-value-parser "^3.3.0"
-
css-what@2.1:
version "2.1.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -2312,17 +2307,23 @@ emojis-list@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
-emotion@^6.0.3:
- version "6.0.3"
- resolved "https://registry.yarnpkg.com/emotion/-/emotion-6.0.3.tgz#ac855c116ada1f55097fd30073b90e26f4a3442f"
+emotion@beta:
+ version "7.0.5"
+ resolved "https://registry.yarnpkg.com/emotion/-/emotion-7.0.5.tgz#7eece36020a83f44ce29dfc09b2904e7ab1bb16d"
dependencies:
"@arr/filter.mutate" "^1.0.0"
"@arr/foreach" "^1.0.0"
"@arr/map" "^1.0.0"
+ "@arr/reduce" "^1.0.0"
autoprefixer "^7.1.2"
+ babel-errors "^1.1.1"
babel-plugin-syntax-jsx "^6.18.0"
+ babel-types "^6.25.0"
+ fbjs "^0.8.12"
+ inline-style-prefixer "^3.0.6"
postcss-js "^1.0.0"
- styled-components "2.0.0"
+ postcss-nested "^2.1.0"
+ postcss-safe-parser "^3.0.1"
theming "^1.0.1"
touch "^1.0.0"
@@ -2707,7 +2708,19 @@ faye-websocket@~0.11.0:
dependencies:
websocket-driver ">=0.5.1"
-fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
+fbjs@^0.8.12:
+ version "0.8.14"
+ resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c"
+ dependencies:
+ core-js "^1.0.0"
+ isomorphic-fetch "^2.1.1"
+ loose-envify "^1.0.0"
+ object-assign "^4.1.0"
+ promise "^7.1.1"
+ setimmediate "^1.0.5"
+ ua-parser-js "^0.7.9"
+
+fbjs@^0.8.4, fbjs@^0.8.9:
version "0.8.12"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
dependencies:
@@ -3374,7 +3387,7 @@ husky@^0.14.3:
normalize-path "^1.0.0"
strip-indent "^2.0.0"
-hyphenate-style-name@^1.0.1:
+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"
@@ -3441,12 +3454,12 @@ ini@~1.3.0:
version "1.3.4"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
-inline-style-prefixer@^2.0.5:
- version "2.0.5"
- resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz#c153c7e88fd84fef5c602e95a8168b2770671fe7"
+inline-style-prefixer@^3.0.6:
+ version "3.0.7"
+ resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.7.tgz#0ccc92e5902fe6e0d28d975c4258443f880615f8"
dependencies:
- bowser "^1.0.0"
- hyphenate-style-name "^1.0.1"
+ bowser "^1.6.0"
+ css-in-js-utils "^1.0.3"
inquirer@^0.12.0:
version "0.12.0"
@@ -4857,6 +4870,13 @@ postcss-modules-values@^1.1.0:
icss-replace-symbols "^1.1.0"
postcss "^6.0.1"
+postcss-nested@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-2.1.0.tgz#72661d79463f5894a8c4b890479baec689d1c693"
+ dependencies:
+ postcss "^6.0.8"
+ postcss-selector-parser "^2.2.3"
+
postcss-normalize-charset@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
@@ -4900,7 +4920,13 @@ postcss-reduce-transforms@^1.0.3:
postcss "^5.0.8"
postcss-value-parser "^3.0.1"
-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
+postcss-safe-parser@^3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-3.0.1.tgz#b753eff6c7c0aea5e8375fbe4cde8bf9063ff142"
+ dependencies:
+ postcss "^6.0.6"
+
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2, postcss-selector-parser@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
dependencies:
@@ -4954,6 +4980,14 @@ postcss@^6.0.1, postcss@^6.0.6:
source-map "^0.5.6"
supports-color "^4.1.0"
+postcss@^6.0.8:
+ version "6.0.8"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.8.tgz#89067a9ce8b11f8a84cbc5117efc30419a0857b3"
+ dependencies:
+ chalk "^2.0.1"
+ source-map "^0.5.6"
+ supports-color "^4.2.0"
+
prelude-ls@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -4999,7 +5033,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
-prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
+prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
version "15.5.8"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
dependencies:
@@ -5960,25 +5994,6 @@ style-loader@^0.18.2:
loader-utils "^1.0.2"
schema-utils "^0.3.0"
-styled-components@2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.0.0.tgz#0906652b77647e7400ca7e5a6d8d45eba6fa77ec"
- dependencies:
- buffer "^5.0.3"
- css-to-react-native "^2.0.3"
- fbjs "^0.8.9"
- hoist-non-react-statics "^1.2.0"
- inline-style-prefixer "^2.0.5"
- is-function "^1.0.1"
- is-plain-object "^2.0.1"
- prop-types "^15.5.4"
- stylis "^2.0.0"
- supports-color "^3.2.3"
-
-stylis@^2.0.0:
- version "2.0.12"
- resolved "https://registry.yarnpkg.com/stylis/-/stylis-2.0.12.tgz#547253055d170f2a7ac2f6d09365d70635f2bec6"
-
supports-color@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-0.2.0.tgz#d92de2694eb3f67323973d7ae3d8b55b4c22190a"
@@ -5999,6 +6014,12 @@ supports-color@^4.0.0, supports-color@^4.1.0:
dependencies:
has-flag "^2.0.0"
+supports-color@^4.2.0:
+ version "4.2.1"
+ resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.1.tgz#65a4bb2631e90e02420dba5554c375a4754bb836"
+ dependencies:
+ has-flag "^2.0.0"
+
svgo@^0.7.0:
version "0.7.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
From 85bbdbb4ddb37469e14a20434537f4ca4635fd2e Mon Sep 17 00:00:00 2001
From: Kyle Poole <2kylepoole@gmail.com>
Date: Tue, 1 Aug 2017 15:21:40 -0700
Subject: [PATCH 9/9] remove wip babel transform
---
babel/constelation.js | 321 ------------------------------------------
1 file changed, 321 deletions(-)
delete mode 100644 babel/constelation.js
diff --git a/babel/constelation.js b/babel/constelation.js
deleted file mode 100644
index 28efb3b..0000000
--- a/babel/constelation.js
+++ /dev/null
@@ -1,321 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
- value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-exports.default = function (babel) {
- var t = babel.types;
-
-
- function buildDefaultCssProp(css) {
- return t.jSXAttribute(t.jSXIdentifier('css'), t.jSXExpressionContainer(t.templateLiteral([t.templateElement({
- raw: css,
- cooked: css
- })], [])));
- }
-
- function buildProps(node, defaultCss, cssProps) {
- var css = buildDefaultCssProp(defaultCss);
- var cssTemplate = css.value.expression;
- var props = [css];
-
- if (node.openingElement.attributes == null) {
- return props;
- }
-
- node.openingElement.attributes.forEach(function (attribute) {
- var name = attribute.name.name;
-
- if (name in propsToOmit) {
- return;
- } else if (name === 'css') {
- addTemplateToTemplate(cssTemplate, attribute.value.expression);
- } else if (name in cssProps) {
- addCssProp(cssTemplate, attribute, cssProps[name]);
- } else if (name in booleanProps) {
- addBooleanProp(cssTemplate, attribute, name, booleanProps[name]);
- } else if (name === 'grow') {
- addGrowProp(cssTemplate, attribute);
- } else {
- props.push(attribute);
- }
- });
-
- return props;
- }
-
- function addCssProp(cssTemplate, attribute, name) {
- var value = attribute.value;
-
-
- if (t.isJSXExpressionContainer(value)) {
- var expression = value.expression;
-
-
- if (t.isNumericLiteral(expression)) {
- addStringToTemplate(cssTemplate, name + ': ' + expression.extra.raw + ';');
- } else if (t.isStringLiteral(expression)) {
- addStringToTemplate(cssTemplate, name + ': ' + expression.value + ';');
- } else if (t.isIdentifier(expression)) {
- addStringToTemplate(cssTemplate, name + ': ');
- addQuasiToTemplate(cssTemplate, t.templateElement({ raw: ';', cooked: ';' }));
- addExpressionToTemplate(cssTemplate, t.identifier(expression.name));
- } else if (t.isTemplateLiteral(expression)) {
- expression.quasis[0].value.cooked = name + ': ' + expression.quasis[0].value.cooked;
- expression.quasis[0].value.raw = name + ': ' + expression.quasis[0].value.raw;
- addTemplateToTemplate(cssTemplate, expression);
- addStringToTemplate(cssTemplate, ';');
- } else if (t.isBinaryExpression(expression)) {
- addStringToTemplate(cssTemplate, name + ': ');
- addExpressionToTemplate(cssTemplate, expression);
- addQuasiToTemplate(cssTemplate, t.templateElement({ raw: ';', cooked: ';' }));
- } else if (t.isConditionalExpression(expression)) {
- addStringToTemplate(cssTemplate, name + ': ');
- addExpressionToTemplate(cssTemplate, expression);
- addQuasiToTemplate(cssTemplate, t.templateElement({ raw: ';', cooked: ';' }));
- }
- } else if (t.isStringLiteral(value)) {
- addStringToTemplate(cssTemplate, name + ': ' + value.value + ';');
- }
- }
-
- function addBooleanProp(cssTemplate, attribute, name, _ref) {
- var consequent = _ref.consequent,
- alternate = _ref.alternate;
- var value = attribute.value;
-
-
- if (value === null) {
- addStringToTemplate(cssTemplate, consequent);
- } else if (t.isJSXExpressionContainer(value)) {
- var expression = value.expression;
-
-
- if (t.isBooleanLiteral(expression) && expression.value === true) {
- addStringToTemplate(cssTemplate, consequent);
- } else if (t.isIdentifier(expression)) {
- addExpressionToTemplate(cssTemplate, t.conditionalExpression(t.binaryExpression('===', t.identifier(expression.name), t.booleanLiteral(true)), t.stringLiteral(consequent), t.stringLiteral(alternate)));
-
- addQuasiToTemplate(cssTemplate, t.templateElement({ raw: '', cooked: '' }));
- }
- }
- }
-
- function addGrowProp(cssTemplate, attribute) {
- var value = attribute.value;
-
-
- if (value === null) {
- addStringToTemplate(cssTemplate, 'flex-grow: 1;');
- } else if (t.isJSXExpressionContainer(value)) {
- var expression = value.expression;
-
-
- if (t.isNumericLiteral(expression)) {
- addStringToTemplate(cssTemplate, 'flex-grow: ' + expression.extra.raw + ';');
- } else if (t.isStringLiteral(expression)) {
- addStringToTemplate(cssTemplate, 'flex-grow: ' + expression.value + ';');
- } else if (t.isIdentifier(expression)) {
- addStringToTemplate(cssTemplate, 'flex-grow: ');
- addQuasiToTemplate(cssTemplate, t.templateElement({ raw: ';', cooked: ';' }));
- addExpressionToTemplate(cssTemplate, t.identifier(expression.name));
- }
- } else if (t.isStringLiteral(value)) {
- addStringToTemplate(cssTemplate, 'flex-grow: ' + value.value + ';');
- }
- }
-
- return {
- name: "ast-transform", // not required
- visitor: {
- JSXElement: function JSXElement(path) {
- var element = path.node && path.node.openingElement && path.node.openingElement.name;
-
- if (!element) {
- return;
- }
-
- if (element.name === 'view') {
- renameTag(path.node);
- path.node.openingElement.attributes = buildProps(path.node, defaultColCss, propsToUse);
- } else if (element.name === 'col') {
- renameTag(path.node);
- path.node.openingElement.attributes = buildProps(path.node, defaultColCss, propsToUse);
- } else if (element.name === 'row') {
- renameTag(path.node);
- path.node.openingElement.attributes = buildProps(path.node, defaultRowCss, propsToUse);
- } else if (element.name === 'flex') {
- renameTag(path.node);
- path.node.openingElement.attributes = buildProps(path.node, defaultFlexCss, flexPropsToUse);
- }
- }
- }
- };
-};
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-
-var propsToOmit = {
- as: true
-};
-
-var propsToUse = {
- top: 'top',
- right: 'right',
- bottom: 'bottom',
- left: 'left',
- width: 'width',
- maxWidth: 'max-width',
- minWidth: 'min-width',
- height: 'height',
- maxHeight: 'max-height',
- minHeight: 'min-height',
-
- flex: 'flex',
- wrap: 'flex-wrap',
- // grow: 'flex-grow',
- shrink: 'flex-shrink',
- basis: 'flex-basis',
- order: 'order',
- alignContent: 'align-content',
- alignSelf: 'align-self',
- align: 'align-items',
- justify: 'justify-content',
- // alignVertical
- // alignHorizontal
-
- padding: 'padding',
- paddingTop: 'padding-top',
- paddingRight: 'padding-right',
- paddingBottom: 'padding-bottom',
- paddingLeft: 'padding-left',
- margin: 'margin',
- marginTop: 'margin-top',
- marginRight: 'margin-right',
- marginBottom: 'margin-bottom',
- marginLeft: 'margin-left',
-
- position: 'position',
- overflow: 'overflow',
- overflowX: 'overflow-x',
- overflowY: 'overflow-y',
- //WebkitOverflowScrolling
- zIndex: 'z-index'
-};
-
-var flexPropsToUse = _extends({}, propsToUse, {
- direction: 'flex-direction'
-});
-
-var booleanProps = {
- center: {
- consequent: 'align-items: center;justify-content: center;',
- alternate: ''
- },
- hidden: {
- consequent: 'display: none;',
- alternate: ''
- },
- inline: {
- consequent: 'display: inline-flex;',
- alternate: ''
- },
- fit: {
- consequent: 'height: 100%;width: 100%;',
- alternate: ''
- },
- absoluteFill: {
- consequent: 'position: absolute;top: 0;right: 0;bottom: 0;left: 0;',
- alternate: ''
- }
-};
-
-var defaultFlexCss = 'name: FLEX;display: flex;flex-shrink: 0;align-content: flex-start;position: relative;';
-var defaultColCss = 'name: COL;display: flex;flex-direction: column;flex-shrink: 0;align-content: flex-start;position: relative;';
-var defaultRowCss = 'name: ROW;display: flex;flex-direction: row;flex-shrink: 0;align-content: flex-start;position: relative;';
-
-function addTemplateToTemplate(target, template) {
- if (template.expressions.length > 0) {
- if (target.expressions.length === target.quasis.length) {
- var _target$expressions, _target$quasis;
-
- // safe to just push these
- (_target$expressions = target.expressions).push.apply(_target$expressions, _toConsumableArray(template.expressions));
- (_target$quasis = target.quasis).push.apply(_target$quasis, _toConsumableArray(template.quasis));
- } else {
- var _target$expressions2, _target$quasis2;
-
- (_target$expressions2 = target.expressions).push.apply(_target$expressions2, _toConsumableArray(template.expressions));
-
- // concate the first quasi, then push on the rest
- addStringToTemplate(target, template.quasis[0].value.raw);
- (_target$quasis2 = target.quasis).push.apply(_target$quasis2, _toConsumableArray(template.quasis.slice(1)));
- }
- } else {
- addStringToTemplate(target, template.quasis[0].value.raw);
- }
-}
-
-function addStringToTemplate(template, str) {
- var last = template.quasis.length - 1;
-
- template.quasis[last].value.raw = template.quasis[last].value.raw + str;
- template.quasis[last].value.cooked = template.quasis[last].value.cooked + str;
-}
-
-function addQuasiToTemplate(template, quasi) {
- template.quasis.push(quasi);
-}
-
-function addExpressionToTemplate(template, expression) {
- template.expressions.push(expression);
-}
-
-function renameTag(node) {
- var tagName = 'div';
-
- if (node.openingElement.attributes != null) {
- var name = node.openingElement.attributes.find(function (prop) {
- return prop.name.name === 'as';
- });
-
- if (name !== undefined) {
- var val = name.value.value || name.value.expression.value;
-
- if (val != null) {
- tagName = val;
- } else {
- console.log('invalid `as` value. No variables allowed.');
- }
- }
- }
-
- node.openingElement.name.name = tagName;
-
- if (node.closingElement) {
- node.closingElement.name.name = tagName;
- }
-}
-
-// function looksLike(a, b) {
-// return (
-// a &&
-// b &&
-// Object.keys(b).every(bKey => {
-// const bVal = b[bKey]
-// const aVal = a[bKey]
-// if (typeof bVal === 'function') {
-// return bVal(aVal)
-// }
-// return isPrimitive(bVal) ? bVal === aVal : looksLike(aVal, bVal)
-// })
-// )
-// }
-//
-// function isPrimitive(val) {
-// return val == null || /^[sbn]/.test(typeof val)
-// }