Support for custom platform selector variants

[DeveloperBlue]

I have a usecase where I would like to add a custom platform selector for electron, similar to the built-in ios:*, native:*, and web:* style selectors

e.g. className='electron:bg-yellow-600'

In my own fork, I've just been patching the variants.ts so it adds
@custom-variant electron (html[data-platform="electron"] &); to the generated css for variants and rebuilding.

// generated uniwind.css
@custom-variant ios (@media ios);
@custom-variant android (@media android);
@custom-variant electron (html[data-platform="electron"] &);
@custom-variant web (html &);
@custom-variant native (@media native);

It would be nice to be able to pass something to the uniwind config that lets you add a custom platform resolver. The order a platform resolver is injected also matters (e.g. electron:* should take precedence over web:*).

Example modification:

// src/css/variants.ts
export type PlatformVariantResolver = Array<{ platform: string; resolver: string }>

export const defaultPlatformVariantResolvers : PlatformVariantResolver = [
    {
        platform : 'ios',
        resolver : '@media ios'
    },
    {
        platform : 'android',
        resolver : '@media android'
    },
    {
        platform : 'web',
        resolver : 'html &'
    },
    {
        platform : 'native',
        resolver : '@media native'
    }
]

export const generateCSSForVariants = (variants = defaultPlatformVariantResolvers) => {
    let css = ''

    variants.forEach(({platform, resolver}) => {
        css += `@custom-variant ${platform} (${resolver});\n`
    })

    return css
}

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withUniwindConfig } = require('uniwind/metro');

const config = getDefaultConfig(__dirname);


module.exports = withUniwindConfig(config, {
  cssEntryFile: './global.css',
  dtsFile: './uniwind-types.d.ts',
  extraPlatformResolversModifier : function(defaultPlatforms) {
    return [ {platform : "electron", resolver : `html[data-platform="electron"] &`}, ...defaultPlatforms];
  }
});

<View className='electron:bg-yellow-600 native:bg-green-600 web:bg-blue-600 bg-white min-h-[32px] min-w-[32px]'/>

[Brentlok]

I think that you could just add

@custom-variant electron (html[data-platform="electron"] &);

To your global.css file, instead of having it in generated uniwind.css. Or something like that doesn't work?

[DeveloperBlue]

Thank you, that works!

I was worried that the order the custom-variants were defined in mattered, and that it could cause issues like web:* resolving before electron:*, but I just went and tested the one-liner and encountered no issues.

My mistake for the overengineering, and thanks again for your time!