Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embed JIT engine directly into Tailwind #3905

Merged
merged 10 commits into from
Apr 2, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"jest": true
},
"parserOptions": {
"ecmaVersion": 2018,
"ecmaVersion": 2020,
"sourceType": "module"
},
"extends": ["prettier"],
Expand Down
56 changes: 54 additions & 2 deletions jest/customMatchers.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import prettier from 'prettier'
import diff from 'jest-diff'
const prettier = require('prettier')
const diff = require('jest-diff').default

function format(input) {
return prettier.format(input, {
Expand Down Expand Up @@ -54,3 +54,55 @@ expect.extend({
return { actual: received, message, pass }
},
})

expect.extend({
// Compare two CSS strings with all whitespace removed
// This is probably naive but it's fast and works well enough.
toMatchFormattedCss(received, argument) {
function format(input) {
return prettier.format(input, {
parser: 'css',
printWidth: 100,
})
}
const options = {
comment: 'stripped(received) === stripped(argument)',
isNot: this.isNot,
promise: this.promise,
}

let formattedReceived = format(received)
let formattedArgument = format(argument)

const pass = formattedReceived === formattedArgument

const message = pass
? () => {
return (
this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
'\n\n' +
`Expected: not ${this.utils.printExpected(formattedReceived)}\n` +
`Received: ${this.utils.printReceived(formattedArgument)}`
)
}
: () => {
const actual = formattedReceived
const expected = formattedArgument

const diffString = diff(expected, actual, {
expand: this.expand,
})

return (
this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
'\n\n' +
(diffString && diffString.includes('- Expect')
? `Difference:\n\n${diffString}`
: `Expected: ${this.utils.printExpected(expected)}\n` +
`Received: ${this.utils.printReceived(actual)}`)
)
}

return { actual: received, message, pass }
},
})
25 changes: 25 additions & 0 deletions jit/corePlugins/accessibility.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')

module.exports = createSimpleStaticUtilityPlugin({
'.sr-only': {
position: 'absolute',
width: '1px',
height: '1px',
padding: '0',
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0, 0, 0, 0)',
whiteSpace: 'nowrap',
borderWidth: '0',
},
'.not-sr-only': {
position: 'static',
width: 'auto',
height: 'auto',
padding: '0',
margin: '0',
overflow: 'visible',
clip: 'auto',
whiteSpace: 'normal',
},
})
22 changes: 22 additions & 0 deletions jit/corePlugins/alignContent.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')

module.exports = createSimpleStaticUtilityPlugin({
'.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',
},
'.content-evenly': {
'align-content': 'space-evenly',
},
})
19 changes: 19 additions & 0 deletions jit/corePlugins/alignItems.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')

module.exports = createSimpleStaticUtilityPlugin({
'.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',
},
})
19 changes: 19 additions & 0 deletions jit/corePlugins/alignSelf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')

module.exports = createSimpleStaticUtilityPlugin({
'.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',
},
})
39 changes: 39 additions & 0 deletions jit/corePlugins/animation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
const { nameClass } = require('../pluginUtils')
const transformThemeValue = require('../../lib/util/transformThemeValue').default
const parseAnimationValue = require('../../lib/util/parseAnimationValue').default

module.exports = function ({ matchUtilities, theme }) {
let keyframes = Object.fromEntries(
Object.entries(theme('keyframes')).map(([key, value]) => {
return [
key,
[
{
[`@keyframes ${key}`]: value,
},
{ respectVariants: false },
],
]
})
)

let transformValue = transformThemeValue('animation')
matchUtilities({
animate: [
(modifier, { theme }) => {
let value = transformValue(theme.animation[modifier])

if (modifier === '' || value === undefined) {
return []
}

let { name: animationName } = parseAnimationValue(value)

return [
keyframes[animationName],
{ [nameClass('animate', modifier)]: { animation: value } },
].filter(Boolean)
},
],
})
}
5 changes: 5 additions & 0 deletions jit/corePlugins/appearance.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')

module.exports = createSimpleStaticUtilityPlugin({
'.appearance-none': { appearance: 'none' },
})
7 changes: 7 additions & 0 deletions jit/corePlugins/backgroundAttachment.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')

module.exports = createSimpleStaticUtilityPlugin({
'.bg-fixed': { 'background-attachment': 'fixed' },
'.bg-local': { 'background-attachment': 'local' },
'.bg-scroll': { 'background-attachment': 'scroll' },
})
8 changes: 8 additions & 0 deletions jit/corePlugins/backgroundClip.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')

module.exports = createSimpleStaticUtilityPlugin({
'.bg-clip-border': { 'background-clip': 'border-box' },
'.bg-clip-padding': { 'background-clip': 'padding-box' },
'.bg-clip-content': { 'background-clip': 'content-box' },
'.bg-clip-text': { 'background-clip': 'text' },
})
25 changes: 25 additions & 0 deletions jit/corePlugins/backgroundColor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
const flattenColorPalette = require('../../lib/util/flattenColorPalette').default
const withAlphaVariable = require('../../lib/util/withAlphaVariable').default
const { asColor, nameClass } = require('../pluginUtils')

module.exports = function ({ matchUtilities, theme }) {
let colorPalette = flattenColorPalette(theme('backgroundColor'))

matchUtilities({
bg: (modifier) => {
let value = asColor(modifier, colorPalette)

if (value === undefined) {
return []
}

return {
[nameClass('bg', modifier)]: withAlphaVariable({
color: value,
property: 'background-color',
variable: '--tw-bg-opacity',
}),
}
},
})
}
15 changes: 15 additions & 0 deletions jit/corePlugins/backgroundImage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const { nameClass } = require('../pluginUtils')

module.exports = function ({ matchUtilities }) {
matchUtilities({
bg: (modifier, { theme }) => {
let value = theme.backgroundImage[modifier]

if (value === undefined) {
return []
}

return { [nameClass('bg', modifier)]: { 'background-image': value } }
},
})
}
15 changes: 15 additions & 0 deletions jit/corePlugins/backgroundOpacity.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const { asValue, nameClass } = require('../pluginUtils')

module.exports = function ({ matchUtilities }) {
matchUtilities({
'bg-opacity': (modifier, { theme }) => {
let value = asValue(modifier, theme.backgroundOpacity)

if (value === undefined) {
return []
}

return { [nameClass('bg-opacity', modifier)]: { '--tw-bg-opacity': value } }
},
})
}
15 changes: 15 additions & 0 deletions jit/corePlugins/backgroundPosition.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const { nameClass } = require('../pluginUtils')

module.exports = function ({ matchUtilities }) {
matchUtilities({
bg: (modifier, { theme }) => {
let value = theme.backgroundPosition[modifier]

if (value === undefined) {
return []
}

return { [nameClass('bg', modifier)]: { 'background-position': value } }
},
})
}
10 changes: 10 additions & 0 deletions jit/corePlugins/backgroundRepeat.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')

module.exports = createSimpleStaticUtilityPlugin({
'.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' },
'.bg-repeat-round': { 'background-repeat': 'round' },
'.bg-repeat-space': { 'background-repeat': 'space' },
})
15 changes: 15 additions & 0 deletions jit/corePlugins/backgroundSize.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const { nameClass } = require('../pluginUtils')

module.exports = function ({ matchUtilities }) {
matchUtilities({
bg: (modifier, { theme }) => {
let value = theme.backgroundSize[modifier]

if (value === undefined) {
return []
}

return { [nameClass('bg', modifier)]: { 'background-size': value } }
},
})
}
6 changes: 6 additions & 0 deletions jit/corePlugins/borderCollapse.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')

module.exports = createSimpleStaticUtilityPlugin({
'.border-collapse': { 'border-collapse': 'collapse' },
'.border-separate': { 'border-collapse': 'separate' },
})
29 changes: 29 additions & 0 deletions jit/corePlugins/borderColor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
const flattenColorPalette = require('../../lib/util/flattenColorPalette').default
const withAlphaVariable = require('../../lib/util/withAlphaVariable').default
const { asColor, nameClass } = require('../pluginUtils')

module.exports = function ({ matchUtilities, theme }) {
let colorPalette = flattenColorPalette(theme('borderColor'))

matchUtilities({
border: (modifier) => {
if (modifier === 'DEFAULT') {
return []
}

let value = asColor(modifier, colorPalette)

if (value === undefined) {
return []
}

return {
[nameClass('border', modifier)]: withAlphaVariable({
color: value,
property: 'border-color',
variable: '--tw-border-opacity',
}),
}
},
})
}
15 changes: 15 additions & 0 deletions jit/corePlugins/borderOpacity.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const { asValue, nameClass } = require('../pluginUtils')

module.exports = function ({ matchUtilities }) {
matchUtilities({
'border-opacity': (modifier, { theme }) => {
let value = asValue(modifier, theme.borderOpacity)

if (value === undefined) {
return []
}

return { [nameClass('border-opacity', modifier)]: { '--tw-border-opacity': value } }
},
})
}
Loading