This repository was archived by the owner on Mar 4, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 51
fix(styles): expand css shorthands in order for them to be applied properly #869
Merged
Merged
Changes from all commits
Commits
Show all changes
30 commits
Select commit
Hold shift + click to select a range
190168d
wip
2b02bad
-added fela expand css shorthands plugin
1a9a479
-update changelog with PR number
9623a94
-added json plugin for rollup
fa6c479
-fixed import in felaExpandCssShorthandPlugin
e79ed38
-reverted import
ba2541c
-added typings
3a1d9a2
-changed typings
a629f92
-changed declaration file
d86d8f9
-changed import
853615a
Merge branch 'master' into fix/expading-css-shorthands
mnajdova e285c8f
Merge branch 'master' into fix/expading-css-shorthands
9b760a7
-fixed segment styles
fd0cbdb
Merge branch 'master' into fix/expading-css-shorthands
d5a74b2
-updated package json and yarn lock
92ba955
-addressed comments
5c10610
-added list of handled prop in the css shorthands plugin
6c4f554
-fixed condition
d9e7fbe
Merge branch 'master' into fix/expading-css-shorthands
bbc7cdf
-updated yarn lock
c500ad0
Merge branch 'master' into fix/expading-css-shorthands
f335a4a
-added memoize
e8a36d2
-improved declaration
2e43a6f
-added comment for the reason for memoizeing camel case
3e77471
Merge branch 'master' into fix/expading-css-shorthands
mnajdova f19030c
-temporary remove dependencies
0a091d1
Merge branch 'master' into fix/expading-css-shorthands
df34b5b
-installed back the required dependencies
867bd6e
-updated changelog
b14b8ae
-fix lint error
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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,56 @@ | ||
| import * as _ from 'lodash' | ||
| import * as _expand from 'css-shorthand-expand' | ||
| import * as _memoize from 'fast-memoize' | ||
|
|
||
| // `fast-memoize` is a CJS library, there are known issues with them: | ||
| // https://github.com/rollup/rollup/issues/1267#issuecomment-446681320 | ||
| const memoize = (_memoize as any).default || _memoize | ||
|
|
||
| // `css-shorthand-expand` is a CJS library, there are known issues with them: | ||
| // https://github.com/rollup/rollup/issues/1267#issuecomment-446681320 | ||
| const expand = memoize((_expand as any).default || _expand) | ||
|
|
||
| // _.camelCase is quite fast, but we are running it for the same values many times | ||
| const camelCase = memoize(_.camelCase) | ||
|
|
||
| const handledCssPropsMap = { | ||
| font: 'font', | ||
| padding: 'padding', | ||
| margin: 'margin', | ||
| border: 'border', | ||
| borderWidth: 'border-width', | ||
| borderStyle: 'border-style', | ||
| borderColor: 'border-color', | ||
| borderTop: 'border-top', | ||
| borderRight: 'border-right', | ||
| borderBottom: 'border-bottom', | ||
| borderLeft: 'border-left', | ||
| borderRadius: 'border-radius', | ||
| background: 'background', | ||
| outline: 'outline', | ||
| } | ||
|
|
||
| export default () => { | ||
| const expandCssShorthands = (styles: Object) => { | ||
| return Object.keys(styles).reduce((acc, cssPropertyName) => { | ||
| const cssPropertyValue = styles[cssPropertyName] | ||
|
|
||
| if (typeof cssPropertyValue === 'object') { | ||
| return { ...acc, [cssPropertyName]: expandCssShorthands(cssPropertyValue) } | ||
| } | ||
|
|
||
| if (handledCssPropsMap[cssPropertyName]) { | ||
| const expandedProps = expand(handledCssPropsMap[cssPropertyName], `${cssPropertyValue}`) | ||
| if (expandedProps) { | ||
| return { ...acc, ...convertKeysToCamelCase(expandedProps) } | ||
| } | ||
| } | ||
|
|
||
| return { ...acc, [cssPropertyName]: cssPropertyValue } | ||
mnajdova marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| }, {}) | ||
| } | ||
|
|
||
| return expandCssShorthands | ||
| } | ||
|
|
||
| const convertKeysToCamelCase = obj => _.mapKeys(obj, (value, key) => camelCase(key)) | ||
This file contains hidden or 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 hidden or 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
82 changes: 82 additions & 0 deletions
82
packages/react/test/specs/lib/felaExpandCssShorthandsPlugin-test.ts
This file contains hidden or 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,82 @@ | ||
| import felaExpandCssShorthandsPlugin from 'src/lib/felaExpandCssShorthandsPlugin' | ||
|
|
||
| const expandCssShorthands = felaExpandCssShorthandsPlugin() | ||
|
|
||
| describe('felaExpandCssShorthandsPlugin', () => { | ||
mnajdova marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| test('should expand margin prop', () => { | ||
| const style = { | ||
| display: 'block', | ||
| margin: '0px 10px', | ||
| } | ||
|
|
||
| expect(expandCssShorthands(style)).toMatchObject({ | ||
| display: 'block', | ||
| marginTop: '0px', | ||
| marginRight: '10px', | ||
| marginBottom: '0px', | ||
| marginLeft: '10px', | ||
| }) | ||
| }) | ||
|
|
||
| test('should expand pseudo object', () => { | ||
| const style = { | ||
| display: 'block', | ||
| '::before': { | ||
| margin: '0px', | ||
| }, | ||
| } | ||
|
|
||
| expect(expandCssShorthands(style)).toMatchObject({ | ||
| display: 'block', | ||
| '::before': { | ||
| marginTop: '0px', | ||
| marginRight: '0px', | ||
| marginBottom: '0px', | ||
| marginLeft: '0px', | ||
| }, | ||
| }) | ||
| }) | ||
|
|
||
| test('should expand nested pseudo object', () => { | ||
| const style = { | ||
| display: 'block', | ||
| '::before': { | ||
| margin: '0px', | ||
| ':hover': { | ||
| padding: '10px', | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| expect(expandCssShorthands(style)).toMatchObject({ | ||
| display: 'block', | ||
| '::before': { | ||
| marginTop: '0px', | ||
| marginRight: '0px', | ||
| marginBottom: '0px', | ||
| marginLeft: '0px', | ||
| ':hover': { | ||
| paddingTop: '10px', | ||
| paddingRight: '10px', | ||
| paddingBottom: '10px', | ||
| paddingLeft: '10px', | ||
| }, | ||
| }, | ||
| }) | ||
| }) | ||
|
|
||
| test('should merge expanded prop with its shorthand', () => { | ||
| const style = { | ||
| marginTop: '3px', | ||
| margin: '10px', | ||
| marginRight: '15px', | ||
| } | ||
|
|
||
| expect(expandCssShorthands(style)).toMatchObject({ | ||
| marginTop: '10px', // overridden by margin: '10px' | ||
| marginRight: '15px', // overridden by marginRight: '15px' | ||
| marginBottom: '10px', | ||
| marginLeft: '10px', | ||
| }) | ||
| }) | ||
| }) | ||
This file contains hidden or 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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.