CSS shorthand properties no longer supported in StyleX?

[bonttimo]

Hi,

I noticed that in the latest version (0.10.0), using CSS shorthand properties now results in a panic error. For example:

Message: background is not supported. Use background-color, border-image etc. instead  
Message: border is not supported. Use border-width, border-style and border-color instead

Was this an intentional design decision in StyleX to disallow shorthand declarations?

[Dwlad90]

Hi @bonttimo,

This is a correct behavior due to breaking changes in StyleX@14.
You can still use shorthand properties by passing styleResolution:'application-order' parameter to rsOpions

[bonttimo]

@Dwlad90 Sorry for asking, but somehow the styleResolution: "application-order", had no effect. I may be missing something?

next.config.mjs

export default stylexPlugin({
    rsOptions: {
        dev: process.env.NODE_ENV !== "production",
        aliases: { "@/*": [path.join(rootDir, "src", "*")] },
        useRemForFontSize: true,
        unstable_moduleResolution: { type: "commonJS" },
        useCSSLayers: true,
        runtimeInjection: false,
        treeshakeCompensation: true,
        styleResolution: "application-order",
    },
    extractCSS: false,
})({
    trailingSlash: true,
});

postcss.config.mjs

const config = {
    plugins: {
        "@stylexswc/postcss-plugin": {
            include: ["app/**/*.{js,jsx,ts,tsx}", "components/**/*.{js,jsx,ts,tsx}"],
            useCSSLayers: true,
            rsOptions: {
                aliases: { "@/*": [path.join(projectRoot, "src", "*")] },
                unstable_moduleResolution: { type: "commonJS" },
                dev: process.env.NODE_ENV === "development",
                genConditionalClasses: true,
                treeshakeCompensation: true,
                runtimeInjection: false,
                dev: process.env.NODE_ENV === "development",
                styleResolution: "application-order",
            },
        },
        autoprefixer: {},
    },
};

[Dwlad90]

Indeed, the problem was related to the serialization of parameters. @bonttimo, Thanks for finding this issue.

A fix is available in version 0.10.1-rc.1