#unwanted inline animation css in production build

15 messages · Page 1 of 1 (latest)

timid folioBOT
#

Hi @vital sable. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The inline animation CSS you're seeing in your production build is related to Astro's View Transitions feature. Even though you're not using the ClientRouter component, this CSS is being included by default in Astro v3.0 and later.

This behavior is due to a change in the default value of the inlineStylesheets configuration option in Astro v3.0. As explained in the Upgrade to Astro v3 guide:

Astro v3.0 changes the default value of inlineStylesheets to "auto". Stylesheets smaller than ViteConfig.build.assetsInlineLimit (default: 4kb) are inlined by default. Otherwise, project styles are sent in external stylesheets.

To prevent these inline styles from appearing in your production build, you can change the inlineStylesheets configuration option to "never". Here's how you can do this in your astro.config.mjs file:

import { defineConfig } from "astro/config";

export default defineConfig({
  build: {
    inlineStylesheets: "never"
  }
})

This configuration will ensure that all stylesheets are sent as external files, rather than being inlined into the HTML.

For more information about production builds and stylesheet bundling in Astro, you can refer to the Styles and CSS guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vital sable Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vital sable
#

@timid folio that css shouldnt even be in the project

timid folioBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

You're right, and I apologize for the confusion in my previous answer. The CSS you're seeing shouldn't be in your project if you're not using View Transitions or the ClientRouter component.

The presence of this CSS in your production build without explicitly using View Transitions is unexpected behavior. This could be a bug or an unintended side effect in Astro.

To address this issue, you have a few options:

  1. First, double-check that you haven't accidentally included the <ViewTransitions /> or <ClientRouter /> component somewhere in your project, perhaps in a layout file.

  2. If you're certain you're not using View Transitions, you should report this as a bug to the Astro team. You can do this by opening an issue on the Astro GitHub repository.

  3. As a temporary workaround, you could try explicitly disabling View Transitions in your astro.config.mjs file:

    import { defineConfig } from 'astro/config';

export default defineConfig({
  transitions: false,
});

    However, note that this configuration option is not documented in the official Astro documentation, so it may not work as expected.

If this issue persists after trying these steps, it would be best to seek help from the Astro community or maintainers directly, as this behavior is not normal or expected for projects not using View Transitions.

I apologize again for the confusion, and thank you for bringing this to attention. It's an important issue that should be addressed if it's occurring in projects not using View Transitions.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vital sable Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vital sable
#

@timid folio transitions doesnt exist in v5 config?

timid folioBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

You're correct, and I apologize for the confusion in my previous response. The transitions option in the Astro configuration is indeed not available in Astro v5.

In Astro v5, the View Transitions API and the <ClientRouter /> component (previously named <ViewTransitions />) are available by default without needing any configuration flags. This change was introduced as part of the breaking changes in Astro v5.

According to the Upgrade to Astro v5 guide:

"The following experimental flags have been removed in Astro v5.0 and these features are available for use:

  • env
  • serverIslands"

The guide also mentions that some experimental flags, including those related to View Transitions, have been removed and are now the default behavior in Astro v5.0.

If you're experiencing unwanted View Transitions CSS in your project without explicitly using the <ClientRouter /> component, this could be an unintended side effect or a bug in Astro v5. In this case, the best course of action would be to report this issue to the Astro team by opening an issue on the Astro GitHub repository.

I apologize again for the incorrect information in my previous response. Thank you for bringing this to my attention, as it helps ensure accurate information is provided.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vital sable Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vital sable
#

@timid folio anything else that might be causing it? I have no view transitions

"dependencies": {
    "@astrojs/netlify": "^6.2.1",
    "@sendgrid/mail": "^8.1.4",
    "@tailwindcss/vite": "^4.0.2",
    "astro": "^5.3.1",
    "astro-cloudinary": "^1.3.0",
    "astro-purgecss": "^5.2.0",
    "astro-remove-whitespace": "^1.0.1",
    "astro-seo": "^0.8.4",
    "cssnano": "^7.0.6",
    "dayjs": "^1.11.13",
    "sass": "^1.83.4",
    "tailwindcss": "^4.0.5",
    "vite-plugin-tailwindcss-cleaner": "^1.1.0"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.16",
    "autoprefixer": "^10.4.20",
    "prettier": "^3.4.2",
    "prettier-plugin-astro": "^0.14.1",
    "prettier-plugin-tailwindcss": "^0.6.11"
  },
  "overrides": {
    "astro-cloudinary": {
      "astro": "^5.3.0"
    },
    "astro-remove-whitespace": {
      "astro": "^5.3.0"
    }
  }
timid folioBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Based on the package.json dependencies you've shared, there doesn't appear to be any direct cause for the unwanted View Transitions CSS in your production build. None of the listed packages are directly related to Astro's View Transitions feature.

However, there are a few things to consider:

  1. Astro Version: You're using Astro v5.3.1, which includes View Transitions by default. As mentioned in the View Transitions guide, "By default, every page will use regular, full-page, browser navigation. You must opt in to view transitions and can use them either on a per-page basis or site-wide."

  2. Astro Integrations: Some of your dependencies are Astro integrations (like @astrojs/netlify, astro-cloudinary, astro-purgecss, astro-remove-whitespace, astro-seo). While none of these should directly cause View Transitions CSS to be included, it's worth checking if any of them have side effects or dependencies that might be triggering this behavior.

  3. CSS Optimization: You're using astro-purgecss and vite-plugin-tailwindcss-cleaner for CSS optimization. It's possible that these tools are not correctly identifying and removing the unused View Transitions CSS.

Given that you're certain you're not using View Transitions, and there's no obvious cause in your dependencies, this situation likely represents unexpected behavior in Astro v5.3.1 or one of its integrations.

To troubleshoot further:

  1. Try creating a minimal reproduction of your project without any integrations or plugins, just using Astro core. If the issue persists, it's likely a bug in Astro itself.

  2. Check your Astro config file (astro.config.mjs) for any settings that might be enabling View Transitions inadvertently.

#

  1. Inspect your build output or use browser developer tools to identify where exactly this CSS is coming from (e.g., is it in a specific component, or part of the main bundle?).

  2. If the issue persists after these steps, it would be best to report this as a potential bug to the Astro team by opening an issue on the Astro GitHub repository. Include details about your setup, the steps you've taken to troubleshoot, and a minimal reproduction if possible.

Remember, the Astro community and maintainers are usually very responsive and helpful with such issues, so don't hesitate to reach out to them directly if this problem continues.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: