From 1b01f568b005a4c885c2daccc0e9b884185f5898 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 2 Oct 2018 18:26:54 +0200 Subject: [PATCH 1/7] -added css-shorthand-expand dependency and incorporated it in the mergeTheme logic --- package.json | 1 + src/lib/expandCssShorthand.ts | 40 +++++++++++++++++++++++++++ src/lib/mergeThemes.ts | 6 ++++- yarn.lock | 51 +++++++++++++++++++++++++++++++++++ 4 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 src/lib/expandCssShorthand.ts diff --git a/package.json b/package.json index 0b5226631b..4ae512d3e8 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ }, "dependencies": { "classnames": "^2.2.5", + "css-shorthand-expand": "^1.2.0", "fela": "^6.1.7", "fela-plugin-fallback-value": "^5.0.17", "fela-plugin-placeholder-prefixer": "^5.0.18", diff --git a/src/lib/expandCssShorthand.ts b/src/lib/expandCssShorthand.ts new file mode 100644 index 0000000000..5db3b460ca --- /dev/null +++ b/src/lib/expandCssShorthand.ts @@ -0,0 +1,40 @@ +import * as expand from 'css-shorthand-expand' +import * as _ from 'lodash' + +const expandCssShorthand = styles => { + if (!styles) { + return styles + } + const result = {} + console.log(expand) + Object.keys(styles).forEach(key => { + if (_.includes(shorthands, key)) { + const expandedProps = expand(_.kebabCase(key), String(styles[key])) + Object.keys(expandedProps).forEach(key => { + result[_.camelCase(key)] = expandedProps[key] + }) + } else { + result[key] = styles[key] + } + }) + return result +} + +const shorthands = [ + 'font', + 'padding', + 'margin', + 'border', + 'borderWidth', + 'borderStyle', + 'borderColor', + 'borderTop', + 'borderRight', + 'borderBottom', + 'borderLeft', + 'borderRadius', + 'background', + 'outline', +] + +export default expandCssShorthand diff --git a/src/lib/mergeThemes.ts b/src/lib/mergeThemes.ts index 4a30250fb1..4f0094c749 100644 --- a/src/lib/mergeThemes.ts +++ b/src/lib/mergeThemes.ts @@ -19,6 +19,7 @@ import { import callable from './callable' import { felaRenderer, felaRtlRenderer } from './felaRenderer' import toCompactArray from './toCompactArray' +import expandCssShorthand from './expandCssShorthand' // ---------------------------------------- // Component level merge functions @@ -43,7 +44,10 @@ export const mergeComponentStyles = ( const originalSource = partStyle partStylesPrepared[partName] = styleParam => { - return _.merge(callable(originalTarget)(styleParam), callable(originalSource)(styleParam)) + return _.merge( + expandCssShorthand(callable(originalTarget)(styleParam)), + expandCssShorthand(callable(originalSource)(styleParam)), + ) } }) diff --git a/yarn.lock b/yarn.lock index 59ceb80728..531e6a01f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1650,6 +1650,10 @@ 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-names@0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.1.tgz#5d0548fa256456ede4a9a0c2ac7ab19d3eb1ad81" + css-in-js-utils@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99" @@ -1666,6 +1670,25 @@ css-select@^1.1.0, css-select@~1.2.0: domutils "1.5.1" nth-check "~1.0.1" +css-shorthand-expand@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/css-shorthand-expand/-/css-shorthand-expand-1.2.0.tgz#bd6ac8d79f99928581eaca9fe05a03d316d17fe5" + dependencies: + css-color-names "0.0.1" + css-url-regex "0.0.1" + hex-color-regex "^1.0.1" + hsl-regex "^1.0.0" + hsla-regex "^1.0.0" + map-obj "^1.0.0" + repeat-element "^1.1.0" + rgb-regex "^1.0.1" + rgba-regex "^1.0.0" + xtend "^4.0.0" + +css-url-regex@0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-0.0.1.tgz#e05af8c6c290d451ef1632b455ea5c81b4b1395c" + css-what@2.1: version "2.1.0" resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd" @@ -3451,6 +3474,10 @@ he@1.1.x: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" +hex-color-regex@^1.0.1: + version "1.1.0" + resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" + history@^4.7.2: version "4.7.2" resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b" @@ -3498,6 +3525,14 @@ hosted-git-info@^2.1.4: version "2.7.1" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047" +hsl-regex@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e" + +hsla-regex@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38" + html-encoding-sniffer@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8" @@ -5184,6 +5219,10 @@ map-cache@^0.2.0, map-cache@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf" +map-obj@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d" + map-visit@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f" @@ -6807,6 +6846,10 @@ renderkid@^2.0.1: strip-ansi "^3.0.0" utila "~0.3" +repeat-element@^1.1.0: + version "1.1.3" + resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce" + repeat-element@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a" @@ -6995,6 +7038,14 @@ ret@~0.1.10: version "0.1.15" resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc" +rgb-regex@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1" + +rgba-regex@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3" + right-align@^0.1.1: version "0.1.3" resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef" From e1cc5f8fcdf906ddc73380c7a7b7c6b32e02e942 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 3 Oct 2018 15:06:14 +0200 Subject: [PATCH 2/7] -introduced the logic for expanding the css shorthands in a fela plugin --- src/lib/expandCssShorthand.ts | 40 -------------------- src/lib/felaExpandCssShorthandsPlugin.ts | 47 ++++++++++++++++++++++++ src/lib/felaRenderer.tsx | 3 ++ src/lib/mergeThemes.ts | 6 +-- 4 files changed, 51 insertions(+), 45 deletions(-) delete mode 100644 src/lib/expandCssShorthand.ts create mode 100644 src/lib/felaExpandCssShorthandsPlugin.ts diff --git a/src/lib/expandCssShorthand.ts b/src/lib/expandCssShorthand.ts deleted file mode 100644 index 5db3b460ca..0000000000 --- a/src/lib/expandCssShorthand.ts +++ /dev/null @@ -1,40 +0,0 @@ -import * as expand from 'css-shorthand-expand' -import * as _ from 'lodash' - -const expandCssShorthand = styles => { - if (!styles) { - return styles - } - const result = {} - console.log(expand) - Object.keys(styles).forEach(key => { - if (_.includes(shorthands, key)) { - const expandedProps = expand(_.kebabCase(key), String(styles[key])) - Object.keys(expandedProps).forEach(key => { - result[_.camelCase(key)] = expandedProps[key] - }) - } else { - result[key] = styles[key] - } - }) - return result -} - -const shorthands = [ - 'font', - 'padding', - 'margin', - 'border', - 'borderWidth', - 'borderStyle', - 'borderColor', - 'borderTop', - 'borderRight', - 'borderBottom', - 'borderLeft', - 'borderRadius', - 'background', - 'outline', -] - -export default expandCssShorthand diff --git a/src/lib/felaExpandCssShorthandsPlugin.ts b/src/lib/felaExpandCssShorthandsPlugin.ts new file mode 100644 index 0000000000..a380c67693 --- /dev/null +++ b/src/lib/felaExpandCssShorthandsPlugin.ts @@ -0,0 +1,47 @@ +import * as _ from 'lodash' +import * as expand from 'css-shorthand-expand' + +export default () => { + const expandCssShorthands = styles => { + const processedStyles = {} + + Object.keys(styles).forEach(cssPropertyName => { + const cssPropertyValue = styles[cssPropertyName] + + if (typeof cssPropertyValue === 'object') { + processedStyles[cssPropertyName] = cssPropertyValue + return + } + + if (_.includes(shorthands, cssPropertyName)) { + const expandedProps = expand(_.kebabCase(cssPropertyName), String(cssPropertyValue)) + Object.keys(expandedProps).forEach(key => { + processedStyles[_.camelCase(key)] = expandedProps[key] + }) + } else { + processedStyles[cssPropertyName] = cssPropertyValue + } + }) + + return processedStyles + } + + return expandCssShorthands +} + +const shorthands = [ + 'font', + 'padding', + 'margin', + 'border', + 'borderWidth', + 'borderStyle', + 'borderColor', + 'borderTop', + 'borderRight', + 'borderBottom', + 'borderLeft', + 'borderRadius', + 'background', + 'outline', +] diff --git a/src/lib/felaRenderer.tsx b/src/lib/felaRenderer.tsx index 6b6b77e1bf..2017e8eff8 100644 --- a/src/lib/felaRenderer.tsx +++ b/src/lib/felaRenderer.tsx @@ -1,5 +1,6 @@ import { createRenderer } from 'fela' import felaSanitizeCss from './felaSanitizeCssPlugin' +import felaExpandCssShorthandsPlugin from './felaExpandCssShorthandsPlugin' import felaPluginFallbackValue from 'fela-plugin-fallback-value' import felaPluginPlaceholderPrefixer from 'fela-plugin-placeholder-prefixer' import felaPluginPrefixer from 'fela-plugin-prefixer' @@ -9,6 +10,8 @@ import { IRenderer } from '../../types/theme' const createRendererConfig = (options: any = {}) => ({ plugins: [ + felaExpandCssShorthandsPlugin(), + // is necessary to prevent accidental style typos // from breaking ALL the styles on the page felaSanitizeCss({ diff --git a/src/lib/mergeThemes.ts b/src/lib/mergeThemes.ts index 4f0094c749..4a30250fb1 100644 --- a/src/lib/mergeThemes.ts +++ b/src/lib/mergeThemes.ts @@ -19,7 +19,6 @@ import { import callable from './callable' import { felaRenderer, felaRtlRenderer } from './felaRenderer' import toCompactArray from './toCompactArray' -import expandCssShorthand from './expandCssShorthand' // ---------------------------------------- // Component level merge functions @@ -44,10 +43,7 @@ export const mergeComponentStyles = ( const originalSource = partStyle partStylesPrepared[partName] = styleParam => { - return _.merge( - expandCssShorthand(callable(originalTarget)(styleParam)), - expandCssShorthand(callable(originalSource)(styleParam)), - ) + return _.merge(callable(originalTarget)(styleParam), callable(originalSource)(styleParam)) } }) From bb969c594fbdb84b8754b0f097a82d4053538df8 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 9 Oct 2018 10:38:14 +0200 Subject: [PATCH 3/7] -refactored the expand css shorthand fela plugin -moved it after the sanitize plugin --- src/lib/felaExpandCssShorthandsPlugin.ts | 42 ++++-------------------- src/lib/felaRenderer.tsx | 3 +- 2 files changed, 7 insertions(+), 38 deletions(-) diff --git a/src/lib/felaExpandCssShorthandsPlugin.ts b/src/lib/felaExpandCssShorthandsPlugin.ts index a380c67693..c12a4966b4 100644 --- a/src/lib/felaExpandCssShorthandsPlugin.ts +++ b/src/lib/felaExpandCssShorthandsPlugin.ts @@ -3,45 +3,15 @@ import * as expand from 'css-shorthand-expand' export default () => { const expandCssShorthands = styles => { - const processedStyles = {} - - Object.keys(styles).forEach(cssPropertyName => { + return _.keys(styles).reduce((acc, cssPropertyName) => { const cssPropertyValue = styles[cssPropertyName] - - if (typeof cssPropertyValue === 'object') { - processedStyles[cssPropertyName] = cssPropertyValue - return - } - - if (_.includes(shorthands, cssPropertyName)) { - const expandedProps = expand(_.kebabCase(cssPropertyName), String(cssPropertyValue)) - Object.keys(expandedProps).forEach(key => { - processedStyles[_.camelCase(key)] = expandedProps[key] - }) - } else { - processedStyles[cssPropertyName] = cssPropertyValue + const expandedProps = expand(_.kebabCase(cssPropertyName), String(cssPropertyValue)) + if (expandedProps) { + return { ...acc, ...expandedProps } } - }) - - return processedStyles + return { ...acc, [cssPropertyName]: cssPropertyValue } + }, {}) } return expandCssShorthands } - -const shorthands = [ - 'font', - 'padding', - 'margin', - 'border', - 'borderWidth', - 'borderStyle', - 'borderColor', - 'borderTop', - 'borderRight', - 'borderBottom', - 'borderLeft', - 'borderRadius', - 'background', - 'outline', -] diff --git a/src/lib/felaRenderer.tsx b/src/lib/felaRenderer.tsx index 2017e8eff8..6ef24d41b3 100644 --- a/src/lib/felaRenderer.tsx +++ b/src/lib/felaRenderer.tsx @@ -10,14 +10,13 @@ import { IRenderer } from '../../types/theme' const createRendererConfig = (options: any = {}) => ({ plugins: [ - felaExpandCssShorthandsPlugin(), - // is necessary to prevent accidental style typos // from breaking ALL the styles on the page felaSanitizeCss({ skip: ['content'], }), + felaExpandCssShorthandsPlugin(), felaPluginPlaceholderPrefixer(), felaPluginPrefixer(), From 6b9b926b90e04cfde20dcc8ac8df9129e939cf93 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 9 Oct 2018 11:22:42 +0200 Subject: [PATCH 4/7] -added logic for expanding the shorthand css props in the nested pseudo classes too -added test for the new fela plugin --- src/lib/felaExpandCssShorthandsPlugin.ts | 14 +++- .../lib/felaExpandCssShorthandsPlugin-test.ts | 67 +++++++++++++++++++ 2 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 test/specs/lib/felaExpandCssShorthandsPlugin-test.ts diff --git a/src/lib/felaExpandCssShorthandsPlugin.ts b/src/lib/felaExpandCssShorthandsPlugin.ts index c12a4966b4..34aeb78338 100644 --- a/src/lib/felaExpandCssShorthandsPlugin.ts +++ b/src/lib/felaExpandCssShorthandsPlugin.ts @@ -5,13 +5,25 @@ export default () => { const expandCssShorthands = styles => { return _.keys(styles).reduce((acc, cssPropertyName) => { const cssPropertyValue = styles[cssPropertyName] + + if (typeof cssPropertyValue === 'object') { + return { ...acc, [cssPropertyName]: expandCssShorthands(cssPropertyValue) } + } + const expandedProps = expand(_.kebabCase(cssPropertyName), String(cssPropertyValue)) if (expandedProps) { - return { ...acc, ...expandedProps } + return { ...acc, ...transformKebabCaseKeysToCamelCase(expandedProps) } } + return { ...acc, [cssPropertyName]: cssPropertyValue } }, {}) } return expandCssShorthands } + +const transformKebabCaseKeysToCamelCase = obj => { + return _.mapKeys(obj, (value, key) => { + return _.camelCase(key) + }) +} diff --git a/test/specs/lib/felaExpandCssShorthandsPlugin-test.ts b/test/specs/lib/felaExpandCssShorthandsPlugin-test.ts new file mode 100644 index 0000000000..84d8e2f3c9 --- /dev/null +++ b/test/specs/lib/felaExpandCssShorthandsPlugin-test.ts @@ -0,0 +1,67 @@ +import felaExpandCssShorthandsPlugin from 'src/lib/felaExpandCssShorthandsPlugin' + +const expandCssShorthands = felaExpandCssShorthandsPlugin() + +describe('felaExpandCssShorthandsPlugin', () => { + test('should expand margin prop', () => { + const style = { + display: 'block', + margin: '0px 10px', + } + + expect(expandCssShorthands(style)).toEqual({ + 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)).toEqual({ + 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)).toEqual({ + display: 'block', + '::before': { + marginTop: '0px', + marginRight: '0px', + marginBottom: '0px', + marginLeft: '0px', + ':hover': { + paddingTop: '10px', + paddingRight: '10px', + paddingBottom: '10px', + paddingLeft: '10px', + }, + }, + }) + }) +}) From 5c7f5836d7c6b186729d9f7234c112cbaa0f74ec Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 9 Oct 2018 14:26:58 +0200 Subject: [PATCH 5/7] -replaced css-shorthand-props with shortcss (because if known bug and not released newer version after it is fixed) --- package.json | 2 +- src/lib/felaExpandCssShorthandsPlugin.ts | 6 +-- yarn.lock | 59 ++++-------------------- 3 files changed, 13 insertions(+), 54 deletions(-) diff --git a/package.json b/package.json index 5da49ecc4e..237bc64bf0 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,6 @@ }, "dependencies": { "classnames": "^2.2.5", - "css-shorthand-expand": "^1.2.0", "debug": "^3.0.1", "faker": "^4.1.0", "fela": "^6.1.7", @@ -95,6 +94,7 @@ "react-custom-scrollbars": "^4.2.1", "react-fela": "^7.2.0", "react-popper": "^1.0.2", + "shortcss": "^0.1.3", "what-input": "^5.1.2" }, "devDependencies": { diff --git a/src/lib/felaExpandCssShorthandsPlugin.ts b/src/lib/felaExpandCssShorthandsPlugin.ts index 34aeb78338..038aea91da 100644 --- a/src/lib/felaExpandCssShorthandsPlugin.ts +++ b/src/lib/felaExpandCssShorthandsPlugin.ts @@ -1,5 +1,5 @@ import * as _ from 'lodash' -import * as expand from 'css-shorthand-expand' +import * as SC from 'shortcss' export default () => { const expandCssShorthands = styles => { @@ -10,8 +10,8 @@ export default () => { return { ...acc, [cssPropertyName]: expandCssShorthands(cssPropertyValue) } } - const expandedProps = expand(_.kebabCase(cssPropertyName), String(cssPropertyValue)) - if (expandedProps) { + if (SC.isShorthand(cssPropertyName)) { + const expandedProps = SC.expand(_.kebabCase(cssPropertyName), String(cssPropertyValue)) return { ...acc, ...transformKebabCaseKeysToCamelCase(expandedProps) } } diff --git a/yarn.lock b/yarn.lock index cc31250fc7..874c26ac3b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1664,10 +1664,6 @@ 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-names@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.1.tgz#5d0548fa256456ede4a9a0c2ac7ab19d3eb1ad81" - css-in-js-utils@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99" @@ -1684,24 +1680,9 @@ css-select@^1.1.0, css-select@~1.2.0: domutils "1.5.1" nth-check "~1.0.1" -css-shorthand-expand@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/css-shorthand-expand/-/css-shorthand-expand-1.2.0.tgz#bd6ac8d79f99928581eaca9fe05a03d316d17fe5" - dependencies: - css-color-names "0.0.1" - css-url-regex "0.0.1" - hex-color-regex "^1.0.1" - hsl-regex "^1.0.0" - hsla-regex "^1.0.0" - map-obj "^1.0.0" - repeat-element "^1.1.0" - rgb-regex "^1.0.1" - rgba-regex "^1.0.0" - xtend "^4.0.0" - -css-url-regex@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-0.0.1.tgz#e05af8c6c290d451ef1632b455ea5c81b4b1395c" +css-shorthand-properties@^1.0.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/css-shorthand-properties/-/css-shorthand-properties-1.1.1.tgz#1c808e63553c283f289f2dd56fcee8f3337bd935" css-what@2.1: version "2.1.0" @@ -3500,10 +3481,6 @@ he@1.1.x: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" -hex-color-regex@^1.0.1: - version "1.1.0" - resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" - history@^4.7.2: version "4.7.2" resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b" @@ -3551,14 +3528,6 @@ hosted-git-info@^2.1.4: version "2.7.1" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047" -hsl-regex@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e" - -hsla-regex@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38" - html-encoding-sniffer@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8" @@ -5245,10 +5214,6 @@ map-cache@^0.2.0, map-cache@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf" -map-obj@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d" - map-visit@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f" @@ -6884,10 +6849,6 @@ renderkid@^2.0.1: strip-ansi "^3.0.0" utila "~0.3" -repeat-element@^1.1.0: - version "1.1.3" - resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce" - repeat-element@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a" @@ -7076,14 +7037,6 @@ ret@~0.1.10: version "0.1.15" resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc" -rgb-regex@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1" - -rgba-regex@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3" - right-align@^0.1.1: version "0.1.3" resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef" @@ -7353,6 +7306,12 @@ shellwords@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b" +shortcss@^0.1.3: + version "0.1.3" + resolved "https://registry.yarnpkg.com/shortcss/-/shortcss-0.1.3.tgz#ee2a7904d80b7f5502c98408f4a2f313faadfb48" + dependencies: + css-shorthand-properties "^1.0.0" + sigmund@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590" From cffae902d62d459813880f32cfc059b3b44d8a29 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 9 Oct 2018 14:58:34 +0200 Subject: [PATCH 6/7] -fixed checking for a shorthand prop -added tests for covering the borderColor prop (as an example for ensuring two-words properties work) --- src/lib/felaExpandCssShorthandsPlugin.ts | 2 +- .../specs/lib/felaExpandCssShorthandsPlugin-test.ts | 13 +++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/lib/felaExpandCssShorthandsPlugin.ts b/src/lib/felaExpandCssShorthandsPlugin.ts index 038aea91da..0996ea7617 100644 --- a/src/lib/felaExpandCssShorthandsPlugin.ts +++ b/src/lib/felaExpandCssShorthandsPlugin.ts @@ -10,7 +10,7 @@ export default () => { return { ...acc, [cssPropertyName]: expandCssShorthands(cssPropertyValue) } } - if (SC.isShorthand(cssPropertyName)) { + if (SC.isShorthand(_.kebabCase(cssPropertyName))) { const expandedProps = SC.expand(_.kebabCase(cssPropertyName), String(cssPropertyValue)) return { ...acc, ...transformKebabCaseKeysToCamelCase(expandedProps) } } diff --git a/test/specs/lib/felaExpandCssShorthandsPlugin-test.ts b/test/specs/lib/felaExpandCssShorthandsPlugin-test.ts index 84d8e2f3c9..c055b59ad4 100644 --- a/test/specs/lib/felaExpandCssShorthandsPlugin-test.ts +++ b/test/specs/lib/felaExpandCssShorthandsPlugin-test.ts @@ -18,6 +18,19 @@ describe('felaExpandCssShorthandsPlugin', () => { }) }) + test('should expand borderColor prop', () => { + const style = { + borderColor: 'red', + } + + expect(expandCssShorthands(style)).toEqual({ + borderTopColor: 'red', + borderRightColor: 'red', + borderBottomColor: 'red', + borderLeftColor: 'red', + }) + }) + test('should expand pseudo object', () => { const style = { display: 'block', From 3b8453ac9ca335198b1e1a6abfb6476ae0e2bcb9 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 9 Oct 2018 15:00:19 +0200 Subject: [PATCH 7/7] -better description of the tests --- test/specs/lib/felaExpandCssShorthandsPlugin-test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/specs/lib/felaExpandCssShorthandsPlugin-test.ts b/test/specs/lib/felaExpandCssShorthandsPlugin-test.ts index c055b59ad4..714827956f 100644 --- a/test/specs/lib/felaExpandCssShorthandsPlugin-test.ts +++ b/test/specs/lib/felaExpandCssShorthandsPlugin-test.ts @@ -3,7 +3,7 @@ import felaExpandCssShorthandsPlugin from 'src/lib/felaExpandCssShorthandsPlugin const expandCssShorthands = felaExpandCssShorthandsPlugin() describe('felaExpandCssShorthandsPlugin', () => { - test('should expand margin prop', () => { + test('should expand one-word css prop', () => { const style = { display: 'block', margin: '0px 10px', @@ -18,7 +18,7 @@ describe('felaExpandCssShorthandsPlugin', () => { }) }) - test('should expand borderColor prop', () => { + test('should expand two-words css prop', () => { const style = { borderColor: 'red', }