archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1635 from tailwindcss/target-modes

Browse Source 
Add support for `target: 'ie11'` config option
This commit is contained in:
Adam Wathan 2020-04-29 16:31:04 -04:00 committed by GitHub
commit 7ce188ef70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
44 changed files with 56792 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56125
__tests__/fixtures/tailwind-output-ie11.css Normal file
View File

File diff suppressed because it is too large Load Diff

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;
}

1
__tests__/plugins/divideWidth.test.js
View File

@ -3,6 +3,7 @@ import plugin from '../../src/plugins/divideWidth'
test('generating divide width utilities', () => {
const config = {
target: 'relaxed',
theme: {
divideWidth: {
default: '1px',

1
__tests__/plugins/space.test.js
View File

@ -3,6 +3,7 @@ import plugin from '../../src/plugins/space'
test('generating space utilities', () => {
const config = {
target: 'relaxed',
theme: {
space: {
'0': '0',

150
__tests__/targetMode.test.js Normal file
View File

@ -0,0 +1,150 @@
import fs from 'fs'
import path from 'path'
import postcss from 'postcss'
import tailwind from '../src/index'
import config from '../stubs/defaultConfig.stub.js'
import processPlugins from '../src/util/processPlugins'
import runInTempDirectory from '../jest/runInTempDirectory'
function css(nodes) {
return postcss.root({ nodes }).toString()
}
it('generates the right CSS in IE11 mode', () => {
const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`)
const input = fs.readFileSync(inputPath, 'utf8')
return postcss([tailwind({ ...config, target: 'ie11' })])
.process(input, { from: inputPath })
.then(result => {
const expected = fs.readFileSync(
path.resolve(`${__dirname}/fixtures/tailwind-output-ie11.css`),
'utf8'
)
expect(result.css).toBe(expected)
})
})
test('plugins can request the target for a specific plugin key', () => {
const { utilities } = processPlugins(
[
function({ addUtilities, target }) {
addUtilities({
'.testA': {
target: target('testPluginA'),
},
})
},
function({ addUtilities, target }) {
addUtilities({
'.testB': {
target: target('testPluginB'),
},
})
},
function({ addUtilities, target }) {
addUtilities({
'.testC': {
target: target('testPluginC'),
},
})
},
],
{
...config,
target: [
'ie11',
{
testPluginA: 'modern',
testPluginB: 'relaxed',
},
],
}
)
expect(css(utilities)).toMatchCss(`
@variants {
.testA {
target: modern
}
}
@variants {
.testB {
target: relaxed
}
}
@variants {
.testC {
target: ie11
}
}
`)
})
test('browserslist target is translated to a target preset', () => {
return runInTempDirectory(() => {
fs.writeFileSync(
path.resolve('./.browserslistrc'),
`
last 2 versions
IE 11
`
)
const { utilities } = processPlugins(
[
function({ addUtilities, target }) {
addUtilities({
'.testA': {
target: target('testPluginA'),
},
})
},
function({ addUtilities, target }) {
addUtilities({
'.testB': {
target: target('testPluginB'),
},
})
},
function({ addUtilities, target }) {
addUtilities({
'.testC': {
target: target('testPluginC'),
},
})
},
],
{
...config,
target: [
'browserslist',
{
testPluginA: 'modern',
testPluginB: 'relaxed',
},
],
}
)
expect(css(utilities)).toMatchCss(`
@variants {
.testA {
target: modern
}
}
@variants {
.testB {
target: relaxed
}
}
@variants {
.testC {
target: ie11
}
}
`)
return Promise.resolve()
})
})

9
__tests__/util/invokePlugin.js
View File

@ -16,6 +16,15 @@ export default function(plugin, config) {
return getConfigValue(`variants.${path}`, defaultValue)
},
target: path => {
if (_.isString(config.target)) {
return config.target
}
const [defaultTarget, targetOverrides] = getConfigValue('target')
return _.get(targetOverrides, path, defaultTarget)
},
addUtilities(utilities, variants) {
addedUtilities.push([utilities, variants])
},

1
package.json
View File

@ -43,6 +43,7 @@
"dependencies": {
"@fullhuman/postcss-purgecss": "^2.1.2",
"autoprefixer": "^9.4.5",
"browserslist": "^4.12.0",
"bytes": "^3.0.0",
"chalk": "^4.0.0",
"color": "^3.1.2",

5
scripts/rebuildFixtures.js
View File

@ -39,6 +39,11 @@ Promise.all([
to: '__tests__/fixtures/tailwind-output-important.css',
config: { important: true },
}),
build({
from: '__tests__/fixtures/tailwind-input.css',
to: '__tests__/fixtures/tailwind-output-ie11.css',
config: { target: 'ie11' },
}),
]).then(() => {
console.log('\nFinished rebuilding fixtures.')
console.log(

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, target }) {
if (target('backgroundColor') === '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({ target, ...args }) {
if (target('backgroundOpacity') === 'ie11') {
return
}
createUtilityPlugin('backgroundOpacity', [['bg-opacity', ['--bg-opacity']]])({
target,
...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, target }) {
if (target('borderColor') === '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({ target, ...args }) {
if (target('borderOpacity') === 'ie11') {
return
}
createUtilityPlugin('borderOpacity', [['border-opacity', ['--border-opacity']]])({
target,
...args,
})
}
}

24
src/plugins/display.js
View File

@ -1,5 +1,5 @@
export default function() {
return function({ addUtilities, variants }) {
return function({ addUtilities, variants, target }) {
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',
},
...(target('display') === 'ie11'
? {}
: {
'.flow-root': {
display: 'flow-root',
},
'.grid': {
display: 'grid',
},
'.inline-grid': {
display: 'inline-grid',
},
}),
'.hidden': {
display: 'none',
},

17
src/plugins/divideColor.js
View File

@ -3,9 +3,24 @@ 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, target }) {
const colors = flattenColorPalette(theme('divideColor'))
if (target('divideColor') === 'ie11') {
const utilities = _.fromPairs(
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [
`.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
{ 'border-color': value },
]
})
)
addUtilities(utilities, variants('textColor'))
return
}
const utilities = _.fromPairs(
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [

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, target }) {
if (target('divideOpacity') === 'ie11') {
return
}
const utilities = _.fromPairs(
_.map(theme('divideOpacity'), (value, modifier) => {
return [

25
src/plugins/divideWidth.js
View File

@ -1,7 +1,30 @@
import _ from 'lodash'
export default function() {
return function({ addUtilities, e, theme, variants }) {
return function({ addUtilities, e, theme, variants, target }) {
if (target('divideWidth') === 'ie11') {
const generators = [
(size, modifier) => ({
[`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
'border-top-width': size,
},
[`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
'border-left-width': size,
},
}),
]
const utilities = _.flatMap(generators, generator => {
return _.flatMap(theme('divideWidth'), (value, modifier) => {
return generator(value, modifier === 'default' ? '' : `-${modifier}`)
})
})
addUtilities(utilities, variants('divideWidth'))
return
}
const generators = [
(size, modifier) => ({
[`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {

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({ target, ...args }) {
if (target('gap') === 'ie11') {
return
}
createUtilityPlugin('gap', [
['gap', ['gridGap', 'gap']],
['col-gap', ['gridColumnGap', 'columnGap']],
['row-gap', ['gridRowGap', 'rowGap']],
])({ target, ...args })
}
}

6
src/plugins/gridAutoFlow.js
View File

@ -1,5 +1,9 @@
export default function() {
return function({ addUtilities, variants }) {
return function({ addUtilities, variants, target }) {
if (target('gridAutoFlow') === '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({ target, ...args }) {
if (target('gridColumn') === 'ie11') {
return
}
createUtilityPlugin('gridColumn', [['col', ['gridColumn']]])({ target, ...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({ target, ...args }) {
if (target('gridColumnEnd') === 'ie11') {
return
}
createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]])({ target, ...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({ target, ...args }) {
if (target('gridColumnStart') === 'ie11') {
return
}
createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]])({
target,
...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({ target, ...args }) {
if (target('gridRow') === 'ie11') {
return
}
createUtilityPlugin('gridRow', [['row', ['gridRow']]])({ target, ...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({ target, ...args }) {
if (target('gridRowEnd') === 'ie11') {
return
}
createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]])({ target, ...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({ target, ...args }) {
if (target('gridRowStart') === 'ie11') {
return
}
createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]])({ target, ...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({ target, ...args }) {
if (target('gridTemplateColumns') === 'ie11') {
return
}
createUtilityPlugin('gridTemplateColumns', [['grid-cols', ['gridTemplateColumns']]])({
target,
...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({ target, ...args }) {
if (target('gridTemplateRows') === 'ie11') {
return
}
createUtilityPlugin('gridTemplateRows', [['grid-rows', ['gridTemplateRows']]])({
target,
...args,
})
}
}

6
src/plugins/objectFit.js
View File

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

6
src/plugins/objectPosition.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, target }) {
if (target('objectPosition') === 'ie11') {
return
}
const utilities = _.fromPairs(
_.map(theme('objectPosition'), (value, modifier) => {
return [

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, target }) {
if (target('placeholderColor') === '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, target }) {
if (target('placeholderOpacity') === 'ie11') {
return
}
const utilities = _.fromPairs(
_.map(theme('placeholderOpacity'), (value, modifier) => {
return [

10
src/plugins/position.js
View File

@ -1,12 +1,18 @@
export default function() {
return function({ addUtilities, variants }) {
return function({ addUtilities, variants, target }) {
addUtilities(
{
'.static': { position: 'static' },
'.fixed': { position: 'fixed' },
'.absolute': { position: 'absolute' },
'.relative': { position: 'relative' },
'.sticky': { position: 'sticky' },
...(target('position') === 'ie11'
? {}
: {
'.sticky': {
position: 'sticky',
},
}),
},
variants('position')
)

12
src/plugins/rotate.js
View File

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

22
src/plugins/scale.js
View File

@ -1,9 +1,21 @@
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({ target, ...args }) {
if (target('scale') === 'ie11') {
createUtilityPlugin('scale', [
['scale', ['transform'], value => `scale(${value})`],
['scale-x', ['transform'], value => `scaleX(${value})`],
['scale-y', ['transform'], value => `scaleY(${value})`],
])({ target, ...args })
return
}
createUtilityPlugin('scale', [
['scale', ['--transform-scale-x', '--transform-scale-y']],
['scale-x', ['--transform-scale-x']],
['scale-y', ['--transform-scale-y']],
])({ target, ...args })
}
}

19
src/plugins/skew.js
View File

@ -1,8 +1,19 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('skew', [
['skew-x', ['--transform-skew-x']],
['skew-y', ['--transform-skew-y']],
])
return function({ target, ...args }) {
if (target('skew') === 'ie11') {
createUtilityPlugin('skew', [
['skew-x', ['transform'], value => `skewX(${value})`],
['skew-y', ['transform'], value => `skewY(${value})`],
])({ target, ...args })
return
}
createUtilityPlugin('skew', [
['skew-x', ['--transform-skew-x']],
['skew-y', ['--transform-skew-y']],
])({ target, ...args })
}
}

27
src/plugins/space.js
View File

@ -2,7 +2,32 @@ import _ from 'lodash'
import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
export default function() {
return function({ addUtilities, e, theme, variants }) {
return function({ addUtilities, e, theme, variants, target }) {
if (target('space') === 'ie11') {
const generators = [
(size, modifier) => ({
[`.${e(
prefixNegativeModifiers('space-y', modifier)
)} > :not(template) ~ :not(template)`]: {
'margin-top': size,
},
[`.${e(
prefixNegativeModifiers('space-x', modifier)
)} > :not(template) ~ :not(template)`]: {
'margin-left': size,
},
}),
]
const utilities = _.flatMap(generators, generator => {
return _.flatMap(theme('space'), generator)
})
addUtilities(utilities, variants('space'))
return
}
const generators = [
(size, modifier) => ({
[`.${e(prefixNegativeModifiers('space-y', modifier))} > :not(template) ~ :not(template)`]: {

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, target }) {
if (target('textColor') === '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({ target, ...args }) {
if (target('textOpacity') === 'ie11') {
return
}
createUtilityPlugin('textOpacity', [['text-opacity', ['--text-opacity']]])({ target, ...args })
}
}

6
src/plugins/transform.js
View File

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

19
src/plugins/translate.js
View File

@ -1,8 +1,19 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('translate', [
['translate-x', ['--transform-translate-x']],
['translate-y', ['--transform-translate-y']],
])
return function({ target, ...args }) {
if (target('translate') === 'ie11') {
createUtilityPlugin('translate', [
['translate-x', ['transform'], value => `translateX(${value})`],
['translate-y', ['transform'], value => `translateY(${value})`],
])({ target, ...args })
return
}
createUtilityPlugin('translate', [
['translate-x', ['--transform-translate-x']],
['translate-y', ['--transform-translate-y']],
])({ target, ...args })
}
}

23
src/util/createUtilityPlugin.js
View File

@ -1,3 +1,4 @@
import identity from 'lodash/identity'
import fromPairs from 'lodash/fromPairs'
import toPairs from 'lodash/toPairs'
import castArray from 'lodash/castArray'
@ -16,16 +17,18 @@ function className(classPrefix, key) {
export default function createUtilityPlugin(themeKey, utilityVariations) {
return function({ e, addUtilities, variants, theme }) {
const utilities = utilityVariations.map(([classPrefix, properties]) => {
return fromPairs(
toPairs(theme(themeKey)).map(([key, value]) => {
return [
`.${e(className(classPrefix, key))}`,
fromPairs(castArray(properties).map(property => [property, value])),
]
})
)
})
const utilities = utilityVariations.map(
([classPrefix, properties, transformValue = identity]) => {
return fromPairs(
toPairs(theme(themeKey)).map(([key, value]) => {
return [
`.${e(className(classPrefix, key))}`,
fromPairs(castArray(properties).map(property => [property, transformValue(value)])),
]
})
)
}
)
return addUtilities(utilities, variants(themeKey))
}
}

13
src/util/processPlugins.js
View File

@ -1,5 +1,6 @@
import _ from 'lodash'
import postcss from 'postcss'
import browserslist from 'browserslist'
import Node from 'postcss/lib/node'
import isFunction from 'lodash/isFunction'
import escapeClassName from '../util/escapeClassName'
@ -27,6 +28,7 @@ export default function(plugins, config) {
return prefixSelector(config.prefix, selector)
}
const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
const browserslistTarget = browserslist().includes('ie 11') ? 'ie11' : 'relaxed'
plugins.forEach(plugin => {
if (plugin.__isOptionsFunction) {
@ -46,6 +48,17 @@ export default function(plugins, config) {
return getConfigValue(`variants.${path}`, defaultValue)
},
target: path => {
if (_.isString(config.target)) {
return config.target
}
const [defaultTarget, targetOverrides] = getConfigValue('target')
const target = _.get(targetOverrides, path, defaultTarget)
return target === 'browserslist' ? browserslistTarget : target
},
e: escapeClassName,
prefix: applyConfiguredPrefix,
addUtilities: (utilities, options) => {

1
stubs/defaultConfig.stub.js
View File

@ -1,5 +1,6 @@
module.exports = {
purge: [],
target: 'relaxed',
prefix: '',
important: false,
separator: ':',

20
yarn.lock
View File

@ -1501,6 +1501,16 @@ browserslist@^4.11.1, browserslist@^4.8.3, browserslist@^4.9.1:
node-releases "^1.1.53"
pkg-up "^2.0.0"
browserslist@^4.12.0:
version "4.12.0"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d"
integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==
dependencies:
caniuse-lite "^1.0.30001043"
electron-to-chromium "^1.3.413"
node-releases "^1.1.53"
pkg-up "^2.0.0"
bser@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.0.tgz#65fc784bf7f87c009b973c12db6546902fa9c7b5"
@ -1553,6 +1563,11 @@ caniuse-lite@^1.0.30001038, caniuse-lite@^1.0.30001039:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001042.tgz#c91ec21ec2d270bd76dbc2ce261260c292b8c93c"
integrity sha512-igMQ4dlqnf4tWv0xjaaE02op9AJ2oQzXKjWf4EuAHFN694Uo9/EfPVIPJcmn2WkU9RqozCxx5e2KPcVClHDbDw==
caniuse-lite@^1.0.30001043:
version "1.0.30001048"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001048.tgz#4bb4f1bc2eb304e5e1154da80b93dee3f1cf447e"
integrity sha512-g1iSHKVxornw0K8LG9LLdf+Fxnv7T1Z+mMsf0/YYLclQX4Cd522Ap0Lrw6NFqHgezit78dtyWxzlV2Xfc7vgRg==
capture-exit@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@ -1996,6 +2011,11 @@ electron-to-chromium@^1.3.390:
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.410.tgz#00e0ec61c22933daa8b4de172c03932678783adc"
integrity sha512-DbCBdwtARI0l3e3m6ZIxVaTNahb6dSsmGjuag/twiVcWuM4MSpL5IfsJsJSyqLqxosE/m0CXlZaBmxegQW/dAg==
electron-to-chromium@^1.3.413:
version "1.3.421"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.421.tgz#4abfe7e49070b5b437ec2ce442543add8eb66800"
integrity sha512-ogxgmvHGfDuLA+GtgfK0jkFWlBb4MCZK2U1MM+l98sf4U3Ixtrfw1iC9w4mQqNvo+lHgM4pR62TqoT4QrvKJCw==
emoji-regex@^7.0.1:
version "7.0.3"
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"