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

Initial support for IE11 target

Browse source
This commit is contained in:
Adam Wathan 2020-04-26 15:10:12 -04:00
parent b9a5b762ce
commit 2950ff339b
30 changed files with 387 additions and 188 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5736,10 +5736,6 @@ video {
display: inline !important;
}
.flow-root {
display: flow-root !important;
}
.flex {
display: flex !important;
}
@ -5748,14 +5744,6 @@ video {
display: inline-flex !important;
}
.grid {
display: grid !important;
}
.inline-grid {
display: inline-grid !important;
}
.table {
display: table !important;
}
@ -5792,6 +5780,18 @@ video {
display: table-row !important;
}
.flow-root {
display: flow-root !important;
}
.grid {
display: grid !important;
}
.inline-grid {
display: inline-grid !important;
}
.hidden {
display: none !important;
}
@ -19473,10 +19473,6 @@ video {
display: inline !important;
}
.sm\:flow-root {
display: flow-root !important;
}
.sm\:flex {
display: flex !important;
}
@ -19485,14 +19481,6 @@ video {
display: inline-flex !important;
}
.sm\:grid {
display: grid !important;
}
.sm\:inline-grid {
display: inline-grid !important;
}
.sm\:table {
display: table !important;
}
@ -19529,6 +19517,18 @@ video {
display: table-row !important;
}
.sm\:flow-root {
display: flow-root !important;
}
.sm\:grid {
display: grid !important;
}
.sm\:inline-grid {
display: inline-grid !important;
}
.sm\:hidden {
display: none !important;
}
@ -33211,10 +33211,6 @@ video {
display: inline !important;
}
.md\:flow-root {
display: flow-root !important;
}
.md\:flex {
display: flex !important;
}
@ -33223,14 +33219,6 @@ video {
display: inline-flex !important;
}
.md\:grid {
display: grid !important;
}
.md\:inline-grid {
display: inline-grid !important;
}
.md\:table {
display: table !important;
}
@ -33267,6 +33255,18 @@ video {
display: table-row !important;
}
.md\:flow-root {
display: flow-root !important;
}
.md\:grid {
display: grid !important;
}
.md\:inline-grid {
display: inline-grid !important;
}
.md\:hidden {
display: none !important;
}
@ -46949,10 +46949,6 @@ video {
display: inline !important;
}
.lg\:flow-root {
display: flow-root !important;
}
.lg\:flex {
display: flex !important;
}
@ -46961,14 +46957,6 @@ video {
display: inline-flex !important;
}
.lg\:grid {
display: grid !important;
}
.lg\:inline-grid {
display: inline-grid !important;
}
.lg\:table {
display: table !important;
}
@ -47005,6 +46993,18 @@ video {
display: table-row !important;
}
.lg\:flow-root {
display: flow-root !important;
}
.lg\:grid {
display: grid !important;
}
.lg\:inline-grid {
display: inline-grid !important;
}
.lg\:hidden {
display: none !important;
}
@ -60687,10 +60687,6 @@ video {
display: inline !important;
}
.xl\:flow-root {
display: flow-root !important;
}
.xl\:flex {
display: flex !important;
}
@ -60699,14 +60695,6 @@ video {
display: inline-flex !important;
}
.xl\:grid {
display: grid !important;
}
.xl\:inline-grid {
display: inline-grid !important;
}
.xl\:table {
display: table !important;
}
@ -60743,6 +60731,18 @@ video {
display: table-row !important;
}
.xl\:flow-root {
display: flow-root !important;
}
.xl\:grid {
display: grid !important;
}
.xl\:inline-grid {
display: inline-grid !important;
}
.xl\:hidden {
display: none !important;
}

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

@ -5736,10 +5736,6 @@ video {
display: inline;
}
.flow-root {
display: flow-root;
}
.flex {
display: flex;
}
@ -5748,14 +5744,6 @@ video {
display: inline-flex;
}
.grid {
display: grid;
}
.inline-grid {
display: inline-grid;
}
.table {
display: table;
}
@ -5792,6 +5780,18 @@ video {
display: table-row;
}
.flow-root {
display: flow-root;
}
.grid {
display: grid;
}
.inline-grid {
display: inline-grid;
}
.hidden {
display: none;
}
@ -19473,10 +19473,6 @@ video {
display: inline;
}
.sm\:flow-root {
display: flow-root;
}
.sm\:flex {
display: flex;
}
@ -19485,14 +19481,6 @@ video {
display: inline-flex;
}
.sm\:grid {
display: grid;
}
.sm\:inline-grid {
display: inline-grid;
}
.sm\:table {
display: table;
}
@ -19529,6 +19517,18 @@ video {
display: table-row;
}
.sm\:flow-root {
display: flow-root;
}
.sm\:grid {
display: grid;
}
.sm\:inline-grid {
display: inline-grid;
}
.sm\:hidden {
display: none;
}
@ -33211,10 +33211,6 @@ video {
display: inline;
}
.md\:flow-root {
display: flow-root;
}
.md\:flex {
display: flex;
}
@ -33223,14 +33219,6 @@ video {
display: inline-flex;
}
.md\:grid {
display: grid;
}
.md\:inline-grid {
display: inline-grid;
}
.md\:table {
display: table;
}
@ -33267,6 +33255,18 @@ video {
display: table-row;
}
.md\:flow-root {
display: flow-root;
}
.md\:grid {
display: grid;
}
.md\:inline-grid {
display: inline-grid;
}
.md\:hidden {
display: none;
}
@ -46949,10 +46949,6 @@ video {
display: inline;
}
.lg\:flow-root {
display: flow-root;
}
.lg\:flex {
display: flex;
}
@ -46961,14 +46957,6 @@ video {
display: inline-flex;
}
.lg\:grid {
display: grid;
}
.lg\:inline-grid {
display: inline-grid;
}
.lg\:table {
display: table;
}
@ -47005,6 +46993,18 @@ video {
display: table-row;
}
.lg\:flow-root {
display: flow-root;
}
.lg\:grid {
display: grid;
}
.lg\:inline-grid {
display: inline-grid;
}
.lg\:hidden {
display: none;
}
@ -60687,10 +60687,6 @@ video {
display: inline;
}
.xl\:flow-root {
display: flow-root;
}
.xl\:flex {
display: flex;
}
@ -60699,14 +60695,6 @@ video {
display: inline-flex;
}
.xl\:grid {
display: grid;
}
.xl\:inline-grid {
display: inline-grid;
}
.xl\:table {
display: table;
}
@ -60743,6 +60731,18 @@ video {
display: table-row;
}
.xl\:flow-root {
display: flow-root;
}
.xl\:grid {
display: grid;
}
.xl\:inline-grid {
display: inline-grid;
}
.xl\:hidden {
display: none;
}

14
src/plugins/backgroundColor.js
View file

@ -3,7 +3,19 @@ import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants }) {
return function({ addUtilities, e, theme, variants, config }) {
if (config('target') === 'ie11') {
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
return [`.${e(`bg-${modifier}`)}`, { 'background-color': value }]
})
)
addUtilities(utilities, variants('backgroundColor'))
return
}
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
return [

11
src/plugins/backgroundOpacity.js
View file

@ -1,5 +1,14 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('backgroundOpacity', [['bg-opacity', ['--bg-opacity']]])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('backgroundOpacity', [['bg-opacity', ['--bg-opacity']]])({
config,
...args,
})
}
}

16
src/plugins/borderColor.js
View file

@ -3,7 +3,21 @@ import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants }) {
return function({ addUtilities, e, theme, variants, config }) {
if (config('target') === 'ie11') {
const colors = flattenColorPalette(theme('borderColor'))
const utilities = _.fromPairs(
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [`.${e(`border-${modifier}`)}`, { 'border-color': value }]
})
)
addUtilities(utilities, variants('borderColor'))
return
}
const colors = flattenColorPalette(theme('borderColor'))
const utilities = _.fromPairs(

11
src/plugins/borderOpacity.js
View file

@ -1,5 +1,14 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('borderOpacity', [['border-opacity', ['--border-opacity']]])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('borderOpacity', [['border-opacity', ['--border-opacity']]])({
config,
...args,
})
}
}

24
src/plugins/display.js
View file

@ -1,5 +1,5 @@
export default function() {
return function({ addUtilities, variants }) {
return function({ addUtilities, variants, config }) {
addUtilities(
{
'.block': {
@ -11,21 +11,12 @@ export default function() {
'.inline': {
display: 'inline',
},
'.flow-root': {
display: 'flow-root',
},
'.flex': {
display: 'flex',
},
'.inline-flex': {
display: 'inline-flex',
},
'.grid': {
display: 'grid',
},
'.inline-grid': {
display: 'inline-grid',
},
'.table': {
display: 'table',
},
@ -53,6 +44,19 @@ export default function() {
'.table-row': {
display: 'table-row',
},
...(config('target') === 'ie11'
? {}
: {
'.flow-root': {
display: 'flow-root',
},
'.grid': {
display: 'grid',
},
'.inline-grid': {
display: 'inline-grid',
},
}),
'.hidden': {
display: 'none',
},

6
src/plugins/divideOpacity.js
View file

@ -1,7 +1,11 @@
import _ from 'lodash'
export default function() {
return function({ addUtilities, e, theme, variants }) {
return function({ addUtilities, e, theme, variants, config }) {
if (config('target') === 'ie11') {
return
}
const utilities = _.fromPairs(
_.map(theme('divideOpacity'), (value, modifier) => {
return [

16
src/plugins/gap.js
View file

@ -1,9 +1,15 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gap', [
['gap', ['gridGap', 'gap']],
['col-gap', ['gridColumnGap', 'columnGap']],
['row-gap', ['gridRowGap', 'rowGap']],
])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('gap', [
['gap', ['gridGap', 'gap']],
['col-gap', ['gridColumnGap', 'columnGap']],
['row-gap', ['gridRowGap', 'rowGap']],
])({ config, ...args })
}
}

6
src/plugins/gridAutoFlow.js
View file

@ -1,5 +1,9 @@
export default function() {
return function({ addUtilities, variants }) {
return function({ addUtilities, variants, config }) {
if (config('target') === 'ie11') {
return
}
addUtilities(
{
'.grid-flow-row': { gridAutoFlow: 'row' },

8
src/plugins/gridColumn.js
View file

@ -1,5 +1,11 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridColumn', [['col', ['gridColumn']]])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('gridColumn', [['col', ['gridColumn']]])({ config, ...args })
}
}

8
src/plugins/gridColumnEnd.js
View file

@ -1,5 +1,11 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]])({ config, ...args })
}
}

11
src/plugins/gridColumnStart.js
View file

@ -1,5 +1,14 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]])({
config,
...args,
})
}
}

8
src/plugins/gridRow.js
View file

@ -1,5 +1,11 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridRow', [['row', ['gridRow']]])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('gridRow', [['row', ['gridRow']]])({ config, ...args })
}
}

8
src/plugins/gridRowEnd.js
View file

@ -1,5 +1,11 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]])({ config, ...args })
}
}

8
src/plugins/gridRowStart.js
View file

@ -1,5 +1,11 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]])({ config, ...args })
}
}

11
src/plugins/gridTemplateColumns.js
View file

@ -1,5 +1,14 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridTemplateColumns', [['grid-cols', ['gridTemplateColumns']]])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('gridTemplateColumns', [['grid-cols', ['gridTemplateColumns']]])({
config,
...args,
})
}
}

11
src/plugins/gridTemplateRows.js
View file

@ -1,5 +1,14 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('gridTemplateRows', [['grid-rows', ['gridTemplateRows']]])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('gridTemplateRows', [['grid-rows', ['gridTemplateRows']]])({
config,
...args,
})
}
}

23
src/plugins/objectFit.js
View file

@ -1,14 +1,21 @@
export default function() {
return function({ addUtilities, variants }) {
addUtilities(
return function({ addUtilities, variants, target }) {
target(
{
'.object-contain': { 'object-fit': 'contain' },
'.object-cover': { 'object-fit': 'cover' },
'.object-fill': { 'object-fit': 'fill' },
'.object-none': { 'object-fit': 'none' },
'.object-scale-down': { 'object-fit': 'scale-down' },
ie11: () => {},
},
variants('objectFit')
() => {
addUtilities(
{
'.object-contain': { 'object-fit': 'contain' },
'.object-cover': { 'object-fit': 'cover' },
'.object-fill': { 'object-fit': 'fill' },
'.object-none': { 'object-fit': 'none' },
'.object-scale-down': { 'object-fit': 'scale-down' },
},
variants('objectFit')
)
}
)
}
}

31
src/plugins/objectPosition.js
View file

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

14
src/plugins/placeholderColor.js
View file

@ -3,7 +3,19 @@ import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants }) {
return function({ addUtilities, e, theme, variants, config }) {
if (config('target') === 'ie11') {
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
return [`.${e(`placeholder-${modifier}`)}::placeholder`, { color: value }]
})
)
addUtilities(utilities, variants('placeholderColor'))
return
}
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
return [

6
src/plugins/placeholderOpacity.js
View file

@ -1,7 +1,11 @@
import _ from 'lodash'
export default function() {
return function({ addUtilities, e, theme, variants }) {
return function({ addUtilities, e, theme, variants, config }) {
if (config('target') === 'ie11') {
return
}
const utilities = _.fromPairs(
_.map(theme('placeholderOpacity'), (value, modifier) => {
return [

8
src/plugins/rotate.js
View file

@ -1,5 +1,11 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('rotate', [['rotate', ['--transform-rotate']]])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('rotate', [['rotate', ['--transform-rotate']]])({ config, ...args })
}
}

16
src/plugins/scale.js
View file

@ -1,9 +1,15 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('scale', [
['scale', ['--transform-scale-x', '--transform-scale-y']],
['scale-x', ['--transform-scale-x']],
['scale-y', ['--transform-scale-y']],
])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('scale', [
['scale', ['--transform-scale-x', '--transform-scale-y']],
['scale-x', ['--transform-scale-x']],
['scale-y', ['--transform-scale-y']],
])({ config, ...args })
}
}

14
src/plugins/skew.js
View file

@ -1,8 +1,14 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('skew', [
['skew-x', ['--transform-skew-x']],
['skew-y', ['--transform-skew-y']],
])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('skew', [
['skew-x', ['--transform-skew-x']],
['skew-y', ['--transform-skew-y']],
])({ config, ...args })
}
}

14
src/plugins/textColor.js
View file

@ -3,7 +3,19 @@ import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants }) {
return function({ addUtilities, e, theme, variants, config }) {
if (config('target') === 'ie11') {
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('textColor')), (value, modifier) => {
return [`.${e(`text-${modifier}`)}`, { color: value }]
})
)
addUtilities(utilities, variants('textColor'))
return
}
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('textColor')), (value, modifier) => {
return [

8
src/plugins/textOpacity.js
View file

@ -1,5 +1,11 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('textOpacity', [['text-opacity', ['--text-opacity']]])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('textOpacity', [['text-opacity', ['--text-opacity']]])({ config, ...args })
}
}

6
src/plugins/transform.js
View file

@ -1,5 +1,9 @@
export default function() {
return function({ addUtilities, variants }) {
return function({ addUtilities, variants, config }) {
if (config('target') === 'ie11') {
return
}
addUtilities(
{
'.transform': {

14
src/plugins/translate.js
View file

@ -1,8 +1,14 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('translate', [
['translate-x', ['--transform-translate-x']],
['translate-y', ['--transform-translate-y']],
])
return function({ config, ...args }) {
if (config('target') === 'ie11') {
return
}
createUtilityPlugin('translate', [
['translate-x', ['--transform-translate-x']],
['translate-y', ['--transform-translate-y']],
])({ config, ...args })
}
}

4
src/util/processPlugins.js
View file

@ -27,6 +27,9 @@ export default function(plugins, config) {
return prefixSelector(config.prefix, selector)
}
const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
const target = (targets, defaultTarget) => {
return _.get(targets, getConfigValue('target'), defaultTarget)()
}
plugins.forEach(plugin => {
if (plugin.__isOptionsFunction) {
@ -38,6 +41,7 @@ export default function(plugins, config) {
handler({
postcss,
config: getConfigValue,
target,
theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
variants: (path, defaultValue) => {
if (Array.isArray(config.variants)) {