On every keypress -> TypeError: result.apply is not a function

[onetrev]

Clearly describe the bug

On every key press when editing my webpack config javascript file, stylelint reports errors in the VS Code notifications area (there are no actual reported errors in my code), including the following error in Developer Tools Console:

TypeError: result.apply is not a function     at c:\Users\onetr\.vscode\extensions\stylelint.vscode-stylelint-0.85.0\node_modules\@stylelint\postcss-css-in-js\extract.js:266:20.... (edited for brevity).

What code is needed to reproduce this issue?

I'm attaching the full code snippet at the bottom because it's a big snippet. But I've narrowed it down that it occurs from trying to pass a variable (env) to my commonConfig arrow function expression.

module.exports = env => {
  switch (env) {
    case 'production':
      return merge(commonConfig(env), productionConfig);
    case 'development':
      return merge(commonConfig(env), developmentConfig);
    default:
      throw new Error('No matching configuration found');
  }
}

What vscode-stylelint configuration is needed to reproduce the bug?

I have no custom stylelint conf.

Is this issue related to autofix? (editor.codeActionsOnSave)

No. I haven't changed this setting and the error occurs on every key press, not just save.

Which version of vscode-stylelint are you using?

0.85.0

Which version of stylelint are you using?

Not sure, I'm just using the VS Code extension.

Does your issue relate to non-standard syntax (e.g. SCSS, nesting, etc.)?

I don't think so.

What did you expect to happen?

The extension should not chuck errors. :-)

What actually happened (e.g. what warnings or errors you are getting)?

Full error report in Console is:

TypeError: result.apply is not a function     at c:\Users\onetr\.vscode\extensions\stylelint.vscode-stylelint-0.85.0\node_modules\@stylelint\postcss-css-in-js\extract.js:266:20     at Array.some (<anonymous>)     at isStylePath (c:\Users\onetr\.vscode\extensions\stylelint.vscode-stylelint-0.85.0\node_modules\@stylelint\postcss-css-in-js\extract.js:257:33)     at CallExpression (c:\Users\onetr\.vscode\extensions\stylelint.vscode-stylelint-0.85.0\node_modules\@stylelint\postcss-css-in-js\extract.js:344:41)     at NodePath._call (c:\Users\onetr\.vscode\extensions\stylelint.vscode-stylelint-0.85.0\node_modules\@babel\traverse\lib\path\context.js:55:20)     at NodePath.call (c:\Users\onetr\.vscode\extensions\stylelint.vscode-stylelint-0.85.0\node_modules\@babel\traverse\lib\path\context.js:42:17)     at NodePath.visit (c:\Users\onetr\.vscode\extensions\stylelint.vscode-stylelint-0.85.0\node_modules\@babel\traverse\lib\path\context.js:90:31)     at TraversalContext.visitQueue (c:\Users\onetr...

The full JS file that causes the issue is:

// ++ webpack config +++++++++++++++++++++++++++
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const path = require('path');
const chokidar = require( 'chokidar' );
const Fiber = require('fibers');
const globImporter = require('node-sass-glob-importer');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const CleanWebpackPlugin = require('clean-webpack-plugin');


// custom config settings...
const { config } = {
  "config": {
    "port" : "3015",
    "publicPath": "/wp-content/themes/gutendev/dist/",
    "serverAddress" : "wpdev.localhost",
    "siteURL": "https://wpdev.localhost",
  }
}


/**
 * Configure Webpack Dev Server.
 *
 * @return {Object}
 */
const configureDevServer = () => {
	return {
    before(app, server) {
      chokidar.watch([
        './**/*.php',
        './template-parts/blocks/**/*.css',
        './template-parts/blocks/**/*.php'
        // './**/*.js'
      ]).on( 'all', function() {
        server.sockWrite( server.sockets, 'content-changed' );
      })
    },
    host: config.serverAddress,
    hot: true,
    // open: true,
    overlay: true,
    port: config.port,
    publicPath: config.publicPath,
    proxy: {
      '/': {
        target: config.siteURL,
        secure: false,
        changeOrigin: true
      }
    },
    https: {
      key: 'C:/Users/onetr/.localhost-ssl/wpdev.localhost.key',
      cert: 'C:/Users/onetr/.localhost-ssl/wpdev.localhost.crt',
      ca: 'C:/Users/onetr/.localhost-ssl/myCA.pem',
    },
    // Allow access to WDS data from anywhere, including the standard non-proxied WP
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
    },
	};
};


const commonConfig = (env) => {
  return { 
    context: path.resolve(__dirname, 'src'),
    entry: {
      site : "./site.js",
      site_header : "./site_header.js",
      blocks : "./blocks.js"
    },
    output: {
      filename: "[name].bundle.js",
      publicPath: config.siteURL + ':' + config.port + config.publicPath,
    },
    module: {
      rules: [
        // {
        //   test: /\.js$/,
        //   exclude: /node_modules/,
        //   use: {
        //     loader: "babel-loader"
        //   }
        // },
        {
          test: /\.scss$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                hmr: env === 'development'
              }
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 2,
                sourceMap: true,
                url: false
              },
            },
            { 
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
                ident: 'postcss',
                plugins: (loader) => [
                  require('postcss-import')({ root: loader.resourcePath }),
                  require('postcss-preset-env')(),
                ]
              }
            },
            { 
              loader: 'sass-loader', 
              options: {
                sourceMap: true, 
                implementation: require('sass'),
                sassOptions: {
                  importer: globImporter(),
                },
              } 
            },
          ]
        } // ++ END scss test +++++++++++++++++
      ] // ++ END rules ++++++++++++++++++++++
    }, // ++ END modules ++++++++++++++++++++
    optimization: {
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: "[name].bundle.css"
      })
    ] // ++ END plugins ++++++++++++++++++++++
  }
}


const productionConfig = {
  devtool: "source-map",
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimizer: [
      new TerserJSPlugin({ sourceMap: true }), 
      new OptimizeCSSAssetsPlugin({ cssProcessorOptions: { map: { inline: false, annotation: true } }})
    ],
  },
  plugins: [
    // new CleanWebpackPlugin(['dist']),
  ] // ++ END plugins ++++++++++++++++++++++
};


const developmentConfig = {
  devServer: configureDevServer(),
  devtool: "cheap-module-source-map",
  output: {
    filename: "[name].bundle.js",
    publicPath: config.siteURL + ':' + config.port + config.publicPath,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ] // ++ END plugins ++++++++++++++++++++++
};


module.exports = env => {
  switch (env) {
    case 'production':
      return merge(commonConfig(env), productionConfig);
    case 'development':
      return merge(commonConfig(env), developmentConfig);
    default:
      throw new Error('No matching configuration found');
  }
}

[ota-meshi]

Thank you for this issue.

If you do not use stylelint in javascript (css-in-js), change the stylelint.validate option in your .vscode/settings.json to exclude "javascript", "javascriptreact", "typescript" and "typescriptreact".

https://github.com/stylelint/vscode-stylelint#stylelintvalidate

If you use css-in-js, please let me know what the result of running stylelint with CLI.

[onetrev]

Awesome, ya I haven't gotten into css-in-js yet, so I've excluded those which of course prevents the error now. I'm not sure if we should close this issue then? I will try to test it with stylelint CLI at some point though.

[ota-meshi]

Looking at the error content, it looks like a stylelint core bug, probably related to css-in-js. I'm probably expecting the same problem using the CLI.
However, you do not use css-in-js, so I think it will be difficult to help find out more causes.

If you can run stylelint CLI with css-in-js, and you can see the same error in the CLI, please open the new issue in the stylelint repository. Let me know if CLI doesn't give an error.

---

Whether to exclude "javascript" from the "stylelint.validate" default, is discussed in #45.

[onetrev]

You're right @ota-meshi it is a core bug. I tested it and yes the error exists with stylelint CLI. I was about to submit the issue but found it's already been reported and fixed (merged). stylelint/stylelint#4793