Is there a way to prevent injecting vike-react integration CSS?

[teddybradford]

I'm using Vike with vike-react for SSG. I noticed that builds include this in the head:

<link rel="stylesheet" type="text/css" href="/assets/static/vike-react-b64a028b.BcWtY8Ol.css">

But I don't use that CSS for anything. I couldn't find a configuration in the docs to turn this off. Is it possible?

Here's my renderer/+config.ts:

import type { Config } from 'vike/types';

function getConfig() {
  if (process.env.npm_lifecycle_event === 'build') {
    return {
      meta: {
        Page: {
          env: { server: true, client: false }, // HTML-only for all pages
        },
      },
    } satisfies Config;
  }

  return {};
}

export default getConfig();

(I'm using client mode for dev to benefit from HMR.)

[brillout]

What's the content of /assets/static/vike-react-b64a028b.BcWtY8Ol.css?

[teddybradford]

The content is:

@keyframes vike-react-shine{to{background-position-x:-200%}}

[brillout]

The issue is that it's required for a component that is loaded with dependency injection; I can't think of a way to have that CSS to be loaded only when it's used.

[brillout]

FYI this doesn't fix it. The fundamental issue is that dependency injection cannot be statically analyzed.

[teddybradford]

Thank you for looking into it. Might it be possible to have a config flag to explicitly exclude the dependency injection?

[brillout]

If you want this kind of level of control then I'd recommend to eject vike-react.

[brillout]

See also:

• +Loading.jsx not working #1945 (comment)

[teddybradford]

In the end, I decided to simply strip out the <link> tag after build:

"build": "vike build && find dist/client -name '*.html' -exec sed -i.bak '/<link[^>]*\\/vike-react-[^>]*>/d' {} \\; -exec rm {}.bak \\;"

[ktdd]

Couldn't you do this though?

function LoadingComponent() {
    return (
        <>
            <style href="VikeReactLoading" precedence="default">
                {`
                @keyframes vike-react-shine {
                    to {
                        background-position-x: -200%;
                    }
                }
                `}
            </style>
            <div
                style={{
                    width: "100%",
                    height: "100%",
                    maxHeight: "100%",
                    background: "linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%)",
                    borderRadius: "5px",
                    backgroundSize: "200% 100%",
                    animation: "1.3s vike-react-shine linear infinite",
                    aspectRatio: "2.5/1",
                }}
            />
        </>
    );
}

https://react.dev/reference/react-dom/components/style

[brillout]

👍 Good idea. (In case you're up for it, PR welcome.)