So when I'm doing a media.lessThan('1024px')) I'd expect the media query to look like: @media (max-width: 1023px) { }, because that's what the API states: lessThan. The same issue applies to greaterThan.

What I'd suggest here is:

1. Rename the functions to: lessThanOrEqual/greaterThanOrEqual
2. Make lessThan always substract 1 from passed value, and greaterThan add 1 to the value

We could also leave the API as is and add the -OrEqual variations.

What do you think about it?

Hi, I love this package and would like to ask to allow configuring the generateMedia object with numbers instead of strings with units, so internally you will check the type and if it's a number you'll convert it to string and add px.

I ask this because this is how I use your package:

import { generateMedia } from 'styled-media-query' 

export const viewports = {
  mobile: "460px",
  l     : "1200px",
  xl    : "1800px",
  huge  : "2200px"
}

const media = generateMedia(viewports)

media.below = media.lessThan
media.above = media.greaterThan

export default media

As you can see, I renamed the methods because I didn't like the long names, I keep forgetting them, so the shorter the better for me. anyway, I am exporting the viewports variable because I need to use it in javascript as well, and I would prefer your library to understand the numbers mean pixels so I won't have to do the transformation on my end:

export const viewports = {
  mobile: 460,
  l     : 1200,
  xl    : 1800,
  huge  : 2200
}

it would be useful for others as well, this is why I ask this, instead of countless devs making it work with numbers, it would be useful if supported out-of-the-box as my request is not something out of the ordinary and many times there should be coupling because css and js values. (working DRY, avoiding possible bugs)

Thanks :)

Hi everyone.

Since I was add as collaborator, I'd propose some changes to improve this library quality.
In a couple days I'll create more proposals and pull requests but this one is about automating the deployment process.

Proposal

My idea here is to use semantic-release to do this process for us.

For those who doesn't know what's this about, semantic release takes care of our versioning using Angular commit message versioning:

It means each commit made needs to follow this structure because it'll be used to:

1. decide what version would be next. If a commit with fix prefix is merged into master, then semantic release will automatically bump from 2.2.1 to 2.2.2 (minor version) for example;
2. Auto generates Change log when it happens;
3. Auto generates tag publish;

Needs

To set this flow only the only thing I need is a NPM_TOKEN environment variable to publish to npm and a GH_TOKEN to publish change logs and tags:

The rest is on me :)

Hi, first I would like to thank you for this project 😊

My issue is about overlap between screens, for now we have some problems about it, for example:

${media.lessThan("medium")`
  /* screen width is less than 768px (medium) */
  background: red;
`}

${media.greaterThan("medium")`
   /* screen width is greater than 768px (medium) */
  background: blue;
`}

The both examples will be happens if screen is exactly 768px.

Maybe a good ideia is use an approach like the Rupture.

Thanks!

Hello everyone 👋

Expected Behavior

Be able to pass size (e.g. 1024px) to all media query generators without any TypeScript complaint.

Actual Behavior

The current type definition only allow us to pass the breakpoint keys (image below). If you pass a size, it'll work fine but the typescript compiler will complain about this unexpected value.

Steps to Reproduce the Problem

1. Access this sandbox https://codesandbox.io/s/silent-forest-rgzhj
2. Wait until loads completely
3. Check Box component media query warning

Specifications

• Version: 2.1.2
• Platform: any

Hello, I tried to use custom sizes for the breakpoints but using the VS Code with the vs-styled-components plugin the syntax highlight and intellisense stop working. Any solution for that?

Hasn't been updated in two years and it seems like all recent issues are being ignored. So basically, is this project dead or will it be maintained again?

Any ideas about how to "teach" Webstorm to highlight syntax correctly inside the media query?

Right now it looks like this:

I know about the hack with adding css, but maybe there is something better?

Hi @morajabi, thank you for putting out this library. It has been super helpful so far. In my current project, I keep needing to write height based media queries, and in doing so, I have to opt traditional media query rather than use this library.

So, I was wondering if you are considering adding support for other aspects of media query in the library API?

I'm working on a new API in version 2 and so far I came to this. What do you think about it? Is it readable? What can we add or change?

Note: The old API (media.to.large) is still there and you'll have no problems using it, but probably in version 3 it will be removed.

Well, many operating systems now support a dark mode or dark theme.

I believe it would be interesting for this to be implemented here as well.

The media consultation of the preferred color scheme allows you to adjust the appearance of the website to match the user's preferred mode.

Syntax

no-preference Indicates that the user has made no preference known to the system. This keyword value evaluates to false in the boolean context.
light Indicates that user has notified the system that they prefer an interface that has a light theme.
dark Indicates that user has notified the system that they prefer an interface that has a dark theme.

Mozilla Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Google Chrome: https://www.chromestatus.com/feature/5109758977638400

Suggestion

  ${media.prefersColorScheme("dark")`
    body {
      background-color: black;
      color: white;
    }
  `}

What do you think about it?

My npm run build, using webpack 2, code splitting and uglify js, fails with an exit status of 2. Reason being Uglify js doesn't support es6 yet (mishoo/UglifyJS#448)

You might want to distribute this library with a compiled es5 version for npm (see https://github.com/rollup/rollup/wiki/pkg.module).

Sometimes you need to do custom css that only applies for specific devices (i.e. iphone x). Would be cool if you had built in features for these.

Here's an example:

const Cool = styled.div`
  ${media.iphonex`
    /* styles to be applied to iphonex only */
  `}
`

Or something like

const Cool = styled.div`
  ${media.device('iphonex').orientation('portrait')`
    /* styles to be applied to iphonex only */
  `}
`

Here's some iphone device media queries

const media = {
  iphonex: (...args) => css`
    @media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {
      ${css(...args)}
    }
  `
}

Been using this package for multiple projects and really like it. However, in my latest project I'm using TypeScript and because of this I found a bug in styled-media-query.

I got a styled components which expects a isVisible boolean prop:

interface OverlayProps {
    isVisible: boolean;
}

export const Overlay = styled.div<OverlayProps>`
    color: ${({ isVisible }): string => (isVisible ? 'red' : 'green')};
`;

This all works fine and TypeScript doesn't throw any errors. However, if I try to use the isVisible prop inside media I'm getting errors:

interface OverlayProps {
    isVisible: boolean;
}

export const Overlay = styled.div<OverlayProps>`
    opacity: ${({ isVisible }): string => (isVisible ? '0.3' : '0')};

    ${media.lessThan('large')`
        background-color: ${({ theme }): string => theme.shades.one};
        position: fixed;
        top: 52px;
        left: ${({ isVisible }): string => (isVisible ? '260px' : '0')};
        width: 100%;
        height: 100%;
        z-index: 2;
        opacity: ${({ isVisible }): string => (isVisible ? '0.3' : '0')};
        cursor: pointer;
        transition: all 300ms ease;
    `}
`;

The left and opacity declarations are throwing the following error: Property 'isVisible' does not exist on type 'ThemeProps<any>'.

Screenshot:

Please let me know if you need any more information. Any help would be greatly appreciated!