Css animations entryStyle doesn't work with nextjs app folder

[savelichalex]

Current Behavior

entryStyle class added within insertStyleRules has !important modificator. All other classes are present as expected and add in a proper way (tried with debug="verbose" on a component).

tamagui.config.ts

import { createMedia } from '@tamagui/react-native-media-driver';
import { shorthands } from '@tamagui/shorthands';
import { tokens, themes } from '@tamagui/themes';
import { createTamagui, createFont } from 'tamagui';

import { animations } from './src/tamagui/animations';

const tamaConf = createTamagui({
    disableSSR: false,
    tokens,
    shorthands,
    themes,
    fonts: {
        bodyFont: createFont({
            family: 'System',
            size: {
                true: 16,
            },
        }),
    },
    animations,
    media: createMedia({
        // for site
        xl: { maxWidth: 1650 },
        // between lg and xl - for studio usage
        lg_xl: { maxWidth: 1400 },
        lg: { maxWidth: 1280 },
        md: { maxWidth: 1020 },
        sm: { maxWidth: 800 },
        xs: { maxWidth: 660 },
        xxs: { maxWidth: 390 },
        gtXs: { minWidth: 660 + 1 },
        gtSm: { minWidth: 800 + 1 },
        gtMd: { minWidth: 1020 + 1 },
        gtLg: { minWidth: 1280 + 1 },
        gtXl: { minWidth: 1650 + 1 },
        pointerFine: { pointer: 'fine' },
    }),
});

export type Conf = typeof tamaConf;

declare module 'tamagui' {
    interface TamaguiCustomConfig extends Conf {}

    interface TypeOverride {
        groupNames(): 'card' | 'takeoutBody';
    }
}

export default tamaConf;

next.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable tsdoc/syntax */
const { setupDevPlatform } = require('@cloudflare/next-on-pages/next-dev');
const { withTamagui } = require('@tamagui/next-plugin');

module.exports = async function createConfig(_name, { defaultConfig }) {
    // Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
    // (when running the application with `next dev`), for more information see:
    // https://github.com/cloudflare/next-on-pages/blob/5712c57ea7/internal-packages/next-dev/README.md
    if (process.env.NODE_ENV === 'development') {
        await setupDevPlatform();
    }

    /** @type {import('next').NextConfig} */
    const nextConfig = {
        ...defaultConfig,
        experimental: {
            esmExternals: true,
            typedRoutes: true,
        },
    };

    const tamaguiPlugin = withTamagui({
        appDir: true,
        config: './tamagui.config.ts',
        // build-time generate CSS styles for better performance
        // we recommend only using this for production so you get reloading during dev mode
        outputCSS: process.env.NODE_ENV === 'production' ? './public/tamagui.css' : null,
        // Exclude react-native-web modules to lighten bundle
        // excludeReactNativeWebExports: ['Switch', 'ProgressBar', 'Picker'],
        disableFontSupport: true,
    });

    return {
        ...nextConfig,
        ...tamaguiPlugin(nextConfig),
    };
};

AppTamaguiProvider.ts

'use client';

import { useServerInsertedHTML } from 'next/navigation';
import { useEffect, type PropsWithChildren } from 'react';
import { TamaguiProvider } from 'tamagui';

import config from '../../../tamagui.config';

interface Props extends PropsWithChildren {}

export function AppTamaguiProvider({ children }: Props) {
    useServerInsertedHTML(() => {
        return (
            <style
                dangerouslySetInnerHTML={{
                    // the first time this runs you'll get the full CSS including all themes
                    // after that, it will only return CSS generated since the last call
                    __html: config.getCSS({
                        // if you are using "outputCSS" option, you should use this "exclude"
                        // if not, then you can leave the option out
                        exclude: process.env.NODE_ENV === 'production' ? 'design-system' : null,
                    }),
                }}
            />
        );
    });

    // useEffect to bypass a class removal in TamaguiProvider when disableSSR provided
    useEffect(() => {
        document.documentElement.classList.add('t_unmounted');
    }, []);

    return (
        <TamaguiProvider
            // @ts-ignore
            config={config}
            defaultTheme="light"
            disableInjectCSS
        >
            {children}
        </TamaguiProvider>
    );
}

I have tried different ways to add t_unmounted, tried to change selector to :root in pseudoDescriptors, so it's not the case.

Expected Behavior

Entry css animations should work

Tamagui Version

1.95.1

Platform (Web, iOS, Android)

web (nextjs app dir with ssr)

Reproduction

make a new Nextjs app with the app dir and use configs I provided

System Info

No response

[ehxxn]

could you create a re-production, using one of Tamagui starters
this way we will check the issue faster

[jonsherrard]

Also experiencing this FWIW with the Moti driver. Will try and make a repro-repo later today.

[ahmedu007]

#2660 has some repro steps