Custom utilities don't work with media queries

[MManke188]

If I do a simple test utility (test: 'border-2 border-red-500'):

console.log(tw.prefixMatch('md'), tw.style('test')) // true {"borderColor": "#ef4444", "borderWidth": 2}
console.log(tw.prefixMatch('md'), tw.style('md:border-2 md:border-red-500') // true {"borderColor": "#ef4444", "borderWidth": 2}
console.log(tw.prefixMatch('md'), tw.style('md:test')) // true {}

It also produces the `test` unknown or invalid utility error

[jaredh159]

hmmm.... i'm not able to reproduce. was fixing something just now, and added these tests, which pass just fine for me:

https://github.com/jaredh159/tailwind-react-native-classnames/blob/master/src/__tests__/custom-utils.spec.ts#L22-L25

[MManke188]

Just did a minimal example where it produces the same error:

https://xzr8xf.csb.app

[MManke188]

Starting to have an idea of what's going wrong.

At the end of the test the following expectation fails: expect(tw`md:custom`).toEqual({ marginTop: 4, color: `#fff` });

[jaredh159]

ahh, yes, i see now, it only doesn't work with custom utilities defined as strings. i looked at the implementation, and I can see why it's not working, but the fix is not super straightforward. i'll try to figure something out though, before too long. until then, if you're able to define your custom utilities in the object style, they should work.

[jaredh159]

fixed in 3.6.7 thanks for bringing this to my attention.