wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Remove negativeMargin plugin, handle negative values in regular margin plugin

Browse source
This commit is contained in:
Adam Wathan 2019-04-23 20:04:24 -04:00
parent e9b4014131
commit a7ec9c2396
6 changed files with 3272 additions and 3580 deletions
Download patch file Download diff file Expand all files Collapse all files

3390
__tests__/fixtures/tailwind-output-important.css
View file

File diff suppressed because it is too large Load diff

3390
__tests__/fixtures/tailwind-output.css
View file

File diff suppressed because it is too large Load diff

2
src/corePlugins.js
View file

@ -34,7 +34,6 @@ import maxHeight from './plugins/maxHeight'
import maxWidth from './plugins/maxWidth'
import minHeight from './plugins/minHeight'
import minWidth from './plugins/minWidth'
import negativeMargin from './plugins/negativeMargin'
import objectFit from './plugins/objectFit'
import objectPosition from './plugins/objectPosition'
import opacity from './plugins/opacity'
@ -105,7 +104,6 @@ export default function({ corePlugins: corePluginConfig }) {
maxWidth,
minHeight,
minWidth,
negativeMargin,
objectFit,
objectPosition,
opacity,

24
src/plugins/margin.js
View file

@ -1,20 +1,30 @@
import _ from 'lodash'
function className(prefix, modifier) {
return _.startsWith(modifier, '-') ? `-${prefix}-${modifier.slice(1)}` : `${prefix}-${modifier}`
}
export default function() {
return function({ addUtilities, e, theme, variants }) {
const generators = [
(size, modifier) => ({
[`.${e(`m-${modifier}`)}`]: { margin: `${size}` },
[`.${e(className('m', modifier))}`]: { margin: `${size}` },
}),
(size, modifier) => ({
[`.${e(`my-${modifier}`)}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` },
[`.${e(`mx-${modifier}`)}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` },
[`.${e(className('my', modifier))}`]: {
'margin-top': `${size}`,
'margin-bottom': `${size}`,
},
[`.${e(className('mx', modifier))}`]: {
'margin-left': `${size}`,
'margin-right': `${size}`,
},
}),
(size, modifier) => ({
[`.${e(`mt-${modifier}`)}`]: { 'margin-top': `${size}` },
[`.${e(`mr-${modifier}`)}`]: { 'margin-right': `${size}` },
[`.${e(`mb-${modifier}`)}`]: { 'margin-bottom': `${size}` },
[`.${e(`ml-${modifier}`)}`]: { 'margin-left': `${size}` },
[`.${e(className('mt', modifier))}`]: { 'margin-top': `${size}` },
[`.${e(className('mr', modifier))}`]: { 'margin-right': `${size}` },
[`.${e(className('mb', modifier))}`]: { 'margin-bottom': `${size}` },
[`.${e(className('ml', modifier))}`]: { 'margin-left': `${size}` },
}),
]

29
src/plugins/negativeMargin.js
View file

@ -1,29 +0,0 @@
import _ from 'lodash'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const generators = [
(size, modifier) => ({
[`.${e(`-m-${modifier}`)}`]: { margin: `${size}` },
}),
(size, modifier) => ({
[`.${e(`-my-${modifier}`)}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` },
[`.${e(`-mx-${modifier}`)}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` },
}),
(size, modifier) => ({
[`.${e(`-mt-${modifier}`)}`]: { 'margin-top': `${size}` },
[`.${e(`-mr-${modifier}`)}`]: { 'margin-right': `${size}` },
[`.${e(`-mb-${modifier}`)}`]: { 'margin-bottom': `${size}` },
[`.${e(`-ml-${modifier}`)}`]: { 'margin-left': `${size}` },
}),
]
const utilities = _.flatMap(generators, generator => {
return _.flatMap(theme('negativeMargin'), (size, modifier) => {
return generator(`${size}` === '0' ? `${size}` : `-${size}`, modifier)
})
})
addUtilities(utilities, variants('negativeMargin'))
}
}

17
stubs/defaultConfig.stub.js
View file

@ -1,3 +1,5 @@
const _ = require('lodash')
module.exports = {
prefix: '',
important: false,
@ -305,8 +307,19 @@ module.exports = {
screen: '100vh',
},
padding: theme => theme('spacing'),
margin: theme => ({ auto: 'auto', ...theme('spacing') }),
negativeMargin: theme => theme('spacing'),
margin: theme => {
const negativeSpacing = Object.keys(theme('spacing'))
.filter(key => theme('spacing')[key] !== '0')
.reduce((negativeSpacing, key) => {
return { ...negativeSpacing, [`-${key}`]: `-${theme('spacing')[key]}` }
}, {})
return {
auto: 'auto',
...theme('spacing'),
...negativeSpacing,
}
},
objectPosition: {
bottom: 'bottom',
center: 'center',