From a249bc4433a18304554167c5e2929e7e3b033e41 Mon Sep 17 00:00:00 2001 From: AlexVipond Date: Fri, 28 Jun 2019 10:11:47 -0600 Subject: [PATCH] Handle default keyword for negative prefix syntax. Write tests for negative prefix syntax --- __tests__/plugins/boxShadow.test.js | 63 +++++++++++++++++++++++ __tests__/plugins/letterSpacing.test.js | 55 ++++++++++++++++++++ __tests__/plugins/zIndex.test.js | 55 ++++++++++++++++++++ __tests__/prefixNegativeModifiers.test.js | 13 +++++ src/plugins/boxShadow.js | 5 +- src/plugins/letterSpacing.js | 6 ++- src/plugins/zIndex.js | 4 +- src/util/prefixNegativeModifiers.js | 12 +++-- 8 files changed, 204 insertions(+), 9 deletions(-) create mode 100644 __tests__/plugins/boxShadow.test.js create mode 100644 __tests__/plugins/letterSpacing.test.js create mode 100644 __tests__/plugins/zIndex.test.js create mode 100644 __tests__/prefixNegativeModifiers.test.js diff --git a/__tests__/plugins/boxShadow.test.js b/__tests__/plugins/boxShadow.test.js new file mode 100644 index 000000000..aa43c94d4 --- /dev/null +++ b/__tests__/plugins/boxShadow.test.js @@ -0,0 +1,63 @@ +import _ from 'lodash' +import escapeClassName from '../../src/util/escapeClassName' +import plugin from '../../src/plugins/boxShadow' + +test('box shadow can use default keyword and negative prefix syntax', () => { + const addedUtilities = [] + + const config = { + theme: { + boxShadow: { + default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', + md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', + '-': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', + '-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', + }, + }, + variants: { + boxShadow: ['responsive'], + }, + } + + const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue) + const pluginApi = { + config: getConfigValue, + e: escapeClassName, + theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue), + variants: (path, defaultValue) => { + if (_.isArray(config.variants)) { + return config.variants + } + + return getConfigValue(`variants.${path}`, defaultValue) + }, + addUtilities(utilities, variants) { + addedUtilities.push({ + utilities, + variants, + }) + }, + } + + plugin()(pluginApi) + + expect(addedUtilities).toEqual([ + { + utilities: { + '.shadow': { + 'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', + }, + '.shadow-md': { + 'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', + }, + '.-shadow': { + 'box-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', + }, + '.-shadow-md': { + 'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', + }, + }, + variants: ['responsive'], + }, + ]) +}) diff --git a/__tests__/plugins/letterSpacing.test.js b/__tests__/plugins/letterSpacing.test.js new file mode 100644 index 000000000..48e08ac2f --- /dev/null +++ b/__tests__/plugins/letterSpacing.test.js @@ -0,0 +1,55 @@ +import _ from 'lodash' +import escapeClassName from '../../src/util/escapeClassName' +import plugin from '../../src/plugins/letterSpacing' + +test('letter spacing can use default keyword and negative prefix syntax', () => { + const addedUtilities = [] + + const config = { + theme: { + letterSpacing: { + '-1': '-0.05em', + '-': '-0.025em', + default: '0.025em', + '1': '0.05em', + }, + }, + variants: { + letterSpacing: ['responsive'], + }, + } + + const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue) + const pluginApi = { + config: getConfigValue, + e: escapeClassName, + theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue), + variants: (path, defaultValue) => { + if (_.isArray(config.variants)) { + return config.variants + } + + return getConfigValue(`variants.${path}`, defaultValue) + }, + addUtilities(utilities, variants) { + addedUtilities.push({ + utilities, + variants, + }) + }, + } + + plugin()(pluginApi) + + expect(addedUtilities).toEqual([ + { + utilities: { + '.-tracking-1': { 'letter-spacing': '-0.05em' }, + '.-tracking': { 'letter-spacing': '-0.025em' }, + '.tracking': { 'letter-spacing': '0.025em' }, + '.tracking-1': { 'letter-spacing': '0.05em' }, + }, + variants: ['responsive'], + }, + ]) +}) diff --git a/__tests__/plugins/zIndex.test.js b/__tests__/plugins/zIndex.test.js new file mode 100644 index 000000000..14dd0e6e1 --- /dev/null +++ b/__tests__/plugins/zIndex.test.js @@ -0,0 +1,55 @@ +import _ from 'lodash' +import escapeClassName from '../../src/util/escapeClassName' +import plugin from '../../src/plugins/zIndex' + +test('z index can use default keyword and negative prefix syntax', () => { + const addedUtilities = [] + + const config = { + theme: { + zIndex: { + '-20': '-20', + '-': '-10', + default: '10', + '20': '20', + }, + }, + variants: { + zIndex: ['responsive'], + }, + } + + const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue) + const pluginApi = { + config: getConfigValue, + e: escapeClassName, + theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue), + variants: (path, defaultValue) => { + if (_.isArray(config.variants)) { + return config.variants + } + + return getConfigValue(`variants.${path}`, defaultValue) + }, + addUtilities(utilities, variants) { + addedUtilities.push({ + utilities, + variants, + }) + }, + } + + plugin()(pluginApi) + + expect(addedUtilities).toEqual([ + { + utilities: { + '.-z-20': { 'z-index': '-20' }, + '.-z': { 'z-index': '-10' }, + '.z': { 'z-index': '10' }, + '.z-20': { 'z-index': '20' }, + }, + variants: ['responsive'], + }, + ]) +}) diff --git a/__tests__/prefixNegativeModifiers.test.js b/__tests__/prefixNegativeModifiers.test.js new file mode 100644 index 000000000..7f4db0283 --- /dev/null +++ b/__tests__/prefixNegativeModifiers.test.js @@ -0,0 +1,13 @@ +import prefixNegativeModifiers from '../src/util/prefixNegativeModifiers' + +test('it does not prefix classes using standard syntax', () => { + expect(prefixNegativeModifiers('base', 'modifier')).toEqual('base-modifier') +}) + +test('it prefixes classes using negative syntax', () => { + expect(prefixNegativeModifiers('base', '-modifier')).toEqual('-base-modifier') +}) + +test('it prefixes classes and omits suffix using default negative syntax', () => { + expect(prefixNegativeModifiers('base', '-')).toEqual('-base') +}) diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js index 5309236aa..000597286 100644 --- a/src/plugins/boxShadow.js +++ b/src/plugins/boxShadow.js @@ -5,9 +5,10 @@ export default function() { return function({ addUtilities, e, theme, variants }) { const utilities = _.fromPairs( _.map(theme('boxShadow'), (value, modifier) => { - const className = modifier === 'default' ? 'shadow' : `shadow-${modifier}` + const className = + modifier === 'default' ? 'shadow' : `${e(prefixNegativeModifiers('shadow', modifier))}` return [ - `.${e(prefixNegativeModifiers('shadow', modifier))}`, + `.${className}`, { 'box-shadow': value, }, diff --git a/src/plugins/letterSpacing.js b/src/plugins/letterSpacing.js index bdcd2e5bd..469416504 100644 --- a/src/plugins/letterSpacing.js +++ b/src/plugins/letterSpacing.js @@ -5,8 +5,12 @@ export default function() { return function({ addUtilities, theme, variants, e }) { const utilities = _.fromPairs( _.map(theme('letterSpacing'), (value, modifier) => { + const className = + modifier === 'default' + ? 'tracking' + : `${e(prefixNegativeModifiers('tracking', modifier))}` return [ - `.${e(prefixNegativeModifiers('tracking', modifier))}`, + `.${className}`, { 'letter-spacing': value, }, diff --git a/src/plugins/zIndex.js b/src/plugins/zIndex.js index 479463865..2b8050f80 100644 --- a/src/plugins/zIndex.js +++ b/src/plugins/zIndex.js @@ -5,8 +5,10 @@ export default function() { return function({ addUtilities, e, theme, variants }) { const utilities = _.fromPairs( _.map(theme('zIndex'), (value, modifier) => { + const className = + modifier === 'default' ? 'z' : `${e(prefixNegativeModifiers('z', modifier))}` return [ - `.${e(prefixNegativeModifiers('z', modifier))}`, + `.${className}`, { 'z-index': value, }, diff --git a/src/util/prefixNegativeModifiers.js b/src/util/prefixNegativeModifiers.js index 80c932f3f..1642b155c 100644 --- a/src/util/prefixNegativeModifiers.js +++ b/src/util/prefixNegativeModifiers.js @@ -1,9 +1,11 @@ import _ from 'lodash' export default function prefixNegativeModifiers(base, modifier) { - return modifier === '-' - ? `-${base}` - : _.startsWith(modifier, '-') - ? `-${base}-${modifier.slice(1)}` - : `${base}-${modifier}` + if (modifier === '-') { + return `-${base}` + } else if (_.startsWith(modifier, '-')) { + return `-${base}-${modifier.slice(1)}` + } else { + return `${base}-${modifier}` + } }