Remove AOT (#5340)

* make `jit` mode the default when no mode is specified

* unify JIT and AOT codepaths

* ensure `Object.entries` on undefined doesn't break

It could be that sometimes you don't have values in your config (e.g.: `presets: []`), this in turn will break some plugins where we assume we have a value.

* drop AOT specific tests

These tests are all covered by JIT mode already and were AOT specific.

* simplify tests, and add a few

Some of the tests were written for AOT specifically, some were missing. We also updated the way we write those tests, essentially making Tailwind a blackbox, by testing against the final output.
Now that JIT mode is the default, this is super fast because we only generate what is used, instead of partially testing in a 3MB file or building it all, then purging.

* add some todo's to make sure we warn in a few cases

* make `darkMode: 'media'`, the default

This also includes moving dark mode tests to its own dedicated file.

* remove PostCSS 7 compat mode

* update CLI to be JIT-first

* fix integration tests

This is not a _real_ fix, but it does solve the broken test for now.

* warn when using @responsive or @variants

* remove the JIT preview warning

* remove AOT-only code paths

* remove all `mode: 'jit'` blocks

Also remove `variants: {}` since they are not useful in `JIT` mode
anymore.

* drop unused dependencies

* rename `purge` to `content`

* remove static CDN builds

* mark `--purge` as deprecated in the CLI

This will still work, but a warning will be printed and it won't show up
in the `--help` output.

* cleanup nesting plugin

We don't have to duplicate it anymore since there is no PostCSS 7
version anymore.

* make sure integration tests run in band

* cleanup folder structure

* make sure nesting folder is available

* simplify resolving of purge/content information

integrations/parcel/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "parcel build ./src/index.html --no-cache",
     "dev": "parcel watch ./src/index.html --no-cache",
-    "test": "jest"
+    "test": "jest --runInBand"
   },
   "jest": {
     "displayName": "parcel",

integrations/parcel/tailwind.config.js

@@ -1,13 +1,8 @@
 module.exports = {
-  purge: ['./src/index.html'],
-  mode: 'jit',
-  darkMode: false, // or 'media' or 'class'
+  content: ['./src/index.html'],
   theme: {
     extend: {},
   },
-  variants: {
-    extend: {},
-  },
   corePlugins: {
     preflight: false,
   },

integrations/parcel/tests/integration.test.js

@@ -127,9 +127,7 @@ describe.skip('watcher', () => {
         '../tailwind.config.js',
         javascript`
           module.exports = {
-            purge: ['./src/index.html'],
-            mode: 'jit',
-            darkMode: false, // or 'media' or 'class'
+            content: ['./src/index.html'],
             theme: {
               extend: {
                 screens: {
@@ -140,9 +138,6 @@ describe.skip('watcher', () => {
                 }
               },
             },
-            variants: {
-              extend: {},
-            },
             corePlugins: {
               preflight: false,
             },

integrations/postcss-cli/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "scripts": {
     "build": "NODE_ENV=production postcss ./src/index.css -o ./dist/main.css",
-    "test": "jest"
+    "test": "jest --runInBand"
   },
   "jest": {
     "displayName": "PostCSS CLI",

integrations/postcss-cli/tailwind.config.js

@@ -1,13 +1,8 @@
 module.exports = {
-  purge: ['./src/index.html'],
-  mode: 'jit',
-  darkMode: false, // or 'media' or 'class'
+  content: ['./src/index.html'],
   theme: {
     extend: {},
   },
-  variants: {
-    extend: {},
-  },
   corePlugins: {
     preflight: false,
   },

integrations/postcss-cli/tests/integration.test.js

@@ -109,9 +109,7 @@ describe('watcher', () => {
         '../tailwind.config.js',
         javascript`
           module.exports = {
-            purge: ['./src/index.html'],
-            mode: 'jit',
-            darkMode: false, // or 'media' or 'class'
+            content: ['./src/index.html'],
             theme: {
               extend: {
                 screens: {
@@ -122,9 +120,6 @@ describe('watcher', () => {
                 }
               },
             },
-            variants: {
-              extend: {},
-            },
             corePlugins: {
               preflight: false,
             },

integrations/rollup/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "scripts": {
     "build": "rollup -c",
-    "test": "jest"
+    "test": "jest --runInBand"
   },
   "jest": {
     "displayName": "rollup.js",

integrations/rollup/tailwind.config.js

@@ -1,13 +1,8 @@
 module.exports = {
-  purge: ['./src/index.html'],
-  mode: 'jit',
-  darkMode: false, // or 'media' or 'class'
+  content: ['./src/index.html'],
   theme: {
     extend: {},
   },
-  variants: {
-    extend: {},
-  },
   corePlugins: {
     preflight: false,
   },

integrations/rollup/tests/integration.test.js

@@ -105,9 +105,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
         '../tailwind.config.js',
         javascript`
           module.exports = {
-            purge: ['./src/index.html'],
-            mode: 'jit',
-            darkMode: false, // or 'media' or 'class'
+            content: ['./src/index.html'],
             theme: {
               extend: {
                 screens: {
@@ -118,9 +116,6 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
                 }
               },
             },
-            variants: {
-              extend: {},
-            },
             corePlugins: {
               preflight: false,
             },

integrations/tailwindcss-cli/tailwind.config.js

@@ -1,13 +1,8 @@
 module.exports = {
-  purge: ['./src/index.html'],
-  mode: 'jit',
-  darkMode: false, // or 'media' or 'class'
+  content: ['./src/index.html'],
   theme: {
     extend: {},
   },
-  variants: {
-    extend: {},
-  },
   corePlugins: {
     preflight: false,
   },

integrations/tailwindcss-cli/tests/cli.test.js

@@ -115,9 +115,7 @@ describe('Build command', () => {
 
     let customConfig = `module.exports = ${JSON.stringify(
       {
-        purge: ['./src/index.html'],
-        mode: 'jit',
-        darkMode: false, // or 'media' or 'class'
+        content: ['./src/index.html'],
         theme: {
           extend: {
             fontWeight: {
@@ -125,9 +123,6 @@ describe('Build command', () => {
             },
           },
         },
-        variants: {
-          extend: {},
-        },
         corePlugins: {
           preflight: false,
         },
@@ -258,7 +253,7 @@ describe('Build command', () => {
 
     expect(combined).toMatchInlineSnapshot(`
       "
-      tailwindcss v2.2.8
+      tailwindcss v2.2.9
 
       Usage:
          tailwindcss build [options]
@@ -267,8 +262,7 @@ describe('Build command', () => {
          -i, --input              Input file
          -o, --output             Output file
          -w, --watch              Watch for changes and rebuild as needed
-             --jit                Build using JIT mode
-             --purge              Content paths to use for removing unused classes
+             --content            Content paths to use for removing unused classes
              --postcss            Load custom PostCSS configuration
          -m, --minify             Minify the output
          -c, --config             Path to a custom config file
@@ -298,34 +292,6 @@ describe('Init command', () => {
     expect((await readOutputFile('../full.config.js')).split('\n').length).toBeGreaterThan(50)
   })
 
-  test('--jit', async () => {
-    cleanupFile('with-jit.config.js')
-
-    let { combined } = await $(`${EXECUTABLE} init with-jit.config.js --jit`)
-
-    expect(combined).toMatchInlineSnapshot(`
-      "
-      Created Tailwind CSS config file: with-jit.config.js
-      "
-    `)
-
-    expect(await readOutputFile('../with-jit.config.js')).toContain("mode: 'jit'")
-  })
-
-  test('--full, --jit', async () => {
-    cleanupFile('full-with-jit.config.js')
-
-    let { combined } = await $(`${EXECUTABLE} init full-with-jit.config.js --jit --full`)
-
-    expect(combined).toMatchInlineSnapshot(`
-      "
-      Created Tailwind CSS config file: full-with-jit.config.js
-      "
-    `)
-
-    expect(await readOutputFile('../full-with-jit.config.js')).toContain("mode: 'jit'")
-  })
-
   test('--postcss', async () => {
     expect(await fileExists('postcss.config.js')).toBe(true)
     await removeFile('postcss.config.js')
@@ -348,13 +314,12 @@ describe('Init command', () => {
 
     expect(combined).toMatchInlineSnapshot(`
       "
-      tailwindcss v2.2.8
+      tailwindcss v2.2.9
 
       Usage:
          tailwindcss init [options]
 
       Options:
-             --jit                Initialize for JIT mode
          -f, --full               Initialize a full \`tailwind.config.js\` file
          -p, --postcss            Initialize a \`postcss.config.js\` file
          -h, --help               Display usage information

integrations/tailwindcss-cli/tests/integration.test.js

@@ -32,19 +32,14 @@ describe('static build', () => {
       '../tailwind.config.js',
       javascript`
         module.exports = {
-          purge: {
+          content: {
             content: ['./src/index.html'],
             safelist: ['bg-red-500','bg-red-600']
           },
-          mode: 'jit',
-          darkMode: false, // or 'media' or 'class'
           theme: {
             extend: {
             },
           },
-          variants: {
-            extend: {},
-          },
           corePlugins: {
             preflight: false,
           },
@@ -212,9 +207,7 @@ describe('watcher', () => {
         '../tailwind.config.js',
         javascript`
           module.exports = {
-            purge: ['./src/index.html'],
-            mode: 'jit',
-            darkMode: false, // or 'media' or 'class'
+            content: ['./src/index.html'],
             theme: {
               extend: {
                 screens: {
@@ -225,9 +218,6 @@ describe('watcher', () => {
                 }
               },
             },
-            variants: {
-              extend: {},
-            },
             corePlugins: {
               preflight: false,
             },

integrations/vite/package.json

@@ -6,7 +6,7 @@
   "browser": "./src/index.js",
   "scripts": {
     "build": "vite build",
-    "test": "jest"
+    "test": "jest --runInBand"
   },
   "jest": {
     "displayName": "vite",

integrations/vite/tailwind.config.js

@@ -1,13 +1,8 @@
 module.exports = {
-  purge: ['./index.html'],
-  mode: 'jit',
-  darkMode: false, // or 'media' or 'class'
+  content: ['./index.html'],
   theme: {
     extend: {},
   },
-  variants: {
-    extend: {},
-  },
   corePlugins: {
     preflight: false,
   },

integrations/vite/tests/integration.test.js

@@ -132,9 +132,7 @@ describe('watcher', () => {
       'tailwind.config.js',
       javascript`
         module.exports = {
-          purge: ['./index.html'],
-          mode: 'jit',
-          darkMode: false, // or 'media' or 'class'
+          content: ['./index.html'],
           theme: {
             extend: {
               screens: {
@@ -145,9 +143,6 @@ describe('watcher', () => {
               }
             },
           },
-          variants: {
-            extend: {},
-          },
           corePlugins: {
             preflight: false,
           },

integrations/webpack-4/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build": "webpack --mode=production",
     "dev": "webpack --mode=development --watch",
-    "test": "jest"
+    "test": "jest --runInBand"
   },
   "jest": {
     "displayName": "webpack 4",

integrations/webpack-4/tailwind.config.js

@@ -1,13 +1,8 @@
 module.exports = {
-  purge: ['./src/index.html'],
-  mode: 'jit',
-  darkMode: false, // or 'media' or 'class'
+  content: ['./src/index.html'],
   theme: {
     extend: {},
   },
-  variants: {
-    extend: {},
-  },
   corePlugins: {
     preflight: false,
   },

integrations/webpack-4/tests/integration.test.js

@@ -103,9 +103,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
         '../tailwind.config.js',
         javascript`
           module.exports = {
-            purge: ['./src/index.html'],
-            mode: 'jit',
-            darkMode: false, // or 'media' or 'class'
+            content: ['./src/index.html'],
             theme: {
               extend: {
                 screens: {
@@ -116,9 +114,6 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
                 }
               },
             },
-            variants: {
-              extend: {},
-            },
             corePlugins: {
               preflight: false,
             },

integrations/webpack-5/tailwind.config.js

@@ -1,13 +1,8 @@
 module.exports = {
-  purge: ['./src/index.html'],
-  mode: 'jit',
-  darkMode: false, // or 'media' or 'class'
+  content: ['./src/index.html'],
   theme: {
     extend: {},
   },
-  variants: {
-    extend: {},
-  },
   corePlugins: {
     preflight: false,
   },

integrations/webpack-5/tests/integration.test.js

@@ -103,9 +103,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
         '../tailwind.config.js',
         javascript`
           module.exports = {
-            purge: ['./src/index.html'],
-            mode: 'jit',
-            darkMode: false, // or 'media' or 'class'
+            content: ['./src/index.html'],
             theme: {
               extend: {
                 screens: {
@@ -116,9 +114,6 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
                 }
               },
             },
-            variants: {
-              extend: {},
-            },
             corePlugins: {
               preflight: false,
             },
@@ -234,19 +229,14 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
       '../tailwind.config.js',
       javascript`
         module.exports = {
-          purge: {
+          content: {
             content: ['./src/index.html'],
             safelist: ['bg-red-500','bg-red-600']
           },
-          mode: 'jit',
-          darkMode: false, // or 'media' or 'class'
           theme: {
             extend: {
             },
           },
-          variants: {
-            extend: {},
-          },
           corePlugins: {
             preflight: false,
           },