CSS standard alternative for postcss-color-mod

[mummybot]

Hi @jonathantneal ,

I was wondering if you could help identify an alternative using the CSS standards and/or postcss-preset-env to achieve the functionality which the color-mod() function supplied.

Is there a standards way of doing tint? Can it take any colorspace color?

background-color: color-mod(var(--green-400) tint(20%));

Is there a standards way of doing alpha? Is the color() function going to be reinstated as part of postcss-preset-env?

box-shadow: 0 2px 4px 0 color-mod(var(--blue-200) alpha(50%));

Thanks in advance.

[mummybot]

For the mean time solved, including color-mod separately:

require('postcss-preset-env')({
    stage: 0,
    features: {
        'custom-properties': {
            preserve: false,
            importFrom: [
                () => {
                    const customProperties = require(`@module/assets/lib/themes/${theme}/theme.json`);
                    const prefixedCustomProperties = {};

                    Object.keys(customProperties).forEach(key => {
                        prefixedCustomProperties[`--${key}`] = customProperties[key];
                    });

                    return { customProperties: prefixedCustomProperties };
                }
            ],
        },
        'custom-media-queries': {
            importFrom: [
                () => {
                    const customMedia = require(`@module/assets/lib/themes/${theme}/media-queries.json`);

                    const prefixedCustomMedia = {};

                    Object.keys(customMedia).forEach(key => {
                        prefixedCustomMedia[`--${key}`] = customMedia[key];
                    });

                    return { customMedia: prefixedCustomMedia };
                }
            ],
        },
    },
}),
require('postcss-color-mod-function'),