Skip to content
Changelog Hub

astro 3.0.0-beta.1

npm / astro / 3.0.0-beta.1 source ↗

Major Changes

  • #7952 3c3100851 Thanks @astrobot-houston! - Remove support for Astro.__renderMarkdown which is used by @astrojs/markdown-component.

    The <Markdown /> component was deprecated in Astro v1 and is completely removed in v3. This integration must now be removed from your project.

    As an alternative, you can use community packages that provide a similar component like https://github.com/natemoo-re/astro-remote instead.

  • #8019 34cb20021 Thanks @bluwy! - Remove backwards-compatible kebab-case transform for camelCase CSS variable names passed to the style attribute. If you were relying on the kebab-case transform in your styles, make sure to use the camelCase version to prevent missing styles. For example:

    ---
const myValue = 'red';
---

<!-- input -->
<div style={{ '--myValue': myValue }}></div>

<!-- output (before) -->
<div style="--my-value:var(--myValue);--myValue:red"></div>

<!-- output (after) -->
<div style="--myValue:red"></div>

    <style>
  div {
-   color: var(--my-value);
+   color: var(--myValue);
  }
</style>

  • #7893 7bd1b86f8 Thanks @ematipico! - Implements a new scope style strategy called "attribute". When enabled, styles are applied using data-* attributes.

    The default value of scopedStyleStrategy is "attribute".

    If you want to use the previous behaviour, you have to use the "where" option:

    import { defineConfig } from 'astro/config';

export default defineConfig({
+    scopedStyleStrategy: 'where',
});

  • #7924 519a1c4e8 Thanks @matthewp! - Astro's JSX handling has been refactored with better support for each framework.

    Previously, Astro automatically scanned your components to determine which framework-specific transformations should be used. In practice, supporting advanced features like Fast Refresh with this approach proved difficult.

    Now, Astro determines which framework to use with include and exclude config options where you can specify files and folders on a per-framework basis. When using multiple JSX frameworks in the same project, users should manually control which files belong to each framework using the include and exclude options.

    export default defineConfig({
  // The `include` config is only needed in projects that use multiple JSX frameworks;
  // if only using one no extra config is needed.
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});

  • #7878 0f637c71e Thanks @bluwy! - The value of import.meta.env.BASE_URL, which is derived from the base option, will no longer have a trailing slash added by default or when trailingSlash: "ignore" is set. The existing behavior of base in combination with trailingSlash: "always" or trailingSlash: "never" is unchanged.

    If your base already has a trailing slash, no change is needed.

    If your base does not have a trailing slash, add one to preserve the previous behaviour:

    // astro.config.mjs
- base: 'my-base',
+ base: 'my-base/',

Minor Changes

  • #8012 866ed4098 Thanks @ematipico! - Add a new astro/errors module. Developers can import AstroUserError, and provide a message and an optional hint

Patch Changes