editor.css application in Sage 10

bud
7

When I do not use the manually added .editor-styles-wrapper and then run yarn dev I still get zero styling in the editor for desktop, tablet and mobile. When I run a yarn build I do get styling for desktop, tablet and mobile. So it seems I do not need .editor-styles-wrapper as a wrapper, but it did not cause issues too it seems.

So the issue remains that I still need to run yarn build to see CSS changes added. And that seems to be because with Hot Module Reloading you do not affect the inline styles. For that you need to use yarn build because you then add CSS assets. I have been tinkering with Bud and the Webpack Mini CSS Extract Plugin:

import MiniCssExtractPlugin from 'mini-css-extract-plugin';

export default async (app) => {
  /**
   * Application assets & entrypoints
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   */
  app.setPublicPath('/wp-content/themes/cafejp/public/');

  /**
   * Development server settings
   */
  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('https://cafejpcoen.test')
    .watch(['resources/views', 'app']);

  /**
   * Register MiniCssExtractPlugin using Bud's extensions
   */
  app.hooks.on('build.plugins', (plugins = []) => [
    ...plugins,
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ]);

  /**
   * Override the default rule for handling CSS to use MiniCssExtractPlugin
   */
  app.hooks.on('build.rules.before', rules => {
    rules.css.use = [
      MiniCssExtractPlugin.loader,
      'css-loader',
    ];
    return rules;
  });

  /**
   * Generate WordPress `theme.json`
   */
  app.wpjson
    .setSettings({
      // Add your theme.json settings here
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};

but though I did not get errors the editor.css did not get generated on yarn dev with it. Another community member did work on a Bud extension also GitHub - talss89/bud-wp-editor-query: Split WordPress editor styles into separate stylesheets but I think it is not quite active or done yet, not sure.

Also read https://github.com/roots/bud/issues/2633 some now on extending Bud with mini css extract plugin and possible use of

bud.extensions
  .get('@roots/bud-extensions/mini-css-extract-plugin')
  .setFilename('[name].css')

extension does exist for Bud as seen at https://bud.js.org/learn/general-use/extensions#built-in-extensions

So added this to bud.conf.js

...
/**
   * MiniCssExtractPlugin setup using Bud's extension system
   */
  app.extensions.get('@roots/bud-extensions/mini-css-extract-plugin').setFilename('[name].css');
...

and ran yarn dev and editor.css generated and added to public/css/ but fonts and so on are not loaded for any view.

Without extension this happens as well it seems. So perhaps it is the issue without HMR and frames with inline CSS again…