Specify a fallback for several CSS variables

[pmartin35]

When upgrading from SLDS version 2.10.1 to 2.13.7 we have started receiving the following postcss warnings. Seems like there is no fallback for a few variables within your salesforce-lightning-design-stystem.css file. Most of the other variables in that file do have fallbacks. Would it be possible to add a fallback for these 4 as well?

WARNING in ./node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css (./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css)
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-custom-properties: .../node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css:18311:3: variable '--sds-c-avatar-initials-text-color' is undefined and used without a fallback

WARNING in ./node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css (./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css)
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-custom-properties: .../node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css:2000:3: variable '--sds-c-icon-color-background' is undefined and used without a fallback

WARNING in ./node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css (./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css)
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-custom-properties: .../node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css:889:3: variable '--sds-c-button-shadow' is undefined and used without a fallback

WARNING in ./node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css (./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css)
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-custom-properties: .../node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css:890:11: variable '--sds-c-button-shadow' is undefined and used without a fallback

[kflournoy-sf]

Hi @pmartin35 !

Thanks for filing this issue! However, the lack of a fallback here is intentional and is valid CSS, so we're not sure why you're having issues parsing it.

What version of postcss-custom-properties are you using? What is doing your linting check here? You may need to whitelist this issue if you're not able to resolve it in your linter.

-Kim

[pmartin35]

Hi @kflournoy-sf,

We are using postcss v8.1.6, postcss-cssnext v3.1.0 and postcss-loader v4.0.4.

This is our current CSS webpack setup:

{
    test: /\.css$/,
    use: [
        {loader: "style-loader"},
        {loader: "css-loader"},
        {loader: 'postcss-loader'}
    ]
},

I have tried man different configuration options to try to hide the warnings (one example below) but nothing seems to work.

{
    test: /\.css$/,
    use: [
        {loader: "style-loader"},
        {loader: "css-loader"},
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: [
                        postcssCustomProperties({
                            strict: false,
                            warnings: false,
                            globalWarnings: false,
                        })
                    ]
                }
            }
        }
    ]
},

[kflournoy-sf]

Hi @pmartin35 - I see that postcss-cssnext hasn't been updated for almost three years and the owner has deprecated it in favor of something else: https://moox.io/blog/deprecating-cssnext/

Since we don't use postcss over here, we can't really help much with troubleshooting the specifics of this. But since using variables like this is a relatively new practice, I wouldn't be surprised if this is a bug / oversight in one or more of these plugins when trying to parse these files.

If you do figure out the issue, or file an issue against one or more of these packages, please update us here so we can follow along. Thanks, and good luck!