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

Remove target feature

Browse source
This commit is contained in:
Adam Wathan 2020-10-15 12:29:50 -04:00
parent ae8b634f33
commit 712fe7aeb8
59 changed files with 71 additions and 55431 deletions
Download patch file Download diff file Expand all files Collapse all files

54647
__tests__/fixtures/tailwind-output-ie11.css
View file

File diff suppressed because it is too large Load diff

28
__tests__/plugins/backgroundColor.test.js
View file

@ -3,34 +3,6 @@ import plugin from '../../src/plugins/backgroundColor'
test('defining color as a function', () => {
const config = {
target: 'relaxed',
theme: {
backgroundColor: {
black: ({ opacityVariable: _ }) => 'black',
},
},
variants: {
backgroundColor: [],
},
}
const { utilities } = invokePlugin(plugin(), config)
expect(utilities).toEqual([
[
{
'.bg-black': {
'background-color': 'black',
},
},
[],
],
])
})
test('defining color as a function in ie11 mode', () => {
const config = {
target: 'ie11',
theme: {
backgroundColor: {
black: ({ opacityVariable: _ }) => 'black',

28
__tests__/plugins/borderColor.test.js
View file

@ -3,34 +3,6 @@ import plugin from '../../src/plugins/borderColor'
test('defining color as a function', () => {
const config = {
target: 'relaxed',
theme: {
borderColor: {
black: ({ opacityVariable: _ }) => 'black',
},
},
variants: {
borderColor: [],
},
}
const { utilities } = invokePlugin(plugin(), config)
expect(utilities).toEqual([
[
{
'.border-black': {
'border-color': 'black',
},
},
[],
],
])
})
test('defining color as a function in ie11 mode', () => {
const config = {
target: 'ie11',
theme: {
borderColor: {
black: ({ opacityVariable: _ }) => 'black',

28
__tests__/plugins/divideColor.test.js
View file

@ -3,34 +3,6 @@ import plugin from '../../src/plugins/divideColor'
test('defining color as a function', () => {
const config = {
target: 'relaxed',
theme: {
divideColor: {
black: ({ opacityVariable: _ }) => 'black',
},
},
variants: {
divideColor: [],
},
}
const { utilities } = invokePlugin(plugin(), config)
expect(utilities).toEqual([
[
{
'.divide-black > :not(template) ~ :not(template)': {
'border-color': 'black',
},
},
[],
],
])
})
test('defining color as a function in ie11 mode', () => {
const config = {
target: 'ie11',
theme: {
divideColor: {
black: ({ opacityVariable: _ }) => 'black',

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

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

28
__tests__/plugins/fill.test.js
View file

@ -3,34 +3,6 @@ import plugin from '../../src/plugins/fill'
test('defining color as a function', () => {
const config = {
target: 'relaxed',
theme: {
fill: {
black: ({ opacityVariable: _ }) => 'black',
},
},
variants: {
fill: [],
},
}
const { utilities } = invokePlugin(plugin(), config)
expect(utilities).toEqual([
[
{
'.fill-black': {
fill: 'black',
},
},
[],
],
])
})
test('defining color as a function in ie11 mode', () => {
const config = {
target: 'ie11',
theme: {
fill: {
black: ({ opacityVariable: _ }) => 'black',

28
__tests__/plugins/placeholderColor.test.js
View file

@ -3,34 +3,6 @@ import plugin from '../../src/plugins/placeholderColor'
test('defining color as a function', () => {
const config = {
target: 'relaxed',
theme: {
placeholderColor: {
black: ({ opacityVariable: _ }) => 'black',
},
},
variants: {
placeholderColor: [],
},
}
const { utilities } = invokePlugin(plugin(), config)
expect(utilities).toEqual([
[
{
'.placeholder-black::placeholder': {
color: 'black',
},
},
[],
],
])
})
test('defining color as a function in ie11 mode', () => {
const config = {
target: 'ie11',
theme: {
placeholderColor: {
black: ({ opacityVariable: _ }) => 'black',

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

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

28
__tests__/plugins/stroke.test.js
View file

@ -3,34 +3,6 @@ import plugin from '../../src/plugins/stroke'
test('defining color as a function', () => {
const config = {
target: 'relaxed',
theme: {
stroke: {
black: ({ opacityVariable: _ }) => 'black',
},
},
variants: {
stroke: [],
},
}
const { utilities } = invokePlugin(plugin(), config)
expect(utilities).toEqual([
[
{
'.stroke-black': {
stroke: 'black',
},
},
[],
],
])
})
test('defining color as a function in ie11 mode', () => {
const config = {
target: 'ie11',
theme: {
stroke: {
black: ({ opacityVariable: _ }) => 'black',

28
__tests__/plugins/textColor.test.js
View file

@ -3,34 +3,6 @@ import plugin from '../../src/plugins/textColor'
test('defining color as a function', () => {
const config = {
target: 'relaxed',
theme: {
textColor: {
black: ({ opacityVariable: _ }) => 'black',
},
},
variants: {
textColor: [],
},
}
const { utilities } = invokePlugin(plugin(), config)
expect(utilities).toEqual([
[
{
'.text-black': {
color: 'black',
},
},
[],
],
])
})
test('defining color as a function in ie11 mode', () => {
const config = {
target: 'ie11',
theme: {
textColor: {
black: ({ opacityVariable: _ }) => 'black',

201
__tests__/targetMode.test.js
View file

@ -1,201 +0,0 @@
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(`
@layer utilities {
@variants {
.testA {
target: modern
}
}
}
@layer utilities {
@variants {
.testB {
target: relaxed
}
}
}
@layer utilities {
@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({
'.test': {
target: target('testPlugin'),
},
})
},
],
{
...config,
target: 'browserslist',
}
)
expect(css(utilities)).toMatchCss(`
@layer utilities {
@variants {
.test {
target: ie11
}
}
}
`)
return Promise.resolve()
})
})
test('browserslist target is translated to a target preset with overrides', () => {
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(`
@layer utilities {
@variants {
.testA {
target: modern
}
}
}
@layer utilities {
@variants {
.testB {
target: relaxed
}
}
}
@layer utilities {
@variants {
.testC {
target: ie11
}
}
}
`)
return Promise.resolve()
})
})

9
__tests__/util/invokePlugin.js
View file

@ -16,15 +16,6 @@ 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

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

5
scripts/rebuildFixtures.js
View file

@ -39,11 +39,6 @@ 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' },
}),
build({
from: '__tests__/fixtures/tailwind-input.css',
to: '__tests__/fixtures/tailwind-output-no-color-opacity.css',

8
src/plugins/backgroundClip.js
View file

@ -1,15 +1,11 @@
export default function() {
return function({ addUtilities, variants, target }) {
return function({ addUtilities, variants }) {
addUtilities(
{
'.bg-clip-border': { 'background-clip': 'border-box' },
'.bg-clip-padding': { 'background-clip': 'padding-box' },
'.bg-clip-content': { 'background-clip': 'content-box' },
...(target('display') === 'ie11'
? {}
: {
'.bg-clip-text': { 'background-clip': 'text' },
}),
'.bg-clip-text': { 'background-clip': 'text' },
},
variants('backgroundClip')
)

6
src/plugins/backgroundColor.js
View file

@ -4,14 +4,10 @@ import withAlphaVariable from '../util/withAlphaVariable'
import toColorValue from '../util/toColorValue'
export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
return function({ addUtilities, e, theme, variants, corePlugins }) {
const colors = flattenColorPalette(theme('backgroundColor'))
const getProperties = value => {
if (target('backgroundColor') === 'ie11') {
return { 'background-color': toColorValue(value) }
}
if (corePlugins('backgroundOpacity')) {
return withAlphaVariable({
color: value,

7
src/plugins/backgroundImage.js
View file

@ -1,14 +1,9 @@
import _ from 'lodash'
import usesCustomProperties from '../util/usesCustomProperties'
export default function() {
return function({ addUtilities, e, theme, variants, target }) {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('backgroundImage'), (value, modifier) => {
if (target('backgroundImage') === 'ie11' && usesCustomProperties(value)) {
return []
}
return [
`.${e(`bg-${modifier}`)}`,
{

11
src/plugins/backgroundOpacity.js
View file

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

6
src/plugins/borderColor.js
View file

@ -4,14 +4,10 @@ import toColorValue from '../util/toColorValue'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
return function({ addUtilities, e, theme, variants, corePlugins }) {
const colors = flattenColorPalette(theme('borderColor'))
const getProperties = value => {
if (target('borderColor') === 'ie11') {
return { 'border-color': toColorValue(value) }
}
if (corePlugins('borderOpacity')) {
return withAlphaVariable({
color: value,

11
src/plugins/borderOpacity.js
View file

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

30
src/plugins/display.js
View file

@ -1,5 +1,5 @@
export default function() {
return function({ addUtilities, variants, target }) {
return function({ addUtilities, variants }) {
addUtilities(
{
'.block': {
@ -44,22 +44,18 @@ export default function() {
'.table-row': {
display: 'table-row',
},
...(target('display') === 'ie11'
? {}
: {
'.flow-root': {
display: 'flow-root',
},
'.grid': {
display: 'grid',
},
'.inline-grid': {
display: 'inline-grid',
},
'.contents': {
display: 'contents',
},
}),
'.flow-root': {
display: 'flow-root',
},
'.grid': {
display: 'grid',
},
'.inline-grid': {
display: 'inline-grid',
},
'.contents': {
display: 'contents',
},
'.hidden': {
display: 'none',
},

6
src/plugins/divideColor.js
View file

@ -4,14 +4,10 @@ import toColorValue from '../util/toColorValue'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
return function({ addUtilities, e, theme, variants, corePlugins }) {
const colors = flattenColorPalette(theme('divideColor'))
const getProperties = value => {
if (target('divideColor') === 'ie11') {
return { 'border-color': toColorValue(value) }
}
if (corePlugins('divideOpacity')) {
return withAlphaVariable({
color: value,

6
src/plugins/divideOpacity.js
View file

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

25
src/plugins/divideWidth.js
View file

@ -1,30 +1,7 @@
import _ from 'lodash'
export default function() {
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
}
return function({ addUtilities, e, theme, variants }) {
const generators = [
(size, modifier) => ({
[`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {

6
src/plugins/fontVariantNumeric.js
View file

@ -1,9 +1,5 @@
export default function() {
return function({ addUtilities, variants, target }) {
if (target('fontVariantNumeric') === 'ie11') {
return
}
return function({ addUtilities, variants }) {
addUtilities(
{
'.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions': {

10
src/plugins/gap.js
View file

@ -2,17 +2,13 @@ import createUtilityPlugin from '../util/createUtilityPlugin'
import { flagEnabled } from '../featureFlags'
export default function() {
return function({ target, config, ...args }) {
if (target('gap') === 'ie11') {
return
}
return function({ config, ...args }) {
if (flagEnabled(config(), 'removeDeprecatedGapUtilities')) {
createUtilityPlugin('gap', [
['gap', ['gridGap', 'gap']],
['gap-x', ['gridColumnGap', 'columnGap']],
['gap-y', ['gridRowGap', 'rowGap']],
])({ target, config, ...args })
])({ config, ...args })
} else {
createUtilityPlugin('gap', [
['gap', ['gridGap', 'gap']],
@ -20,7 +16,7 @@ export default function() {
['gap-x', ['gridColumnGap', 'columnGap']],
['row-gap', ['gridRowGap', 'rowGap']],
['gap-y', ['gridRowGap', 'rowGap']],
])({ target, config, ...args })
])({ config, ...args })
}
}
}

6
src/plugins/gradientColorStops.js
View file

@ -4,11 +4,7 @@ import toColorValue from '../util/toColorValue'
import { toRgba } from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target }) {
if (target('gradientColorStops') === 'ie11') {
return
}
return function({ addUtilities, e, theme, variants }) {
const colors = flattenColorPalette(theme('gradientColorStops'))
const utilities = _(colors)

11
src/plugins/gridAutoColumns.js
View file

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

6
src/plugins/gridAutoFlow.js
View file

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

8
src/plugins/gridAutoRows.js
View file

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

8
src/plugins/gridColumn.js
View file

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

8
src/plugins/gridColumnEnd.js
View file

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

11
src/plugins/gridColumnStart.js
View file

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

8
src/plugins/gridRow.js
View file

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

8
src/plugins/gridRowEnd.js
View file

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

8
src/plugins/gridRowStart.js
View file

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

11
src/plugins/gridTemplateColumns.js
View file

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

11
src/plugins/gridTemplateRows.js
View file

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

6
src/plugins/justifyItems.js
View file

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

6
src/plugins/justifySelf.js
View file

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

6
src/plugins/objectFit.js
View file

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

6
src/plugins/objectPosition.js
View file

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

6
src/plugins/overscrollBehavior.js
View file

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

6
src/plugins/placeContent.js
View file

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

6
src/plugins/placeItems.js
View file

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

6
src/plugins/placeSelf.js
View file

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

6
src/plugins/placeholderColor.js
View file

@ -4,14 +4,10 @@ import toColorValue from '../util/toColorValue'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
return function({ addUtilities, e, theme, variants, corePlugins }) {
const colors = flattenColorPalette(theme('placeholderColor'))
const getProperties = value => {
if (target('placeholderColor') === 'ie11') {
return { color: toColorValue(value) }
}
if (corePlugins('placeholderOpacity')) {
return withAlphaVariable({
color: value,

6
src/plugins/placeholderOpacity.js
View file

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

12
src/plugins/position.js
View file

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

12
src/plugins/rotate.js
View file

@ -1,15 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
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 })
}
return createUtilityPlugin('rotate', [['rotate', ['--transform-rotate']]])
}

22
src/plugins/scale.js
View file

@ -1,21 +1,9 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
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 })
}
return createUtilityPlugin('scale', [
['scale', ['--transform-scale-x', '--transform-scale-y']],
['scale-x', ['--transform-scale-x']],
['scale-y', ['--transform-scale-y']],
])
}

19
src/plugins/skew.js
View file

@ -1,19 +1,8 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
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 })
}
return createUtilityPlugin('skew', [
['skew-x', ['--transform-skew-x']],
['skew-y', ['--transform-skew-y']],
])
}

27
src/plugins/space.js
View file

@ -2,32 +2,7 @@ import _ from 'lodash'
import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
export default function() {
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
}
return function({ addUtilities, e, theme, variants }) {
const generators = [
(size, modifier) => ({
[`.${e(prefixNegativeModifiers('space-y', modifier))} > :not(template) ~ :not(template)`]: {

6
src/plugins/textColor.js
View file

@ -4,14 +4,10 @@ import toColorValue from '../util/toColorValue'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
return function({ addUtilities, e, theme, variants, corePlugins }) {
const colors = flattenColorPalette(theme('textColor'))
const getProperties = value => {
if (target('textColor') === 'ie11') {
return { color: toColorValue(value) }
}
if (corePlugins('textOpacity')) {
return withAlphaVariable({
color: value,

8
src/plugins/textOpacity.js
View file

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

6
src/plugins/transform.js
View file

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

19
src/plugins/translate.js
View file

@ -1,19 +1,8 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
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 })
}
return createUtilityPlugin('translate', [
['translate-x', ['--transform-translate-x']],
['translate-y', ['--transform-translate-y']],
])
}

13
src/util/processPlugins.js
View file

@ -1,6 +1,5 @@
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'
@ -42,7 +41,6 @@ export default function(plugins, config) {
}
const getConfigValue = (path, defaultValue) => (path ? _.get(config, path, defaultValue) : config)
const browserslistTarget = browserslist().includes('ie 11') ? 'ie11' : 'relaxed'
plugins.forEach(plugin => {
if (plugin.__isOptionsFunction) {
@ -69,17 +67,6 @@ export default function(plugins, config) {
return getConfigValue(`variants.${path}`, defaultValue)
},
target: path => {
if (_.isString(config.target)) {
return config.target === 'browserslist' ? browserslistTarget : config.target
}
const [defaultTarget, targetOverrides] = getConfigValue('target', 'relaxed')
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,7 +1,6 @@
module.exports = {
future: {},
purge: [],
target: 'relaxed',
prefix: '',
important: false,
separator: ':',