Fix autoprefixer warning about `color-adjust`

[thecrypticace]

Until recently FF only supported the non-standard color-adjust property. Now that it supports print-color-adjust autoprefixer generates warnings when using the non-standard property.

Fixes https://github.com/tailwindlabs/tailwindcss/issues/8250 Fixes #114

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
tailwindcss-forms	✅ Ready (Inspect)	Visit Preview	May 2, 2022 at 3:05PM (UTC)

[ghost]

Can we get a new release with this fix?

[damozhang]

In my project, the tailwindcss/forms is 0.5.0. I still get the warning "(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated."

[thecrypticace]

@web2033 @damozhang v0.5.1 has been published!

[damozhang]

@web2033 @damozhang v0.5.1 has been published!

It's gone. Thanks!

[jjaimealeman]

I stumbled up this Issue today.

Vite still runs, however continues to display ...

I have installed the proper forms version recommended.

  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.13",
    "prettier": "^2.6.2",
    "prettier-plugin-tailwindcss": "^0.1.10",
    "tailwindcss": "^3.0.24",
    "vite": "^2.9.9",
    "vite-plugin-handlebars": "^1.6.0"
  },
  "dependencies": {
    "@alpinejs/intersect": "^3.10.2",
    "@tailwindcss/forms": "^0.5.1",
    "alpinejs": "^3.10.2",
    "flowbite": "^1.4.5",
    "tailwindcss-fluid-type": "^1.3.3"
  }

[juanchaur]

This is still happening to me too:

{
"dependencies": {
    "@apollo/client": "^3.6.2",
    "@apollo/link-error": "^2.0.0-beta.3",
    "@apollo/react-common": "^3.1.4",
    "@apollo/react-hooks": "^4.0.0",
    "@headlessui/react": "^1.5.0",
    "@heroicons/react": "^1.0.6",
    "@react-spring/web": "^9.4.1",
    "@tailwindcss/forms": "^0.5.1",
    "deepmerge": "^4.2.2",
    "flowbite": "^1.4.5",
    "graphql": "^15.6.1",
    "isomorphic-unfetch": "^3.1.0",
    "lodash": "^4.17.21",
    "next": "12.1.4",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-use-measure": "^2.1.1",
    "tailwindcss-fluid-type": "^1.3.3"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "2.6.2",
    "@graphql-codegen/introspection": "^2.1.1",
    "@graphql-codegen/typescript": "2.4.8",
    "@graphql-codegen/typescript-operations": "^2.3.5",
    "@graphql-codegen/typescript-react-apollo": "3.2.11",
    "@graphql-codegen/typescript-resolvers": "^2.6.1",
    "@tailwindcss/forms": "^0.5.1",
    "@types/graphql": "^14.5.0",
    "@types/lodash": "^4.14.182",
    "@types/node": "17.0.23",
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14",
    "apollo": "^2.33.10",
    "autoprefixer": "10.4.5",
    "clsx": "^1.1.1",
    "dotenv": "^16.0.0",
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-config-standard-react": "^11.0.1",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.4.0",
    "eslint-plugin-standard": "^5.0.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.3.7",
    "postcss": "^8.4.13",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^7.4.3",
    "prettier": "^2.6.2",
    "prettier-plugin-tailwindcss": "^0.1.10",
    "react-scroll": "^1.8.6",
    "tailwindcss": "^3.0.24",
    "typescript": "4.6.3"
  }
}

[esseremmerik]

Yeah, probably bug in autoprefixer which is having an incorrect detection, temporary solved by pinning this version to 10.4.5, thanks to this comment https://github.com/tailwindlabs/tailwindcss/issues/8277#issuecomment-1120493503

[thecrypticace]

If this is still happening to you it's because of one of three things:

1. The wrong version of the forms plugin is being loaded (unlikely)
2. Something else is introducing the color-adjust property
3. Autoprefixer is running more than once

Because of the way the check works in Autoprefixer if you run it more than once and print-color-adjust is used you will get errors. This is unfortunate but there's nothing we can do to fix that.

[alany411]

I have discovered that if you are using postcss-preset-env, it will cause the warning. I tested this with a fresh repo.

[florianbouvot]

Thanks @thecrypticace, I discovered that Laravel Mix use autoprefixer by default: https://laravel-mix.com/docs/6.0/autoprefixer

I remove autoprefixer in my own config and everything works fine.