FIDEFE-4626 - Add HCM media queries to built CSS

[hannajones]

This patch adds support for prefers-contrast and forced-colors media queries by creating and using a custom formatter for our CSS.

[hannajones]

I left in the "default" name for now even though it sounds like we might not want that long term. If/when we decide on that we can have a separate task to handle this in a different way.

[hannajones]

Unfortunately it seems like we still need this even after switching to value as an object because we still have the same problem where style-dictionary doesn't parse token names like text-color-deemphasized if it's nested under text-color 😞

Strictly speaking the default here isn't necessary anymore, but I kept it for consistency for now

[TGiles]

Code changes look good to me, thanks for that! I'm getting test failures though, is that expected?

$ npm run test

> design-system@1.0.0 test
> jest --testPathPattern=tests

  console.log

    css

      at Object.buildPlatform (node_modules/style-dictionary/lib/buildPlatform.js:41:11)
          at Array.forEach (<anonymous>)

  console.log
    ✔︎ tests/build/css/tokens-shared.css

      at buildFile (node_modules/style-dictionary/lib/buildFile.js:114:13)
          at Array.forEach (<anonymous>)
          at Array.forEach (<anonymous>)

 FAIL  tests/config.test.js
  generated CSS
    css/variables/hcm format
      √ should contain three blocks of CSS, including media queries (3 ms)
      × should produce the expected base CSS rules (6 ms)
      √ should produce the expected prefers-contrast CSS rules
      √ should produce the expected forced-colors CSS rules

  ● generated CSS › css/variables/hcm format › should produce the expected base CSS rules

    expect(received).toStrictEqual(expected) // deep equality

    - Expected  - 1
    + Received  + 1

    @@ -1,10 +1,10 @@
      Object {
        "--border-radius-circle": "9999px",
        "--border-radius-medium": "8px",
        "--border-radius-small": "4px",
    -   "--border-width-default": "1px",
    +   "--border-width": "1px",
        "--color-background-critical": "light-dark(var(--color-red-05), var(--color-red-80))",
        "--color-background-information": "light-dark(var(--color-blue-05), var(--color-blue-80))",
        "--color-background-success": "light-dark(var(--color-green-05), var(--color-yellow-80))",
        "--color-background-warning": "light-dark(var(--color-yellow-05), var(--color-blue-80))",
        "--color-black-a10": "rgba(0, 0, 0, 0.1)",

      114 |         }, {});
      115 |
    > 116 |         expect(formattedCSS).toStrictEqual(FIXTURE_BY_QUERY[queryName]);
          |                              ^
      117 |       });
      118 |     });
      119 |   });

      at Object.toStrictEqual (tests/config.test.js:116:30)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 3 passed, 4 total
Snapshots:   0 total
Time:        0.595 s, estimated 2 s
Ran all test suites matching /tests/i.

[hannajones]

Code changes look good to me, thanks for that! I'm getting test failures though, is that expected?

Whoops missed that, thanks! Updated the JSON to have fewer -default references since we're moving away from that + updated the test fixtures 👍🏻

[TGiles]

Thanks for the patch!

[mstriemer]

This looks awesome, could land as is but I've got a few comments (should be filed if not fixed here)

I also noticed that the tokens-shared.css doesn't match what I get when I run npm run build - --border-width-default becomes --border-width

Also noticed the output from running the build is shown in the test output:

  console.log

    css

      at Object.buildPlatform (node_modules/style-dictionary/lib/buildPlatform.js:41:11)
          at Array.forEach (<anonymous>)

  console.log
    ✔︎ tests/build/css/tokens-shared.css

      at buildFile (node_modules/style-dictionary/lib/buildFile.js:114:13)
          at Array.forEach (<anonymous>)
          at Array.forEach (<anonymous>)

Maybe we should file to disable that when testing (hopefully that's possible)

[hannajones]

I also noticed that the tokens-shared.css doesn't match what I get when I run npm run build - --border-width-default becomes --border-width

D'oh I updated that after Tim's comment but forgot to commit the newer version of the built CSS 😅 It should just be border-width everywhere now

Also noticed the output from running the build is shown in the test output
Maybe we should file to disable that when testing (hopefully that's possible)

Looks like SD doesn't support log levels yet, but I was able to turn it off by just running the Jest tests with a --silent flag. Seems like something we'll have to re-visit if/when we convert these to mochitests anyway.