Media Query sass-like mixin

[Jones-S]

Maybe this is not an issue at all, but I don't know what the reason could be for my missing functionality.

I am trying to get this to work for quite some time now:
https://github.com/styled-components/styled-components/blob/master/docs/tips-and-tricks.md#more-powerful-example

I use the exact same code (except that I import import { css } from 'vue-styled-components' , but somehow the wrapped code ${css(...args)} within

export const media = {
  handheld: (...args) => css`
    @media (max-width: 420px) {
      ${css(...args)}
    }
  `
}

is not executed, or at least the rules dont show up in my styles. Is this a problem of vue-styled-components or am I just missing something out?

thanks for the help.

[Jones-S]

Well.. after a long trial and error phase we found the following:

This code did not work:

// tools.mediaqueries.js
import { css } from 'vue-styled-components'

export const media = {
  handheld: (...args) => css`
    @media (max-width: 420px) {
      ${css(...args)}
    }
  `
}

together with

//tools.typography.js
import { media } from './tools.mediaqueries'

export function fontSizeBase () {
  return `
    font-size: 124px;
    line-height: 1.2;

    ${media.handheld`
      text-decoration: underline;
      color: lightblue;
    `}
  `
}

Although in my opinion it is the exact same thing they are doing here
https://github.com/styled-components/styled-components/blob/master/docs/tips-and-tricks.md#more-powerful-example

After playing around we found out that adding the following did the trick:

import { css } from 'vue-styled-components'

export function fontSizeBase () {
  return css`

I therefore ended up with:

// tools.mediaqueries.js
import { css } from 'vue-styled-components'

export const media = {
  handheld: (...args) => css`
    @media (max-width: 420px) {
      ${css(...args)}
    }
  `
}

and

import { css } from 'vue-styled-components'
import { media } from './tools.mediaqueries'

export function fontSizeBase () {
  return css`
    font-size: 124px;
    line-height: 1.2;

    ${media.handheld`
            text-decoration: underline;
      color: lightblue;
    `}
  `
}

I also tested it with further nested functions. like this for example:

import { rem } from 'polished'
import { css } from 'vue-styled-components'
import { media } from './tools.mediaqueries'
import * as variables from './settings.variables'

export function fontSizeBase () {
  return css`
    font-size: ${rem('142px')};
    line-height: ${variables.sLineHeightFontBase};

    ${media.handheld`
      font-style: ${'italic'};
      letter-spacing: ${rem('-20px')};
      text-decoration: underline;
      color: lightblue;
    `}
  `
}

I use the px to rem function from https://github.com/styled-components/polished
and added some variables which I import, just to see if everything is correctly passed through all those functions.
And it did. 🎉

Another nice thing about writing

render css`

Is that the atom language-babel package highlights the css within the js file correctly when it gets the css hint.

Unfortunately this stops after

${media.handheld`

And writing

${media.handheld(css`…`)}

is making the file look nicer because of correct css syntax highlighting, but breaks the functionality again.

Maybe you have some input for that.
I don't know if the example works fine in react, but obviously it does not in vue, so maybe updating the docs with my found hint may help others to get those «sass-like mediaquery mixins» to work.

Even better would be if someone could explain me what exactly happens, and what goes wrong when using the proposed code from styled components.

Cheers

[liqueflies]

Thank you @Jones-S I'll take a look on that :)

[eugeneross]

Looking for a similar implementation. Any update on this? @liqueflies

[tollswap]

`. // tools.mediaqueries.js

  import { css } from 'vue-styled-components'
  export const media = {
      handheld: (...args) => css`
          @media (max-width: 420px) {
             ${css` ${args}` }
         } `
   } `

After messing up a bit this working

[lilasquared]

@tollswap any chance you have this working with typescript?