Attempting to use bun to build my scss, but failing

[andrewebdev]

Hi. So I usually run backends that don't rely on javascript. So my use case for javascript in my frontend apps is limited to building small javascript libraries for my app, and also generating my css from sass. Unfortunately I'm having trouble with the latter.

Using this code:

import { plugin, type BunPlugin } from "bun";
const sass = require('sass');


const theme_root = 'src/theme';
const out_dir = './buntest';


const style: BunPlugin = {
  name: 'Sass Loader',
  setup(build) {
    console.log('Running SASS Plugin...');
    build.onLoad({ filter: /\.scss$/ }, async ({ path }) => {
      const result = sass.compile(path);
      // TODO create the output filename based on the current filename path
      console.log("path type?");
      console.log(typeof path)
      Bun.write(`${out_dir}/css/main.css`, result.css);
    })
  },
}


await Bun.build({
  entrypoints: [
    `${theme_root}/sass/main.scss`,
  ],
  plugins: [
    style,
  ],
});


await Bun.build({
  entrypoints: [
    './src/app.js',
    `./${theme_root}/theme.js`,
  ],
  outdir: out_dir,
  // publicPath: Bun.env.PUBLIC_PATH,
  external: [
    "htmx.org",
    "systemjs",
  ],
});

Unfortunately this does not build the css files for me as expected. Bun crashes with the following error:

bun@69caa1213fd0:/mnt/share/static$ bun run build.ts 
Running SASS Plugin...
path type?
string

uh-oh: Internal error: missing asset file
bun will crash now 😭😭😭

----- bun meta -----
Bun v1.0.0 (822a00c4) Linux x64 #32~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Fri Aug 18 10:40:13 UTC 2
RunCommand: 
Elapsed: 355ms | User: 460ms | Sys: 73ms
RSS: 0.17GB | Peak: 0.25GB | Commit: 0.17GB | Faults: 65
----- bun meta -----

0   0x56471e4f772b
1   ???
2   ???
3   ???
4   ???
5   ???
6   ???
7   ???
8   ???
9   ???

Crash report saved to:
  ~/.bun-crash/v1.0.0-1694596369736.crash

Search GitHub issues https://bun.sh/issues or ask for #help in https://bun.sh/discord

thread 41 panic: Internal error: missing asset file
Unwind information for `:0x56471dbcc990` was not available, trace may be incomplete

Aborted (core dumped)

The error isn't clear as to exactly the problem and is hard to debug based on this. Especially because the source file does exist, and if I do console.log(result.css) inside that plugin, then I can see that the css was generated perfectly fine;
But the output file is never written and I get that error.

[EmielM]

Any more success after this? I am also at a loss on how to emit a custom resource separately in the outdir (according to the naming guidelines). And inline in the bundle I would want a reference (to the path/hash).

Tried various things with handing off the the file loader, but to no avail.

[andrewebdev]

Nope, unfortunately I didn't get it to work. I eventually just gave up and went back to npm/gulp/rollup :(

[truongan07]

• try code : $ bun run test.ts
• test.ts

import type { BunPlugin } from 'bun';

const theme_root = 'src/theme';
const out_dir = './buntest';

const style: BunPlugin = {
    name: 'Sass Loader',
    async setup(build: any) {
        // implementation
        console.log('Running SASS Plugin...');

        const sass = await import('sass');

        // when a .scss file is imported...
        build.onLoad({ filter: /\.scss$/ }, ({ path }) => {
            // read and compile it with the sass compiler
            const contents = sass.compile(path);

            globalThis.Bun.write(`${out_dir}/css/main.css`, contents.css);

            // and return the compiled source code as "css"
            return {};
        });
    },
};

// start build main.css
globalThis.Bun.build({
    entrypoints: [`${theme_root}/sass/main.scss`],
    plugins: [style]
});

[EmielM]

Thanks, is there any way to obey the naming scheme as configured in the naming parameter for `Bun.build? Specifically using/generating the right hash.

[truongan07]

• Bun.build did not support type of "css" exporting so you can not use advantage properties of method
• type Loader = "js" | "jsx" | "ts" | "tsx" | "json" | "toml" | "object";
• see more : https://bun.sh/docs/runtime/plugins
• try this coding if it meets your requirement

import type { BunPlugin } from 'bun';

const theme_root = 'src/theme';
const out_dir = './buntest';

const style: BunPlugin = {
    name: 'Sass Loader',
    async setup(build: any) {
        // implementation
        console.log('Running SASS Plugin...');

        const sass = await import('sass');

        // when a .scss file is imported...
        build.onLoad({ filter: /\.scss$/ }, ({ path }) => {
            // read and compile it with the sass compiler
            const contents = sass.compile(path);
            const css = contents.css;

            return {
                loader: "text",
                contents: css,
            };
        });
    },
};

// start build main.css
globalThis.Bun.build({
    entrypoints: [`${theme_root}/sass/main.scss`],
    outdir: `${out_dir}/css`,
    naming: '[name]-[hash].css',
    plugins: [style],
});

[ImKubass]

Hi, not sure if this helps but i am attempting similiar thing. But doing it as script not plugin. Also I am doing glob implementation and postcss compile. Then I just run bun run css.ts

its probably rough around edges, but it get job done right now.

/// <reference types="bun-types" />

import {compileString} from "sass"
import fg from "fast-glob"
import emMediaQuery from "postcss-em-media-query"
import pxtorem from "postcss-pxtorem"
import purgecss from "@fullhuman/postcss-purgecss"
import postcss from "postcss"
import flexbugsFixes from "postcss-flexbugs-fixes"
import viewportHeightCorrection from "postcss-viewport-height-correction"
import postcss100vhfix from "postcss-100vh-fix"
import {unlinkSync} from "node:fs"
import settings from "./gulp/settings"

const sourcePath = `${import.meta.dir}/src/scss/style.scss`
const tempPath = `${import.meta.dir}/src/scss/style-compiled.css`
const distPath = `${import.meta.dir}/src/css/style.css`

const sassSetting = {
  loadPaths: [`node_modules/`, `src/scss/`, `src/`, `./`],
  sourceMap: true,
}

const sassFile = Bun.file(sourcePath)

const sassFileContent = await sassFile.text()
let sassContentGlobbed = sassFileContent

const IMPORT_REG = /^([ \t]*(?:\/\*.*)?)@import\s+["']([^"']+\*[^"']*(?:\.scss|\.sass)?)["'];?([ \t]*(?:\/[/*].*)?)$/gm
const matches = sassFileContent.match(IMPORT_REG)

for (const match of matches ?? []) {
  const glob = `${match.split('"')[1]}.scss`
  const files = (await fg(glob ?? "")).map((file) => {
    return `@import "${file}";`
  })
  sassContentGlobbed = sassContentGlobbed.replace(match, files.join("\n"))
}

const sassCompiled = compileString(sassContentGlobbed, sassSetting)

await Bun.write(tempPath, sassCompiled.css)
await Bun.write(`${tempPath}.map`, JSON.stringify(sassCompiled.sourceMap))

const postCssPlugins = [
  flexbugsFixes,
  viewportHeightCorrection,
  postcss100vhfix,
  emMediaQuery(settings.emMediaQuery),
  purgecss(settings.purgeCss),
  pxtorem(settings.pxtorem),
] as postcss.AcceptedPlugin[]

const processPostCss = await postcss(postCssPlugins).process(sassCompiled.css, {
  from: tempPath,
  to: distPath,
  map: {
    inline: true,
    prev: JSON.stringify(sassCompiled.sourceMap),
  },
})

await Bun.write(distPath, processPostCss.css)
if (processPostCss.map) {
  await Bun.write(`${distPath}.map`, processPostCss.map.toString())
}

// remove temporary files
unlinkSync(tempPath)
unlinkSync(`${tempPath}.map`)

[LukeClancy]

Would Like to add that if you cant find modules, you probably need something like this:

sass.compile(path, {loadPaths: ['./node_modules']})