Skip to content

Commit a249bc4

Browse files
AlexVipondAlexVipond
committed
Handle default keyword for negative prefix syntax. Write tests for negative prefix syntax
1 parent fd203a8 commit a249bc4

8 files changed

Lines changed: 204 additions & 9 deletions

File tree

‎__tests__/plugins/boxShadow.test.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import _ from 'lodash'
2+
import escapeClassName from '../../src/util/escapeClassName'
3+
import plugin from '../../src/plugins/boxShadow'
4+
5+
test('box shadow can use default keyword and negative prefix syntax', () => {
6+
const addedUtilities = []
7+
8+
const config = {
9+
theme: {
10+
boxShadow: {
11+
default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
12+
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
13+
'-': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
14+
'-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
15+
},
16+
},
17+
variants: {
18+
boxShadow: ['responsive'],
19+
},
20+
}
21+
22+
const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
23+
const pluginApi = {
24+
config: getConfigValue,
25+
e: escapeClassName,
26+
theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
27+
variants: (path, defaultValue) => {
28+
if (_.isArray(config.variants)) {
29+
return config.variants
30+
}
31+
32+
return getConfigValue(`variants.${path}`, defaultValue)
33+
},
34+
addUtilities(utilities, variants) {
35+
addedUtilities.push({
36+
utilities,
37+
variants,
38+
})
39+
},
40+
}
41+
42+
plugin()(pluginApi)
43+
44+
expect(addedUtilities).toEqual([
45+
{
46+
utilities: {
47+
'.shadow': {
48+
'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
49+
},
50+
'.shadow-md': {
51+
'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
52+
},
53+
'.-shadow': {
54+
'box-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
55+
},
56+
'.-shadow-md': {
57+
'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
58+
},
59+
},
60+
variants: ['responsive'],
61+
},
62+
])
63+
})

‎__tests__/plugins/letterSpacing.test.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import _ from 'lodash'
2+
import escapeClassName from '../../src/util/escapeClassName'
3+
import plugin from '../../src/plugins/letterSpacing'
4+
5+
test('letter spacing can use default keyword and negative prefix syntax', () => {
6+
const addedUtilities = []
7+
8+
const config = {
9+
theme: {
10+
letterSpacing: {
11+
'-1': '-0.05em',
12+
'-': '-0.025em',
13+
default: '0.025em',
14+
'1': '0.05em',
15+
},
16+
},
17+
variants: {
18+
letterSpacing: ['responsive'],
19+
},
20+
}
21+
22+
const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
23+
const pluginApi = {
24+
config: getConfigValue,
25+
e: escapeClassName,
26+
theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
27+
variants: (path, defaultValue) => {
28+
if (_.isArray(config.variants)) {
29+
return config.variants
30+
}
31+
32+
return getConfigValue(`variants.${path}`, defaultValue)
33+
},
34+
addUtilities(utilities, variants) {
35+
addedUtilities.push({
36+
utilities,
37+
variants,
38+
})
39+
},
40+
}
41+
42+
plugin()(pluginApi)
43+
44+
expect(addedUtilities).toEqual([
45+
{
46+
utilities: {
47+
'.-tracking-1': { 'letter-spacing': '-0.05em' },
48+
'.-tracking': { 'letter-spacing': '-0.025em' },
49+
'.tracking': { 'letter-spacing': '0.025em' },
50+
'.tracking-1': { 'letter-spacing': '0.05em' },
51+
},
52+
variants: ['responsive'],
53+
},
54+
])
55+
})

‎__tests__/plugins/zIndex.test.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import _ from 'lodash'
2+
import escapeClassName from '../../src/util/escapeClassName'
3+
import plugin from '../../src/plugins/zIndex'
4+
5+
test('z index can use default keyword and negative prefix syntax', () => {
6+
const addedUtilities = []
7+
8+
const config = {
9+
theme: {
10+
zIndex: {
11+
'-20': '-20',
12+
'-': '-10',
13+
default: '10',
14+
'20': '20',
15+
},
16+
},
17+
variants: {
18+
zIndex: ['responsive'],
19+
},
20+
}
21+
22+
const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
23+
const pluginApi = {
24+
config: getConfigValue,
25+
e: escapeClassName,
26+
theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
27+
variants: (path, defaultValue) => {
28+
if (_.isArray(config.variants)) {
29+
return config.variants
30+
}
31+
32+
return getConfigValue(`variants.${path}`, defaultValue)
33+
},
34+
addUtilities(utilities, variants) {
35+
addedUtilities.push({
36+
utilities,
37+
variants,
38+
})
39+
},
40+
}
41+
42+
plugin()(pluginApi)
43+
44+
expect(addedUtilities).toEqual([
45+
{
46+
utilities: {
47+
'.-z-20': { 'z-index': '-20' },
48+
'.-z': { 'z-index': '-10' },
49+
'.z': { 'z-index': '10' },
50+
'.z-20': { 'z-index': '20' },
51+
},
52+
variants: ['responsive'],
53+
},
54+
])
55+
})

‎__tests__/prefixNegativeModifiers.test.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import prefixNegativeModifiers from '../src/util/prefixNegativeModifiers'
2+
3+
test('it does not prefix classes using standard syntax', () => {
4+
expect(prefixNegativeModifiers('base', 'modifier')).toEqual('base-modifier')
5+
})
6+
7+
test('it prefixes classes using negative syntax', () => {
8+
expect(prefixNegativeModifiers('base', '-modifier')).toEqual('-base-modifier')
9+
})
10+
11+
test('it prefixes classes and omits suffix using default negative syntax', () => {
12+
expect(prefixNegativeModifiers('base', '-')).toEqual('-base')
13+
})

‎src/plugins/boxShadow.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ export default function() {
55
return function({ addUtilities, e, theme, variants }) {
66
const utilities = _.fromPairs(
77
_.map(theme('boxShadow'), (value, modifier) => {
8-
const className = modifier === 'default' ? 'shadow' : `shadow-${modifier}`
8+
const className =
9+
modifier === 'default' ? 'shadow' : `${e(prefixNegativeModifiers('shadow', modifier))}`
910
return [
10-
`.${e(prefixNegativeModifiers('shadow', modifier))}`,
11+
`.${className}`,
1112
{
1213
'box-shadow': value,
1314
},

‎src/plugins/letterSpacing.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,12 @@ export default function() {
55
return function({ addUtilities, theme, variants, e }) {
66
const utilities = _.fromPairs(
77
_.map(theme('letterSpacing'), (value, modifier) => {
8+
const className =
9+
modifier === 'default'
10+
? 'tracking'
11+
: `${e(prefixNegativeModifiers('tracking', modifier))}`
812
return [
9-
`.${e(prefixNegativeModifiers('tracking', modifier))}`,
13+
`.${className}`,
1014
{
1115
'letter-spacing': value,
1216
},

‎src/plugins/zIndex.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ export default function() {
55
return function({ addUtilities, e, theme, variants }) {
66
const utilities = _.fromPairs(
77
_.map(theme('zIndex'), (value, modifier) => {
8+
const className =
9+
modifier === 'default' ? 'z' : `${e(prefixNegativeModifiers('z', modifier))}`
810
return [
9-
`.${e(prefixNegativeModifiers('z', modifier))}`,
11+
`.${className}`,
1012
{
1113
'z-index': value,
1214
},

‎src/util/prefixNegativeModifiers.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import _ from 'lodash'
22

33
export default function prefixNegativeModifiers(base, modifier) {
4-
return modifier === '-'
5-
? `-${base}`
6-
: _.startsWith(modifier, '-')
7-
? `-${base}-${modifier.slice(1)}`
8-
: `${base}-${modifier}`
4+
if (modifier === '-') {
5+
return `-${base}`
6+
} else if (_.startsWith(modifier, '-')) {
7+
return `-${base}-${modifier.slice(1)}`
8+
} else {
9+
return `${base}-${modifier}`
10+
}
911
}

0 commit comments

Comments
 (0)