-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fixed issue with utilities which have parent
- Loading branch information
1 parent
0dc54f5
commit 5edafb4
Showing
8 changed files
with
189 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,16 @@ | ||
| import phtml from 'phtml' | ||
| import _ from 'lodash' | ||
| import phtml from 'phtml'; | ||
| import _ from 'lodash'; | ||
|
|
||
| import flattenClasses from './flatten-classes.js' | ||
| import customProperties from './custom-properties.js' | ||
| import flattenClasses from './flatten-classes.js'; | ||
| import customProperties from './custom-properties.js'; | ||
|
|
||
| export default new phtml.Plugin('phtml-phthml-shorthand-utility', opts => { | ||
| console.log({ opts }); | ||
|
|
||
| return { | ||
| Element (node) { | ||
|
|
||
| Element(node) { | ||
| flattenClasses(node); | ||
| customProperties(node); | ||
|
|
||
| // customProperties(node); | ||
| } | ||
| }; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,123 +1,164 @@ | ||
| import _ from 'lodash'; | ||
| import re from '../util/generate-regex.js'; | ||
|
|
||
| // export default function(node) { | ||
| // const side = { | ||
| // top: { _abbr: 't' }, | ||
| // right: { _abbr: 'r' }, | ||
| // bottom: { _abbr: 'b' }, | ||
| // left: { _abbr: 'l' } | ||
| // }; | ||
|
|
||
| // const props = { | ||
| // margin: { | ||
| // ...(() => { | ||
| // return side; | ||
| // })(), | ||
| // _abbr: 'm' | ||
| // }, | ||
| // padding: { | ||
| // ...(() => { | ||
| // return side; | ||
| // })(), | ||
| // _abbr: 'p' | ||
| // } | ||
| // }; | ||
|
|
||
| // console.log(props); | ||
|
|
||
| // const hasClass = node.attrs.get('class'); | ||
|
|
||
| // const classNames = node.attrs.get('class').split(' '); | ||
| // const newClassNames = []; | ||
|
|
||
| // if (hasClass) { | ||
| // _.each(classNames, function(className) { | ||
| // if (className.match(re.decl)) { | ||
| // className.replace(re.decl, function(decl, name, args) { | ||
| // if (name === props.margin._abbr || name === props.padding._abbr) { | ||
| // console.log(name); | ||
| // let values = []; | ||
| // let sides = ['t', 'r', 'b', 'l']; | ||
|
|
||
| // args.replace(re.arg, function(arg) { | ||
| // values.push(arg); | ||
| // }); | ||
|
|
||
| // if (values.length === 1) { | ||
| // values.push(values[0]); | ||
| // } | ||
| // if (values.length === 2) { | ||
| // values.push(values[0]); | ||
| // } | ||
| // if (values.length === 3) { | ||
| // values.push(values[1]); | ||
| // } | ||
|
|
||
| // _.each(sides, function(side, index) { | ||
| // newClassNames.push(`${name}${side}-${values[index]}`); | ||
| // }); | ||
| // } | ||
| // }); | ||
| // } else { | ||
| // newClassNames.push(className); | ||
| // } | ||
| // }); | ||
|
|
||
| // node.attrs.add({ class: newClassNames.join(' ') }); | ||
| // } | ||
| // } | ||
| const side = { | ||
| top: { _abbr: 't' }, | ||
| right: { _abbr: 'r' }, | ||
| bottom: { _abbr: 'b' }, | ||
| left: { _abbr: 'l' } | ||
| }; | ||
|
|
||
| const props = { | ||
| margin: { | ||
| ...(() => { | ||
| return side; | ||
| })(), | ||
| _abbr: 'm' | ||
| }, | ||
| padding: { | ||
| ...(() => { | ||
| return side; | ||
| })(), | ||
| _abbr: 'p' | ||
| } | ||
| }; | ||
|
|
||
| var abbrs = (() => { | ||
| let abbrs = {}; | ||
| _.each(props, function(prop, key) { | ||
| let args = []; | ||
| _.each(prop, function(arg) { | ||
| if (arg._abbr) { | ||
| args.push(prop._abbr + arg._abbr); | ||
| } | ||
| }); | ||
|
|
||
| return (abbrs[props[key]._abbr] = args); | ||
| }); | ||
| return abbrs; | ||
| })(); | ||
|
|
||
| var otherAbbrs = (() => { | ||
| let abbrs = {}; | ||
| _.each(props, function(prop, key) { | ||
| let args = []; | ||
| _.each(prop, function(arg) { | ||
| if (arg._abbr) { | ||
| let newName = prop._abbr + arg._abbr; | ||
| abbrs[newName] = prop._abbr; | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| return abbrs; | ||
| })(); | ||
|
|
||
| function getUtility(str) { | ||
| let match = re.decl.exec(str); | ||
|
|
||
| let utility = {}; | ||
|
|
||
| if (match !== null) { | ||
| utility.name = match[1]; | ||
| utility.args = []; | ||
| utility.decl = match[0]; | ||
| match[2].replace(re.arg, function(arg) { | ||
| utility.args.push(arg); | ||
| }); | ||
|
|
||
| _.each(abbrs, function(value, key) { | ||
| if (key === utility.name) { | ||
| utility.params = value; | ||
| } | ||
| }); | ||
|
|
||
| _.each(otherAbbrs, function(value, key) { | ||
| if (key === utility.name) { | ||
| utility.parent = value; | ||
| } | ||
| }); | ||
|
|
||
| return utility; | ||
| } else { | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| export default function(node) { | ||
| const hasClass = node.attrs.get('class'); | ||
|
|
||
| const classNames = node.attrs.get('class').split(' '); | ||
| const flattened = []; | ||
| const newClassNames = []; | ||
|
|
||
| if (hasClass) { | ||
| _.each(classNames, function(className) { | ||
| // example: word-10px | ||
| if (className.match(re.decl)) { | ||
| className.replace(re.decl, function(decl, name, args) { | ||
| // for margin and padding | ||
| if (name === 'm' || name === 'p') { | ||
| let values = []; | ||
| let sides = ['t', 'r', 'b', 'l']; | ||
|
|
||
| // get each arg in decl and add to array | ||
| args.replace(re.arg, function(arg) { | ||
| values.push(arg); | ||
| }); | ||
|
|
||
| // start to build full array | ||
| if (values.length === 1) { | ||
| // For each class name flatten (currently only supports m and p) | ||
| utility = getUtility(className); | ||
|
|
||
| if (utility) { | ||
| // console.log(className); | ||
|
|
||
| if (utility.name === 'm' || utility.name === 'p') { | ||
| let values = utility.args; | ||
|
|
||
| switch (values.length) { | ||
| case 1: | ||
| values.push(values[0]); | ||
| } | ||
| if (values.length === 2) { | ||
| case 2: | ||
| values.push(values[0]); | ||
| } | ||
| if (values.length === 3) { | ||
| case 3: | ||
| values.push(values[1]); | ||
| } | ||
|
|
||
| // for each side push new class names into newClassNames array | ||
| _.each(sides, function(side, index) { | ||
| newClassNames.push(`${name}${side}-${values[index]}`); | ||
| }); | ||
| } | ||
| // if doesn't match margin or padding push into array | ||
| else { | ||
| newClassNames.push(className); | ||
|
|
||
| newClassNames.push(utility.name); | ||
|
|
||
| // for each side push new class names into array | ||
| _.each(utility.params, function(side, index) { | ||
| className = `${side}-${values[index]}`; | ||
| flattened.push(className); | ||
| }); | ||
| } else { | ||
| if (utility.parent) { | ||
| // Avoid pushing a duplicate | ||
| if (newClassNames.includes(utility.parent) === false) { | ||
| newClassNames.push(utility.parent); | ||
| } | ||
| } else { | ||
| // Avoid pushing a duplicate | ||
| if (newClassNames.includes(utility.name) === false) { | ||
| newClassNames.push(utility.name); | ||
| } | ||
| } | ||
| }); | ||
| flattened.push(className); | ||
| } | ||
| } | ||
| // if normal word push into array | ||
| else { | ||
| newClassNames.push(className); | ||
| flattened.push(className); | ||
| } | ||
| }); | ||
|
|
||
| let styles = []; | ||
|
|
||
| // Get styles values from utilities | ||
| _.each(flattened, function(newClassName) { | ||
| if (newClassName.match(re.decl)) { | ||
| let propName = newClassName.match(re.decl)[1]; | ||
| let propValue = newClassName.match(re.decl)[2]; | ||
|
|
||
| // Get styles | ||
| styles.push(`--${propName}: ${propValue}`); | ||
| } | ||
| }); | ||
|
|
||
| // console.log(newClassNames); | ||
|
|
||
| // Add new array back to element | ||
| node.attrs.add({ class: newClassNames.join(' ') }); | ||
|
|
||
| // Apply new style attr | ||
| node.attrs.add({ style: styles.join('; ') }); // TODO: add to existing style attr values | ||
| } | ||
| } |
Oops, something went wrong.