build(deps-dev): Bump esbuild from 0.17.17 to 0.18.14

[dependabot]

Bumps esbuild from 0.17.17 to 0.18.14.

Release notes

Sourced from esbuild's releases.

v0.18.14

• Implement local CSS names (#20)

  This release introduces two new loaders called global-css and local-css and two new pseudo-class selectors :local() and :global(). This is a partial implementation of the popular CSS modules approach for avoiding unintentional name collisions in CSS. I'm not calling this feature "CSS modules" because although some people in the community call it that, other people in the community have started using "CSS modules" to refer to something completely different and now CSS modules is an overloaded term.

  Here's how this new local CSS name feature works with esbuild:

  • Identifiers that look like .className and #idName are global with the global-css loader and local with the local-css loader. Global identifiers are the same across all files (the way CSS normally works) but local identifiers are different between different files. If two separate CSS files use the same local identifier .button, esbuild will automatically rename one of them so that they don't collide. This is analogous to how esbuild automatically renames JS local variables with the same name in separate JS files to avoid name collisions.

  • It only makes sense to use local CSS names with esbuild when you are also using esbuild's bundler to bundle JS files that import CSS files. When you do that, esbuild will generate one export for each local name in the CSS file. The JS code can import these names and use them when constructing HTML DOM. For example:

    // app.js
    import { outerShell } from './app.css'
    const div = document.createElement('div')
    div.className = outerShell
    document.body.appendChild(div)

    /* app.css */
    .outerShell {
      position: absolute;
      inset: 0;
    }

    When you bundle this with esbuild app.js --bundle --loader:.css=local-css --outdir=out you'll now get this (notice how the local CSS name outerShell has been renamed):

    // out/app.js
    (() => {
      // app.css
      var outerShell = "app_outerShell";
    // app.js
    var div = document.createElement("div");
    div.className = outerShell;
    document.body.appendChild(div);
    })();

    /* out/app.css */
    .app_outerShell {
      position: absolute;
      inset: 0;
    }

... (truncated)

Changelog

Sourced from esbuild's changelog.

0.18.14

• Implement local CSS names (#20)

  This release introduces two new loaders called global-css and local-css and two new pseudo-class selectors :local() and :global(). This is a partial implementation of the popular CSS modules approach for avoiding unintentional name collisions in CSS. I'm not calling this feature "CSS modules" because although some people in the community call it that, other people in the community have started using "CSS modules" to refer to something completely different and now CSS modules is an overloaded term.

  Here's how this new local CSS name feature works with esbuild:

  • Identifiers that look like .className and #idName are global with the global-css loader and local with the local-css loader. Global identifiers are the same across all files (the way CSS normally works) but local identifiers are different between different files. If two separate CSS files use the same local identifier .button, esbuild will automatically rename one of them so that they don't collide. This is analogous to how esbuild automatically renames JS local variables with the same name in separate JS files to avoid name collisions.

  • It only makes sense to use local CSS names with esbuild when you are also using esbuild's bundler to bundle JS files that import CSS files. When you do that, esbuild will generate one export for each local name in the CSS file. The JS code can import these names and use them when constructing HTML DOM. For example:

    // app.js
    import { outerShell } from './app.css'
    const div = document.createElement('div')
    div.className = outerShell
    document.body.appendChild(div)

    /* app.css */
    .outerShell {
      position: absolute;
      inset: 0;
    }

    When you bundle this with esbuild app.js --bundle --loader:.css=local-css --outdir=out you'll now get this (notice how the local CSS name outerShell has been renamed):

    // out/app.js
    (() => {
      // app.css
      var outerShell = "app_outerShell";
    // app.js
    var div = document.createElement("div");
    div.className = outerShell;
    document.body.appendChild(div);
    })();

    /* out/app.css */
    .app_outerShell {
      position: absolute;
      inset: 0;
    }

... (truncated)

Commits

• af0fe32 publish 0.18.14 to npm
• fd1ddfa css: implement bare :global and :local
• 5c23bee css: match other local/global implementations
• 3dc8372 css: disallow , in :local and :global
• 7db1264 css: add a global-css loader with global symbols
• 9ff3860 css: source map tests can now be more accurate
• feea007 css: emit mappings for calc reductions
• e3f6eb8 css: emit mappings for tokens
• 9410725 css: emit mappings for subclass selectors
• c6e14ef css: emit mappings for nesting selectors
• Additional commits viewable 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 👍🏾

[flexdevelopment]

lgtm 👍🏾

[flexdevelopment]

lgtm 👍🏾

[dependabot]

Superseded by #202.

[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.