Blog post and docs updates for v2.6.0

src/blog/v2-6-0/v2-6-0.md

@@ -0,0 +1,81 @@
+---
+layout: layout.njk
+title: Parcel v2.6.0
+eleventyNavigation:
+  key: blog-parcel-2-6-0
+  title: Parcel v2.6.0
+date: 2022-05-25
+---
+
+We're happy to announce Parcel v2.6.0! This release includes new features including an error overlay for React, support for source maps in HMR, and locally scoped variables in CSS modules, along with lots of bug fixes and improvements.
+
+## React error overlay
+
+Parcel has included an in-browser overlay for build errors for a long time, but when a runtime error occurred, it was only logged to the console. As popularized by Create React App, Parcel now also includes a runtime error overlay for React, which shows beautiful stack traces with highlighted code frames that automatically omit React framework internals.
+
+![react error overlay](react-error-overlay.png)
+
+These code frames use source maps to show you your original code, but you can also toggle to show the compiled output if you like, or expand the collapsed framework internal stack frames as well. This is all provided by the same package that Create React App uses. Thanks to the CRA team for building such a great UI for errors!
+
+## Launch your editor right from an error
+
+Both the React runtime error overlay and Parcel's build error overlay now support clicking on file names or line numbers in code frames to jump straight to that line in your code editor! Parcel automatically detects which editor you're using from a list of over 15 [supported editors](https://github.com/yyx990803/launch-editor#supported-editors), based on what processes are already running or installed. This makes it super easy to jump between debugging in browser to the corresponding code in your editor.
+
+## HMR source maps
+
+Parcel has supported both HMR and source maps for a long time, but due to the way HMR was implemented, they didn't work together. Now, they do! This means after making changes to your code and without reloading the browser, error stack traces and console logs now show the correct line and column of your source code rather than the compiled output. This makes debugging a lot easier!
+
+For background, Parcel implements HMR updates using a web socket, which receives the compiled code for any files that you update. This code was previously evaluated using `new Function()`, which allowed us a very fast way to update modules in place without reloading an entire script tag. Unfortunately, browsers do not have good support for source maps in this API. Now we use `eval` instead by default, which has support for source maps in Chrome and Firefox. However, Safari still does not support source maps in `eval`, so we now have a fallback of loading a `<script>` tag over HTTP from the dev server to work around this. As a side benefit, if you have a content security policy that rejects eval in development, we will also automatically fall back to loading over HTTP. This should work seamlessly, it's just a little bit slower than the eval path.
+
+## Locally scoped variables in CSS modules
+
+CSS modules allow you to locally scope identifiers like class names, id selectors, `@keyframes` and more within a CSS file, so that they do not conflict with identifiers in other files. However, until now, this did not include CSS variables and other dashed identifiers (e.g. `--foo`). This meant that even when using CSS modules, variable names defined in one file could clash with variables in another.
+
+Parcel now offers an opt-in way to locally scope CSS variables and other dashed identifiers (e.g. `@font-palette-values`). When enabled, Parcel will rename CSS variables to include a hash of the filename they are in so that they don't conflict with other files. If you do need to reference a variable defined in another file, there is a new CSS syntax extension to do so:
+
+```css
+.button {
+  background: var(--accent-color from "./vars.module.css");
+}
+```
+
+Declaring dependencies between files explicitly also enables another cool feature: **Parcel can now tree shake unused CSS variables**! Just like with JavaScript tree shaking, Parcel tracks which CSS classes, ids, `@keyframes`, and now variables are used within each file, and automatically removes unused declarations. This is only possible with CSS modules because symbols are declared and referenced locally rather than globally. This can be a really useful feature for design systems and other libraries that have a lot of CSS variables, when perhaps only some of the available components are actually used in an application.
+
+Check out the [updated documentation](/languages/css/#local-css-variables) to learn more about this feature.
+
+## Custom CSS modules naming patterns
+
+Parcel now also supports a way to configure the naming pattern used when compiling CSS modules. By default, Parcel prefixes each class name with a hash of the filename it is defined within. Now, you can define custom naming patterns by configuring `@parcel/transformer-css` in your package.json.
+
+```json
+{
+  "@parcel/transformer-css": {
+    "cssModules": {
+      "pattern": "my-company-[name]-[hash]-[local]"
+    }
+  }
+}
+```
+
+Check out [the docs](/languages/css/#custom-naming-patterns) to learn more.
+
+## Globs in npm packages
+
+The `@parcel/resolver-glob` plugin allows you to import multiple files at once using glob specifiers. Previously, it only supported local files within your project, but now you can import globs from npm packages as well.
+
+```js
+import * as locales from '@company/pkg/i18n/*.js';
+
+console.log(locales.en.message);
+````
+
+See the [documentation](/features/dependency-resolution/#glob-specifiers) for more details.
+
+## And more!
+
+Parcel v2.6.0 includes a bunch of other smaller features, bug fixes, and improvements including support for `compilerOptions` and `<script setup>` for Vue, support for more image formats, updates to SWC, improved Elm error messages, and more. Check out the full [release notes](https://github.com/parcel-bundler/parcel/releases/tag/v2.6.0) for more details.
+
+- [GitHub](https://github.com/parcel-bundler/parcel)
+- [Discord community](https://discord.gg/XSCzqGRuvr)
+- [Support us on Open Collective](https://opencollective.com/parcel)
+

src/features/cli.md

@@ -98,12 +98,13 @@ These parameters are supported by all Parcel commands.
 | Format              | Description                                                                           |
 | ------------------- | ------------------------------------------------------------------------------------- |
 | `-p, --port <port>` | The port for the dev server and HMR (the default port is `process.env.PORT` or 1234). See [Dev server](/features/development/#dev-server).  |
-| `--no-hmr`          | Disables [hot reloading](/features/development/#hot-reloading).                       |
-| `--hmr-port <port>` | The port for the HMR server (defaults to the dev server's port). See [Hot reloading](/features/development/#hot-reloading).                       |
 | `--host <host>`     | Sets the host to listen on, defaults to listening on all interfaces                   |
 | `--https`           | Runs the dev server and HMR server over [HTTPS](/features/development/#https).        |
 | `--cert <path>`     | Path to a certificate to use. See [HTTPS](/features/development/#https).              |
 | `--key <path>`      | Path to a private key to use. See [HTTPS](/features/development/#https).              |
+| `--no-hmr`          | Disables [hot reloading](/features/development/#hot-reloading).                       |
+| `--hmr-port <port>` | The port for the HMR server (defaults to the dev server's port). See [Hot reloading](/features/development/#hot-reloading).     
+| `--hmr-host <host>` | The host for the HMR server (defaults to the dev server's host). See [Hot reloading](/features/development/#hot-reloading).                       |
 | `--no-autoinstall`  | Disables [auto install](/features/development/#auto-install).                         |
 | `--watch-for-stdin` | Stop Parcel once stdin is closed.                                                     |
 

src/features/dependency-resolution.md

@@ -221,6 +221,14 @@ async function doSomething() {
 }
 ```
 
+Globs may also be used to import files from npm packages:
+
+```js
+import * as locales from '@company/pkg/i18n/*.js';
+
+console.log(locales.en.message);
+```
+
 Glob imports also work with CSS:
 
 ```css

src/languages/typescript.md

@@ -13,7 +13,7 @@ eleventyNavigation:
 
 Parcel automatically transpiles TypeScript whenever you use a `.ts` or `.tsx` file. In addition to stripping the types to convert TypeScript to JavaScript, Parcel also compiles modern language features like classes and async await as necessary, [according to your browser targets](/languages/javascript/#browser-compatibility). It also transpiles [JSX](/languages/javascript/#jsx) automatically. See the [Transpilation](/languages/javascript/#transpilation) section of the JavaScript docs for more details.
 
-A `tsconfig.json` file can be used to configure some aspects of the transpilation. Currently, JSX options are supported, as well as the `experimentalDecorators` option. See the [TSConfig reference](https://www.typescriptlang.org/tsconfig) for details.
+A `tsconfig.json` file can be used to configure some aspects of the transpilation. Currently, JSX options are supported, as well as the `experimentalDecorators` and `useDefineForClassFields` options. See the [TSConfig reference](https://www.typescriptlang.org/tsconfig) for details.
 
 {% sample %}
 {% samplefile "tsconfig.json" %}