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

Fix tests and lint warnings

Browse source
This commit is contained in:
Adam Wathan 2019-01-11 12:29:33 -05:00
parent eeb42cd6bb
commit 5ade923fa4
57 changed files with 1090 additions and 915 deletions
Download patch file Download diff file Expand all files Collapse all files

31
__tests__/applyAtRule.test.js
View file

@ -1,12 +1,15 @@
import postcss from 'postcss'
import plugin from '../src/lib/substituteClassApplyAtRules'
import generateUtilities from '../src/legacy/generateUtilities'
import substituteClassApplyAtRules from '../src/lib/substituteClassApplyAtRules'
import processPlugins from '../src/util/processPlugins'
import defaultPlugins from '../src/defaultPlugins'
import defaultConfig from '../defaultConfig.stub.js'
const defaultUtilities = generateUtilities(defaultConfig, [])
const { utilities: defaultUtilities } = processPlugins(defaultPlugins(defaultConfig), defaultConfig)
function run(input, config = defaultConfig, utilities = defaultUtilities) {
return postcss([plugin(config, utilities)]).process(input, { from: undefined })
return postcss([substituteClassApplyAtRules(config, utilities)]).process(input, {
from: undefined,
})
}
test("it copies a class's declarations into itself", () => {
@ -206,10 +209,12 @@ test('you can apply utility classes without using the given prefix', () => {
experiments: { shadowLookup: true },
}
return run(input, config, generateUtilities(config, [])).then(result => {
expect(result.css).toEqual(expected)
expect(result.warnings().length).toBe(0)
})
return run(input, config, processPlugins(defaultPlugins(defaultConfig), config).utilities).then(
result => {
expect(result.css).toEqual(expected)
expect(result.warnings().length).toBe(0)
}
)
})
test('you can apply utility classes without using the given prefix when using a function for the prefix', () => {
@ -232,8 +237,10 @@ test('you can apply utility classes without using the given prefix when using a
experiments: { shadowLookup: true },
}
return run(input, config, generateUtilities(config, [])).then(result => {
expect(result.css).toEqual(expected)
expect(result.warnings().length).toBe(0)
})
return run(input, config, processPlugins(defaultPlugins(defaultConfig), config).utilities).then(
result => {
expect(result.css).toEqual(expected)
expect(result.warnings().length).toBe(0)
}
)
})

105
__tests__/containerPlugin.test.js
View file

@ -16,31 +16,13 @@ function config(overrides) {
xl: '1200px',
},
options: {
prefix: "",
prefix: '',
important: false,
separator: ":"
}
separator: ':',
},
})
}
function processPluginsWithValidConfig(config) {
return processPlugins(
_.defaultsDeep(config, {
screens: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
},
options: {
prefix: '',
important: false,
separator: ':',
},
})
)
}
test.only('options are not required', () => {
const { components } = processPlugins([container()], config())
@ -62,14 +44,17 @@ test.only('options are not required', () => {
})
test.only('screens can be specified explicitly', () => {
const { components } = processPlugins([
container({
screens: {
sm: '400px',
lg: '500px',
},
}),
], config())
const { components } = processPlugins(
[
container({
screens: {
sm: '400px',
lg: '500px',
},
}),
],
config()
)
expect(css(components)).toMatchCss(`
.container { width: 100% }
@ -83,11 +68,14 @@ test.only('screens can be specified explicitly', () => {
})
test.only('screens can be an array', () => {
const { components } = processPlugins([
container({
screens: ['400px', '500px'],
}),
], config())
const { components } = processPlugins(
[
container({
screens: ['400px', '500px'],
}),
],
config()
)
expect(css(components)).toMatchCss(`
.container { width: 100% }
@ -101,11 +89,14 @@ test.only('screens can be an array', () => {
})
test.only('the container can be centered by default', () => {
const { components } = processPlugins([
container({
center: true,
}),
], config())
const { components } = processPlugins(
[
container({
center: true,
}),
],
config()
)
expect(css(components)).toMatchCss(`
.container {
@ -129,11 +120,14 @@ test.only('the container can be centered by default', () => {
})
test.only('horizontal padding can be included by default', () => {
const { components } = processPlugins([
container({
padding: '2rem',
}),
], config())
const { components } = processPlugins(
[
container({
padding: '2rem',
}),
],
config()
)
expect(css(components)).toMatchCss(`
.container {
@ -157,16 +151,19 @@ test.only('horizontal padding can be included by default', () => {
})
test.only('setting all options at once', () => {
const { components } = processPlugins([
container({
screens: {
sm: '400px',
lg: '500px',
},
center: true,
padding: '2rem',
}),
], config())
const { components } = processPlugins(
[
container({
screens: {
sm: '400px',
lg: '500px',
},
center: true,
padding: '2rem',
}),
],
config()
)
expect(css(components)).toMatchCss(`
.container {

612
__tests__/processPlugins.test.js
View file

File diff suppressed because it is too large Load diff

4
__tests__/variantsAtRule.test.js
View file

@ -4,7 +4,9 @@ import config from '../defaultConfig.stub.js'
import processPlugins from '../src/util/processPlugins'
function run(input, opts = config) {
return postcss([plugin(opts, processPlugins(opts.plugins, opts))]).process(input, { from: undefined })
return postcss([plugin(opts, processPlugins(opts.plugins, opts))]).process(input, {
from: undefined,
})
}
test('it can generate hover variants', () => {

3
src/defaultPlugins.js
View file

@ -49,7 +49,8 @@ import whitespace from './plugins/whitespace'
import width from './plugins/width'
import zIndex from './plugins/zIndex'
export default function (config) {
// eslint-disable-next-line complexity
export default function(config) {
return [
config.modules.lists === false ? () => {} : lists(),
config.modules.appearance === false ? () => {} : appearance(),

13
src/plugins/appearance.js
View file

@ -1,7 +1,10 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.appearance-none': { appearance: 'none' },
}, config('modules.appearance'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.appearance-none': { appearance: 'none' },
},
config('modules.appearance')
)
}
}

17
src/plugins/backgroundAttachment.js
View file

@ -1,9 +1,12 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.bg-fixed': { 'background-attachment': 'fixed' },
'.bg-local': { 'background-attachment': 'local' },
'.bg-scroll': { 'background-attachment': 'scroll' },
}, config('modules.backgroundAttachment'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.bg-fixed': { 'background-attachment': 'fixed' },
'.bg-local': { 'background-attachment': 'local' },
'.bg-scroll': { 'background-attachment': 'scroll' },
},
config('modules.backgroundAttachment')
)
}
}

19
src/plugins/backgroundColors.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('backgroundColors'), (value, modifier) => {
return [`.${e(`bg-${modifier}`)}`, {
'background-color': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('backgroundColors'), (value, modifier) => {
return [
`.${e(`bg-${modifier}`)}`,
{
'background-color': value,
},
]
})
)
addUtilities(utilities, config('modules.backgroundColors'))
}

29
src/plugins/backgroundPosition.js
View file

@ -1,15 +1,18 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.bg-bottom': { 'background-position': 'bottom' },
'.bg-center': { 'background-position': 'center' },
'.bg-left': { 'background-position': 'left' },
'.bg-left-bottom': { 'background-position': 'left bottom' },
'.bg-left-top': { 'background-position': 'left top' },
'.bg-right': { 'background-position': 'right' },
'.bg-right-bottom': { 'background-position': 'right bottom' },
'.bg-right-top': { 'background-position': 'right top' },
'.bg-top': { 'background-position': 'top' },
}, config('modules.backgroundPosition'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.bg-bottom': { 'background-position': 'bottom' },
'.bg-center': { 'background-position': 'center' },
'.bg-left': { 'background-position': 'left' },
'.bg-left-bottom': { 'background-position': 'left bottom' },
'.bg-left-top': { 'background-position': 'left top' },
'.bg-right': { 'background-position': 'right' },
'.bg-right-bottom': { 'background-position': 'right bottom' },
'.bg-right-top': { 'background-position': 'right top' },
'.bg-top': { 'background-position': 'top' },
},
config('modules.backgroundPosition')
)
}
}

19
src/plugins/backgroundRepeat.js
View file

@ -1,10 +1,13 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.bg-repeat': { 'background-repeat': 'repeat' },
'.bg-no-repeat': { 'background-repeat': 'no-repeat' },
'.bg-repeat-x': { 'background-repeat': 'repeat-x' },
'.bg-repeat-y': { 'background-repeat': 'repeat-y' },
}, config('modules.backgroundRepeat'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.bg-repeat': { 'background-repeat': 'repeat' },
'.bg-no-repeat': { 'background-repeat': 'no-repeat' },
'.bg-repeat-x': { 'background-repeat': 'repeat-x' },
'.bg-repeat-y': { 'background-repeat': 'repeat-y' },
},
config('modules.backgroundRepeat')
)
}
}

19
src/plugins/backgroundSize.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('backgroundSize'), (value, modifier) => {
return [`.${e(`bg-${modifier}`)}`, {
'background-size': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('backgroundSize'), (value, modifier) => {
return [
`.${e(`bg-${modifier}`)}`,
{
'background-size': value,
},
]
})
)
addUtilities(utilities, config('modules.opacity'))
}

15
src/plugins/borderCollapse.js
View file

@ -1,8 +1,11 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.border-collapse': { 'border-collapse': 'collapse' },
'.border-separate': { 'border-collapse': 'separate' },
}, config('modules.borderCollapse'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.border-collapse': { 'border-collapse': 'collapse' },
'.border-separate': { 'border-collapse': 'separate' },
},
config('modules.borderCollapse')
)
}
}

19
src/plugins/borderColors.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(_.omit(config('borderColors'), 'default'), (value, modifier) => {
return [`.${e(`border-${modifier}`)}`, {
'border-color': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(_.omit(config('borderColors'), 'default'), (value, modifier) => {
return [
`.${e(`border-${modifier}`)}`,
{
'border-color': value,
},
]
})
)
addUtilities(utilities, config('modules.borderColors'))
}

4
src/plugins/borderRadius.js
View file

@ -1,7 +1,7 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
export default function() {
return function({ addUtilities, config, e }) {
const generators = [
(value, modifier) => ({
[`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` },

33
src/plugins/borderStyle.js
View file

@ -1,18 +1,21 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.border-solid': {
'border-style': 'solid',
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.border-solid': {
'border-style': 'solid',
},
'.border-dashed': {
'border-style': 'dashed',
},
'.border-dotted': {
'border-style': 'dotted',
},
'.border-none': {
'border-style': 'none',
},
},
'.border-dashed': {
'border-style': 'dashed',
},
'.border-dotted': {
'border-style': 'dotted',
},
'.border-none': {
'border-style': 'none',
},
}, config('modules.borderStyle'))
config('modules.borderStyle')
)
}
}

4
src/plugins/borderWidths.js
View file

@ -1,7 +1,7 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
export default function() {
return function({ addUtilities, config, e }) {
const generators = [
(value, modifier) => ({
[`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` },

23
src/plugins/cursor.js
View file

@ -1,12 +1,15 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.cursor-auto': { cursor: 'auto' },
'.cursor-default': { cursor: 'default' },
'.cursor-pointer': { cursor: 'pointer' },
'.cursor-wait': { cursor: 'wait' },
'.cursor-move': { cursor: 'move' },
'.cursor-not-allowed': { cursor: 'not-allowed' },
}, config('modules.cursor'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.cursor-auto': { cursor: 'auto' },
'.cursor-default': { cursor: 'default' },
'.cursor-pointer': { cursor: 'pointer' },
'.cursor-wait': { cursor: 'wait' },
'.cursor-move': { cursor: 'move' },
'.cursor-not-allowed': { cursor: 'not-allowed' },
},
config('modules.cursor')
)
}
}

51
src/plugins/display.js
View file

@ -1,27 +1,30 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.block': {
display: 'block',
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.block': {
display: 'block',
},
'.inline-block': {
display: 'inline-block',
},
'.inline': {
display: 'inline',
},
'.table': {
display: 'table',
},
'.table-row': {
display: 'table-row',
},
'.table-cell': {
display: 'table-cell',
},
'.hidden': {
display: 'none',
},
},
'.inline-block': {
display: 'inline-block',
},
'.inline': {
display: 'inline',
},
'.table': {
display: 'table',
},
'.table-row': {
display: 'table-row',
},
'.table-cell': {
display: 'table-cell',
},
'.hidden': {
display: 'none',
},
}, config('modules.display'))
config('modules.display')
)
}
}

231
src/plugins/flexbox.js
View file

@ -1,117 +1,120 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.flex': {
display: 'flex',
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.flex': {
display: 'flex',
},
'.inline-flex': {
display: 'inline-flex',
},
'.flex-row': {
'flex-direction': 'row',
},
'.flex-row-reverse': {
'flex-direction': 'row-reverse',
},
'.flex-col': {
'flex-direction': 'column',
},
'.flex-col-reverse': {
'flex-direction': 'column-reverse',
},
'.flex-wrap': {
'flex-wrap': 'wrap',
},
'.flex-wrap-reverse': {
'flex-wrap': 'wrap-reverse',
},
'.flex-no-wrap': {
'flex-wrap': 'nowrap',
},
'.items-start': {
'align-items': 'flex-start',
},
'.items-end': {
'align-items': 'flex-end',
},
'.items-center': {
'align-items': 'center',
},
'.items-baseline': {
'align-items': 'baseline',
},
'.items-stretch': {
'align-items': 'stretch',
},
'.self-auto': {
'align-self': 'auto',
},
'.self-start': {
'align-self': 'flex-start',
},
'.self-end': {
'align-self': 'flex-end',
},
'.self-center': {
'align-self': 'center',
},
'.self-stretch': {
'align-self': 'stretch',
},
'.justify-start': {
'justify-content': 'flex-start',
},
'.justify-end': {
'justify-content': 'flex-end',
},
'.justify-center': {
'justify-content': 'center',
},
'.justify-between': {
'justify-content': 'space-between',
},
'.justify-around': {
'justify-content': 'space-around',
},
'.content-center': {
'align-content': 'center',
},
'.content-start': {
'align-content': 'flex-start',
},
'.content-end': {
'align-content': 'flex-end',
},
'.content-between': {
'align-content': 'space-between',
},
'.content-around': {
'align-content': 'space-around',
},
'.flex-1': {
flex: '1 1 0%',
},
'.flex-auto': {
flex: '1 1 auto',
},
'.flex-initial': {
flex: '0 1 auto',
},
'.flex-none': {
flex: 'none',
},
'.flex-grow': {
'flex-grow': '1',
},
'.flex-shrink': {
'flex-shrink': '1',
},
'.flex-no-grow': {
'flex-grow': '0',
},
'.flex-no-shrink': {
'flex-shrink': '0',
},
},
'.inline-flex': {
display: 'inline-flex',
},
'.flex-row': {
'flex-direction': 'row',
},
'.flex-row-reverse': {
'flex-direction': 'row-reverse',
},
'.flex-col': {
'flex-direction': 'column',
},
'.flex-col-reverse': {
'flex-direction': 'column-reverse',
},
'.flex-wrap': {
'flex-wrap': 'wrap',
},
'.flex-wrap-reverse': {
'flex-wrap': 'wrap-reverse',
},
'.flex-no-wrap': {
'flex-wrap': 'nowrap',
},
'.items-start': {
'align-items': 'flex-start',
},
'.items-end': {
'align-items': 'flex-end',
},
'.items-center': {
'align-items': 'center',
},
'.items-baseline': {
'align-items': 'baseline',
},
'.items-stretch': {
'align-items': 'stretch',
},
'.self-auto': {
'align-self': 'auto',
},
'.self-start': {
'align-self': 'flex-start',
},
'.self-end': {
'align-self': 'flex-end',
},
'.self-center': {
'align-self': 'center',
},
'.self-stretch': {
'align-self': 'stretch',
},
'.justify-start': {
'justify-content': 'flex-start',
},
'.justify-end': {
'justify-content': 'flex-end',
},
'.justify-center': {
'justify-content': 'center',
},
'.justify-between': {
'justify-content': 'space-between',
},
'.justify-around': {
'justify-content': 'space-around',
},
'.content-center': {
'align-content': 'center',
},
'.content-start': {
'align-content': 'flex-start',
},
'.content-end': {
'align-content': 'flex-end',
},
'.content-between': {
'align-content': 'space-between',
},
'.content-around': {
'align-content': 'space-around',
},
'.flex-1': {
flex: '1 1 0%',
},
'.flex-auto': {
flex: '1 1 auto',
},
'.flex-initial': {
flex: '0 1 auto',
},
'.flex-none': {
flex: 'none',
},
'.flex-grow': {
'flex-grow': '1',
},
'.flex-shrink': {
'flex-shrink': '1',
},
'.flex-no-grow': {
'flex-grow': '0',
},
'.flex-no-shrink': {
'flex-shrink': '0',
},
}, config('modules.flexbox'))
config('modules.flexbox')
)
}
}

27
src/plugins/float.js
View file

@ -1,14 +1,17 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.float-right': { float: 'right' },
'.float-left': { float: 'left' },
'.float-none': { float: 'none' },
'.clearfix:after': {
content: '""',
display: 'table',
clear: 'both',
}
}, config('modules.float'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.float-right': { float: 'right' },
'.float-left': { float: 'left' },
'.float-none': { float: 'none' },
'.clearfix:after': {
content: '""',
display: 'table',
clear: 'both',
},
},
config('modules.float')
)
}
}

19
src/plugins/fontWeights.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('fontWeights'), (value, modifier) => {
return [`.${e(`font-${modifier}`)}`, {
'font-weight': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('fontWeights'), (value, modifier) => {
return [
`.${e(`font-${modifier}`)}`,
{
'font-weight': value,
},
]
})
)
addUtilities(utilities, config('modules.fontWeights'))
}

19
src/plugins/fonts.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('fonts'), (value, modifier) => {
return [`.${e(`font-${modifier}`)}`, {
'font-family': _.isArray(value) ? value.join(', ') : value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('fonts'), (value, modifier) => {
return [
`.${e(`font-${modifier}`)}`,
{
'font-family': _.isArray(value) ? value.join(', ') : value,
},
]
})
)
addUtilities(utilities, config('modules.fonts'))
}

19
src/plugins/height.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('height'), (value, modifier) => {
return [`.${e(`h-${modifier}`)}`, {
'height': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('height'), (value, modifier) => {
return [
`.${e(`h-${modifier}`)}`,
{
height: value,
},
]
})
)
addUtilities(utilities, config('modules.height'))
}

19
src/plugins/leading.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('leading'), (value, modifier) => {
return [`.${e(`leading-${modifier}`)}`, {
'line-height': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('leading'), (value, modifier) => {
return [
`.${e(`leading-${modifier}`)}`,
{
'line-height': value,
},
]
})
)
addUtilities(utilities, config('modules.leading'))
}

17
src/plugins/lists.js
View file

@ -1,10 +1,13 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.list-reset': {
'list-style': 'none',
padding: '0',
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.list-reset': {
'list-style': 'none',
padding: '0',
},
},
}, config('modules.lists'))
config('modules.lists')
)
}
}

4
src/plugins/margin.js
View file

@ -1,7 +1,7 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
export default function() {
return function({ addUtilities, config, e }) {
const generators = [
(size, modifier) => ({
[`.${e(`m-${modifier}`)}`]: { margin: `${size}` },

19
src/plugins/maxHeight.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('maxHeight'), (value, modifier) => {
return [`.${e(`max-h-${modifier}`)}`, {
'max-height': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('maxHeight'), (value, modifier) => {
return [
`.${e(`max-h-${modifier}`)}`,
{
'max-height': value,
},
]
})
)
addUtilities(utilities, config('modules.maxHeight'))
}

19
src/plugins/maxWidth.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('maxWidth'), (value, modifier) => {
return [`.${e(`max-w-${modifier}`)}`, {
'max-width': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('maxWidth'), (value, modifier) => {
return [
`.${e(`max-w-${modifier}`)}`,
{
'max-width': value,
},
]
})
)
addUtilities(utilities, config('modules.maxWidth'))
}

19
src/plugins/minHeight.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('minHeight'), (value, modifier) => {
return [`.${e(`min-h-${modifier}`)}`, {
'min-height': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('minHeight'), (value, modifier) => {
return [
`.${e(`min-h-${modifier}`)}`,
{
'min-height': value,
},
]
})
)
addUtilities(utilities, config('modules.minHeight'))
}

19
src/plugins/minWidth.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('minWidth'), (value, modifier) => {
return [`.${e(`min-w-${modifier}`)}`, {
'min-width': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('minWidth'), (value, modifier) => {
return [
`.${e(`min-w-${modifier}`)}`,
{
'min-width': value,
},
]
})
)
addUtilities(utilities, config('modules.minWidth'))
}

4
src/plugins/negativeMargin.js
View file

@ -1,7 +1,7 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
export default function() {
return function({ addUtilities, config, e }) {
const generators = [
(size, modifier) => ({
[`.${e(`-m-${modifier}`)}`]: { margin: `${size}` },

21
src/plugins/objectFit.js
View file

@ -1,11 +1,14 @@
export default function () {
return function ({ addUtilities, config }) {
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' },
}, config('modules.objectFit'))
export default function() {
return function({ addUtilities, config }) {
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' },
},
config('modules.objectFit')
)
}
}

29
src/plugins/objectPosition.js
View file

@ -1,15 +1,18 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.object-bottom': { 'object-position': 'bottom' },
'.object-center': { 'object-position': 'center' },
'.object-left': { 'object-position': 'left' },
'.object-left-bottom': { 'object-position': 'left bottom' },
'.object-left-top': { 'object-position': 'left top' },
'.object-right': { 'object-position': 'right' },
'.object-right-bottom': { 'object-position': 'right bottom' },
'.object-right-top': { 'object-position': 'right top' },
'.object-top': { 'object-position': 'top' },
}, config('modules.objectPosition'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.object-bottom': { 'object-position': 'bottom' },
'.object-center': { 'object-position': 'center' },
'.object-left': { 'object-position': 'left' },
'.object-left-bottom': { 'object-position': 'left bottom' },
'.object-left-top': { 'object-position': 'left top' },
'.object-right': { 'object-position': 'right' },
'.object-right-bottom': { 'object-position': 'right bottom' },
'.object-right-top': { 'object-position': 'right top' },
'.object-top': { 'object-position': 'top' },
},
config('modules.objectPosition')
)
}
}

19
src/plugins/opacity.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('opacity'), (value, modifier) => {
return [`.${e(`opacity-${modifier}`)}`, {
'opacity': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('opacity'), (value, modifier) => {
return [
`.${e(`opacity-${modifier}`)}`,
{
opacity: value,
},
]
})
)
addUtilities(utilities, config('modules.opacity'))
}

13
src/plugins/outline.js
View file

@ -1,7 +1,10 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.outline-none': { outline: '0' },
}, config('modules.outline'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.outline-none': { outline: '0' },
},
config('modules.outline')
)
}
}

39
src/plugins/overflow.js
View file

@ -1,20 +1,23 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.overflow-auto': { overflow: 'auto' },
'.overflow-hidden': { overflow: 'hidden' },
'.overflow-visible': { overflow: 'visible' },
'.overflow-scroll': { overflow: 'scroll' },
'.overflow-x-auto': { 'overflow-x': 'auto' },
'.overflow-y-auto': { 'overflow-y': 'auto' },
'.overflow-x-hidden': { 'overflow-x': 'hidden' },
'.overflow-y-hidden': { 'overflow-y': 'hidden' },
'.overflow-x-visible': { 'overflow-x': 'visible' },
'.overflow-y-visible': { 'overflow-y': 'visible' },
'.overflow-x-scroll': { 'overflow-x': 'scroll' },
'.overflow-y-scroll': { 'overflow-y': 'scroll' },
'.scrolling-touch': { '-webkit-overflow-scrolling': 'touch' },
'.scrolling-auto': { '-webkit-overflow-scrolling': 'auto' },
}, config('modules.overflow'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.overflow-auto': { overflow: 'auto' },
'.overflow-hidden': { overflow: 'hidden' },
'.overflow-visible': { overflow: 'visible' },
'.overflow-scroll': { overflow: 'scroll' },
'.overflow-x-auto': { 'overflow-x': 'auto' },
'.overflow-y-auto': { 'overflow-y': 'auto' },
'.overflow-x-hidden': { 'overflow-x': 'hidden' },
'.overflow-y-hidden': { 'overflow-y': 'hidden' },
'.overflow-x-visible': { 'overflow-x': 'visible' },
'.overflow-y-visible': { 'overflow-y': 'visible' },
'.overflow-x-scroll': { 'overflow-x': 'scroll' },
'.overflow-y-scroll': { 'overflow-y': 'scroll' },
'.scrolling-touch': { '-webkit-overflow-scrolling': 'touch' },
'.scrolling-auto': { '-webkit-overflow-scrolling': 'auto' },
},
config('modules.overflow')
)
}
}

4
src/plugins/padding.js
View file

@ -1,7 +1,7 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
export default function() {
return function({ addUtilities, config, e }) {
const generators = [
(size, modifier) => ({
[`.${e(`p-${modifier}`)}`]: { padding: `${size}` },

15
src/plugins/pointerEvents.js
View file

@ -1,8 +1,11 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.pointer-events-none': { 'pointer-events': 'none' },
'.pointer-events-auto': { 'pointer-events': 'auto' },
}, config('modules.pointerEvents'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.pointer-events-none': { 'pointer-events': 'none' },
'.pointer-events-auto': { 'pointer-events': 'auto' },
},
config('modules.pointerEvents')
)
}
}

55
src/plugins/position.js
View file

@ -1,29 +1,32 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.static': { position: 'static' },
'.fixed': { position: 'fixed' },
'.absolute': { position: 'absolute' },
'.relative': { position: 'relative' },
'.sticky': { position: 'sticky' },
'.pin-none': {
top: 'auto',
right: 'auto',
bottom: 'auto',
left: 'auto',
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.static': { position: 'static' },
'.fixed': { position: 'fixed' },
'.absolute': { position: 'absolute' },
'.relative': { position: 'relative' },
'.sticky': { position: 'sticky' },
'.pin-none': {
top: 'auto',
right: 'auto',
bottom: 'auto',
left: 'auto',
},
'.pin': {
top: 0,
right: 0,
bottom: 0,
left: 0,
},
'.pin-y': { top: 0, bottom: 0 },
'.pin-x': { right: 0, left: 0 },
'.pin-t': { top: 0 },
'.pin-r': { right: 0 },
'.pin-b': { bottom: 0 },
'.pin-l': { left: 0 },
},
'.pin': {
top: 0,
right: 0,
bottom: 0,
left: 0,
},
'.pin-y': { top: 0, bottom: 0 },
'.pin-x': { right: 0, left: 0 },
'.pin-t': { top: 0 },
'.pin-r': { right: 0 },
'.pin-b': { bottom: 0 },
'.pin-l': { left: 0 },
}, config('modules.position'))
config('modules.position')
)
}
}

19
src/plugins/resize.js
View file

@ -1,10 +1,13 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.resize-none': { resize: 'none' },
'.resize-y': { resize: 'vertical' },
'.resize-x': { resize: 'horizontal' },
'.resize': { resize: 'both' },
}, config('modules.resize'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.resize-none': { resize: 'none' },
'.resize-y': { resize: 'vertical' },
'.resize-x': { resize: 'horizontal' },
'.resize': { resize: 'both' },
},
config('modules.resize')
)
}
}

21
src/plugins/shadows.js
View file

@ -1,13 +1,18 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('shadows'), (value, modifier) => {
const className = modifier === 'default' ? 'shadow' : `shadow-${modifier}`
return [`.${className}`, {
'box-shadow': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('shadows'), (value, modifier) => {
const className = modifier === 'default' ? 'shadow' : `shadow-${modifier}`
return [
`.${e(className)}`,
{
'box-shadow': value,
},
]
})
)
addUtilities(utilities, config('modules.shadows'))
}

19
src/plugins/svgFill.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('svgFill'), (value, modifier) => {
return [`.${e(`fill-${modifier}`)}`, {
'fill': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('svgFill'), (value, modifier) => {
return [
`.${e(`fill-${modifier}`)}`,
{
fill: value,
},
]
})
)
addUtilities(utilities, config('modules.svgFill'))
}

19
src/plugins/svgStroke.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('svgStroke'), (value, modifier) => {
return [`.${e(`stroke-${modifier}`)}`, {
'stroke': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('svgStroke'), (value, modifier) => {
return [
`.${e(`stroke-${modifier}`)}`,
{
stroke: value,
},
]
})
)
addUtilities(utilities, config('modules.svgStroke'))
}

15
src/plugins/tableLayout.js
View file

@ -1,8 +1,11 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.table-auto': { 'table-layout': 'auto' },
'.table-fixed': { 'table-layout': 'fixed' },
}, config('modules.tableLayout'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.table-auto': { 'table-layout': 'auto' },
'.table-fixed': { 'table-layout': 'fixed' },
},
config('modules.tableLayout')
)
}
}

19
src/plugins/textAlign.js
View file

@ -1,10 +1,13 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.text-left': { 'text-align': 'left' },
'.text-center': { 'text-align': 'center' },
'.text-right': { 'text-align': 'right' },
'.text-justify': { 'text-align': 'justify' },
}, config('modules.textAlign'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.text-left': { 'text-align': 'left' },
'.text-center': { 'text-align': 'center' },
'.text-right': { 'text-align': 'right' },
'.text-justify': { 'text-align': 'justify' },
},
config('modules.textAlign')
)
}
}

19
src/plugins/textColors.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('textColors'), (value, modifier) => {
return [`.${e(`text-${modifier}`)}`, {
'color': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('textColors'), (value, modifier) => {
return [
`.${e(`text-${modifier}`)}`,
{
color: value,
},
]
})
)
addUtilities(utilities, config('modules.textColors'))
}

19
src/plugins/textSizes.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('textSizes'), (value, modifier) => {
return [`.${e(`text-${modifier}`)}`, {
'font-size': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('textSizes'), (value, modifier) => {
return [
`.${e(`text-${modifier}`)}`,
{
'font-size': value,
},
]
})
)
addUtilities(utilities, config('modules.textSizes'))
}

43
src/plugins/textStyle.js
View file

@ -1,26 +1,29 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.italic': { 'font-style': 'italic' },
'.roman': { 'font-style': 'normal' },
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.italic': { 'font-style': 'italic' },
'.roman': { 'font-style': 'normal' },
'.uppercase': { 'text-transform': 'uppercase' },
'.lowercase': { 'text-transform': 'lowercase' },
'.capitalize': { 'text-transform': 'capitalize' },
'.normal-case': { 'text-transform': 'none' },
'.uppercase': { 'text-transform': 'uppercase' },
'.lowercase': { 'text-transform': 'lowercase' },
'.capitalize': { 'text-transform': 'capitalize' },
'.normal-case': { 'text-transform': 'none' },
'.underline': { 'text-decoration': 'underline' },
'.line-through': { 'text-decoration': 'line-through' },
'.no-underline': { 'text-decoration': 'none' },
'.underline': { 'text-decoration': 'underline' },
'.line-through': { 'text-decoration': 'line-through' },
'.no-underline': { 'text-decoration': 'none' },
'.antialiased': {
'-webkit-font-smoothing': 'antialiased',
'-moz-osx-font-smoothing': 'grayscale',
'.antialiased': {
'-webkit-font-smoothing': 'antialiased',
'-moz-osx-font-smoothing': 'grayscale',
},
'.subpixel-antialiased': {
'-webkit-font-smoothing': 'auto',
'-moz-osx-font-smoothing': 'auto',
},
},
'.subpixel-antialiased': {
'-webkit-font-smoothing': 'auto',
'-moz-osx-font-smoothing': 'auto',
},
}, config('modules.textStyle'))
config('modules.textStyle')
)
}
}

19
src/plugins/tracking.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config }) {
const utilities = _.fromPairs(_.map(config('tracking'), (value, modifier) => {
return [`.tracking-${modifier}`, {
'letter-spacing': value,
}]
}))
export default function() {
return function({ addUtilities, config }) {
const utilities = _.fromPairs(
_.map(config('tracking'), (value, modifier) => {
return [
`.tracking-${modifier}`,
{
'letter-spacing': value,
},
]
})
)
addUtilities(utilities, config('modules.tracking'))
}

15
src/plugins/userSelect.js
View file

@ -1,8 +1,11 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.select-none': { 'user-select': 'none' },
'.select-text': { 'user-select': 'text' },
}, config('modules.userSelect'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.select-none': { 'user-select': 'none' },
'.select-text': { 'user-select': 'text' },
},
config('modules.userSelect')
)
}
}

23
src/plugins/verticalAlign.js
View file

@ -1,12 +1,15 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.align-baseline': { 'vertical-align': 'baseline' },
'.align-top': { 'vertical-align': 'top' },
'.align-middle': { 'vertical-align': 'middle' },
'.align-bottom': { 'vertical-align': 'bottom' },
'.align-text-top': { 'vertical-align': 'text-top' },
'.align-text-bottom': { 'vertical-align': 'text-bottom' },
}, config('modules.verticalAlign'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.align-baseline': { 'vertical-align': 'baseline' },
'.align-top': { 'vertical-align': 'top' },
'.align-middle': { 'vertical-align': 'middle' },
'.align-bottom': { 'vertical-align': 'bottom' },
'.align-text-top': { 'vertical-align': 'text-top' },
'.align-text-bottom': { 'vertical-align': 'text-bottom' },
},
config('modules.verticalAlign')
)
}
}

15
src/plugins/visibility.js
View file

@ -1,8 +1,11 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.visible': { visibility: 'visible' },
'.invisible': { visibility: 'hidden' },
}, config('modules.visibility'))
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.visible': { visibility: 'visible' },
'.invisible': { visibility: 'hidden' },
},
config('modules.visibility')
)
}
}

33
src/plugins/whitespace.js
View file

@ -1,20 +1,23 @@
export default function () {
return function ({ addUtilities, config }) {
addUtilities({
'.whitespace-normal': { 'white-space': 'normal' },
'.whitespace-no-wrap': { 'white-space': 'nowrap' },
'.whitespace-pre': { 'white-space': 'pre' },
'.whitespace-pre-line': { 'white-space': 'pre-line' },
'.whitespace-pre-wrap': { 'white-space': 'pre-wrap' },
export default function() {
return function({ addUtilities, config }) {
addUtilities(
{
'.whitespace-normal': { 'white-space': 'normal' },
'.whitespace-no-wrap': { 'white-space': 'nowrap' },
'.whitespace-pre': { 'white-space': 'pre' },
'.whitespace-pre-line': { 'white-space': 'pre-line' },
'.whitespace-pre-wrap': { 'white-space': 'pre-wrap' },
'.break-words': { 'word-wrap': 'break-word' },
'.break-normal': { 'word-wrap': 'normal' },
'.break-words': { 'word-wrap': 'break-word' },
'.break-normal': { 'word-wrap': 'normal' },
'.truncate': {
overflow: 'hidden',
'text-overflow': 'ellipsis',
'white-space': 'nowrap',
'.truncate': {
overflow: 'hidden',
'text-overflow': 'ellipsis',
'white-space': 'nowrap',
},
},
}, config('modules.whitespace'))
config('modules.whitespace')
)
}
}

19
src/plugins/width.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config, e }) {
const utilities = _.fromPairs(_.map(config('width'), (value, modifier) => {
return [`.${e(`w-${modifier}`)}`, {
'width': value,
}]
}))
export default function() {
return function({ addUtilities, config, e }) {
const utilities = _.fromPairs(
_.map(config('width'), (value, modifier) => {
return [
`.${e(`w-${modifier}`)}`,
{
width: value,
},
]
})
)
addUtilities(utilities, config('modules.width'))
}

19
src/plugins/zIndex.js
View file

@ -1,12 +1,17 @@
import _ from 'lodash'
export default function () {
return function ({ addUtilities, config }) {
const utilities = _.fromPairs(_.map(config('zIndex'), (value, modifier) => {
return [`.z-${modifier}`, {
'z-index': value,
}]
}))
export default function() {
return function({ addUtilities, config }) {
const utilities = _.fromPairs(
_.map(config('zIndex'), (value, modifier) => {
return [
`.z-${modifier}`,
{
'z-index': value,
},
]
})
)
addUtilities(utilities, config('modules.zIndex'))
}

16
src/processTailwindFeatures.js
View file

@ -8,28 +8,22 @@ import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
import substituteScreenAtRules from './lib/substituteScreenAtRules'
import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules'
import generateUtilities from './legacy/generateUtilities'
import processPlugins from './util/processPlugins'
import defaultPlugins from './defaultPlugins'
export default function(getConfig) {
return function(css) {
const config = getConfig()
const processedPlugins = processPlugins([
...defaultPlugins(config),
...config.plugins
], config)
const utilities = generateUtilities(config, processedPlugins.utilities)
const processedPlugins = processPlugins([...defaultPlugins(config), ...config.plugins], config)
return postcss([
substituteTailwindAtRules(config, processedPlugins, utilities),
substituteTailwindAtRules(config, processedPlugins, processedPlugins.utilities),
evaluateTailwindFunctions(config),
substituteVariantsAtRules(config, processedPlugins),
substituteResponsiveAtRules(config),
substituteScreenAtRules(config),
substituteClassApplyAtRules(config, utilities),
function (root, result) {
substituteClassApplyAtRules(config, processedPlugins.utilities),
function(root) {
root.rawCache = {
colon: ': ',
indent: ' ',
@ -42,7 +36,7 @@ export default function(getConfig) {
emptyBody: '',
commentLeft: ' ',
commentRight: ' ',
semicolon: false
semicolon: false,
}
},
]).process(css, { from: _.get(css, 'source.input.file') })

3
src/utilityModules.js
View file

@ -1,2 +1 @@
export default [
]
export default []