From 87d30d6045cf82f3a72760ab56ef689c1253c66c Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 13 Oct 2020 12:47:13 +0100 Subject: [PATCH 1/6] feat(util): recursively flatten color palettes --- src/util/flattenColorPalette.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/util/flattenColorPalette.js b/src/util/flattenColorPalette.js index 5110e988d568..35a3b1289ca8 100644 --- a/src/util/flattenColorPalette.js +++ b/src/util/flattenColorPalette.js @@ -7,7 +7,7 @@ export default function flattenColorPalette(colors) { return [[name, color]] } - return _.map(color, (value, key) => { + return _.map(flattenColorPalette(color), (value, key) => { const suffix = key === 'default' ? '' : `-${key}` return [`${name}${suffix}`, value] }) From 25171ebf785a20cd8ce20c3fcc7f36869f8a52f6 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 13 Oct 2020 12:49:04 +0100 Subject: [PATCH 2/6] feat(backgroundImage): allow and flatten nested backgroundImage declarations --- src/plugins/backgroundImage.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/plugins/backgroundImage.js b/src/plugins/backgroundImage.js index 48b633b1824b..264e2544029a 100644 --- a/src/plugins/backgroundImage.js +++ b/src/plugins/backgroundImage.js @@ -1,10 +1,11 @@ import _ from 'lodash' import usesCustomProperties from '../util/usesCustomProperties' +import flattenColorPalette from '../util/flattenColorPalette' export default function() { return function({ addUtilities, e, theme, variants, target }) { const utilities = _.fromPairs( - _.map(theme('backgroundImage'), (value, modifier) => { + _.map(flattenColorPalette(theme('backgroundImage')), (value, modifier) => { if (target('backgroundImage') === 'ie11' && usesCustomProperties(value)) { return [] } From bd1836dac2894f4098f284fd2c7a5f02aabc5edf Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 13 Oct 2020 13:27:59 +0100 Subject: [PATCH 3/6] test(util): unit test recursive flattenColorPalette --- __tests__/flattenColorPalette.test.js | 40 +++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/__tests__/flattenColorPalette.test.js b/__tests__/flattenColorPalette.test.js index 98ab5a72bf5a..d1e4160f0843 100644 --- a/__tests__/flattenColorPalette.test.js +++ b/__tests__/flattenColorPalette.test.js @@ -43,3 +43,43 @@ test('it flattens nested color objects', () => { 'blue-3': 'rgb(0,0,100)', }) }) + +test('it recusively flattens nested color objects', () => { + expect( + flattenColorPalette({ + brand: { + primary: { + default: 'rgb(100,0,0)', + 50: 'rgba(100,0,0,.5)', + }, + }, + theme: { + default: { + background: { + default: 'rgb(0,0,0)', + 50: 'rgba(0,0,0,.5)', + }, + }, + 'not-default': { + background: { + default: 'rgb(255,255,255)', + 50: 'rgba(255,255,255,.5)', + 'keep-going': { + default: 'rgb(128,128,128)', + 50: 'rgba(128,128,128,.5)', + }, + }, + }, + }, + }) + ).toEqual({ + 'brand-primary': 'rgb(100,0,0)', + 'brand-primary-50': 'rgba(100,0,0,.5)', + 'theme-default-background': 'rgb(0,0,0)', + 'theme-default-background-50': 'rgba(0,0,0,.5)', + 'theme-not-default-background': 'rgb(255,255,255)', + 'theme-not-default-background-50': 'rgba(255,255,255,.5)', + 'theme-not-default-background-keep-going': 'rgb(128,128,128)', + 'theme-not-default-background-keep-going-50': 'rgba(128,128,128,.5)', + }) +}) From 551374853d798074a8154704a1b9f738dfc32f49 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 13 Oct 2020 13:42:58 +0100 Subject: [PATCH 4/6] test(backgroundImage): unit test backgrooundImage plugin incl. ie11 mode and recursive declarations --- __tests__/plugins/backgroundImage.test.js | 115 ++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 __tests__/plugins/backgroundImage.test.js diff --git a/__tests__/plugins/backgroundImage.test.js b/__tests__/plugins/backgroundImage.test.js new file mode 100644 index 000000000000..82100f7c1e2e --- /dev/null +++ b/__tests__/plugins/backgroundImage.test.js @@ -0,0 +1,115 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/backgroundImage' + +test('it creates background-image utilities', () => { + const config = { + target: 'relaxed', + theme: { + backgroundImage: { + hero: 'url("./hero.png")', + }, + }, + variants: { + backgroundImage: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.bg-hero': { + 'background-image': 'url("./hero.png")', + }, + }, + [], + ], + ]) +}) + +test('it creates background-image utilities in ie11 mode', () => { + const config = { + target: 'ie11', + theme: { + backgroundImage: { + hero: 'url("./hero.png")', + }, + }, + variants: { + backgroundImage: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.bg-hero': { + 'background-image': 'url("./hero.png")', + }, + }, + [], + ], + ]) +}) + +test('it creates background-image utilities recusively', () => { + const config = { + target: 'relaxed', + theme: { + backgroundImage: { + theme: { + default: { + background: { + default: 'url("./theme-default-background.png")', + alt: 'url("./theme-default-background-alt.png")', + }, + }, + 'not-default': { + background: { + default: 'url("./theme-not-default-background.png")', + alt: 'url("./theme-not-default-background-alt.png")', + 'keep-going': { + default: 'url("./theme-not-default-background-keep-going.png")', + alt: 'url("./theme-not-default-background-keep-going-alt.png")', + }, + }, + }, + }, + }, + }, + variants: { + backgroundImage: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.bg-theme-default-background': { + 'background-image': 'url("./theme-default-background.png")', + }, + '.bg-theme-default-background-alt': { + 'background-image': 'url("./theme-default-background-alt.png")', + }, + '.bg-theme-not-default-background': { + 'background-image': 'url("./theme-not-default-background.png")', + }, + '.bg-theme-not-default-background-alt': { + 'background-image': 'url("./theme-not-default-background-alt.png")', + }, + '.bg-theme-not-default-background-keep-going': { + 'background-image': 'url("./theme-not-default-background-keep-going.png")', + }, + '.bg-theme-not-default-background-keep-going-alt': { + 'background-image': 'url("./theme-not-default-background-keep-going-alt.png")', + }, + }, + [], + ], + ]) +}) From e78f6d37aec752f8355b449abaf428152ce0f839 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 13 Oct 2020 13:55:29 +0100 Subject: [PATCH 5/6] style(spelling): correct spelling in flattenColorPalette and backgroundImage tests --- __tests__/flattenColorPalette.test.js | 2 +- __tests__/plugins/backgroundImage.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/__tests__/flattenColorPalette.test.js b/__tests__/flattenColorPalette.test.js index d1e4160f0843..61bdab92deb8 100644 --- a/__tests__/flattenColorPalette.test.js +++ b/__tests__/flattenColorPalette.test.js @@ -44,7 +44,7 @@ test('it flattens nested color objects', () => { }) }) -test('it recusively flattens nested color objects', () => { +test('it recursively flattens nested color objects', () => { expect( flattenColorPalette({ brand: { diff --git a/__tests__/plugins/backgroundImage.test.js b/__tests__/plugins/backgroundImage.test.js index 82100f7c1e2e..2dfa26a8ba3e 100644 --- a/__tests__/plugins/backgroundImage.test.js +++ b/__tests__/plugins/backgroundImage.test.js @@ -55,7 +55,7 @@ test('it creates background-image utilities in ie11 mode', () => { ]) }) -test('it creates background-image utilities recusively', () => { +test('it creates background-image utilities recursively', () => { const config = { target: 'relaxed', theme: { From f227b4a563b029a23e3fb724ef8f9e6a24e4b6c4 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sat, 17 Oct 2020 14:01:17 +0100 Subject: [PATCH 6/6] fix: fix recursive flatten color/bg tests using new DEFAULT token --- __tests__/flattenColorPalette.test.js | 10 +++++----- __tests__/plugins/backgroundImage.test.js | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/__tests__/flattenColorPalette.test.js b/__tests__/flattenColorPalette.test.js index d1e4160f0843..0f1296d42e83 100644 --- a/__tests__/flattenColorPalette.test.js +++ b/__tests__/flattenColorPalette.test.js @@ -8,7 +8,7 @@ test('it flattens nested color objects', () => { 25: 'rgba(255,255,255,.25)', 50: 'rgba(255,255,255,.5)', 75: 'rgba(255,255,255,.75)', - default: '#fff', + DEFAULT: '#fff', }, red: { 1: 'rgb(33,0,0)', @@ -49,23 +49,23 @@ test('it recusively flattens nested color objects', () => { flattenColorPalette({ brand: { primary: { - default: 'rgb(100,0,0)', + DEFAULT: 'rgb(100,0,0)', 50: 'rgba(100,0,0,.5)', }, }, theme: { default: { background: { - default: 'rgb(0,0,0)', + DEFAULT: 'rgb(0,0,0)', 50: 'rgba(0,0,0,.5)', }, }, 'not-default': { background: { - default: 'rgb(255,255,255)', + DEFAULT: 'rgb(255,255,255)', 50: 'rgba(255,255,255,.5)', 'keep-going': { - default: 'rgb(128,128,128)', + DEFAULT: 'rgb(128,128,128)', 50: 'rgba(128,128,128,.5)', }, }, diff --git a/__tests__/plugins/backgroundImage.test.js b/__tests__/plugins/backgroundImage.test.js index 82100f7c1e2e..7ede8f4f3703 100644 --- a/__tests__/plugins/backgroundImage.test.js +++ b/__tests__/plugins/backgroundImage.test.js @@ -63,16 +63,16 @@ test('it creates background-image utilities recusively', () => { theme: { default: { background: { - default: 'url("./theme-default-background.png")', + DEFAULT: 'url("./theme-default-background.png")', alt: 'url("./theme-default-background-alt.png")', }, }, 'not-default': { background: { - default: 'url("./theme-not-default-background.png")', + DEFAULT: 'url("./theme-not-default-background.png")', alt: 'url("./theme-not-default-background-alt.png")', 'keep-going': { - default: 'url("./theme-not-default-background-keep-going.png")', + DEFAULT: 'url("./theme-not-default-background-keep-going.png")', alt: 'url("./theme-not-default-background-keep-going-alt.png")', }, },