[Bun 1.2] relative links in css breaks the build

[AlbertSabate]

Describe the bug
When using a relative file in a url() from a css file, this breaks the build.

Add the following code in a .css

@font-face {
  font-family: "Exo";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/exo-italic-variablefont-wght.ttf)
    format("truetype-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

Remember to make sure the file exists in public folder.

Then when you try to build brisa the execution will break.

Should not break and build as normal if the file exists.

[aralroca]

@AlbertSabate do you think it makes sense to report this error to Bun directly? I'm not sure how we can fix this on our part

[aralroca]

Maybe I can take a look at the CSS Parser and add the prefix to the correct absolute path, I'm going to take a look

[AlbertSabate]

Probably we could yeah. I don't think it's brisa's problem either ... But would be nice to have it working until bunjs fixes the issue :/

For now I replaced it to absolute path and it works fine.

I'm struggling with their css parser now. Maybe we can disable bun css parser optionally if we use tailwind?????

[AlbertSabate]

Temporal workaround until a better fix is out:

import tailwindcss from '@tailwindcss/postcss';
import type { Configuration } from 'brisa';
import postcss from 'postcss';

export default {
  assetCompression: true,
  clustering: false,
  extendPlugins(plugins) {
    return [
      ...plugins,
      {
        name: 'tailwindcss-adapter',
        setup(build) {
          build.onLoad({ filter: /\.(css)$/ }, async ({ path }) => {
            const content = await Bun.file(path).text();
            // @ts-ignore -- postcss types are not up to date
            const contents = await postcss([tailwindcss]).process(content, {
              from: path,
            });

            return {
              contents: contents.css.replaceAll(':root', ':root, :host'),
              loader: 'text',
            };
          });
        },
      },
    ];
  },
} satisfies Configuration;

import cssText from 'any.css'
Add the import with css${cssText};

I came back to the origins, this solution always works.

[aralroca]

@AlbertSabate this should work now with integrations like Tailwind in 0.2.4-canary.5. In CSS integrations (Tailwind, PandaCSS) now we are using their parser, avoiding the CSS parser of Bun. The CSS Parser of Bun is used without integrations, so then is necessary to fix this relative path. Probably here we need to fix it inside a build plugin.

So this issue is 50% solved.

[aralroca]

I see that replacing src: url(/fonts/exo-italic-variablefont-wght.ttf) to src: url(@/public/fonts/exo-italic-variablefont-wght.ttf) Bun move this file inside the build with a hash:

[aralroca]

This is the Bun feature https://bun.sh/docs/bundler/html#referencing-local-assets-in-css it would be great that they support a way to disable it

[aralroca]

This Bun feature will solve the problem when ready oven-sh/bun#17686 in Buns Discord channel there has been good feedback to add this feature.