[bug] Multiple compilers not compiling tailwindcss #1702
Comments
Twansparant
changed the title
|
Thanks for the issue. I'll need a little bit of time to replicate this on my end, but your issue is appreciated. Question: Does it seem like the other postcss plugin modification is being applied as expected ( |
Not 100% sure, have to get back to you about that, but don't think any postcss was applied. Don't think anything was prefixed in the compiled editor.css |
|
Think I got it. |
|
quick note: right now you're defining the server config in the instance labeled export default async bud => {
bud
.watch([`resources/views/**/*`, `app/**/*`])
.proxy(`https://sage.test`)
.serve(`http://0.0.0.0:3000`);
await bud.make(`app`, async app => app)
await bud.make(`editor`, async editor => editor)
}this isn't really documented properly. i've set up an issue to track. |
the `@once` decorator really means business. it's not per instance, it's static. this means that only the first postcss extension would be registered in a multi-instance setup. refers: - #1702 ## Type of change **PATCH: backwards compatible change** This PR includes breaking changes to the following core packages: - none This PR includes breaking changes to the follow extensions: - none ## Dependencies ### Adds - none ### Removes - none
Thanks for this! That was going to be my next question :) How can I actually test this fix patch in my project? |
|
@Twansparant as for testing.. this is the code that isn't getting called: bud/sources/@roots/bud-postcss/src/extension.ts Lines 328 to 358 in 7d9fbca you could clone this repo locally and run:
and then in your project:
this basically makes a local registry and releases the packages to it. the when you're done you can kill the local registry:
the |
|
Nice, will test now! which gives me an Therefore, running: Results in the same error An unexpected error occurred: "http://localhost:4873/@roots%2fbud: connect ECONNREFUSED 127.0.0.1:4873".I turned off my firewall, but that didn't help. |
|
yeah, unfortunately so. just copy the modules out of |
|
Yes got it! Can confirm the fix works :) await bud.make('editor', async editor =>
editor
.setPath('@dist', 'public/editor')
.entry({
editor: ['@scripts/editor', '@styles/editor']
})
.setPublicPath('/app/themes/sage/public/editor/')
.postcss.setPlugin('postcss-editor-styles', [
await bud.module.resolve('postcss-editor-styles'), {
scopeTo: '.editor-styles-wrapper :not(.acf-block-fields *)',
tagSuffix: ':not([class^="components-"]):not([class^="editor-"]):not([class^="block-"]):not([aria-owns]):not([class^="acf-"]):not([id^="acf-"])'
}
])
)Somehow adding editor.setPath(...).entry(...).postcss.setPlugin(...).setPublicPath is not a functionThank you so much! |
|
Awesome. You're getting an error because It returns it so that it's easier to chain export default async bud => {
bud
.setPath(`@dist`, `public/editor`) // returns `bud`
.entry(`editor`, [`@scripts/editor`, `@styles/editor`]) // returns `bud`
.postcss
.setPlugin(`postcss-editor-styles`) // returns `bud.postcss`
.setPluginOptions(
`postcss-editor-styles`,
{scopeTo: `.foo`, tagSuffix: `:not(bar)`},
) // returns bud.postcss
/**
* This is going to error because `bud.postcss.setPublicPath` does not exist.
*/
.setPublicPath(`/app/themes/sage/public/editor/`); // returns `bud`
}Your solution (moving You could just forego the chaining entirely: export default async bud => {
bud.setPath(`@dist`, `public/editor`) // returns `bud`
bud.entry(`editor`, [`@scripts/editor`, `@styles/editor`]) // returns `bud`
bud.postcss.setPlugin(`postcss-editor-styles`) // returns `bud.postcss`
bud.postcss.setPluginOptions(`postcss-editor-styles`, {}) // returns bud.postcss
bud.babel.setPlugin(`@babel/plugin-transform-react-jsx`) // returns `bud.babel`
bud.setPublicPath(`/app/themes/sage/public/editor/`); // returns `bud`
};You could use bud.tap, which was designed for this: export default async bud => {
bud
.setPath(`@dist`, `public/editor`) // returns `bud`
.entry(`editor`, [`@scripts/editor`, `@styles/editor`]) // returns `bud`
.tap(bud => bud.babel.setPlugin(`@babel/plugin-transform-react-jsx`)) // returns `bud`
.tap(bud => bud.postcss.setPlugin(`postcss-editor-styles`)) // returns `bud`
.setPublicPath(`/app/themes/sage/public/editor/`); // returns `bud`
} |
|
Great, thanks for the extensive explanation! |
|
Do you have any idea when you will release this fix patch? |
|
Just released. Cheers! |
Agreement
Describe the issue
Hi there,
I'm following this guide to setup 2 bud child instances, one for my
frontendentrypoints and one for my (gutenberg)editorentrypoints:I have installed the following
dev dependencies:In the editor instance I want to use the
postcss-editor-stylesPostCSS plugin.Running
bud buildgoes fine, all the assets are nicely in separate folders and the stylesheets are generated, but my compiledapp.cssstarts with:@layer componentsSo Tailwindcss is not being processed by PostCSS at all.
Even when I specifically add it to the instance, it won't compile:
However if I move the instance outside the
bud.makeand in the root of the config:It does compile TailwindCSS correctly?
I'm currently not using a
postcss.config.jsfile, but why is it not applying the postcss config to the child instances?Am I missing something here?
Expected Behavior
Tailwind CSS gets compiled correctly in each bud child instance.
Actual Behavior
Tailwind CSS does not get compiled at all in each bud child instance.
Steps To Reproduce
@roots/bud-tailwindcssas devDependency:bud buildversion
6.4.1
What package manager are you using?
yarn
version
1.22.19
Logs
Configuration
Relevant .budfiles
No response
The text was updated successfully, but these errors were encountered: