Media Queries for css helper

[peterver]

What is the feature you are proposing?

I've been using the css helper and though it works quite well 🚀 I would love to request the possibility to generate standards-compliant media queries with it.

For example when using the css helper to do the following:

const mq_class = css`
@media screen and (min-width: 767px) {width: 100%};
`;

the following would currently be generated:

.css-{uid} @media screen and (min-width: 767px) {width: 100%};

maybe by usage of some kind of marker we could end up generating the following:

@media screen and (min-width: 767px) {
    .css-{uid} {width: 100%}
}

[usualoma]

Hi @peterver

Thanks for using "hono/css" right away. And thanks for the suggestion.
CSS nesting is now supported in modern web browsers.
https://caniuse.com/css-nesting

So the CSS generated from the following statement should work for media queries

const mq_class = css`
@media screen and (min-width: 767px) {width: 100%};
`; // => .css-1857464094{@media screen and (min-width:767px){width:100%}}

For older web browsers, I would think a conversion like you suggest would be needed, do you need support for older web browsers?

[peterver]

Hi @peterver

Thanks for using "hono/css" right away. And thanks for the suggestion. CSS nesting is now supported in modern web browsers. https://caniuse.com/css-nesting

So the CSS generated from the following statement should work for media queries

const mq_class = css`
@media screen and (min-width: 767px) {width: 100%};
`; // => .css-1857464094{@media screen and (min-width:767px){width:100%}}

For older web browsers, I would think a conversion like you suggest would be needed, do you need support for older web browsers?

Hi @usualoma it indeed worked when I tested locally on chrome, I was getting different results on some test devices with mobile safari though.

Given that nesting is still in working draft how would one go about adding support for the below? (I wouldn't mind taking a stab at a PR myself) :)

For now I've settled on using a class and adding them manually. A possible suggestion I had would be to be able to reserve a generated css class and being able to use it manually, currently I'm adding my media queries like this in a component (example):

export const MyComponent = () => {
    return (<div class="myclass">
        <style>{`
            @media screen and (min-width: 768px) {
                .myclass {flex-direction: row}
            }
        `}</style>
    </div>);
};

I previously tried the following but that only worked once as it always generates the same class:

import css from 'hono/css';

export const MyComponent = async () => {
    const my_class = await css``;

    return (<div class={my_class}>
        <style>{`
            @media screen and (min-width: 768px) {
                .${my_class} {flex-direction: row}
            }
        `}</style>
    </div>);
};

[usualoma]

@peterver

Thanks for the response.

Well... Currently web browser support for CSS Nesting is a little over 80%, but I expect that number to rise considerably this year. We also don't want to make "hono/css" more complicated than necessary since all browsers have completed implementation in their latest versions and I think it is unlikely to be obsolete in the future.

If we were to make any modifications, we would keep the default to the current behavior and provide an optional means of resolving nesting.

The following project does not seem to be working correctly, but a solution in the form of a polyfill like this may be useful.

https://github.com/jcarlosroldan/css-nesting-polyfill