Build & Test Failures

[SE2Dev]

The current version of the plugin fails to build as-is. Upon resolving the build failures, tests do not pass due to apparent changes in the way that modules are handled.

See the test log below:

PASS test/nativeFixtures/stylesAttribute.test.js
PASS test/mixedFixtures/stylesAttribute.test.js
PASS test/globalFixtures/keyframes.test.js
PASS test/scopedFixtures/stylesAttribute.test.js
FAIL test/scopedFixtures/stylesImports.test.js
  ● Scoped Mode Imports › Import all classes from stylesheet

    expect(received).toBe(expected) // Object.is equality

    - Expected  - 4
    + Received  + 2

      <script>
    -       const css = {"error":"error-123","success":"success-123"};
    +       import css from './assets/class.module.css';
          </script>
          <div class={css.error}>Error</div>
    -     <div class={css.success}>Success</div><style module>
    - .error-123 { color:red }
    - .success-123 { color:green }</style>
    +     <div class={css.success}>Success</div>

      53 |     });
      54 | 
    > 55 |     expect(output).toBe(expectedOutput);
         |                    ^
      56 |   });
      57 | 
      58 |   test('Destructuring imports', async () => {

      at Object.<anonymous> (test/scopedFixtures/stylesImports.test.js:55:20)
      at processTicksAndRejections (node:internal/process/task_queues:95:5)

  ● Scoped Mode Imports › Destructuring imports

    expect(received).toBe(expected) // Object.is equality

    - Expected  - 4
    + Received  + 2

      <script>
    -       const { error, success } = {"error":"error-123","success":"success-123"};
    +       import { error, success } from './assets/class.module.css';
          </script>
          <div class={error}>Error</div>
    -     <div class={success}>Success</div><style module>
    - .error-123 { color:red }
    - .success-123 { color:green }</style>
    +     <div class={success}>Success</div>

      82 |     });
      83 | 
    > 84 |     expect(output).toBe(expectedOutput);
         |                    ^
      85 |   });
      86 | 
      87 |   test('multiple selectors imported', async () => {

      at Object.<anonymous> (test/scopedFixtures/stylesImports.test.js:84:20)
      at processTicksAndRejections (node:internal/process/task_queues:95:5)

  ● Scoped Mode Imports › Class directives with default specifier

    expect(received).toBe(expected) // Object.is equality

    - Expected  - 5
    + Received  + 3

      <script>
    -       const style = {"error":"error-123","success":"success-123"};
    +       import style from './assets/class.module.css';
          </script>
    -     <div class:error-123={true}>Error</div>
    +     <div class:style.error={true}>Error</div>
    -     <div class:success-123={true}>Success</div><style module>
    - .error-123 { color:red }
    - .success-123 { color:green }</style>
    +     <div class:style.success={true}>Success</div>

      139 |     });
      140 | 
    > 141 |     expect(output).toBe(expectedOutput);
          |                    ^
      142 |   });
      143 | 
      144 |   test('Imports into existing <style>', async () => {

      at Object.<anonymous> (test/scopedFixtures/stylesImports.test.js:141:20)
      at processTicksAndRejections (node:internal/process/task_queues:95:5)

PASS test/globalFixtures/bindVariable.test.js
PASS test/nativeFixtures/stylesImports.test.js
PASS test/globalFixtures/template.test.js
PASS test/globalFixtures/options.test.js

Test Suites: 1 failed, 8 passed, 9 total
Tests:       3 failed, 51 passed, 54 total
Snapshots:   0 total
Time:        1.719 s, estimated 2 s
Ran all test suites.

[micantoine]

How did you run those tests? Could it come from your settings?
I run the tests and they are all passing correctly.

[SE2Dev]

Using Node v18.16.1 in a fresh dev container my process is:

1. Clone the repo
2. npm install
3. npm run build (which fails)
4. Manually resolve the build failures
5. npm run build (which now succeeds)
6. npm run test (which fails as seen in my comment above)

[micantoine]

It seems that the issue is related to the stylesheet import. Could be that the path is not being found.

What container are you using? Plus, what was failing on the build?