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

Extract padding/margin values to spacing

Browse source
This commit is contained in:
Adam Wathan 2019-02-16 20:33:05 -05:00
parent 4763840582
commit 3797220c44
2 changed files with 38 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

28
__tests__/applyAtRule.test.js
View file

@ -1,10 +1,14 @@
import postcss from 'postcss'
import substituteClassApplyAtRules from '../src/lib/substituteClassApplyAtRules'
import processPlugins from '../src/util/processPlugins'
import resolveConfig from '../src/util/resolveConfig'
import corePlugins from '../src/corePlugins'
import defaultConfig from '../defaultConfig.stub.js'
const { utilities: defaultUtilities } = processPlugins(corePlugins(defaultConfig), defaultConfig)
const { utilities: defaultUtilities } = processPlugins(
corePlugins(resolveConfig([defaultConfig])),
defaultConfig
)
function run(input, config = defaultConfig, utilities = defaultUtilities) {
return postcss([substituteClassApplyAtRules(config, utilities)]).process(input, {
@ -200,10 +204,12 @@ test('you can apply utility classes without using the given prefix', () => {
.foo { margin-top: 1rem; margin-bottom: 1rem; }
`
const config = {
...defaultConfig,
prefix: 'tw-',
}
const config = resolveConfig([
{
...defaultConfig,
prefix: 'tw-',
},
])
return run(input, config, processPlugins(corePlugins(config), config).utilities).then(result => {
expect(result.css).toEqual(expected)
@ -220,12 +226,14 @@ test('you can apply utility classes without using the given prefix when using a
.foo { margin-top: 1rem; margin-bottom: 1rem; }
`
const config = {
...defaultConfig,
prefix: () => {
return 'tw-'
const config = resolveConfig([
{
...defaultConfig,
prefix: () => {
return 'tw-'
},
},
}
])
return run(input, config, processPlugins(corePlugins(config), config).utilities).then(result => {
expect(result.css).toEqual(expected)

72
defaultTheme.js
View file

@ -85,6 +85,23 @@ module.exports = function() {
'pink-lighter': '#ffbbca',
'pink-lightest': '#ffebef',
},
spacing: {
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
},
screens: {
sm: '576px',
md: '768px',
@ -264,58 +281,9 @@ module.exports = function() {
full: '100%',
screen: '100vh',
},
padding: {
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
},
margin: {
auto: 'auto',
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
},
negativeMargin: {
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
},
padding: theme => theme.spacing,
margin: theme => ({ auto: 'auto', ...theme.spacing }),
negativeMargin: theme => theme.spacing,
shadows: {
default: '0 2px 4px 0 rgba(0,0,0,0.10)',
md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',