Fix TypeError Result.apply is not a function

[NickdeK]

Clearly describe the bug

After updating Stylint from 13.3.3 tot 13.5.0 we are having issues where we get the following error on js files.

npx stylelint fin-button.js
TypeError: result.apply is not a function
    at /Users/nickdek/Sites/test/src/node_modules/@stylelint/postcss-css-in-js/extract.js:266:20
    at Array.some (<anonymous>)
    at isStylePath (/Users/nickdek/Sites/test/src/node_modules/@stylelint/postcss-css-in-js/extract.js:257:33)
    at TaggedTemplateExpression (/Users/nickdek/Sites/test/src/node_modules/@stylelint/postcss-css-in-js/extract.js:351:8)
    at NodePath._call (/Users/nickdek/Sites/test/src/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/Users/nickdek/Sites/test/src/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/Users/nickdek/Sites/test/src/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/Users/nickdek/Sites/test/src/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (/Users/nickdek/Sites/test/src/node_modules/@babel/traverse/lib/context.js:84:19)
    at TraversalContext.visit (/Users/nickdek/Sites/test/src/node_modules/@babel/traverse/lib/context.js:140:19)

Which rule, if any, is the bug related to?

Doesn't seem to be related to any rule.

What code is needed to reproduce the bug?

import { LitElement, html, css } from 'lit-element'

class FinButton extends LitElement {
  // language=css
  static styles = css`
    :host {
      display: block;
      font-size: var(--fin-button-font-size, var(--font-size, 15px));
      text-decoration: none;
    }
  `

  render() {
    return html`
      Test
    `
  }
}

customElements.define('fin-button', FinButton)

What stylelint configuration is needed to reproduce the bug?

module.exports = {
  ignoreFiles: ['!**/*.js', '!**/*.ts', '!**/*.css', '!**/*.less', '!**/*.scss'],
  plugins: ['stylelint-no-unsupported-browser-features'],
  extends: [
    'stylelint-config-standard',
    'stylelint-config-rational-order',
    'stylelint-config-prettier',
  ],
  rules: {
    'plugin/no-unsupported-browser-features': [true],
    'selector-type-no-unknown': [
      true,
      {
        ignore: ['custom-elements'],
      },
    ],
  },
}

Which version of stylelint are you using?

13.5.0

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

CLI with npx stylelint fin-button.js

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

Yes, it relates to CSS used in JS.

What did you expect to happen?

No error to be thrown just like in 13.3.3 (last working version).

What actually happened (e.g. what warnings or errors did you get)?

The following error was thrown:

npx stylelint fin-button.js
TypeError: result.apply is not a function
    at /Users/nickdek/Sites/test/src/node_modules/@stylelint/postcss-css-in-js/extract.js:266:20
    at Array.some (<anonymous>)
    at isStylePath (/Users/nickdek/Sites/test/src/node_modules/@stylelint/postcss-css-in-js/extract.js:257:33)
    at TaggedTemplateExpression (/Users/nickdek/Sites/test/src/node_modules/@stylelint/postcss-css-in-js/extract.js:351:8)
    at NodePath._call (/Users/nickdek/Sites/test/src/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/Users/nickdek/Sites/test/src/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/Users/nickdek/Sites/test/src/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/Users/nickdek/Sites/test/src/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (/Users/nickdek/Sites/test/src/node_modules/@babel/traverse/lib/context.js:84:19)
    at TraversalContext.visit (/Users/nickdek/Sites/test/src/node_modules/@babel/traverse/lib/context.js:140:19)

[hail2u]

I have a same problem, but without CSS-in-JS code:

let html;
html.replace();

I assume the word html is the key part of this weird bug.

[jeddy3]

@NickdeK Thanks for the report and for using the template.

I can reproduce this locally.

I assume the word html is the key part of this weird bug.

Yes, it appears so.

I've created a pull request patch the issue (#4797), which will need to be reviewed, merged and released.

In the meantime, you can work around the issue by using the syntax option. This forces the syntax to "css-in-js" and avoids syntax inferring, which is where the problem appears to be:

stylelint "**/*.js" --syntax "css-in-js"

[ehannes]

We are running stylelint in a Gatsby project and get this error:

ERROR 
Error in StylelintBarePlugin
ERROR 
Trace: TypeError: result.apply is not a function
    at stylelint.lint.then.catch ([workspace-dir]/node_modules/stylelint-bare-webpack-plugin/lib/index.js:65:21)

I traced the error back to this upgrade (output from git diff):

-stylelint@^11.1.1:
-  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-11.1.1.tgz#6dbbb348036576ac6b033ddfedba72a877c1d6bb"
-  integrity sha512-Vx6TAJsxG6qksiFvxQTKriQhp1CqUWdpTDITEkAjTR+l+8Af7qNlvrUDXfpuFJgXh/ayF8xdMSKE+SstcsPmMA==
+stylelint@^13.2.1:
+  version "13.2.1"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.2.1.tgz#9101fcd70791856530049816ff53d980ecd561df"
+  integrity sha512-461ZV4KpUe7pEHHgMOsH4kkjF7qsjkCIMJYOf7QQC4cvgPUJ0z4Nj+ah5fvKl1rzqBqc5EZa6P0nna4CGoJX+A==

[ehannes]

Downgrading to 13.3.0 temporarily solved the problem for us.

[laclance]

even after downgrading to v13.3.0 I still get the same error.

[m-allanson]

I've written up some more details on this bug over at #4797 (comment).

This should be fixed with the next release of stylelint. In the meantime you can use npm install stylelint/stylelint#master --save to test out the change merged in #4797.

@laclance Can you try the above steps? If that doesn't work, please create a new issue and fill out all the steps in the issue template. Thank you!

[NickdeK]

@m-allanson Tried the fix with the master branch like you said and it works perfectly! If we can get a release version that would be great :)

[laclance]

thanks, seems to be working.

[bz2]

This is not actually fixed, and can be hit with other unfortunately named imports - for instance 'markdown'.

Is a regression from #4729 which introduced import-lazy for syntaxes... and the Proxy object blows up on @stylelint/postcss-css-in-js/extract.js line 260-265 because it looks like a function but isn't one.

The tricky bit is I really can't tell what the getNameSpace() logic is actually trying to do, but as least the syntax/function branch seems entirely out of date.

[ehannes]

Any news on this? We are still locked down to 13.3.0.

[Stanzilla]

Looks like this is still an issue in 13.8.0. The workaround with manually specifying the syntax used still works though.

[whaaaley]

This is not actually fixed, and can be hit with other unfortunately named imports - for instance 'markdown'.

Is a regression from #4729 which introduced import-lazy for syntaxes... and the Proxy object blows up on @stylelint/postcss-css-in-js/extract.js line 260-265 because it looks like a function but isn't one.

The tricky bit is I really can't tell what the getNameSpace() logic is actually trying to do, but as least the syntax/function branch seems entirely out of date.

Thanks for this. I was extremely confused why this error was popping up in some projects but not others. I had a file named markdown as well.

For others who may have come to this issue from Google looking for a solution for the stylelint vscode extension, you can "whitelist" files vscode lints by adding this to your setttings.json.

"stylelint.validate": ["css", "html", "scss"],

[Undistraction]

Seeing this in files with an import Example from '@example/markdown', with 13.13.1

[jeddy3]

Closing as the syntax option was removed for the 14.0.0 release. (See the migration guide.)

The postcss-lit custom syntax is now available for Lit elements.