From bcd7bc2c4af883dc685101c0e0a784a849e24893 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 1 Feb 2019 11:24:12 -0500 Subject: [PATCH 1/7] Add first test for borderColors plugin --- __tests__/corePlugins/borderColors.test.js | 49 ++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 __tests__/corePlugins/borderColors.test.js diff --git a/__tests__/corePlugins/borderColors.test.js b/__tests__/corePlugins/borderColors.test.js new file mode 100644 index 000000000000..0e84f21ad4f7 --- /dev/null +++ b/__tests__/corePlugins/borderColors.test.js @@ -0,0 +1,49 @@ +import _ from 'lodash' +import escapeClassName from '../../src/util/escapeClassName' +import plugin from '../../src/plugins/borderColors' + +test('it generates border color utilities', () => { + const addedUtilities = [] + + const pluginApi = { + e: escapeClassName, + addUtilities(utilities) { + addedUtilities.push(utilities) + }, + } + + plugin({ + variants: ['responsive', 'hover', 'focus'], + values: { + 'grey-dark': '#8795a1', + grey: '#b8c2cc', + 'grey-light': '#dae1e7', + 'red-dark': '#cc1f1a', + red: '#e3342f', + 'red-light': '#ef5753', + 'green-dark': '#1f9d55', + green: '#38c172', + 'green-light': '#51d88a', + 'blue-dark': '#2779bd', + blue: '#3490dc', + 'blue-light': '#6cb2eb', + }, + })(pluginApi) + + expect(addedUtilities).toEqual([ + { + '.border-grey-dark': { 'border-color': '#8795a1' }, + '.border-grey': { 'border-color': '#b8c2cc' }, + '.border-grey-light': { 'border-color': '#dae1e7' }, + '.border-red-dark': { 'border-color': '#cc1f1a' }, + '.border-red': { 'border-color': '#e3342f' }, + '.border-red-light': { 'border-color': '#ef5753' }, + '.border-green-dark': { 'border-color': '#1f9d55' }, + '.border-green': { 'border-color': '#38c172' }, + '.border-green-light': { 'border-color': '#51d88a' }, + '.border-blue-dark': { 'border-color': '#2779bd' }, + '.border-blue': { 'border-color': '#3490dc' }, + '.border-blue-light': { 'border-color': '#6cb2eb' }, + }, + ]) +}) From 75c16fb611477fcac3da31f1d263a753b10f47fc Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 1 Feb 2019 11:32:15 -0500 Subject: [PATCH 2/7] Test that borderColors plugin ignores the default border color --- __tests__/corePlugins/borderColors.test.js | 65 +++++++++++++++------- 1 file changed, 44 insertions(+), 21 deletions(-) diff --git a/__tests__/corePlugins/borderColors.test.js b/__tests__/corePlugins/borderColors.test.js index 0e84f21ad4f7..19662195f7ab 100644 --- a/__tests__/corePlugins/borderColors.test.js +++ b/__tests__/corePlugins/borderColors.test.js @@ -7,43 +7,66 @@ test('it generates border color utilities', () => { const pluginApi = { e: escapeClassName, - addUtilities(utilities) { - addedUtilities.push(utilities) + addUtilities(utilities, variants) { + addedUtilities.push({ + utilities: utilities, + variants: variants, + }) }, } plugin({ variants: ['responsive', 'hover', 'focus'], values: { - 'grey-dark': '#8795a1', - grey: '#b8c2cc', - 'grey-light': '#dae1e7', - 'red-dark': '#cc1f1a', red: '#e3342f', - 'red-light': '#ef5753', - 'green-dark': '#1f9d55', green: '#38c172', - 'green-light': '#51d88a', - 'blue-dark': '#2779bd', blue: '#3490dc', - 'blue-light': '#6cb2eb', }, })(pluginApi) expect(addedUtilities).toEqual([ - { - '.border-grey-dark': { 'border-color': '#8795a1' }, - '.border-grey': { 'border-color': '#b8c2cc' }, - '.border-grey-light': { 'border-color': '#dae1e7' }, - '.border-red-dark': { 'border-color': '#cc1f1a' }, + { + utilities: { '.border-red': { 'border-color': '#e3342f' }, - '.border-red-light': { 'border-color': '#ef5753' }, - '.border-green-dark': { 'border-color': '#1f9d55' }, '.border-green': { 'border-color': '#38c172' }, - '.border-green-light': { 'border-color': '#51d88a' }, - '.border-blue-dark': { 'border-color': '#2779bd' }, '.border-blue': { 'border-color': '#3490dc' }, - '.border-blue-light': { 'border-color': '#6cb2eb' }, + }, + variants: ['responsive', 'hover', 'focus'], + }, + ]) +}) + +test('it ignores the default border color', () => { + const addedUtilities = [] + + const pluginApi = { + e: escapeClassName, + addUtilities(utilities, variants) { + addedUtilities.push({ + utilities: utilities, + variants: variants, + }) + }, + } + + plugin({ + variants: ['responsive', 'hover', 'focus'], + values: { + red: '#e3342f', + green: '#38c172', + blue: '#3490dc', + default: '#dae1e7', + }, + })(pluginApi) + + expect(addedUtilities).toEqual([ + { + utilities: { + '.border-red': { 'border-color': '#e3342f' }, + '.border-green': { 'border-color': '#38c172' }, + '.border-blue': { 'border-color': '#3490dc' }, + }, + variants: ['responsive', 'hover', 'focus'], }, ]) }) From 21fbf8be0fb3d388fe2b4745f52a43fddc136ab0 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 1 Feb 2019 11:38:49 -0500 Subject: [PATCH 3/7] Test that border colors falls back to theme colors --- __tests__/corePlugins/borderColors.test.js | 46 ++++++++++++++++++++++ src/plugins/borderColors.js | 5 ++- 2 files changed, 49 insertions(+), 2 deletions(-) diff --git a/__tests__/corePlugins/borderColors.test.js b/__tests__/corePlugins/borderColors.test.js index 19662195f7ab..ea76059bdf61 100644 --- a/__tests__/corePlugins/borderColors.test.js +++ b/__tests__/corePlugins/borderColors.test.js @@ -6,6 +6,7 @@ test('it generates border color utilities', () => { const addedUtilities = [] const pluginApi = { + config: (path, defaultValue) => null, e: escapeClassName, addUtilities(utilities, variants) { addedUtilities.push({ @@ -40,6 +41,7 @@ test('it ignores the default border color', () => { const addedUtilities = [] const pluginApi = { + config: (path, defaultValue) => null, e: escapeClassName, addUtilities(utilities, variants) { addedUtilities.push({ @@ -70,3 +72,47 @@ test('it ignores the default border color', () => { }, ]) }) + +test('it uses the theme color palette if no border colors are provided', () => { + const addedUtilities = [] + + const pluginApi = { + config: (path, defaultValue) => + _.get( + { + theme: { + colors: { + orange: '#f6993f', + teal: '#4dc0b5', + indigo: '#6574cd', + }, + }, + }, + path, + defaultValue + ), + e: escapeClassName, + addUtilities(utilities, variants) { + addedUtilities.push({ + utilities, + variants, + }) + }, + } + + plugin({ + variants: ['responsive', 'hover', 'focus'], + values: undefined, + })(pluginApi) + + expect(addedUtilities).toEqual([ + { + utilities: { + '.border-orange': { 'border-color': '#f6993f' }, + '.border-teal': { 'border-color': '#4dc0b5' }, + '.border-indigo': { 'border-color': '#6574cd' }, + }, + variants: ['responsive', 'hover', 'focus'], + }, + ]) +}) diff --git a/src/plugins/borderColors.js b/src/plugins/borderColors.js index 8b0c08b5b4e1..4572fbd84034 100644 --- a/src/plugins/borderColors.js +++ b/src/plugins/borderColors.js @@ -1,9 +1,10 @@ import _ from 'lodash' export default function({ values, variants }) { - return function({ addUtilities, e }) { + return function({ addUtilities, e, config }) { + const borderColors = _.isUndefined(values) ? config('theme.colors') : values const utilities = _.fromPairs( - _.map(_.omit(values, 'default'), (value, modifier) => { + _.map(_.omit(borderColors, 'default'), (value, modifier) => { return [ `.${e(`border-${modifier}`)}`, { From b37b13347ba424e33e3ef75edc3091f48387dff1 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 1 Feb 2019 11:38:58 -0500 Subject: [PATCH 4/7] Fix code style --- __tests__/corePlugins/borderColors.test.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/__tests__/corePlugins/borderColors.test.js b/__tests__/corePlugins/borderColors.test.js index ea76059bdf61..cba8d8eff97f 100644 --- a/__tests__/corePlugins/borderColors.test.js +++ b/__tests__/corePlugins/borderColors.test.js @@ -10,8 +10,8 @@ test('it generates border color utilities', () => { e: escapeClassName, addUtilities(utilities, variants) { addedUtilities.push({ - utilities: utilities, - variants: variants, + utilities, + variants, }) }, } @@ -26,14 +26,14 @@ test('it generates border color utilities', () => { })(pluginApi) expect(addedUtilities).toEqual([ - { - utilities: { - '.border-red': { 'border-color': '#e3342f' }, - '.border-green': { 'border-color': '#38c172' }, - '.border-blue': { 'border-color': '#3490dc' }, + { + utilities: { + '.border-red': { 'border-color': '#e3342f' }, + '.border-green': { 'border-color': '#38c172' }, + '.border-blue': { 'border-color': '#3490dc' }, + }, + variants: ['responsive', 'hover', 'focus'], }, - variants: ['responsive', 'hover', 'focus'], - }, ]) }) @@ -45,8 +45,8 @@ test('it ignores the default border color', () => { e: escapeClassName, addUtilities(utilities, variants) { addedUtilities.push({ - utilities: utilities, - variants: variants, + utilities, + variants, }) }, } From 1a84c75c71f9f27a9d03eb4ae497396ce3daab6f Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 1 Feb 2019 15:51:10 -0500 Subject: [PATCH 5/7] Background colors falls back to colors --- .../corePlugins/backgroundColors.test.js | 82 +++++++++++++++++++ src/plugins/backgroundColors.js | 5 +- 2 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 __tests__/corePlugins/backgroundColors.test.js diff --git a/__tests__/corePlugins/backgroundColors.test.js b/__tests__/corePlugins/backgroundColors.test.js new file mode 100644 index 000000000000..c4d05f5c1d2c --- /dev/null +++ b/__tests__/corePlugins/backgroundColors.test.js @@ -0,0 +1,82 @@ +import _ from 'lodash' +import escapeClassName from '../../src/util/escapeClassName' +import plugin from '../../src/plugins/backgroundColors' + +test('it generates background color utilities', () => { + const addedUtilities = [] + + const pluginApi = { + config: (path, defaultValue) => null, + e: escapeClassName, + addUtilities(utilities, variants) { + addedUtilities.push({ + utilities, + variants, + }) + }, + } + + plugin({ + variants: ['responsive', 'hover', 'focus'], + values: { + red: '#e3342f', + green: '#38c172', + blue: '#3490dc', + }, + })(pluginApi) + + expect(addedUtilities).toEqual([ + { + utilities: { + '.bg-red': { 'background-color': '#e3342f' }, + '.bg-green': { 'background-color': '#38c172' }, + '.bg-blue': { 'background-color': '#3490dc' }, + }, + variants: ['responsive', 'hover', 'focus'], + }, + ]) +}) + +test('it uses the theme color palette if no background colors are provided', () => { + const addedUtilities = [] + + const pluginApi = { + config: (path, defaultValue) => + _.get( + { + theme: { + colors: { + orange: '#f6993f', + teal: '#4dc0b5', + indigo: '#6574cd', + }, + }, + }, + path, + defaultValue + ), + e: escapeClassName, + addUtilities(utilities, variants) { + addedUtilities.push({ + utilities, + variants, + }) + }, + } + + plugin({ + variants: ['responsive', 'hover', 'focus'], + values: undefined, + })(pluginApi) + + expect(addedUtilities).toEqual([ + { + utilities: { + '.bg-orange': { 'background-color': '#f6993f' }, + '.bg-teal': { 'background-color': '#4dc0b5' }, + '.bg-indigo': { 'background-color': '#6574cd' }, + }, + variants: ['responsive', 'hover', 'focus'], + }, + ]) +}) diff --git a/src/plugins/backgroundColors.js b/src/plugins/backgroundColors.js index b77413f02d7e..81df2d6163bc 100644 --- a/src/plugins/backgroundColors.js +++ b/src/plugins/backgroundColors.js @@ -1,9 +1,10 @@ import _ from 'lodash' export default function({ values, variants }) { - return function({ addUtilities, e }) { + return function({ addUtilities, e, config }) { + const backgroundColors = _.isUndefined(values) ? config('theme.colors') : values const utilities = _.fromPairs( - _.map(values, (value, modifier) => { + _.map(backgroundColors, (value, modifier) => { return [ `.${e(`bg-${modifier}`)}`, { From 8bd3c51bdab726a586660ed7e39a4f8a6907dac8 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 1 Feb 2019 15:56:15 -0500 Subject: [PATCH 6/7] Text colors fall back to theme colors --- __tests__/corePlugins/textColors.test.js | 82 ++++++++++++++++++++++++ src/plugins/textColors.js | 5 +- 2 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 __tests__/corePlugins/textColors.test.js diff --git a/__tests__/corePlugins/textColors.test.js b/__tests__/corePlugins/textColors.test.js new file mode 100644 index 000000000000..f8e1577f3a43 --- /dev/null +++ b/__tests__/corePlugins/textColors.test.js @@ -0,0 +1,82 @@ +import _ from 'lodash' +import escapeClassName from '../../src/util/escapeClassName' +import plugin from '../../src/plugins/textColors' + +test('it generates text color utilities', () => { + const addedUtilities = [] + + const pluginApi = { + config: (path, defaultValue) => null, + e: escapeClassName, + addUtilities(utilities, variants) { + addedUtilities.push({ + utilities, + variants, + }) + }, + } + + plugin({ + variants: ['responsive', 'hover', 'focus'], + values: { + red: '#e3342f', + green: '#38c172', + blue: '#3490dc', + }, + })(pluginApi) + + expect(addedUtilities).toEqual([ + { + utilities: { + '.text-red': { 'color': '#e3342f' }, + '.text-green': { 'color': '#38c172' }, + '.text-blue': { 'color': '#3490dc' }, + }, + variants: ['responsive', 'hover', 'focus'], + }, + ]) +}) + +test('it uses the theme color palette if no text colors are provided', () => { + const addedUtilities = [] + + const pluginApi = { + config: (path, defaultValue) => + _.get( + { + theme: { + colors: { + orange: '#f6993f', + teal: '#4dc0b5', + indigo: '#6574cd', + }, + }, + }, + path, + defaultValue + ), + e: escapeClassName, + addUtilities(utilities, variants) { + addedUtilities.push({ + utilities, + variants, + }) + }, + } + + plugin({ + variants: ['responsive', 'hover', 'focus'], + values: undefined, + })(pluginApi) + + expect(addedUtilities).toEqual([ + { + utilities: { + '.text-orange': { 'color': '#f6993f' }, + '.text-teal': { 'color': '#4dc0b5' }, + '.text-indigo': { 'color': '#6574cd' }, + }, + variants: ['responsive', 'hover', 'focus'], + }, + ]) +}) diff --git a/src/plugins/textColors.js b/src/plugins/textColors.js index 910110608efc..4ea12809618a 100644 --- a/src/plugins/textColors.js +++ b/src/plugins/textColors.js @@ -1,9 +1,10 @@ import _ from 'lodash' export default function({ values, variants }) { - return function({ addUtilities, e }) { + return function({ addUtilities, e, config }) { + const textColors = _.isUndefined(values) ? config('theme.colors') : values const utilities = _.fromPairs( - _.map(values, (value, modifier) => { + _.map(textColors, (value, modifier) => { return [ `.${e(`text-${modifier}`)}`, { From a8b56c961241e73177a47c4aa692bb225d2c7b04 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 2 Feb 2019 11:20:01 -0500 Subject: [PATCH 7/7] Fix style --- __tests__/corePlugins/backgroundColors.test.js | 2 +- __tests__/corePlugins/borderColors.test.js | 4 ++-- __tests__/corePlugins/textColors.test.js | 14 +++++++------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/__tests__/corePlugins/backgroundColors.test.js b/__tests__/corePlugins/backgroundColors.test.js index c4d05f5c1d2c..a47aacf9d8d2 100644 --- a/__tests__/corePlugins/backgroundColors.test.js +++ b/__tests__/corePlugins/backgroundColors.test.js @@ -6,7 +6,7 @@ test('it generates background color utilities', () => { const addedUtilities = [] const pluginApi = { - config: (path, defaultValue) => null, + config: () => null, e: escapeClassName, addUtilities(utilities, variants) { addedUtilities.push({ diff --git a/__tests__/corePlugins/borderColors.test.js b/__tests__/corePlugins/borderColors.test.js index cba8d8eff97f..dfa0a0601687 100644 --- a/__tests__/corePlugins/borderColors.test.js +++ b/__tests__/corePlugins/borderColors.test.js @@ -6,7 +6,7 @@ test('it generates border color utilities', () => { const addedUtilities = [] const pluginApi = { - config: (path, defaultValue) => null, + config: () => null, e: escapeClassName, addUtilities(utilities, variants) { addedUtilities.push({ @@ -41,7 +41,7 @@ test('it ignores the default border color', () => { const addedUtilities = [] const pluginApi = { - config: (path, defaultValue) => null, + config: () => null, e: escapeClassName, addUtilities(utilities, variants) { addedUtilities.push({ diff --git a/__tests__/corePlugins/textColors.test.js b/__tests__/corePlugins/textColors.test.js index f8e1577f3a43..7d4a3cd786ac 100644 --- a/__tests__/corePlugins/textColors.test.js +++ b/__tests__/corePlugins/textColors.test.js @@ -6,7 +6,7 @@ test('it generates text color utilities', () => { const addedUtilities = [] const pluginApi = { - config: (path, defaultValue) => null, + config: () => null, e: escapeClassName, addUtilities(utilities, variants) { addedUtilities.push({ @@ -28,9 +28,9 @@ test('it generates text color utilities', () => { expect(addedUtilities).toEqual([ { utilities: { - '.text-red': { 'color': '#e3342f' }, - '.text-green': { 'color': '#38c172' }, - '.text-blue': { 'color': '#3490dc' }, + '.text-red': { color: '#e3342f' }, + '.text-green': { color: '#38c172' }, + '.text-blue': { color: '#3490dc' }, }, variants: ['responsive', 'hover', 'focus'], }, @@ -72,9 +72,9 @@ test('it uses the theme color palette if no text colors are provided', () => { expect(addedUtilities).toEqual([ { utilities: { - '.text-orange': { 'color': '#f6993f' }, - '.text-teal': { 'color': '#4dc0b5' }, - '.text-indigo': { 'color': '#6574cd' }, + '.text-orange': { color: '#f6993f' }, + '.text-teal': { color: '#4dc0b5' }, + '.text-indigo': { color: '#6574cd' }, }, variants: ['responsive', 'hover', 'focus'], },