Bud duplicates CSS properties

[dangelion]

Simply as it is:

Bud in compilation re-writes all the CSS properties, how we could disable that?

[kellymears]

That's the default behavior of postcss-custom-properties, I believe. https://postcss.github.io/postcss-custom-properties/

[dangelion]

@kellymears Is there a way to override or change that?

[kellymears]

First, I'm not sure what this setting is exactly. But I'd start looking here:

• https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env

• https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties#postcss-custom-properties-

The bud.js.org docs actually have a lot of information on setting postcss options.

Specific to this question, @roots/bud-postcss includes a helper function for overriding postcss plugins:

https://bud.js.org/extensions/bud-postcss/#override-plugin-options

For reference, the default options for env are as follows:

{ stage: 1, features: { 'focus-within-pseudo-class': false } }

You might find it helpful to throw something like this at the bottom of your config while you're figuring it out:

  console.log(app.postcss.plugins)
  app.close()

[Phalconline]

@dangelion Here is the solution https://github.com/postcss/postcss-custom-properties/issues/103

So you need to disable preserve for postcss.

@kellymears Could you please clarify how to push config for postcss in a bud.js?

Also, FYI https://caniuse.com/css-variables

[kellymears]

Whether this should or shouldn't be default in postcss-preset-env really isn't a question for bud.js. We just ship default config (with one override, but maybe even that is too opinionated?) If you think the default config should be different it would be better to make an issue in the repo that defines the config.

But, for what it's worth -- even if we were considering adding an override bud.js would never ship overrides that forced 96.47% browser support. Which is to say: I agree with the postcss defaults.

Again, refer to the documentation on overriding this: https://bud.js.org/extensions/bud-postcss/#override-plugin-options

bud.postcss.setPluginOptions(
  'env', 
  {} // your preset-env config,
)

[dangelion]

@kellymears @Phalconline could you help me to understand how do it? Inside the Sage file bud.config.mjs is not clear where put that code. Thanks

This is wrong app.postcss.setPluginOptions('postcss-custom-properties', {preserve: false});

[dangelion]

Hi @kellymears @Phalconline @retlehs anyone could help me here? thanks

[retlehs]

@dangelion You'll have to use bud.tap here:

.tap(bud => bud.postcss.setPluginOptions('env', {preserve: false}))

Full `bud.config.mjs` config from Sage sample

// @ts-check

/**
 * Build configuration
 *
 * @see {@link https://bud.js.org/guides/configure}
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

    .tap(bud => bud.postcss.setPluginOptions('env', {preserve: false}))

    /**
     * Directory contents to be included in the compilation
     */
    .assets(["images"])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(["resources/views/**/*", "app/**/*"])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy("http://example.test")

    /**
     * Development origin
     */
    .serve("http://0.0.0.0:3000")

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/app/themes/sage/public/")

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
    .wpjson
      .settings({
        color: {
          custom: false,
          customGradient: false,
          defaultPalette: false,
          defaultGradients: false,
        },
        custom: {
          spacing: {},
          typography: {
            'font-size': {},
            'line-height': {},
          },
        },
        spacing: {
          padding: true,
          units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
        },
        typography: {
          customFontSize: false,
        },
      })
      .useTailwindColors()
      .useTailwindFontFamily()
      .useTailwindFontSize()
      .enable()
};

And I feel like I have to echo @kellymears here:

Which is to say: I agree with the postcss defaults.

[dangelion]

Thanks @retlehs (also @kellymears @Phalconline)

That tap command compiles this scss

h2, .h2 {
    font-size: var(--h2-font-size);
}

to

h2, .h2 {
    font-size: clamp(2.57rem, 1.72vw + 2.23rem, 4.29rem);
}

while I need it to compiles to this

h2, .h2 {
    // Notice: Without the fallback: font-size: clamp(2.57rem, 1.72vw + 2.23rem, 4.29rem);
    font-size: var(--h2-font-size); // Only the property like it was in the scss
}

Is it possible?

[retlehs]

@dangelion Possible? Probably! Have you tried to figure it out?

The issue tracker on this repo isn't meant for support. Please make a topic on https://discourse.roots.io/ for questions!