Fix style

This commit is contained in:
Adam Wathan 2018-03-01 19:21:19 -05:00
parent b96f342d8a
commit 18d45b19cf
3 changed files with 50 additions and 57 deletions

View File

@ -7,28 +7,31 @@ function css(nodes) {
}
function objectFitPlugin(variants = []) {
return function ({ rule, addUtilities }) {
addUtilities([
rule('.object-fill', {
'object-fit': 'fill',
}),
rule('.object-contain', {
'object-fit': 'contain',
}),
rule('.object-cover', {
'object-fit': 'cover',
}),
], variants)
return function({ rule, addUtilities }) {
addUtilities(
[
rule('.object-fill', {
'object-fit': 'fill',
}),
rule('.object-contain', {
'object-fit': 'contain',
}),
rule('.object-cover', {
'object-fit': 'cover',
}),
],
variants
)
}
}
function buttonPlugin() {
return function ({ rule, atRule, addComponents }) {
return function({ rule, addComponents }) {
addComponents([
rule('.btn-blue', {
'background-color': 'blue',
'color': 'white',
'padding': '.5rem 1rem',
color: 'white',
padding: '.5rem 1rem',
'border-radius': '.25rem',
}),
rule('.btn-blue:hover', {
@ -39,10 +42,10 @@ function buttonPlugin() {
}
function containerPlugin() {
return function ({ rule, atRule, addComponents }) {
return function({ rule, atRule, addComponents }) {
addComponents([
rule('.container', {
'width': '100%',
width: '100%',
}),
atRule('@media (min-width: 100px)', [
rule('.container', {
@ -58,16 +61,14 @@ function containerPlugin() {
rule('.container', {
'max-width': '300px',
}),
])
]),
])
}
}
test('plugins can create utilities', () => {
const config = {
plugins: [
objectFitPlugin()
]
plugins: [objectFitPlugin()],
}
const [components, utilities] = processPlugins(config)
@ -90,9 +91,7 @@ test('plugins can create utilities', () => {
test('plugins can create utilities with variants', () => {
const config = {
plugins: [
objectFitPlugin(['responsive', 'hover', 'group-hover', 'focus'])
]
plugins: [objectFitPlugin(['responsive', 'hover', 'group-hover', 'focus'])],
}
const [components, utilities] = processPlugins(config)
@ -115,9 +114,7 @@ test('plugins can create utilities with variants', () => {
test('plugins can create components', () => {
const config = {
plugins: [
buttonPlugin()
]
plugins: [buttonPlugin()],
}
const [components, utilities] = processPlugins(config)
@ -138,9 +135,7 @@ test('plugins can create components', () => {
test('plugins can create components with media queries', () => {
const config = {
plugins: [
containerPlugin()
]
plugins: [containerPlugin()],
}
const [components, utilities] = processPlugins(config)
@ -171,14 +166,17 @@ test('plugins can create components with media queries', () => {
test('plugins can create rules with escaped selectors', () => {
const config = {
plugins: [
function ({ e, rule, addUtilities }) {
addUtilities([
rule(`.${e('top-1/4')}`, {
top: '25%',
})
], [])
}
]
function({ e, rule, addUtilities }) {
addUtilities(
[
rule(`.${e('top-1/4')}`, {
top: '25%',
}),
],
[]
)
},
],
}
const [components, utilities] = processPlugins(config)
@ -194,34 +192,32 @@ test('plugins can create rules with escaped selectors', () => {
})
test('plugins can access the current config', () => {
const config = {
const [components, utilities] = processPlugins({
screens: {
'sm': '576px',
'md': '768px',
'lg': '992px',
'xl': '1200px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
},
plugins: [
function ({ rule, atRule, addComponents, config }) {
function({ rule, atRule, addComponents, config }) {
const containerClasses = [
rule('.container', {
'width': '100%',
})
width: '100%',
}),
]
_.forEach(config.screens, (breakpoint) => {
_.forEach(config.screens, breakpoint => {
const mediaQuery = atRule(`@media (min-width: ${breakpoint})`, [
rule('.container', { 'max-width': breakpoint })
rule('.container', { 'max-width': breakpoint }),
])
containerClasses.push(mediaQuery)
})
addComponents(containerClasses)
}
]
}
const [components, utilities] = processPlugins(config)
},
],
})
expect(utilities.length).toBe(0)
expect(css(components)).toMatchCss(`

View File

@ -1,13 +1,10 @@
import _ from 'lodash'
import fs from 'fs'
import postcss from 'postcss'
import container from '../generators/container'
import utilityModules from '../utilityModules'
import applyClassPrefix from '../util/applyClassPrefix'
import escapeClassName from '../util/escapeClassName'
import generateModules from '../util/generateModules'
import processPlugins from '../util/processPlugins'
import wrapWithVariants from '../util/wrapWithVariants'
export default function(config) {
return function(css) {

View File

@ -25,7 +25,7 @@ function defineAtRule(atRule, rules) {
.append(rules)
}
export default function (config) {
export default function(config) {
const pluginComponents = []
const pluginUtilities = []