Add support for @screen directive and custom media queries

[Hebilicious]

Would love to see the "@screen" directive being implemented :

• Windi reference
• Tailwind reference

In my opinion, the most useful feature would be the ability to use custom media queries with @screen like this
(currently this works with tailwind/windi)

//unocss.config.ts
export default defineConfig({
    theme: {
        extend: {
            screens: {
                mobile: {
                    raw: "screen and (min-width: 320px) and (max-width: 900px)"
                }
            }
        }
    }
})

Then this can be used in styles like this :

@screen mobile {
    color: red;
}

and it gets transformed into the following css :

  @media screen and (min-width: 320px) and (max-width: 900px) {
      color: red;
  }

[chu121su12]

There's media-x variant:

unocss/test/preset-uno.test.ts

Lines 28 to 30 in e079cb3

	// wind - variants custom media (themed)
	'media-opacity_not_ok:opacity-0',
	'media-touch:p-4',

unocss/packages/preset-wind/src/theme.ts

Lines 156 to 174 in e079cb3

	media: {
	portrait: '(orientation: portrait)',
	landscape: '(orientation: landscape)',
	os_dark: '(prefers-color-scheme: dark)',
	os_light: '(prefers-color-scheme: light)',
	motion_ok: '(prefers-reduced-motion: no-preference)',
	motion_not_ok: '(prefers-reduced-motion: reduce)',
	high_contrast: '(prefers-contrast: high)',
	low_contrast: '(prefers-contrast: low)',
	opacity_ok: '(prefers-reduced-transparency: no-preference)',
	opacity_not_ok: '(prefers-reduced-transparency: reduce)',
	useData_ok: '(prefers-reduced-data: no-preference)',
	useData_not_ok: '(prefers-reduced-data: reduce)',
	touch: '(hover: none) and (pointer: coarse)',
	stylus: '(hover: none) and (pointer: fine)',
	pointer: '(hover) and (pointer: coarse)',
	mouse: '(hover) and (pointer: fine)',
	hd_color: '(dynamic-range: high)',
	},

Edit. I realized the issue is about directive support, and may require additional logic. But currently using media with existing rule should be supported . Ex. @apply media-touch:(c-[red])

[antfu]

/cc @hannoeru if you are interested in it 👀

[Hebilicious]

Just updating here in case anyone is looking for a workaround.

I've been using https://github.com/postcss/postcss-custom-media which feels better to me than creating non standard directives, as it follows the W3G spec.

Maybe we could just document somewhere to use postcss instead of implementing @screen ?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[zyyv]

Resolved on #1434

[aspiiire]

Adding screens under breakpoints doesn't seem to work... they are totally ignored

[zyyv]

Adding screens under breakpoints doesn't seem to work... they are totally ignored

You can check the docs or our test code.

[aspiiire]

@chris-zhu Apply works perfecty, I was talking about applying custom media queries, I did this through unocss.config... With breakpoints everything works fine except screens, in the docs I haven't found anything related

What I am trying to do:

export default defineConfig({
    theme: {
        colors: ...,
        breakpoints: ...,
        screens: {
            a: { raw: '(max-width: 320px)' },
            b: { raw: '(max-width: 640px)' },
            c: { raw: '(max-width: 768px)' },
            d: { raw: '(max-width: 1024px)' },
            e: { raw: '(max-width: 1280px)' },
        },
    },

Tailwind docs that I'am trying to follow https://tailwindcss.com/docs/screens#custom-media-queries

I also tried with a: { max: '640px' }

[zyyv]

in the docs I haven't found anything related

In our theme, we don't have screens prop, usually control breakpoints to implete media queries.

[aspiiire]

Max width doesn't seem to work inside breakpoints. How I can set max width instead of min width in unocss?

[zyyv]

Max width doesn't seem to work inside breakpoints. How I can set max width instead of min width in unocss?

We have lt variant (Playground), and if you want use directives, you can check screen-lt

[aspiiire]

Thank you for your time and help, i managed to create a custom rule 😁 I share it just in case someone may need it

[
            // Rule example: class="max-w-media-800px:(bg-blue-500,color-red)"
            // or: class="max-w-media-[breakpoint]:(bg-blue-500,color-red)"
            /^max-w-media-(.+)\:\((.*)\)$/,
            ([, width, tail], { rawSelector, theme }) => {
                let sizeValue;
                const selector = e(rawSelector);
                const tailClasses = tail.split(',').join(' ');
                const hasMeasure =
                    width.includes('px') || width.includes('rem');

                if (hasMeasure) {
                    sizeValue = width;
                } else {
                    const isText = Number.isNaN(+width);

                    if (isText) {
                        sizeValue = theme.breakpoints[width];
                    } else {
                        sizeValue = width + 'px';
                    }
                }

                return `
                    @media (max-width: ${sizeValue} ) {
                      ${selector} {
                          @apply ${tailClasses}
                      }
                    }
                `;
            },
        ],

[Demir-Utku]

[
  /^max-w-media-(.+)\:\((.*)\)$/,
  ([, width, tail], { rawSelector, theme }) => {
    let sizeValue;
    const selector = e(rawSelector);
                
    ...
  },
],

Where does e come from in const selector = e(rawSelector); expression?

[annymosse]

@Demir-Utku

Where does e come from in const selector = e(rawSelector); expression?

import { defineConfig, toEscapedSelector as e } from 'unocss'

or replace e by toEscapedSelector if you just use it only once.