csstools/postcss-custom-media

Use Custom Media Queries in CSS, following the CSS Media Queries specification

postcss-custom-media's Issues

File-based modularised definitions not propagating up.

I have the following directory structure:

src
  |-- web
  |     |-- styles
  |           |-- settings.less
  |           |-- site.less
  |-- universal
        |-- components
              |-- navbar
                    |-- navbar.less

Where navbar.less imports site.less, which imports settings.less.

Inside settings.less I have the following:

@custom-media --small (max-width: 24em);
@custom-media --medium (max-width: 40em);
@custom-media --large (max-width: 50em);
@custom-media --xl (max-width: 73em);

Inside site.less, I have:

@import "./settings.less";

And inside navbar.less, I am attempting to use --small as follows:

@import (reference) 'site.less';

#navbar {
 @media screen and (--small) {
    .following.bar {
      visibility: visible;
    }
    .main.menu {
      visibility: hidden;
    }
  }
  &.active {
    width: 100vw;
    height: 100vh;
    background-color: #aaa;
  }
}

(Note that I have set up an alias in webpack to resolve site.less correctly.)

Now, when building this config, I get the following WARNING:

WARNING in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./src/universal/components/navbar/navbar.less
(Emitted value instead of an instance of Error) postcss-custom-media: /home/panoplos/Documents/Development/Node.js/testing-postcss/src/universal/components/navbar/navbar.less:6:2: Missing @custom-media definition for '--small'. The entire rule has been removed from the output.
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-custom-media: /home/panoplos/Documents/Development/Node.js/testing-postcss/src/universal/components/navbar/navbar.less:6:2: Missing @custom-media definition for '--small'. The entire rule has been removed from the output.

How can I get this to work correctly?

Please add the option for disable all warnings

We use the common styles in different projects and do not always need media settings, I would like to turn off warnings for a clean console for example from postcss-custom-properties https://github.com/postcss/postcss-custom-properties#warnings

Thank you!

How to specify a range instead of min/max width?

Is it possible to declare a custom media as a range? Something like this?

@custom-media --medium-screen (min-width: 1024px, max-width: 1220px);

examples 15 and 26 here:
https://www.w3.org/TR/mediaqueries-4

Add extensions using node api

See: https://github.com/reworkcss/rework-custom-media

But I'd probably call the property extensions rather than map. Handy to be able to set these from JS like you can with custom properties.

(Also would be cool to acknowledge the rework plugins many of these postcss plugins were based on.)

Using extensions to define global breakpoints doesn't work

My postcss.config.js looks like this:

require('postcss-custom-media')({
  '--bp1': '(min-width: 320px)',
  '--bp2': '(min-width: 760px)',
  '--bp3': '(min-width: 1200px)',
  '--bp4': '(min-width: 1760px)',
}),

My css looks like this:

...wrapping class definition
@media (--bp2) {
  display: inline-block;
}

The styles are simply ignore and not output.

Am I missing something?

min-width & max-width

Hello,

Is it possible to set a breakpoint between a min and max width? For example:
@custom-media --phone-and-tablet (min-width: 480px and max-width: 768px);

This is a common practice, but I do not see any documentation for postcss-custom-media with this technique. I tried the above, which didn't work.

Thanks in advance

Interoperability issue with postcss-custom-properties

This is actually a cssnext issue but it's the interoperability between postcss-custom-properties and postcss-custom-media that fails. Not sure where the code change should be but posting this in all 3 repositories.

Using variables inside a media query doesn't get processed.
Test case: postcss -u postcss-cssnext var.css

<h1 class="mobile">MOBILE</h1>
<h1 class="desktop">DESKTOP</h1>

:root {
  --with-var: 640px;
}
.desktop { display: none; }
@media screen and (min-width: var(--with-var)) {
  .mobile {
    display: none;
  }
  .desktop { display: block; }
}

Should output:

.desktop { display: none; }
@media screen and (min-width: 640px) {
  .mobile {
    display: none;
  }
  .desktop { display: block; }
}

Instead it outputs

Warning {
  type: 'warning',
  text: 'Missing @custom-media definition for \'--with-var\'. The entire rule has been removed from the output.',
  line: 5,
  column: 1,
  node: 
   AtRule {
     raws: 
      { before: '\n',
        between: ' ',
        afterName: ' ',
        semicolon: false,
        after: '\n' },
     type: 'atrule',
     name: 'media',
     parent: undefined,
     source: { start: [Object], input: [Object], end: [Object] },
     params: 'screen and (min-width: varundefined)',
     nodes: [ [Object], [Object] ] },
  plugin: 'postcss-custom-media' } 0 [ Warning {
    type: 'warning',
    text: 'Missing @custom-media definition for \'--with-var\'. The entire rule has been removed from the output.',
    line: 5,
    column: 1,
    node: 
     AtRule {
       raws: [Object],
       type: 'atrule',
       name: 'media',
       parent: undefined,
       source: [Object],
       params: 'screen and (min-width: varundefined)',
       nodes: [Object] },
    plugin: 'postcss-custom-media' } ]

2.0.0 is not on npm

npm/npm#7235

Media Queries not working

I have been pulling my hair out trying to get this working, I'm no doubt probably missing something here so hoping you can help me. I have the latest version of postcss-custom-media installed (v7.0.7) and here is my postcss.config.js file:

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-custom-media': {},
    'postcss-preset-env': {
      stage: 1,
      features: {
        'nesting-rules': true
      }
    },
    'cssnano': {
      autoprefixer: false
    }
  }
};

I've also been trying to use postcss-preset-env with the stage set to 1 and still no joy.

My CSS is as follows:

:root {
  @custom-media --breakpoint-xxl (min-width: 1920px);
  @custom-media --breakpoint-xl (min-width: 1680px) and (max-width: 1919px);
  @custom-media --breakpoint-l (min-width: 1280px) and (max-width: 1679px);
  @custom-media --breakpoint-m (min-width: 960px) and (max-width: 1279px);
  @custom-media --breakpoint-s (min-width: 640px) and (max-width: 959px);
  @custom-media --breakpoint-xs (min-width: 320px) and (max-width: 639px);
  @custom-media --breakpoint-xxs (max-width: 320px);
}

@media (--breakpoint-xxl) {
  /* do something */
}

They are just not being processed and are outputted in the resulting CSS file untouched. Any ideas?

simple-vars not resolved

Actual

When using a custom property (as outlined in postcss-custom-properties, my custom property is not resolved inside a custom media definition.

INPUT:

:root {
  --ms6: 4.5em;
}

@custom-media --palm (min-width: var(--ms6));

@media (--palm) {
  html {
    color: red !important;
  }
}

OUTPUT:

@media min-width: var(--ms6) {
  html {
    color: red;
  }
}

Expected

My custom property should be resolved.

INPUT:

:root {
  --ms6: 4.5em;
}

@custom-media --palm (min-width: var(--ms6));

@media (--palm) {
  html {
    color: red !important;
  }
}

OUTPUT:

@media (min-width: 4.5em)  {
  html {
    color: red;
  }
}

Reproduction

1. set up build (something like this):

     return gulp.src(paths.source.client.main_style)
     .pipe(postcss([
       inline({
         path: ['./app/styles/']
       }),
       customProperties(),
       customMedia()
     ]))
     .pipe(gulp.dest(paths.dest.client.styles))

2. add a custom property

3. use it in an @custom-media definition

4. see that your output contains the custom property name, not the rendered value.

Am I doing anything wrong?

Thanks!

How can I use custom media with design tokens?

I've begun to separate key design choices from my CSS which is helping me better manage the design of my projects using a tool called Theo. It works by storing abstract design values in a yaml or json file and then exports those values into you're preferred format. In our case the format is most likely CSS custom properties (although could be sass variables).

I'm using both Theo and Postcss-custom-media but I'm not sure how I can get them to work together because Theo outputs CSS custom variables which I don't think work inside custom media queries.

What are your thoughts?

Logging is missing file name

This is what I get with the latest version, whereas before you would be told what file the error was in:

<css input>:5:1: missing @custom-media definition for '--lg-viewport'. The entire rule has been removed from the output.

Broken AND operator since 7.x.x

Hey,

I experienced broken AND operator - issue occurred using version 7.0.2:

@media (--media-small-min) and (--media-medium-max)

I did not test OR listings and NOT but these operators might be broken as well.

Had to downgraded to 6.0.0 to get my project back working. Please restore this feature as I don't want to create countless AND variations from my breakpoints... :-)

Great plugin!

Use extension name in custom media definitions?

Do you think this should be supported?

@custom-media --foo (width < 10em);
@custom-media --bar (--foo);

I also asked it on www-style.

Is it possible to interpolate values for custom media?

Is there a way to change this:

@custom-media --small-viewport (max-width: 30em);

to this?

@custom-media --small-viewport (max-width: var(--my-custom-max-width));

I'm creating a component library with provided stylesheets and expose variables, this would be better for code re-use.

Is this a part of future CSS standard?

Hello!

Thank you for this great module!

It is a part of CSSNext suite and therefore should implement some future standard for CSS. However, I wasn't being able to find the specification for this "custom-media" standard.

Could you elaborate please? Thank you!

removing @import rules when missing semicolon ;

Tested with postcss version 5.0.9 and postcss-custom-media version 5.0.0.

Run postcss --use postcss-custom-media

Test case:

@custom-media --viewport-mobile (max-width: 640px)
/* =fonts */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300,300italic);

* {
  font-family: "Roboto";
}

Output:

* {
  font-family: "Roboto";
}

Can't use custom-media if it's defined inside node_modules

I'm using it through "postcss-preset-env": "^6.7.0"

I have a library for defining variables which is inside node_modules and it does not work. It works from local files though.

Update
Does not work with postcss-easy-import either.

Better explanation

Can you please write the following section so others can understand it or better yet provide an example.

Allows you to pass an object to define the <media-query-list> for each <extension-name>. These definitions will override any that exist in the CSS.

7.0 - media types not working

Since 7.0, this no longer works:
@custom-media --tabletUp screen and (min-width: 600px);
The output is:
@media screen(min-width: 600px)
Seems to be missing 'and'

This works fine:
@custom-media --tabletUp (min-width: 600px);

7.0 regression

Message:
    rule.params.replace is not a function
Details:
    postcssNode: @media (width < 660px) {

.header__content {
      lost-column: 16/16 flex
  }
    }
    fileName: /home/ai/Dev/cultofmartians/front/dev/main.pcss

Stack:
TypeError: rule.params.replace is not a function
    at /home/ai/Dev/cultofmartians/front/dev/blocks/header/header.pcss:9:5
    at /home/ai/Dev/cultofmartians/front/node_modules/postcss-media-minmax/index.js:71:33

var processors = [
  require('postcss-import')(),
  require('postcss-mixins')(),
  require('postcss-nested')(),
  require('postcss-simple-vars')(),
  require('postcss-property-lookup')(),
  require('postcss-assets')({
    basePath: 'dev/blocks'
  }),
  require('postcss-inline-svg')({
    path: 'dev/blocks'
  }),
  require('postcss-responsive-type')(),
  require('postcss-calc')(),
  require('postcss-hexrgba')(),
  require('postcss-custom-media')(),
  require('postcss-media-minmax')(),
  require('lost')(),
  require('autoprefixer')()
];

The error came from postcss-media-minmax but looks like AST was broken after postcss-custom-media because I got the error after postcss-custom-media update.

Could be relevant in error behind this question #38

Add to examples

Cool plugin. Can you add it to examples list in PostCSS README if it finished?

Not compile if a space

No error, but wrong output.

input.css

@media (--viewport-m ) {
  .foo {[...] } 
}

output.css

@media (--viewport-m ) {
  .foo {[...] } 
}

---

input.css

@media (--viewport-m) {
  .foo {[...] } 
}

output.css

@media all and (max-width: 48.115em) {
  .foo {[...]}  
}

custom media bug when nested

consider the following setup

// not nested
@media (--lg-viewport) {
    #Selector1 {
    // works as expected
  }
}

// nested
#Selector2 {
  @media (--lg-viewport) {
    // throws error (see below)
  }
}

// define query 
@custom-media --lg-viewport screen and (min-width: 60em);

The error:

postcss-custom-media: Missing @custom-media definition for '--lg-viewport'. The entire rule has been removed from the output.

now if I do the following:

// define custom query name beforehand
@custom-media --lg-viewport

// nested
#Selector2 {
  @media (--lg-viewport) {
    // works 
  }
}

// overwrite query 
@custom-media --lg-viewport screen and (min-width: 60em);

...everything works out and resolves to @media screen and (min-width: 60em). No error whatsoever

Could this be an interoperability issue with postcss-nesting?

Version 7.0.5 not being published to npm

Hey, somehow the latest version 7.0.5 does not seem to be published to npm

https://www.npmjs.com/package/postcss-custom-media

Can you have a look and publish the version? Thanks 🙏

Possibility to share custom media name and value with JS

It would be nice to write all custom media names and their values as content or font-family to the html or head element.

This would be helpfull to create a polyfill, monkey patch matchMedia and/or improve responsive images:

<picture>
    <source
        srcset="http://placehold.it/500x600/11e87f/fff"
        media="--small" />
    <source
        srcset="http://placehold.it/700x300"
        media="--medium" />
    <source
        srcset="http://placehold.it/1400x600/e8117f/fff"
        media="--large" />
    <img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt="image with artdirection" />
</picture>

Importing file with :root declarations

I take it using it like this is not supported, which was my 1st attempt?

@import "css-variables/breakpoints/generic.pcss";

generic:

:root {
  --small: 480px;
  --medium: 768px;
  --large: 992px;
  --xlarge: 1200px;
}

usage:

How to use with postcss-import ?

Hello,

I want to use several CSS files : one for to declare my custom media queries and the others for use it.

For this i use postcss-import, but postcss-custom-media doesn't work with it ?

Example :

/* declare.css */
@custom-media --small-viewport (max-width: 30em);

@import './declare.css';

@media (--small-viewport) {
  /* styles for small viewport */
}

With the files above, i get :

@custom-media --small-viewport (max-width: 30em);

and the styles for small viewport is missing !?

i try with the extensionsoption with the webpack config below, without success :-(.

  postcss: function(webpack) {
    return [
       require('postcss-import')({
        addDependencyTo: webpack
      }),
      require('postcss-custom-media')({
        extensions: {
          '--small-viewport': '(max-width: 30em)'
        }
      })

    ];
  },

If i put all in one file, everything working fine !

How to use postcss-custom-media with postcss-import ?

Help understanding changes from v6 to v7

Hi, it's me again 😅

Today my team and I found out a problem with v7 which we recently updated to. I tried finding out the cause, but somehow upgrading from 6.0.0 to 7.x.x breaks the transformations. There is no error during compilation but the media queries are not being transformed.

I'll explain a bit our setup, but my question would be if we need to configure something specific on our side or if there is a problem with the plugin.

You can see it below:

Our postcss config is as following:

{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    plugins: () => [
      postcssImport({ path: sourceFolders }),
      postcssPresetEnv({
        browsers: browserslist.development,
        autoprefixer: { grid: true },
      }),
      postcssCustomMediaQueries(),
      postcssCustomProperties({ preserve: false }),
      postcssColorModFunction(),
      postcssReporter(),
    ],
  },
},

An example of css module file that uses this is:

/* col.mod.css */
@import '@commercetools-frontend/ui-kit/materials/spacings.mod.css';
@import '@commercetools-frontend/ui-kit/materials/media-queries.mod.css';

:root {
  /* ... */
  --col-12-width: calc(100% / (12 / 12));
}

@media (--screen-min-mobile) and (--screen-max-desktop), (--screen-max-mobile) {
  /* ... */
  .col-xsm-12 {
    width: var(--col-12-width);
    padding: 0 0 var(--spacing-16);
  }
}

where --screen- come from media-queries.mod.css

/* media-queries.mod.css */

:root {
  /* MAX-WIDTH */
  @custom-media --screen-max-mobile (width < 768px); /* xsm */
  @custom-media --screen-max-desktop (width < 1024px); /* sm */
  @custom-media --screen-max-biggerdesktop (width < 1280px); /* md */
  @custom-media --screen-max-giantdesktop (width < 1680px); /* lg */
  @custom-media --screen-max-jumbodesktop (width < 1920px); /* xlg */

  /* MIN-WIDTH */
  @custom-media --screen-min-mobile (width >= 768px); /* xsm */
  @custom-media --screen-min-desktop (width >= 1024px); /* sm */
  @custom-media --screen-min-biggerdesktop (width >= 1280px); /* md */
  @custom-media --screen-min-giantdesktop (width >= 1680px); /* lg */
  @custom-media --screen-min-jumbodesktop (width >= 1920px); /* xlg */
}

This works fine with v6.0.0 but with v7.x.x stops working.

Any idea what is going on here? Any help would be much appreciated, thanks! 🙏

7.0.6 broke my css

@custom-media --mobile-landscape (min-width: 568px) and (max-width: 767px);

.foo {
  @media (--mobile-landscape) {
    /* something */
  }
}

postcss-custom-media 7.0.5

@media (min-width: 568px) and (max-width: 767px) {
  .foo {
    /* something */
  }
}

postcss-custom-media 7.0.6

@media (min-width: 568px)(max-width: 767px) {
  .foo {
    /* something */
  }
}

Can we define custom media variable as global

I define all @Custom-Media variables in settings.css but it shows error on all other pages. If i define @Custom-Media variable again on that particular page, it start working. If it can defined as global then no need of repeating codes.

Improper circular rule detection

Running up to date versions of everything, the following throws an error...

:root {
  --grid-mobile-width: 320px;
}

@custom-media --cell screen and (width < var(--grid-mobile-width));

@media (--cell) {}

⚠ Circular @Custom-Media definition for '--cell'. The entire rule has been removed from the output. [postcss-custom-media]

All relevant plugins are bundled in cssnext.

"extensions" option lost since new versions?

I don't see in the releases the fact you removed the option/attribute "extensions" which I used.

https://github.com/postcss/postcss-custom-media/releases

Incorrect expansion of @custom-media within import '...' $media-query

Given:

@import 'break-screen.css' screen;
@import 'break-print.css' print;
@import 'print' (--foo) print;
@import 'uses-unified-break.css';

Which with postcss-import results (I think):

@media screen {
  @custom-media --foo;
}
@media print {
  @custom-media --foo;
}

I would expect postcss-custom-media to apply @media rules correctly, such as

@media (--foo-from-print.css) print {
 contents of print.css
}

But instead it uses the last value of @Custom-Media and in this case the print.css value.

References not being transformed as expected

I've setup some components with custom media queries that will be used as defaults (--a and --b). I'm trying to configure them with a global (--c), similar to https://github.com/suitcss/theme. I'm getting an unexpected output.

Given this input:

@custom-media --a (foo: bar);

@media (--a) {
    selector { property: value; }
}

@custom-media --b (foo: bar);

@media (--b) {
    selector { property: value; }
}

@custom-media --c (bar: baz);

@custom-media --a (--c);
@custom-media --b (--c);

I get this output:

@media (bar: baz) {
    selector { property: value; }
}

@media (--c) {
    selector { property: value; }
}

I was expecting this output:

@media (bar: baz) {
    selector { property: value; }
}

@media (bar: baz) {
    selector { property: value; }
}

Using multiple selectors for a single block declaration block

I’d love to be able to do this:

@media (--small-viewport),
@media (--large-viewport) { … }

… but it doesn't seem to work. Is there a trick to using multiples with a single declaration?

Use PostCSS 8 events

Using the Once event is not a good practice. postcss-custom-media will not see changes made by other plugins (for instance, by postcss-mixins).

Moving to the AtRule event will improve other plugins' support.

Can't import queries from .pcss file

It works correctly only if queries file has css extension. But it doesn't work for pcss.

postcssrc.config.js

module.exports = () => ({
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {
      features: {
        'custom-media-queries': {
          importFrom: 'queries.pcss'
        }
      }
    }
  },
});

queries.pcss

@custom-media --small-screen (width <= 670px);
@custom-media --medium-screen (width <= 1000px);
@custom-media --big-screen (width < 1200px);
@custom-media --not-small-screen (width > 670px);

main.pcss

@media (--small-screen) {
    body {
        background: #eee;
    }
}

package.json

{
  "scripts": {
    "build": "postcss main.pcss -o ./public/bundle.css"
  },
  "devDependencies": {
    "postcss-cli": "^6.1.2",
    "postcss-import": "^12.0.1",
    "postcss-preset-env": "^6.6.0"
  }
}

extensions definition need t be prefixed by --

Tests are probably buggy because it indicate that it should works without.

See MoOx/cssnext-loader#15 (comment)

PostCSS 7 conflicts

Hello,

are you sure that "postcss": "^7.0.2" is absolutely needed? It causes other PostCSS plugins to fail that still need PostCSS 6 - therefore I had to downgrade your plugin.

Best regards
Henry

Breakpoints not working properly

I'm using the code from the example

.hi {
    display: none;
}

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
    .hi {
        display: block;
    }
}

to try to make a div appear on a Create-React-App project and it is not working. Is there something that I'm missing here?