Fix ENOENT error for Jest test in function-no-unknown

[100terres]

What steps are needed to reproduce the bug?

I've documented the issue on a library used by stylelint

• require('css-functions-list') returns "/index.json" niksy/css-functions-list#2 (comment)

• Use the stylelint with the node API

• Using stylelint-config-recommended@v7.0.0

• It's running in a jest@v26.6.3 test

• Using node@v14.18.2

• EDIT: In a TypeScript@4.5.5 / babel environment

When running this the function-no-unknown rule throws this error

ENOENT: no such file or directory, open '/index.json'

Here is where it fails https://github.com/react-forked/dnd/blob/e18cfa53c3f6bb8f085137c934a4a0d9b8332671/test/unit/view/style-marshal/get-styles.spec.ts

Here is the error in CircleCI
https://app.circleci.com/pipelines/github/react-forked/dnd/229/workflows/9d30597b-ac76-4548-b2cb-3416ab0a03fe/jobs/1331

What Stylelint configuration is needed to reproduce the bug?

{
  "extends": ["stylelint-config-recommended"]
}

How did you run Stylelint?

Node stylelint.lint(...)

Which version of Stylelint are you using?

14.5.0

What did you expect to happen?

To not throw an error

What actually happened?

It throws this error

ENOENT: no such file or directory, open '/index.json'

Does the bug relate to non-standard syntax?

Nop

Proposal to fix the bug

As suggested here I've made it work by using path.resolve here in this lib and directly using the return of the require("css-functions-list") here without using the new URL.

[100terres]

I've look around a bit and I found that it might also be related to TypeScript (I forgot to mention that I was using it).

• Move to ESM #5291 (comment)
• Concerns with TypeScript 4.5's Node 12+ ESM Support microsoft/TypeScript#46452

Issue following jest ESM support

• Meta: Native support for ES Modules jestjs/jest#9430

[ybiquitous]

The require("css-functions-list") way has a problem on Windows. See below:

• Add function-no-unknown #5865 (comment)
• 22fe22e

[ybiquitous]

@100terres I've opened a pull request #5906 that may fix your problem. Can you try it, please?

-    "stylelint": "^14.5.0",
+    "stylelint": "github:stylelint/stylelint#issue-5904",

[ybiquitous]

Sorry, PR #5906 doesn't work. 😢
See #5906 (comment)

[ybiquitous]

@100terres I've opened PR #5916 that no longer uses URL thanks to css-functions-list@3.0.1.
Can you try whether to resolve ENOENT, please?

-    "stylelint": "^14.5.0",
+    "stylelint": "github:stylelint/stylelint#bump-css-functions-list",

[100terres]

Hi @ybiquitous thank you for your time! 🙂

I've just tested it here and know it's giving me this error. I didn't had the time to investigate if I need to change something in my config (with jest or TypeScript)

    TypeError: The URL must be of scheme fileTypeError [ERR_INVALID_URL_SCHEME]: The URL must be of scheme file

      at Object.<anonymous> (node_modules/css-functions-list/index.js:6:18)
      at Object.<anonymous> (node_modules/stylelint/lib/rules/function-no-unknown/index.js:5:27)

Here is the result of the CI https://app.circleci.com/pipelines/github/react-forked/dnd/232/workflows/bf31edb7-16e2-4c43-9835-0271ab13ef75/jobs/1349

And now event if I disable the function-no-unknown rule I still get the error described above, but only for the first test that run. Circle CI.

TypeError: The URL must be of scheme fileTypeError [ERR_INVALID_URL_SCHEME]: The URL must be of scheme file

      at Object.<anonymous> (node_modules/css-functions-list/index.js:6:18)
      at Object.<anonymous> (node_modules/stylelint/lib/rules/function-no-unknown/index.js:5:27)

[ybiquitous]

@100terres Thanks for the detailed reproduction. I'm not sure why ERR_INVALID_URL_SCHEME is raised... 🤷🏼

[ybiquitous]

@100terres The problem seems due to jsdom. When changing testEnvironment to 'node', it works:

diff --git a/jest.config.js b/jest.config.js
index 08a90c82..52634cf4 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -12,4 +12,5 @@ module.exports = {
     'jest-watch-typeahead/testname',
   ],
   verbose: true,
+  testEnvironment: 'node',
 };

$ npx jest test/unit/view/style-marshal/get-styles.spec.ts
 PASS  test/unit/view/style-marshal/get-styles.spec.ts
  ✓ should generate valid always styles (117 ms)
  ✓ should generate valid resting styles (5 ms)
  ✓ should generate valid dragging styles (6 ms)
  ✓ should generate valid dropAnimating styles (3 ms)
  ✓ should generate valid userCancel styles (1 ms)

Test Suites: 1 passed, 1 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        0.946 s, estimated 2 s
Ran all test suites matching /test\/unit\/view\/style-marshal\/get-styles.spec.ts/i.

EDIT: Tested on hello-pangea/dnd@b16f775

[ybiquitous]

css-functions-list@3.0.1 includes the following code on CJS:

node_modules/css-functions-list/cjs/index.js:

'use strict';

var url = require('url');

/**
 * Path to CSS functions list JSON file.
 */
const location = url.fileURLToPath(new url.URL('index.json', (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('index.js', document.baseURI).href))));

module.exports = location;
//# sourceMappingURL=index.js.map

I try embedding the debug code into the above file:

 var url = require('url');
+console.log('document:', document)
+console.log('document.currentScript:', document.currentScript)
+console.log('document.baseURI:', document.baseURI)
 /**
  * Path to CSS functions list JSON file.
  */

Then, run the failed test:

$ npx jest test/unit/view/style-marshal/get-styles.spec.ts
  console.log
    document: Document {
      location: [Getter/Setter],
      [Symbol(DOM SymbolTree)]: SymbolTreeNode {
        parent: null,
        previousSibling: null,
        nextSibling: null,
        firstChild: null,
        lastChild: null,
        childrenVersion: 0,
        childIndexCachedUpTo: null,
        cachedIndex: -1,
        cachedIndexVersion: NaN
      }
    }

      at Object.<anonymous> (node_modules/css-functions-list/cjs/index.js:4:9)

  console.log
    document.currentScript: null

      at Object.<anonymous> (node_modules/css-functions-list/index.js:3:1)

  console.log
    document.baseURI: http://localhost/

      at Object.<anonymous> (node_modules/css-functions-list/index.js:4:1)

 FAIL  test/unit/view/style-marshal/get-styles.spec.ts
...

Unexpectedly, document.baseURI returns http://localhost, so new URL('index.js', document.baseURI) doesn't point to a local file path in the node_modules/css-functions-list directory.

[100terres]

Hi @ybiquitous thank you a lot for taking the time to investigate this futher! 🙂

I've just tested it and has you mention the test works in the node environment.

It feels like that inside a jest test that is using stylelint, we should be running this test in a node environment and not in a jsdom environment (which mimic a browser environment).

[100terres]

Also jsdom does not seem to support esm yet jsdom/jsdom#2475

[ybiquitous]

@100terres Thanks for sharing the knowledge. 👍🏼