withastro/astro astro@2.4.0

on GitHub

Minor Changes

• #6990 818252acd Thanks @Princesseuh! - Generated optimized images are now cached inside the node_modules/.astro/assets folder. The cached images will be used to avoid doing extra work and speed up subsequent builds.

• #6659 80e3d4d3d Thanks @lilnasy! - Implement Inline Stylesheets RFC as experimental

• #6771 3326492b9 Thanks @matthewp! - Implements a new class-based scoping strategy

  This implements the Scoping RFC, providing a way to opt in to increased style specificity for Astro component styles.

  This prevents bugs where global styles override Astro component styles due to CSS ordering and the use of element selectors.

  To enable class-based scoping, you can set it in your config:

  import { defineConfig } from 'astro/config';
  
  export default defineConfig({
    scopedStyleStrategy: 'class',
  });

  Note that the 0-specificity :where pseudo-selector is still the default strategy. The intent is to change 'class' to be the default in 3.0.

• #6959 cac4a321e Thanks @bluwy! - Support <Code inline /> to output inline code HTML (no pre tag)

• #6721 831b67cdb Thanks @ematipico! - Implements a new experimental middleware in Astro.

  The middleware is available under the following experimental flag:

  export default defineConfig({
    experimental: {
      middleware: true,
    },
  });

  Or via CLI, using the new argument --experimental-middleware.

  Create a file called middleware.{js,ts} inside the src folder, and
  export a onRequest function.

  From astro/middleware, use the defineMiddleware utility to take advantage of type-safety, and use
  the sequence utility to chain multiple middleware functions.

  Example:

  import { defineMiddleware, sequence } from 'astro/middleware';
  
  const redirects = defineMiddleware((context, next) => {
    if (context.request.url.endsWith('/old-url')) {
      return context.redirect('/new-url');
    }
    return next();
  });
  
  const minify = defineMiddleware(async (context, next) => {
    const repsonse = await next();
    const minifiedHtml = await minifyHtml(response.text());
    return new Response(minifiedHtml, {
      status: 200,
      headers: response.headers,
    });
  });
  
  export const onRequest = sequence(redirects, minify);

• #6932 49514e4ce Thanks @bluwy! - Upgrade shiki to v0.14.1. This updates the shiki theme colors and adds the theme name to the pre tag, e.g. <pre class="astro-code github-dark">.

Patch Changes

• #6973 0883fd487 Thanks @matthewp! - Ensure multiple cookies set in dev result in multiple set-cookie headers

• Updated dependencies [49514e4ce]:

  • @astrojs/markdown-remark@2.2.0