-
Notifications
You must be signed in to change notification settings - Fork 58
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
misc(Skeleton): use className to define style (#1862)
* misc(Skeleton): use className to define margins * misc(Skeleton): use className to define width * misc(Skeleton): migrate some custom implem * bug: nav loading should be vertical
- Loading branch information
Showing
81 changed files
with
595 additions
and
569 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| module.exports = function (file, api) { | ||
| // Alias the jscodeshift API for ease of use. | ||
| const j = api.jscodeshift | ||
|
|
||
| // Convert the entire file source into a collection of nodes paths. | ||
| const root = j(file.source) | ||
|
|
||
| root | ||
| // Find all Skeleton JSX elements | ||
| .findJSXElements('Skeleton') | ||
| .filter((path) => { | ||
| // ...and a margin relared attribute | ||
| const hasAnyMarginValue = path.value.openingElement.attributes.some( | ||
| (attr) => | ||
| attr.name.name === 'marginRight' || | ||
| attr.name.name === 'marginBottom' || | ||
| attr.name.name === 'marginTop', | ||
| ) | ||
|
|
||
| return hasAnyMarginValue | ||
| }) | ||
| // find out if className is present | ||
| .forEach((path) => { | ||
| // Create a map of margin values | ||
| const classNames = [] | ||
|
|
||
| path.value.openingElement.attributes.forEach((attr) => { | ||
| if ( | ||
| attr.name.name === 'marginRight' || | ||
| attr.name.name === 'marginBottom' || | ||
| attr.name.name === 'marginTop' | ||
| ) { | ||
| const key = attr.name.name | ||
| const clasNamePrefix = key === 'marginRight' ? 'mr' : key === 'marginBottom' ? 'mb' : 'mt' | ||
|
|
||
| let localValue = 0 | ||
|
|
||
| if (attr.value.type === 'JSXExpressionContainer') { | ||
| localValue = attr.value.expression.arguments[0].value | ||
|
|
||
| classNames.push(`${clasNamePrefix}-${localValue}`) | ||
|
|
||
| return | ||
| } else if (typeof attr.value.value === 'number') { | ||
| localValue = attr.value.value | ||
| } else if (typeof attr.value.value === 'string') { | ||
| localValue = parseInt(attr.value.value, 10) | ||
| } | ||
|
|
||
| // If value divided by 4 is not 0, remove one and retry | ||
| let i = 10 | ||
|
|
||
| while (localValue % 4 !== 0 && i !== 0) { | ||
| if (localValue < 4) { | ||
| localValue = 4 | ||
| break | ||
| } else { | ||
| localValue -= 1 | ||
| i-- | ||
| } | ||
| } | ||
|
|
||
| classNames.push(`${clasNamePrefix}-${localValue / 4}`) | ||
| } | ||
| }) | ||
|
|
||
| // If element does not have className attribute, create it | ||
| const hasClassName = path.value.openingElement.attributes.some( | ||
| (attr) => attr.name.name === 'className', | ||
| ) | ||
|
|
||
| if (!hasClassName) { | ||
| // push new classNames to the element | ||
| path.value.openingElement.attributes.push( | ||
| j.jsxAttribute(j.jsxIdentifier('className'), j.stringLiteral(classNames.join(' '))), | ||
| ) | ||
| // remove margin related attributes | ||
| path.value.openingElement.attributes = path.value.openingElement.attributes.filter( | ||
| (attr) => | ||
| attr.name.name !== 'marginRight' && | ||
| attr.name.name !== 'marginBottom' && | ||
| attr.name.name !== 'marginTop', | ||
| ) | ||
| } | ||
| }) | ||
|
|
||
| // TODO: remove margin related attributes | ||
|
|
||
| // Save changes to the file | ||
| return root.toSource() | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| module.exports = function (file, api) { | ||
| // Alias the jscodeshift API for ease of use. | ||
| const j = api.jscodeshift | ||
|
|
||
| // Convert the entire file source into a collection of nodes paths. | ||
| const root = j(file.source) | ||
|
|
||
| root | ||
| // Find all Skeleton JSX elements | ||
| .findJSXElements('Skeleton') | ||
| .filter((path) => { | ||
| // ...with a width attribute defined | ||
| const hasWidthDefined = path.value.openingElement.attributes.some( | ||
| (attr) => attr.name.name === 'width', | ||
| ) | ||
|
|
||
| return hasWidthDefined | ||
| }) | ||
| .forEach((path) => { | ||
| // Create a map of margin values | ||
| let className = '' | ||
|
|
||
| path.value.openingElement.attributes.forEach((attr) => { | ||
| // if (attr.name.name === 'width') { | ||
| // console.log( | ||
| // attr, | ||
| // ` | ||
| // ------------------------------------------------------------------------------------------------------------------------------------------------------ | ||
| // ------------------------------------------------------------------------------------------------------------------------------------------------------ | ||
| // ------------------------------------------------------------------------------------------------------------------------------------------------------ | ||
| // ------------------------------------------------------------------------------------------------------------------------------------------------------ | ||
| // ------------------------------------------------------------------------------------------------------------------------------------------------------ | ||
| // `, | ||
| // ) | ||
|
|
||
| if ( | ||
| attr.value.type === 'JSXExpressionContainer' && | ||
| attr.value.expression.type === 'NumericLiteral' | ||
| ) { | ||
| let localValue = attr.value.expression.value | ||
|
|
||
| let i = 10 | ||
|
|
||
| while (localValue % 4 !== 0 && i !== 0) { | ||
| if (localValue < 4) { | ||
| localValue = 4 | ||
| break | ||
| } else { | ||
| localValue -= 1 | ||
| i-- | ||
| } | ||
| } | ||
|
|
||
| className = `w-${localValue / 4}` | ||
| } else if ( | ||
| attr.value.type === 'StringLiteral' && | ||
| (attr.value.value === '100%' || attr.value.value === 'inherit') | ||
| ) { | ||
| className = '' | ||
| } else if (attr.value.type === 'StringLiteral' && attr.value.value.includes('%')) { | ||
| className = `w-[${attr.value.value}]` | ||
| } | ||
| }) | ||
|
|
||
| // If element does not have className attribute, create it | ||
| const hasClassName = path.value.openingElement.attributes.some( | ||
| (attr) => attr.name.name === 'className', | ||
| ) | ||
|
|
||
| if (!hasClassName) { | ||
| // push new classNames to the element | ||
| path.value.openingElement.attributes.push( | ||
| j.jsxAttribute(j.jsxIdentifier('className'), j.stringLiteral(className)), | ||
| ) | ||
| } else { | ||
| // If element has className attribute, update it | ||
| path.value.openingElement.attributes = path.value.openingElement.attributes.map((attr) => { | ||
| if (attr.name.name === 'className') { | ||
| attr.value.value += ` ${className}` | ||
| } | ||
|
|
||
| return attr | ||
| }) | ||
| } | ||
|
|
||
| // remove width related attributes | ||
| path.value.openingElement.attributes = path.value.openingElement.attributes.filter( | ||
| (attr) => attr.name.name !== 'width', | ||
| ) | ||
| }) | ||
|
|
||
| // Save changes to the file | ||
| return root.toSource() | ||
| } |
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
Oops, something went wrong.