addVariant and modifySelectors: Adding multiple rules per classname

[JaapWeijland]

Hi there,

I'm trying to make a custom variant to support responsiveness based on a container instead of the media screen. To do that, I want add a variant group called responsive-container. This variant should add a variant per screen size. The following is what I expect when the variant is applied to a m-4 class:

.container-md .container-md:m-4 {
    margin: 1rem; // Actual rem value is irrelevant here
}

.container-lg .container-md:m-4 {
    margin: 1rem; // Actual rem value is irrelevant here
}

.container-xl .container-md:m-4 {
    margin: 1rem; // Actual rem value is irrelevant here
}

.container-2xl .container-md:m-4 {
    margin: 1rem; // Actual rem value is irrelevant here
}

Currently, I do this by iterating over the screens in the theme in the modifySelectors callback, and then returning an array with the newly generated selectors. However, when returning such an array, it generates one single CSS rule with multiple selectors:

.container-md .container-md:m-4, .container-lg .container-md:m-4, .container-xl .container-md:m-4, .container-2xl .container-md:m-4 {
    margin: 1rem;
}

I don't want this because this messes up the CSS rule prioritization. Is there a way to generate the above mentioned rules at ones, instead of generating one giant rule?

Currently, I am using the following plugin to generate the variant:

        plugin(function ({ addVariant, e, theme }) {
            const screens = Object.keys(theme('screens'));
            addVariant(`responsive-container`, ({ modifySelectors, separator }) => {
                modifySelectors(({ className }) => {
                    const screensLeft = [...screens];
                    // 'size' being sm, md, lg, xl and the likes
                    return screens
                        .reduce((total, size, i) => {
                            const selectors = screensLeft.reduce((total, _size) => {
                                return [
                                    ...total,
                                    `.${e(`container-${_size}`)} .${e(`container-${size}${separator}${className}`)}`, //.container-sm .container-sm:m-4
                                ];
                            }, []);
                            screensLeft.shift();
                            return [...total, ...selectors];
                        }, [])
                        .reverse();
                });
            });
        }),