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

Merge branch 'master' into skew

Browse source
This commit is contained in:
Benoît Rouleau 2020-01-02 18:03:50 -05:00
commit 6378808a42
21 changed files with 3714 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

57
__tests__/plugins/strokeWidth.test.js Normal file
View file

@ -0,0 +1,57 @@
import _ from 'lodash'
import escapeClassName from '../../src/util/escapeClassName'
import plugin from '../../src/plugins/strokeWidth'
test('the width of the stroke to be applied to the shape', () => {
const addedUtilities = []
const config = {
theme: {
strokeWidth: {
'0': '0',
'1': '1px',
'2': '2px',
'3': '3px',
'4': '4px',
},
},
variants: {
strokeWidth: ['responsive'],
},
}
const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
const pluginApi = {
config: getConfigValue,
e: escapeClassName,
theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
variants: (path, defaultValue) => {
if (_.isArray(config.variants)) {
return config.variants
}
return getConfigValue(`variants.${path}`, defaultValue)
},
addUtilities(utilities, variants) {
addedUtilities.push({
utilities,
variants,
})
},
}
plugin()(pluginApi)
expect(addedUtilities).toEqual([
{
utilities: {
'.stroke-w-0': { 'stroke-width': '0' },
'.stroke-w-1': { 'stroke-width': '1px' },
'.stroke-w-2': { 'stroke-width': '2px' },
'.stroke-w-3': { 'stroke-width': '3px' },
'.stroke-w-4': { 'stroke-width': '4px' },
},
variants: ['responsive'],
},
])
})

26
src/corePlugins.js
View file

@ -52,6 +52,7 @@ import resize from './plugins/resize'
import boxShadow from './plugins/boxShadow'
import fill from './plugins/fill'
import stroke from './plugins/stroke'
import strokeWidth from './plugins/strokeWidth'
import tableLayout from './plugins/tableLayout'
import textAlign from './plugins/textAlign'
import textColor from './plugins/textColor'
@ -74,6 +75,18 @@ import scale from './plugins/scale'
import rotate from './plugins/rotate'
import translate from './plugins/translate'
import skew from './plugins/skew'
import gap from './plugins/gap'
import columnGap from './plugins/columnGap'
import rowGap from './plugins/rowGap'
import gridAutoFlow from './plugins/gridAutoFlow'
import gridTemplateColumns from './plugins/gridTemplateColumns'
import gridColumn from './plugins/gridColumn'
import gridColumnStart from './plugins/gridColumnStart'
import gridColumnEnd from './plugins/gridColumnEnd'
import gridTemplateRows from './plugins/gridTemplateRows'
import gridRow from './plugins/gridRow'
import gridRowStart from './plugins/gridRowStart'
import gridRowEnd from './plugins/gridRowEnd'
import configurePlugins from './util/configurePlugins'
@ -133,6 +146,7 @@ export default function({ corePlugins: corePluginConfig }) {
boxShadow,
fill,
stroke,
strokeWidth,
tableLayout,
textAlign,
textColor,
@ -149,6 +163,18 @@ export default function({ corePlugins: corePluginConfig }) {
wordBreak,
width,
zIndex,
gap,
columnGap,
rowGap,
gridAutoFlow,
gridTemplateColumns,
gridColumn,
gridColumnStart,
gridColumnEnd,
gridTemplateRows,
gridRow,
gridRowStart,
gridRowEnd,
transform,
transformOrigin,
scale,

4
src/plugins/boxSizing.js
View file

@ -2,8 +2,8 @@ export default function() {
return function({ addUtilities, variants }) {
addUtilities(
{
'.box-border': { 'box-sizing': 'border' },
'.box-content': { 'box-sizing': 'content' },
'.box-border': { 'box-sizing': 'border-box' },
'.box-content': { 'box-sizing': 'content-box' },
},
variants('boxSizing')
)

5
src/plugins/columnGap.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('columnGap', [['col-gap', ['gridColumnGap', 'columnGap']]])
}

3
src/plugins/display.js
View file

@ -17,6 +17,9 @@ export default function() {
'.inline-flex': {
display: 'inline-flex',
},
'.grid': {
display: 'grid',
},
'.table': {
display: 'table',
},

5
src/plugins/gap.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gap', [['gap', ['gridGap', 'gap']]])
}

13
src/plugins/gridAutoFlow.js Normal file
View file

@ -0,0 +1,13 @@
export default function() {
return function({ addUtilities, variants }) {
addUtilities(
{
'.grid-flow-row': { gridAutoFlow: 'row' },
'.grid-flow-col': { gridAutoFlow: 'column' },
'.grid-flow-row-dense': { gridAutoFlow: 'row dense' },
'.grid-flow-col-dense': { gridAutoFlow: 'column dense' },
},
variants('gridAutoFlow')
)
}
}

5
src/plugins/gridColumn.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridColumn', [['col', ['gridColumn']]])
}

5
src/plugins/gridColumnEnd.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]])
}

5
src/plugins/gridColumnStart.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]])
}

5
src/plugins/gridRow.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridRow', [['row', ['gridRow']]])
}

5
src/plugins/gridRowEnd.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]])
}

5
src/plugins/gridRowStart.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]])
}

5
src/plugins/gridTemplateColumns.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridTemplateColumns', [['grid-cols', ['gridTemplateColumns']]])
}

5
src/plugins/gridTemplateRows.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridTemplateRows', [['grid-rows', ['gridTemplateRows']]])
}

5
src/plugins/rowGap.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('rowGap', [['row-gap', ['gridRowGap', 'rowGap']]])
}

18
src/plugins/strokeWidth.js Normal file
View file

@ -0,0 +1,18 @@
import _ from 'lodash'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('strokeWidth'), (value, modifier) => {
return [
`.${e(`stroke-${modifier}`)}`,
{
strokeWidth: value,
},
]
})
)
addUtilities(utilities, variants('strokeWidth'))
}
}

87
stubs/defaultConfig.stub.js
View file

@ -368,6 +368,11 @@ module.exports = {
stroke: {
current: 'currentColor',
},
strokeWidth: {
'0': '0',
'1': '1',
'2': '2',
},
textColor: theme => theme('colors'),
width: theme => ({
auto: 'auto',
@ -410,6 +415,75 @@ module.exports = {
'40': '40',
'50': '50',
},
gap: theme => theme('spacing'),
rowGap: {},
columnGap: {},
gridTemplateColumns: {
none: 'none',
'1': 'repeat(1, minmax(0, 1fr))',
'2': 'repeat(2, minmax(0, 1fr))',
'3': 'repeat(3, minmax(0, 1fr))',
'4': 'repeat(4, minmax(0, 1fr))',
'5': 'repeat(5, minmax(0, 1fr))',
'6': 'repeat(6, minmax(0, 1fr))',
'7': 'repeat(7, minmax(0, 1fr))',
'8': 'repeat(8, minmax(0, 1fr))',
'9': 'repeat(9, minmax(0, 1fr))',
'10': 'repeat(10, minmax(0, 1fr))',
'11': 'repeat(11, minmax(0, 1fr))',
'12': 'repeat(12, minmax(0, 1fr))',
},
gridColumn: {
auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-7': 'span 7 / span 7',
'span-8': 'span 8 / span 8',
'span-9': 'span 9 / span 9',
'span-10': 'span 10 / span 10',
'span-11': 'span 11 / span 11',
'span-12': 'span 12 / span 12',
},
gridColumnStart: {
auto: 'auto',
'1': '1',
'2': '2',
'3': '3',
'4': '4',
'5': '5',
'6': '6',
'7': '7',
'8': '8',
'9': '9',
'10': '10',
'11': '11',
'12': '12',
'13': '13',
},
gridColumnEnd: {
auto: 'auto',
'1': '1',
'2': '2',
'3': '3',
'4': '4',
'5': '5',
'6': '6',
'7': '7',
'8': '8',
'9': '9',
'10': '10',
'11': '11',
'12': '12',
'13': '13',
},
gridTemplateRows: {},
gridRow: {},
gridRowStart: {},
gridRowEnd: {},
transformOrigin: {
center: 'center',
top: 'top',
@ -509,6 +583,7 @@ module.exports = {
position: ['responsive'],
resize: ['responsive'],
stroke: ['responsive'],
strokeWidth: ['responsive'],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColor: ['responsive', 'hover', 'focus'],
@ -521,6 +596,18 @@ module.exports = {
width: ['responsive'],
wordBreak: ['responsive'],
zIndex: ['responsive'],
gap: ['responsive'],
columnGap: ['responsive'],
rowGap: ['responsive'],
gridAutoFlow: ['responsive'],
gridTemplateColumns: ['responsive'],
gridColumn: ['responsive'],
gridColumnStart: ['responsive'],
gridColumnEnd: ['responsive'],
gridTemplateRows: ['responsive'],
gridRow: ['responsive'],
gridRowStart: ['responsive'],
gridRowEnd: ['responsive'],
transform: ['responsive'],
transformOrigin: ['responsive'],
scale: ['responsive', 'hover', 'focus'],

6
yarn.lock
View file

@ -1822,9 +1822,9 @@ eslint-config-postcss@^2.0.2:
integrity sha1-yuHGCTzteFCJSluF++HR4jK3Kvs=
eslint-config-prettier@^6.0.0:
version "6.8.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.8.0.tgz#36bd7559dcef9f97d7596779b38e6a879abb89d3"
integrity sha512-aq4M7mjjVregZ2l45O9qz6Mv6f5zVMl/IqfmUL8hNOoDAzVKYMhYPJytbqE/lPIVO1iMDXIFqjiEE59BfJZpZw==
version "6.9.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.9.0.tgz#430d24822e82f7deb1e22a435bfa3999fae4ad64"
integrity sha512-k4E14HBtcLv0uqThaI6I/n1LEqROp8XaPu6SO9Z32u5NlGRC07Enu1Bh2KEFw4FNHbekH8yzbIU9kUGxbiGmCA==
dependencies:
get-stdin "^6.0.0"