Updating Bud from 6.12.3 to 6.14.3 causes a conflict with postcss-mixins. npm run build completes successfully after the update, but mixins are not processed and the output css still contains the @define-mixin and @mixin declarations from the pre-processed css files. This causes the affected styles to not be loaded by the browser. Any thoughts on how to fix this?
Example source CSS
@define-mixin heading {
font-family: 'Roboto Slab', serif;
font-weight: 400;
}
h1, .h1 {
@mixin heading;
font-size: clamp(2.25rem, 1.75vw + 1.594rem, 3.125rem);
line-height: clamp(2.7rem, 1.651vw + 2.273rem, 3.594rem);
margin-bottom: 1.25rem;
margin-top: 1.25rem;
}
Bud 6.12.3 output
.h1, h1 {
font-family: Roboto Slab,serif;
font-weight: 400;
margin-bottom: 1.25rem;
margin-top: 1.25rem;
}
.h1, h1 {
font-size: clamp(2.25rem,1.75vw + 1.594rem,3.125rem);
line-height: clamp(2.588rem,1.7vw + 1.95rem,3.438rem);
}
Bud 6.14.3 output
.h1, h1 {
@mixin heading: ;
font-size: clamp(2.25rem,1.75vw + 1.594rem,3.125rem);
line-height: clamp(2.7rem,1.651vw + 2.273rem,3.594rem);
margin-bottom: 1.25rem;
margin-top: 1.25rem;
}
package.json
"scripts": {
"dev": "bud dev --browser",
"build": "bud build"
},
"type": "module",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"simple-datatables": "^7.2.0"
},
"devDependencies": {
"@roots/bud": "^6.12.3",
"@roots/bud-postcss": "^6.12.3",
"@roots/bud-tailwindcss": "^6.12.3",
"postcss-extend-rule": "^4.0.0",
"postcss-mixins": "^9.0.4"
}
bud.config.js
/**
* Build configuration for bud.js
* @url https://bud.js.org/docs
* @param {import('@roots/bud').Bud} app
*/
export default async app => {
/**
* The bud.js instance
*/
app
/**
* Paths
*/
.setPath({
'@src': `assets`,
'@dist': 'public',
'@ssl': '/users/sanered/.config/valet/Certificates'
})
/**
* Application entrypoints
* Paths are expressed relative to the `@src` directory
*/
.entry({
blockSupports: ['scripts/blockSupports'],
datatables: ['scripts/datatables', 'styles/datatables'],
editor: ['scripts/editor', 'styles/editor'],
editorVariables: ['styles/editor-variables'],
global: [`scripts/global`, 'styles/global'],
lightgallery: ['scripts/lightgallery'],
wp: ['scripts/wp', 'styles/wp'],
wpResetEditorStyles: ['styles/wp-reset-editor-styles']
})
/**
* Copy static assets from @src to @dist
*/
.assets(['images', 'fonts', 'sections'])
/**
* Create sourcemaps
*/
.devtool()
/**
* Dev server setup
*/
.proxy(app.env.get('WP_HOME'))
.serve({
host: 'lib.jmu.test',
cert: app.path('@ssl/lib.jmu.test.crt'),
key: app.path('@ssl/lib.jmu.test.key')
})
.watch(['templates', 'app/composers', 'app/config'])
/**
* PostCSS
* @url https://bud.js.org/extensions/bud-postcss
*/
.postcss
.setPlugin('postcss-extend-rule')
.setPlugin('postcss-mixins')
.setPluginOptions('env', {stage: 1})
}
Details
MacBook Pro: Ventura 13.4.1
Node 16.20.0
Valet
WP 6.2.2