Skip to content

CSS color-adjust property is deprecated #114

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

Closed
maximeg opened this issue May 2, 2022 · 0 comments · Fixed by #115
Closed

CSS color-adjust property is deprecated #114

maximeg opened this issue May 2, 2022 · 0 comments · Fixed by #115

Comments

@maximeg
Copy link

maximeg commented May 2, 2022

What version of @tailwindcss/forms are you using?

v0.5.0

What version of Node.js are you using?

v18.0.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

autoprefixer v10.4.6

Describe your issue

Hi,

The last version of autoprefixer (v10.4.6) issues a warning for the color-adjustproperty used in select & some input form fields :

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
{
        base: ['select'],
        class: ['.form-select'],
        styles: {
          'background-image': `url("${svgToDataUri(
            `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
              'colors.gray.500',
              colors.gray[500]
            )}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
          )}")`,
          'background-position': `right ${spacing[2]} center`,
          'background-repeat': `no-repeat`,
          'background-size': `1.5em 1.5em`,
          'padding-right': spacing[10],
          'color-adjust': `exact`,
        },
      },
      {
        base: ['[multiple]'],
        class: null,
        styles: {
          'background-image': 'initial',
          'background-position': 'initial',
          'background-repeat': 'unset',
          'background-size': 'initial',
          'padding-right': spacing[3],
          'color-adjust': 'unset',
        },
      },
      {
        base: [`[type='checkbox']`, `[type='radio']`],
        class: ['.form-checkbox', '.form-radio'],
        styles: {
          appearance: 'none',
          padding: '0',
          'color-adjust': 'exact',
          display: 'inline-block',
          'vertical-align': 'middle',
          'background-origin': 'border-box',
          'user-select': 'none',
          'flex-shrink': '0',
          height: spacing[4],
          width: spacing[4],
          color: theme('colors.blue.600', colors.blue[600]),
          'background-color': '#fff',
          'border-color': theme('colors.gray.500', colors.gray[500]),
          'border-width': borderWidth['DEFAULT'],
          '--tw-shadow': '0 0 #0000',
        },
      },

Indeed the property is now deprecated and superceded by print-color-adjust with a large support.
See https://caniuse.com/?search=print-color-adjust

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant