bud-criticalcss get hashed file path

bud
,
1

So in Bud, to get and use a hashed filename is to look inside the manifest.json and call the asset function with the key to get the value that includes the hash like so:

{{ asset('app.css')->uri() }}

Outputs:

domain/public/css/app.446631.css

However in the case of the Bud Critical extension the key contains the dynamic hash value of the main file. Manifest.json:

  "critical/css/app.446631.css": "critical/css/app.446631.css",

So getting the dynamic path this way doesn’t work. I’m using workaround to simply replace the css part to critical/css since the hash does match with the current app.css:

$fullCSS = asset('app.css')->uri();
$criticalCSS = str_replace('css/', 'critical/css/', $fullCSS);

Does anyone know how to do this the right way?

2

See @talss89’s reply here:

3

Hi Ben, I forgot to mention that I did see that topic already (it’s a good one), but it remained unclear to me how to use the asset function to get the contents of the emitted styles located in public. Calling asset(‘critical/css/app.css’) doesn’t output the contents since it expects the hash to find the file. But maybe this isn’t supported out of the box.

4

Per that post and the Acorn docs, you’d want to use $asset->contents(). Actual code example (props @Log1x):

/**
 * Print the critical theme styles.
 *
 * @return void
 */
add_filter('wp_head', function () {
    $asset = asset('critical/css/app.css');

    if (! $asset->exists()) {
        return;
    }

    echo sprintf('<style>%s</style>', $asset->contents());
}, 5);
5

I have been trying this code out but can’t seem to get it to work without including the hash. Do you (or Log1x), have this code working? If so do you have the hash inside your manifest.json like so?

"critical/css/app.ebb11f.css": "critical/css/app.ebb11f.css",
"critical/css/editor.0b59fb.css": "critical/css/editor.0b59fb.css",

If i remove the hash from the manifest and use the code it works.

6

Can you share the full contents of your bud.js config file?

7 
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set rules for css imports with css-loader
   *
   */
  app.hooks.on('build.module.rules.oneOf', (rules = []) => {
    rules.push({
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader'],
    });

    return rules;
  });

  /**
   * Allow $ shorthand for jQuery
   *
   */
  app.provide({
    jquery: ['jQuery', '$'],
  });

  app.critical.set('src', 'http://localhost/', 'ignore', [/^.lg/, /^.md/,] ).enable();

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/wp-content/themes/drankbestel/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/docs/bud.setUrl}
   * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
   * @see {@link https://bud.js.org/docs/bud.watch}
   */
  app
    .setUrl('http://localhost:46353')
    .setProxyUrl('http://localhost')
    .watch(['resources/views', 'app']);

  /**
   * Generate WordPress `theme.json`
   *
   * @note This overwrites `theme.json` on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .setSettings({
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};

Running sage, bud and critical on 6.16.1