`function-no-unknown` false positive

[Nume]

It seems that rule function-no-unknown is triggering a false positive when functions are called within an anonymous function

This code is triggering function-no-unknown

function getColor() {
  return "red"
}

const Foo = styled.div`
  color: ${() => getColor()}; // Unexpected unknown function "getColor"
`

while this code is not

function getColor() {
  return "red"
}

const Bar = styled.div`
  color: ${getColor()};
`

stylelint.config.js

module.exports = {
  extends: [
    "stylelint-config-standard",
  ],
  rules: {},
  customSyntax: "postcss-styled-syntax",
}

package.json

"postcss-styled-syntax": "0.3.1",
"stylelint": "15.1.0",
"stylelint-config-standard": "30.0.1"

[hudochenkov]

This is an issues with Stylelint rule, and not with this syntax package. Could you open a bug issues in Stylelint repository and tag me there? I'll take a look.

[eMerzh]

@hudochenkov i was suffering the same issue with styleint 15.0 but this was indeed fixed upstream.

Now i got a new issue after trying to update to 0.4.0 with this code:

border-right: 1px solid
                ${props =>
                    props.disabled ? theme.colors.white : prop('colors.headerButtonColor')(props)};

if i split it in two, it goes well ... like this

border-right: 1px solid;
border-right-color:  ${props =>
                    props.disabled ? theme.colors.white : prop('colors.headerButtonColor')(props)};

maybe there's something going through somewhere?

[hudochenkov]

@eMerzh I see that this code is parsed correctly. If you receive false positives violations on Stylelint rule, please, open issue in Stylelint repository.

[eMerzh]

ok since it was directly linked to postcss-styled-syntax upgrade (not stylelint) i thought it was related to this repo ...

[hudochenkov]

New version has change that doesn't affect parsing at all, and only adds extra meta information.

[Sh031224]

@hudochenkov That error occurs in another case.

const mergeWithVar = (token: Token) => `var(--${token.replace(/\./g, '-')})`

const First = styled.div`
  border: 1px solid ${mergeWithVar('color.primary.normal')}; // works fine
`

const Second = styled.div`
  border: 1px solid 
    ${mergeWithVar('color.primary.normal')}; // works fine
`

const isPrimary = false;

const Third = styled.div`
  border: 1px solid
    ${mergeWithVar( // Unexpected unknown function "mergeWithVar" (function-no-unknown)
      isPrimary ? 'color.primary.normal' : 'color.secondary.normal' // Expected "isPrimary" to be "isprimary" (value-keyword-case)
    )};
`

const Fourth = styled.div`
  border: 1px solid ${mergeWithVar( // Unexpected unknown function "mergeWithVar" (function-no-unknown)
    isPrimary ? 'color.primary.normal' : 'color.secondary.normal' // Expected "isPrimary" to be "isprimary" (value-keyword-case)
  )};
`

// stylelint.config.js
module.exports = {
  customSyntax: "postcss-styled-syntax",
  extends: [
    "stylelint-config-standard",
  ],
  rules: {}
}

// package.json
{
  "postcss-styled-syntax": "^0.6.3",
  "stylelint": "^16.1.0",
  "stylelint-config-standard": "^36.0.0",
}

Is this also a stylelint issue? Problems occur when line breaks occur in function parameters due to prettier.

[Sh031224]

Is this also a stylelint issue? Problems occur when line breaks occur in function parameters due to prettier.

It seems to stylelint issue. https://github.com/stylelint/stylelint/pull/7443