# How to get setup with editor styling for the classic editor with Sage 10 + Bud? **URL:** https://discourse.roots.io/t/how-to-get-setup-with-editor-styling-for-the-classic-editor-with-sage-10-bud/25116 **Category:** bud **Tags:** sage10 **Created:** 2023-04-06T16:43:13Z **Posts:** 20 ## Post 1 by @intelligence — 2023-04-06T16:43:13Z Anyone managed to get Sage 10 with Bud + editor styling for TinyMCE to work? Would appreciate tips on how to get it going. bud.config.js: ``` .entry({ app: ['@scripts/app', '@styles/app'], editor: ['@scripts/editor', '@styles/editor'], tinymce: ['@styles/tinymce'], }) ``` setup.php: ``` $asset = \Roots\asset('tinymce.css'); add_editor_style($asset->uri()); }); ``` Gives me `Refused to apply style from 'http://domain.test/app/themes/theme/public/tinymce.css?wp-mce-49110-20201110' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.` Same thing happens if I try: `$asset = \Roots\asset('css/tinymce.css');` which is the folder where the artifact gets built on `yarn build` --- ## Post 2 by @strarsis — 2023-04-06T16:51:52Z Edit: The warning indicates that the URI to the stylesheet is not found, rather a soft-404 HTML page is retrieved. How is that site hosted? Development, with a VM or container? Production? When you request the stylesheet URL from within the system where PHP-FPM runs, do you get a stylesheet or rather a soft 404 error page (HTML)? `curl http://domain.test/app/themes/theme/public/tinymce.css?wp-mce-49110-20201110` Have you updated the theme-path in the `bud` configuration so that it matches the actual path the theme is in (including the theme folder name)? As a workaround (rather a dirty fix, as core and plugins often rely on a functioning loopback connection and the theme URI should be correct for the assets) you can add the editor styles by relative path than by URI, which does not need a loopback connection: > [@How to use compiled css within add_editor_style();](https://discourse.roots.io/t/how-to-use-compiled-css-within-add-editor-style/24945/2): > > Adding editor styles should be the same for Classic Editor as for the Gutenberg editor. For Gutenberg editor this approach is used, with a relative path, as this works correctly with style post-processing: --- ## Post 3 by @intelligence — 2023-04-06T17:06:54Z Hey, thanks for the quick reply! It’s a project scaffolded yesterday, using Trellis with Lima. And yes, I’m getting a 404 on that URL form within the VM (Should there be a file generated without random hash at the end? Because there is no file like that). ![Skärmavbild 2023-04-06 kl. 19.08.34](https://discourse.roots.io/uploads/default/original/2X/8/8b05c6d00cb78a6fd0f765950997342c75f7fac1.png) Theme path should be alright: `.setPublicPath('/app/themes/myactualthemenamehere/public/')` I’ll look into your suggestion for a work around :slight_smile: --- ## Post 4 by @strarsis — 2023-04-06T17:09:30Z Can you request a page / start page of the site? What is its URL then (after letting WordPress redirect)? Just `http://domain.test`? The random hash at the end (`tinymce.css?wp-mce-49110-20201110`) is used for cache-busting as it is not a part of the file name, but rather a GET-parameter, which normally should not matter for static files. --- ## Post 5 by @intelligence — 2023-04-06T17:11:59Z Yes, correct. Should add that everything else works as expected, `app.css`, fonts and images stored in resources works fine both on `localhost:3000` and `domain.test`. --- ## Post 6 by @strarsis — 2023-04-06T17:13:25Z Can you invoke commands from within the Lima VM/system? Because from within that system the domain `domain.test` must be resolvable and the server must listen for and answer requests from the VM IP (e.g. `127.0.0.1`). --- ## Post 7 by @intelligence — 2023-04-06T17:18:13Z What do you mean by commands? I can curl `domain.test` and I get the content of the front page just fine. --- ## Post 8 by @strarsis — 2023-04-06T18:02:50Z PHP-FPM (which does run WordPress) itself does the HTTP request, inside the Lima VM. The request results in a HTML response, not in the frontend styles file. For diagnosing the issue you have to do the request from inside the Lima VM to see how the web server responses. --- ## Post 9 by @intelligence — 2023-04-06T18:21:25Z Ah :slight_smile: If I do `trellis vm shell` and run `curl domain.test` it does return the actual front page, and not a 404 page. Both `curl http://domain.test/app/themes/theme/public/css/app.d8aefd.css` and `curl http://domain.test/app/themes/theme/public/css/tinymce.1fc2a8.css` shows the content of the files. But should I use `$asset = \Roots\asset('tinymce.css')` or `$asset = \Roots\asset('css/tinymce.css')`? Sans the prefixed path it looks at `http://domain.test/app/themes/theme/public/tinymce.css?wp-mce-49110-20201110`, which obviously is empty. --- ## Post 10 by @strarsis — 2023-04-06T18:35:24Z Are you using this?: > [@How to use compiled css within add_editor_style();](https://discourse.roots.io/t/how-to-use-compiled-css-within-add-editor-style/24945/4): > > I went to test this out to add it to the docs, and for some reason I’m not seeing the requirement to make the path to the asset relative thinking This is working for me: add\_action('after\_setup\_theme', function () { add\_theme\_support('editor-styles'); add\_editor\_style(asset('app.css')); }); What URL do you get with `echo asset('app.css')->__toString()`? --- ## Post 11 by @intelligence — 2023-04-06T18:52:56Z ``` add_action('after_setup_theme', function () { add_theme_support('editor-styles'); add_editor_style(asset('tinymce.css')); }); ``` Gets me the same mime error. ``` add_action('after_setup_theme', function () { $relAppCssPath = asset('tinymce.css')->relativePath(get_theme_file_path()); add_editor_style($relAppCssPath); }); ``` Appears to do nothing, no error in the console, no styling applied. Not tinymce.css in network tab. ``` add_action('after_setup_theme', function () { add_theme_support('editor-styles'); $asset = \Roots\asset('tinymce.css'); add_editor_style($asset->uri()); }); ``` Mime error. Dumping what you suggested gets me: `http://localhost:3000/app/themes/theme/public/app.css` Dumping tinymce.css gets me: `http://localhost:3000/app/themes/theme/public/tinymce.css` Super thankful for your time and your suggestions by the way! --- ## Post 12 by @strarsis — 2023-04-06T18:56:12Z > [@intelligence](#): > > [http://localhost:3000/app/themes/theme/public/app.css](http://localhost:3000/app/themes/theme/public/app.css) Does that URL work _inside_ the Lima VM? --- ## Post 13 by @intelligence — 2023-04-06T19:12:48Z Connection refused for anything on that host from the vm shell :eyes: But the dump was made from a blade template btw, so I guess that’s why it’s `localhost` and not `domain.test`? --- ## Post 14 by @strarsis — 2023-04-06T19:19:50Z The URL passed to `add_editor_style` has `localhost` as domain, which is not reachable from within the Lima VM. Check the `bud` configuration: > --- ## Post 15 by @intelligence — 2023-04-06T20:18:45Z Updated packages to latest version (had outdated bud and sage) and changed to the `bud.config.js` you lined. Issue still persist :confused: I’m curious if maybe Lima could be the issue somehow. --- ## Post 16 by @strarsis — 2023-04-06T20:43:05Z Is the URL passed to `add_editor_style` still with `localhost` domain? --- ## Post 17 by @intelligence — 2023-04-06T21:02:46Z It is. Got it to work now finally, when running `yarn dev` it does not work. Running `yarn build` and then accessing `/wp-admin/` – then it works! :fireworks: --- ## Post 18 by @strarsis — 2023-04-06T22:17:37Z > [@intelligence](#): > > then it works So `yarn dev` does not update the domain that is used for the asset URLs, but `yarn build` does? After invoking `yarn build`, `yarn dev` works without issue? --- ## Post 19 by @intelligence — 2023-04-07T09:29:46Z As soon as `yarn dev` is run, it breaks, I need to run `yarn build`on every change in tinymce.css and it will work in the editor. --- ## Post 20 by @strarsis — 2023-04-07T14:10:42Z Hm, upon further thought it makes sense as `dev` uses the proxy domain (and some free port, as this is by default `localhost`) instead of the original server one. Does the workaround with adding the frontend stylesheet asset by its path (instead of URL) work? A fix of the underlying issue would probably consist of being able to retrieve the asset URL without the proxy domain and port from the manifest.