build(deps-dev): Bump esbuild from 0.17.9 to 0.17.10

[dependabot]

Bumps esbuild from 0.17.9 to 0.17.10.

Release notes

Sourced from esbuild's releases.

v0.17.10

• Update esbuild's handling of CSS nesting to match the latest specification changes (#1945)

  The syntax for the upcoming CSS nesting feature has recently changed. The @nest prefix that was previously required in some cases is now gone, and nested rules no longer have to start with & (as long as they don't start with an identifier or function token).

  This release updates esbuild's pass-through handling of CSS nesting syntax to match the latest specification changes. So you can now use esbuild to bundle CSS containing nested rules and try them out in a browser that supports CSS nesting (which includes nightly builds of both Chrome and Safari).

  However, I'm not implementing lowering of nested CSS to non-nested CSS for older browsers yet. While the syntax has been decided, the semantics are still in flux. In particular, there is still some debate about changing the fundamental way that CSS nesting works. For example, you might think that the following CSS is equivalent to a .outer .inner button { ... } rule:

  .inner button {
    .outer & {
      color: red;
    }
  }

  But instead it's actually equivalent to a .outer :is(.inner button) { ... } rule which unintuitively also matches the following DOM structure:

  <div class="inner">
    <div class="outer">
      <button></button>
    </div>
  </div>

  The :is() behavior is preferred by browser implementers because it's more memory-efficient, but the straightforward translation into a .outer .inner button { ... } rule is preferred by developers used to the existing CSS preprocessing ecosystem (e.g. SASS). It seems premature to commit esbuild to specific semantics for this syntax at this time given the ongoing debate.

• Fix cross-file CSS rule deduplication involving url() tokens (#2936)

  Previously cross-file CSS rule deduplication didn't handle url() tokens correctly. These tokens contain references to import paths which may be internal (i.e. in the bundle) or external (i.e. not in the bundle). When comparing two url() tokens for equality, the underlying import paths should be compared instead of their references. This release of esbuild fixes url() token comparisons. One side effect is that @font-face rules should now be deduplicated correctly across files:

  /* Original code */
  @import "data:text/css, \
    @import 'http://example.com/style.css'; \
    @font-face { src: url(http://example.com/font.ttf) }";
  @import "data:text/css, \
    @font-face { src: url(http://example.com/font.ttf) }";
  /* Old output (with --bundle --minify) */
  @​import"http://example.com/style.css";@​font-face{src:url(http://example.com/font.ttf)}@font-face{src:url(http://example.com/font.ttf)}
  /* New output (with --bundle --minify) */
  @​import"http://example.com/style.css";@​font-face{src:url(http://example.com/font.ttf)}

Changelog

Sourced from esbuild's changelog.

0.17.10

• Update esbuild's handling of CSS nesting to match the latest specification changes (#1945)

  The syntax for the upcoming CSS nesting feature has recently changed. The @nest prefix that was previously required in some cases is now gone, and nested rules no longer have to start with & (as long as they don't start with an identifier or function token).

  This release updates esbuild's pass-through handling of CSS nesting syntax to match the latest specification changes. So you can now use esbuild to bundle CSS containing nested rules and try them out in a browser that supports CSS nesting (which includes nightly builds of both Chrome and Safari).

  However, I'm not implementing lowering of nested CSS to non-nested CSS for older browsers yet. While the syntax has been decided, the semantics are still in flux. In particular, there is still some debate about changing the fundamental way that CSS nesting works. For example, you might think that the following CSS is equivalent to a .outer .inner button { ... } rule:

  .inner button {
    .outer & {
      color: red;
    }
  }

  But instead it's actually equivalent to a .outer :is(.inner button) { ... } rule which unintuitively also matches the following DOM structure:

  <div class="inner">
    <div class="outer">
      <button></button>
    </div>
  </div>

  The :is() behavior is preferred by browser implementers because it's more memory-efficient, but the straightforward translation into a .outer .inner button { ... } rule is preferred by developers used to the existing CSS preprocessing ecosystem (e.g. SASS). It seems premature to commit esbuild to specific semantics for this syntax at this time given the ongoing debate.

• Fix cross-file CSS rule deduplication involving url() tokens (#2936)

  Previously cross-file CSS rule deduplication didn't handle url() tokens correctly. These tokens contain references to import paths which may be internal (i.e. in the bundle) or external (i.e. not in the bundle). When comparing two url() tokens for equality, the underlying import paths should be compared instead of their references. This release of esbuild fixes url() token comparisons. One side effect is that @font-face rules should now be deduplicated correctly across files:

  /* Original code */
  @import "data:text/css, \
    @import 'http://example.com/style.css'; \
    @font-face { src: url(http://example.com/font.ttf) }";
  @import "data:text/css, \
    @font-face { src: url(http://example.com/font.ttf) }";
  /* Old output (with --bundle --minify) */
  @​import"http://example.com/style.css";@​font-face{src:url(http://example.com/font.ttf)}@font-face{src:url(http://example.com/font.ttf)}
  /* New output (with --bundle --minify) */
  @​import"http://example.com/style.css";@​font-face{src:url(http://example.com/font.ttf)}

Commits

• 996d400 publish 0.17.10 to npm
• 16e0988 update css nesting stuff to match the latest spec
• 47e54fe fix #2936: compare url() tokens by import record
• See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

---

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

[flexdevelopment]

lgtm 👍🏾

[github-actions]

This pull request has been automatically locked since there has not been any recent
activity after it was closed. Please open a new issue for related bugs or features. Be
sure to reference this issue.