Embed JIT engine directly into Tailwind

.eslintrc.json

@@ -3,7 +3,7 @@
     "jest": true
   },
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "ecmaVersion": 2020,
     "sourceType": "module"
   },
   "extends": ["prettier"],

jest/customMatchers.js

@@ -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, {
@@ -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 }
+  },
+})

jit/corePlugins/accessibility.js

@@ -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',
+  },
+})

jit/corePlugins/alignContent.js

@@ -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',
+  },
+})

jit/corePlugins/alignItems.js

@@ -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',
+  },
+})

jit/corePlugins/alignSelf.js

@@ -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',
+  },
+})

jit/corePlugins/animation.js

@@ -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)
+      },
+    ],
+  })
+}

jit/corePlugins/appearance.js

@@ -0,0 +1,5 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.appearance-none': { appearance: 'none' },
+})

jit/corePlugins/backgroundAttachment.js

@@ -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' },
+})

jit/corePlugins/backgroundClip.js

@@ -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' },
+})

jit/corePlugins/backgroundColor.js

@@ -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',
+        }),
+      }
+    },
+  })
+}

jit/corePlugins/backgroundImage.js

@@ -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 } }
+    },
+  })
+}

jit/corePlugins/backgroundOpacity.js

@@ -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 } }
+    },
+  })
+}

jit/corePlugins/backgroundPosition.js

@@ -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 } }
+    },
+  })
+}

jit/corePlugins/backgroundRepeat.js

@@ -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' },
+})

jit/corePlugins/backgroundSize.js

@@ -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 } }
+    },
+  })
+}

jit/corePlugins/borderCollapse.js

@@ -0,0 +1,6 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.border-collapse': { 'border-collapse': 'collapse' },
+  '.border-separate': { 'border-collapse': 'separate' },
+})

jit/corePlugins/borderColor.js

@@ -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',
+        }),
+      }
+    },
+  })
+}

jit/corePlugins/borderOpacity.js

@@ -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 } }
+    },
+  })
+}