Deprecate --no-autoprefixer flag in the CLI (#11280)

* enable `--no-autoprefixer` test

* handle `--no-autoprefixer` using lightningcss

* bump default chrome version for lightningcss plugin

* handle `map` being nullable

* add `--no-autoprefixer` test including nesting

* set Chrome to version 111 as a default value

* resolve the output message when resolving the promise

* deprecate `--no-autoprefixer` for the CLI

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Reset padding for `<dialog>` elements in preflight ([#11069](https://github.com/tailwindlabs/tailwindcss/pull/11069))
 - [Oxide] Disable color opacity plugins by default in the `oxide` engine ([#10618](https://github.com/tailwindlabs/tailwindcss/pull/10618))
 - [Oxide] Enable relative content paths for the `oxide` engine ([#10621](https://github.com/tailwindlabs/tailwindcss/pull/10621))
+- Deprecate `--no-autoprefixer` flag in the CLI ([#11280](https://github.com/tailwindlabs/tailwindcss/pull/11280))
 
 ## [3.3.2] - 2023-04-25
 

integrations/execute.js

@@ -64,7 +64,7 @@ module.exports = function $(command, options = {}) {
         messages.splice(0, idx + 1)
         let actorIdx = actors.indexOf(next)
         actors.splice(actorIdx, 1)
-        next.resolve()
+        next.resolve(message)
         break
       }
     }

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

@@ -96,27 +96,35 @@ describe('Build command', () => {
     expect(withoutMinify.length).toBeGreaterThan(withMinify.length)
   })
 
-  // TODO: Handle --no-autoprefixer
-  test.skip('--no-autoprefixer', async () => {
+  // Deprecated
+  test('--no-autoprefixer (should produce a warning)', async () => {
     await writeInputFile('index.html', html`<div class="select-none"></div>`)
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind utilities;
+      `
+    )
 
-    await $(`${EXECUTABLE} --output ./dist/main.css`)
-    let withAutoprefixer = await readOutputFile('main.css')
-
-    expect(withAutoprefixer).toIncludeCss(css`
-      .select-none {
-        -webkit-user-select: none;
-        user-select: none;
-      }
+    let runningProcess = $(
+      `${EXECUTABLE} --input ./src/index.css --output ./dist/main.css --no-autoprefixer`
+    )
+    let warning = runningProcess.onStderr((message) => message.includes('--no-autoprefixer'))
+    await runningProcess
+    expect(await warning).toMatchInlineSnapshot(`
+      "[deprecation] The --no-autoprefixer flag is deprecated and has no effect.
+      "
     `)
-
-    await $(`${EXECUTABLE} --output ./dist/main.css --no-autoprefixer`)
     let withoutAutoprefixer = await readOutputFile('main.css')
 
-    expect(withoutAutoprefixer).toIncludeCss(css`
-      .select-none {
+    // This contains --webkit-user-select which may be strange, but it is expected because we are
+    // not handling the `--no-autoprefixer` flag anymore at all.
+    expect(withoutAutoprefixer).toMatchInlineSnapshot(`
+      ".select-none {
+        -webkit-user-select: none;
         user-select: none;
       }
+      "
     `)
   })
 
@@ -492,7 +500,6 @@ describe('Build command', () => {
                  --postcss            Load custom PostCSS configuration
              -m, --minify             Minify the output
              -c, --config             Path to a custom config file
-                 --no-autoprefixer    Disable autoprefixer
              -h, --help               Display usage information
         `)
     )

src/cli/build/index.js

@@ -25,6 +25,10 @@ export async function build(args) {
     process.exit(9)
   }
 
+  if (args['--no-autoprefixer']) {
+    console.error('[deprecation] The --no-autoprefixer flag is deprecated and has no effect.')
+  }
+
   // TODO: Reference the @config path here if exists
   let configPath = args['--config'] ? args['--config'] : resolveDefaultConfigPath()
 

src/cli/build/plugin.js

@@ -26,14 +26,13 @@ import { validateConfig } from '../../util/validateConfig'
 import { handleImportAtRules } from '../../lib/handleImportAtRules'
 import { flagEnabled } from '../../featureFlags'
 
-async function lightningcss(shouldMinify, result, options = {}) {
-  // TODO: handle --no-autoprefixer option if possible
+async function lightningcss(result, { map = true, minify = true } = {}) {
   try {
     let transformed = lightning.transform({
       filename: result.opts.from || 'input.css',
       code: Buffer.from(result.css, 'utf-8'),
-      minify: shouldMinify,
-      sourceMap: result.map === undefined ? options.map : !!result.map,
+      minify,
+      sourceMap: result.map === undefined ? map : !!result.map,
       inputSourceMap: result.map ? result.map.toString() : undefined,
       targets: lightning.browserslistToTargets(browserslist(pkg.browserslist)),
       drafts: {
@@ -46,7 +45,7 @@ async function lightningcss(shouldMinify, result, options = {}) {
       map: result.map
         ? Object.assign(result.map, {
             toString() {
-              return transformed.map.toString()
+              return transformed.map?.toString()
             },
           })
         : result.map,
@@ -342,7 +341,12 @@ export async function createProcessor(args, cliConfigPath) {
 
     return readInput()
       .then((css) => processor.process(css, options))
-      .then((result) => lightningcss(!!args['--minify'], result, options))
+      .then((result) =>
+        lightningcss(result, {
+          ...options,
+          minify: !!args['--minify'],
+        })
+      )
       .then((result) => {
         if (!state.watcher) {
           return result

src/cli/index.js

@@ -70,6 +70,7 @@ let commands = {
         description: 'Path to a custom config file',
       },
       '--no-autoprefixer': {
+        deprecated: true,
         type: Boolean,
         description: 'Disable autoprefixer',
       },

src/plugin.js

@@ -49,7 +49,7 @@ module.exports = function tailwindcss(configOrPath) {
             inputSourceMap: result.map ? result.map.toString() : undefined,
             targets:
               typeof process !== 'undefined' && process.env.JEST_WORKER_ID
-                ? { chrome: 106 << 16 }
+                ? { chrome: 111 << 16 }
                 : lightningcss.browserslistToTargets(
                     browserslist(require('../package.json').browserslist)
                   ),