Bug: no-invalid-properties wrongly warns Unknown Property if val uses var()

[adamlui]

Environment

ESLint version: v9.17.0
@eslint/css version: v0.2.0
Node version: v22.9.0
npm version: v10.9.1
Operating System: Win10

Which language are you using?

stylesheet

What did you do?

Configuration

import js from '@eslint/js'
import globals from 'globals'
import css from '@eslint/css'
import importPlugin from 'eslint-plugin-import'
import json from '@eslint/json'
import regexp from 'eslint-plugin-regexp'
import stylisticJS from '@stylistic/eslint-plugin-js'
import yml from 'eslint-plugin-yml'

export default [
    { ignores: ['**/*.min.js', '**/package-lock.json'] },
    {
        files: ['**/*.js', '**/*.mjs'],
        languageOptions: { ecmaVersion: 'latest', sourceType: 'script', globals: { ...globals.browser }},
        plugins: { 'import': importPlugin, 'js-styles': stylisticJS, regexp },
        rules: {
            ...js.configs.recommended.rules,
            ...importPlugin.flatConfigs.recommended.rules,
            ...regexp.configs['flat/recommended'].rules,
            'indent': 'off', 'no-unexpected-multiline': 'off', // allow whitespace anywhere
            'js-styles/no-trailing-spaces': 'error', // ...except at ends of lines
            'js-styles/max-len': ['error', { 'code': 120, // limit lines to 120 chars except if containing...
                'ignoreComments': true, 'ignoreStrings': true, // ...trailing/own-line comments, quoted strings...
                'ignoreTemplateLiterals': true, 'ignoreRegExpLiterals': true }], // ...or template/regex literals
            'js-styles/no-extra-semi': 'error', // disallow unnecessary semicolons
            'quotes': ['error', 'single', { 'allowTemplateLiterals': true }], // enforce single quotes except backticks to avoid escaping quotes
            'key-spacing': ['error', { 'beforeColon': false, 'afterColon': true }], // enforce spacing in object properties
            'comma-dangle': ['error', 'never'], // enforce no trailing commas in arrays or objects
            'no-async-promise-executor': 'off', // allow promise executor functions to be async (to accomodate await lines)
            'no-constant-condition': 'off', // allow constant conditions
            'no-empty': 'off', // allow empty blocks
            'no-inner-declarations': 'off', // allow function declarations anywhere
            'no-useless-escape': 'off', // allow all escape chars cause ESLint sucks at detecting truly useless ones
            'no-unused-vars': ['error', { 'caughtErrors': 'none' }] // allow unused named args in catch blocks
        }
    },
    { files: ['**/*.css'], language: 'css/css', ...css.configs.recommended },
    { files: ['**/*.json'], language: 'json/json', ...json.configs.recommended },
    { files: ['**/*.mjs'], languageOptions: { sourceType: 'module' }},
    { files: ['**/*.yaml, **/*.yml'], ...yml.configs['flat/standard'][1] }
]

@charset "UTF-8";

@font-face {
    font-family: baba-pro-bold;
    src: url('../../../assets/fonts/baba-pro-bold/baba-pro-bold.otf') format('opentype'),
         url('../../../assets/fonts/baba-pro-bold/baba-pro-bold.ttf') format('truetype'),
         url('../../../assets/fonts/baba-pro-bold/baba-pro-bold.woff') format('woff'),
         url('../../../assets/fonts/baba-pro-bold/baba-pro-bold.woff2') format('woff2');
}

main {
    background-image: url('../images/background.png');
    background-size: cover;
    background-position: bottom center;
    background-attachment: scroll;
}

iframe:hover { pointer-events: none } /* to support assets/js/src/smoothscroll.js */

/* Scrollbar */
* { scrollbar-color: rgb(210,210,210) #1a1a1a ; scrollbar-width: thin } /* Firefox */
::-webkit-scrollbar { width: 10px ; height: 10px } /* Chromium/Safari */
::-webkit-scrollbar-thumb { background: white ; border-radius: 4px ; border: 1px black solid }
::-webkit-scrollbar-track { background: #1a1a1a }
::-webkit-scrollbar-thumb:hover { background: rgb(210,210,210) }

body, iframe { cursor: url('../../../assets/images/cursors/futuristic/pointer.cur'), auto }
button:hover, a:hover { cursor: url('../../../assets/images/cursors/futuristic/target.gif'), auto }

.github-corner {
    position: fixed ;
    right: 0 ; top: 0 ; z-index: 1 ;
    height: auto ; width: 7rem ;
}

.hero-logo { margin: 21px 0 ; max-width: 75% ; height: auto }

@media (max-width: 991px) { .hero-logo { max-width: 100% }} /* Full-width hero logo @ < 991px */
@media (max-width: 573px) { .install-btn { margin: auto }} /* Center buttons @ < 558px */

.py-5 { padding-bottom: 1rem !important } /* Decrease bottom-padding of header */

h1 {
    color: white ;
}

.install-btn {
    --transition-style: 0.2s ease all ;
    color: black ;
    font-family: baba-pro-bold, sans-serif ;
    transition: var(--transition-style) ;
        -webkit-transition: var(--transition-style) ; -moz-transition: var(--transition-style) ;
        -o-transition: var(--transition-style) ; -ms-transition: var(--transition-style) ;
    font-size: 1.3rem !important ;
    padding: 12px 33px !important ;
    margin: 0 !important ; border-radius: 0
}

.chrome-btn {
    background-color: #01FF18 ; border-color: #01FF18 ;
    box-shadow: -3px 6px 41px #01FF18 ;
}

.chrome-btn:hover {
    background-color: #01FF18 ; border-color: #01FF18 ;
    box-shadow: -3px 6px 61px #01FF18 ;
}

.edge-btn {
    background-color: #45F8FF ; border-color: #45F8FF ;
    box-shadow: 1px 6px 101px #45F8FF ;
}

.edge-btn:hover {
    background-color: #45F8FF ; border-color: #45F8FF ;
    box-shadow: 1px 6px 81px #45F8FF ;
}

.firefox-btn {
    background-color: #F88 ; border-color: #F88 ;
    box-shadow: -3px 6px 41px #F88 ;
}

.firefox-btn:hover {
    background-color: #F88 ; border-color: #F88 ;
    box-shadow: -3px 6px 61px #F88 ;
}

.gm-btn {
    background-color: white ; border-color: white ;
    box-shadow: 3px 6px 41px white ;
}

.gm-btn:hover {
    color: lightgray ;
    background-color: white ; border-color: white ;
    box-shadow: 3px 6px 61px white ;
}

.browser-icon {
    right: 5px ;
    bottom: 2px ;
    position: relative ;
}

.featured-logos { padding: 13px }
.featured-logos a {
    --transition-style: 0.05s ease all ;
    text-decoration: none ;
    transition: var(--transition-style) ;
        -webkit-transition: var(--transition-style) ; -moz-transition: var(--transition-style) ;
        -o-transition: var(--transition-style) ; -ms-transition: var(--transition-style)
}
.featured-logos a:hover { opacity:.75 }

What did you expect to happen?

No errors

What actually happened?

For the block:

...
.featured-logos a {
    --transition-style: 0.05s ease all ;
    text-decoration: none ;
    transition: var(--transition-style) ;
        -webkit-transition: var(--transition-style) ; -moz-transition: var(--transition-style) ;
        -o-transition: var(--transition-style) ; -ms-transition: var(--transition-style)
}
...

... plug-in warns:

... even though transition is a valid prop and --transition-style is properly defined, so probably the same cause for #40 where color: val(...) was used and it similarly warned Unknown property 'color' found

Link to Minimal Reproducible Example

https://github.com/adamlui/chatgptevo.com/actions/runs/12737646550/job/35498929438

Participation

• I am willing to submit a pull request for this issue.

Additional comments

No response