#Unable to import virtual CSS into Astro files

11 messages · Page 1 of 1 (latest)

fresh lance
#

We're using FontAwesome, which injects a custom CSS stylesheet on page load. To prevent paint flashes, we once stored the "rendered" CSS into a simple, custom .css file.

However, they also have a neat function to generate the CSS during build - which i'd love to use via a custom, virtual module. Like so:

import { dom } from '@fortawesome/fontawesome-svg-core';

const VIRTUAL_MODULE_ID = 'virtual:fontawesome-css/dom.css';
const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;

/** @returns {import('vite').Plugin} */
export function fontAwesomeCss() {
  return {
    name: 'vite-plugin-fontawesome-css',
    sharedDuringBuild: true,

    resolveId(id) {
      if (id === VIRTUAL_MODULE_ID) {
        return RESOLVED_VIRTUAL_MODULE_ID;
      }
    },

    load(id) {
      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
        return {
          code: `@layer base { ${dom.css()} }`,
        };
      }
    },
  };
}

However, Astro completely ignores it. There's no style sheet being imported at all. Is there some special handling I am missing here?

I even tried a "dumbed down test version":

const VIRTUAL_MODULE_ID = 'virtual:custom-css/red.css';
const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;

/** @returns {import('vite').Plugin} */
export function fontAwesomeCss() {
  return {
    name: 'vite-plugin-fake-css',

    resolveId(id) {
      if (id === VIRTUAL_MODULE_ID) {
        return RESOLVED_VIRTUAL_MODULE_ID;
      }
    },

    load(id) {
      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
        return {
          code: `* { color: red !important }`,
        };
      }
    },
  };
}

Same thing - nothing's happending.

#

The start of our default layout looks like this:

import 'virtual:fontawesome-css/dom.css';
import '../styles/main.css';

The main CSS file makes it into the HTML, the virtual one gets ignored.

fickle condor
#

As a workaround you could do some codegen btw using an astro integration

fresh lance
# fickle condor As a workaround you could do some codegen btw using an astro integration

oh yeah i know i asked that on tailwind's side already. but this is not about tailwind - this is on Astro land.
I am not getting any errors that TW can't find a module or anything. This is a straight up Astro-Vite import. And it doesn't seem to work?

The above is exactly what you said I should do: codegen via astro integration. The code runs, but the Astro site renders... nothing.

Not sure if it might be TW interferring here, but I haven't seen the code land in the final main.css either.

fresh lance
# fickle condor You already asked that on <https://github.com/tailwindlabs/tailwindcss/discussio...

Vite does support virtual CSS. the issue with Tailwind was that they run their own resolvers on the code - and skip Vite entirely. we actually have quite a lot of issues with that, as we can't easily split up our CSS into "main feature pages and landing sites", "newsletter marketing", and "help docs" stylesheets. We just have one that gets bloated up more and more over time. Still trying to figure out how to best split it all up (using TW's @source directive didn't work for us when we tested it last week)

fickle condor
#

Honestly I don't really know, I don't know much about how css is handled internally unfortunately

fickle condor
#

What you're trying to do is having virtual codegen. As a workaround, I'm suggesting doing codegen to an actual file

fresh lance