postcss / autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use
https://twitter.com/autoprefixer
MIT License
21.57k stars 1.25k forks source link

1.4.7 color adjust issue added #1464

Closed Temepest74 closed 2 years ago

Temepest74 commented 2 years ago

Tailwind form had this issue with color-adjust which they fixed (https://github.com/tailwindlabs/tailwindcss/issues/8277). The error is back up in 1.4.7. The error is in the latest autoprefixer version, because 1.4.5 does not bring this error into the console. image

ai commented 2 years ago

Maybe you didn’t updated Tailwind to fixed version? Check the output sources (but disable css minification/cleaner first) for color-adjust properties.

Temepest74 commented 2 years ago

It is updated 100% image Beside this, I am not the only one having this issue, check this reply to my linked post.

I checked the output file and it has color-adjust in it

select{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
       color-adjust: exact;
            print-color-adjust: exact;
}

[multiple]{
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    -webkit-print-color-adjust: unset;
       color-adjust: unset;
            print-color-adjust: unset;
}

[type='checkbox'],[type='radio']{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
       color-adjust: exact;
            print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #2563eb;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
}

This may be a problem from autoprefixer running twice, as stated at the end of this issue https://github.com/tailwindlabs/tailwindcss-forms/pull/115

ai commented 2 years ago

Autoprefixer do not add color-adjust.

Sorry, I can’t help with environment problems. You need to dig into it on your own.