Skip to content

Commit

Permalink
Fix style + kill unused code
Browse files Browse the repository at this point in the history
  • Loading branch information
adamwathan committed Mar 7, 2018
1 parent c3f021a commit 7d589dd
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 75 deletions.
5 changes: 0 additions & 5 deletions __tests__/prefixTree.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,6 @@ test('it handles a function as the prefix', () => {

const prefixFunc = selector => {
return selector === '.foo' ? 'tw-' : ''
if (selector === '.foo') {
return 'tw-'
}

return ''
}

const result = prefixTree(input, prefixFunc).toResult()
Expand Down
102 changes: 63 additions & 39 deletions __tests__/processPlugins.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ function css(nodes) {
}

function processPluginsWithValidConfig(config) {
return processPlugins(_.defaultsDeep(config, {
options: {
prefix: '',
important: false,
separator: ':'
}
}))
return processPlugins(
_.defaultsDeep(config, {
options: {
prefix: '',
important: false,
separator: ':',
},
})
)
}

test('plugins can create utilities with object syntax', () => {
Expand Down Expand Up @@ -143,8 +145,8 @@ test('plugins can create utilities with mixed object styles and PostCSS nodes',
addUtilities([
{
'.object-fill': {
objectFit: 'fill'
}
objectFit: 'fill',
},
},
postcss.rule({ selector: '.object-contain' }).append([
postcss.decl({
Expand Down Expand Up @@ -182,7 +184,7 @@ test('plugins can create utilities with mixed object styles and PostCSS nodes',
test('plugins can create utilities with variants', () => {
const [components, utilities] = processPluginsWithValidConfig({
plugins: [
function({ rule, addUtilities }) {
function({ addUtilities }) {
addUtilities(
{
'.object-fill': {
Expand Down Expand Up @@ -283,6 +285,19 @@ test('plugins can create components with raw PostCSS nodes', () => {
},
],
})

expect(utilities.length).toBe(0)
expect(css(components)).toMatchCss(`
.btn-blue {
background-color: blue;
color: white;
padding: .5rem 1rem;
border-radius: .25rem
}
.btn-blue:hover {
background-color: darkblue
}
`)
})

test('plugins can create components with mixed object styles and raw PostCSS nodes', () => {
Expand Down Expand Up @@ -310,8 +325,8 @@ test('plugins can create components with mixed object styles and raw PostCSS nod
]),
{
'.btn-blue:hover': {
backgroundColor: 'darkblue'
}
backgroundColor: 'darkblue',
},
},
])
},
Expand Down Expand Up @@ -422,15 +437,15 @@ test('plugins can access the current config', () => {
{
'.container': {
width: '100%',
}
},
},
]

_.forEach(config('screens'), breakpoint => {
containerClasses.push({
[`@media (min-width: ${breakpoint})`]: {
'.container': { maxWidth: breakpoint },
}
},
})
})

Expand Down Expand Up @@ -499,7 +514,7 @@ test('plugins can provide fallbacks to keys missing from the config', () => {
test('variants are optional when adding utilities', () => {
const [, utilities] = processPluginsWithValidConfig({
plugins: [
function({ rule, addUtilities }) {
function({ addUtilities }) {
addUtilities({
'.border-collapse': {
'border-collapse': 'collapse',
Expand Down Expand Up @@ -578,7 +593,7 @@ test('plugins can add multiple sets of utilities and components', () => {
test('plugins respect prefix and important options by default when adding utilities', () => {
const [, utilities] = processPluginsWithValidConfig({
plugins: [
function({ utility, addUtilities }) {
function({ addUtilities }) {
addUtilities({
'.rotate-90': {
transform: 'rotate(90deg)',
Expand Down Expand Up @@ -673,14 +688,17 @@ test("plugins can apply the user's chosen prefix to components manually", () =>
test('prefix can optionally be ignored for utilities', () => {
const [, utilities] = processPluginsWithValidConfig({
plugins: [
function({ utility, addUtilities }) {
addUtilities({
'.rotate-90': {
transform: 'rotate(90deg)',
function({ addUtilities }) {
addUtilities(
{
'.rotate-90': {
transform: 'rotate(90deg)',
},
},
}, {
respectPrefix: false
})
{
respectPrefix: false,
}
)
},
],
options: {
Expand All @@ -701,14 +719,17 @@ test('prefix can optionally be ignored for utilities', () => {
test('important can optionally be ignored for utilities', () => {
const [, utilities] = processPluginsWithValidConfig({
plugins: [
function({ utility, addUtilities }) {
addUtilities({
'.rotate-90': {
transform: 'rotate(90deg)',
function({ addUtilities }) {
addUtilities(
{
'.rotate-90': {
transform: 'rotate(90deg)',
},
},
}, {
respectImportant: false
})
{
respectImportant: false,
}
)
},
],
options: {
Expand All @@ -729,16 +750,19 @@ test('important can optionally be ignored for utilities', () => {
test('variants can still be specified when ignoring prefix and important options', () => {
const [, utilities] = processPluginsWithValidConfig({
plugins: [
function({ utility, addUtilities }) {
addUtilities({
'.rotate-90': {
transform: 'rotate(90deg)',
function({ addUtilities }) {
addUtilities(
{
'.rotate-90': {
transform: 'rotate(90deg)',
},
},
}, {
variants: ['responsive', 'hover', 'focus'],
respectImportant: false,
respectPrefix: false,
})
{
variants: ['responsive', 'hover', 'focus'],
respectImportant: false,
respectPrefix: false,
}
)
},
],
options: {
Expand Down
2 changes: 1 addition & 1 deletion src/util/prefixSelector.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default function(prefix, selector) {
const getPrefix = typeof prefix === 'function' ? prefix : () => prefix

return parser(selectors => {
selectors.walkClasses((classSelector) => {
selectors.walkClasses(classSelector => {
classSelector.value = `${getPrefix('.' + classSelector.value)}${classSelector.value}`
})
}).processSync(selector)
Expand Down
32 changes: 2 additions & 30 deletions src/util/processPlugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,12 @@ import parseObjectStyles from '../util/parseObjectStyles'
import prefixSelector from '../util/prefixSelector'
import wrapWithVariants from '../util/wrapWithVariants'

function defineRule(selector, properties) {
const decls = _.map(properties, (value, property) => {
return postcss.decl({
prop: `${property}`,
value: `${value}`,
})
})

return postcss.rule({ selector }).append(decls)
}

function defineUtility(selector, properties, options) {
if (selector.startsWith('.')) {
return defineUtility(selector.slice(1), properties, options)
}

const rule = defineRule(
prefixSelector(options.prefix, `.${escapeClassName(selector)}`),
properties
)

if (options.important) {
rule.walkDecls(decl => (decl.important = true))
}

return rule
}

function parseStyles(styles) {
if (!Array.isArray(styles)) {
return parseStyles([styles])
}

return _.flatMap(styles, (style) => style instanceof Node ? style : parseObjectStyles(style))
return _.flatMap(styles, style => (style instanceof Node ? style : parseObjectStyles(style)))
}

export default function(config) {
Expand Down Expand Up @@ -68,7 +40,7 @@ export default function(config) {
}

if (options.respectImportant && _.get(config, 'options.important')) {
rule.walkDecls(decl => decl.important = true)
rule.walkDecls(decl => (decl.important = true))
}
})

Expand Down

0 comments on commit 7d589dd

Please sign in to comment.