csstools / postcss-custom-media Goto Github PK
View Code? Open in Web Editor NEWUse Custom Media Queries in CSS, following the CSS Media Queries specification
License: MIT License
Use Custom Media Queries in CSS, following the CSS Media Queries specification
License: MIT License
When using a custom property (as outlined in postcss-custom-properties, my custom property is not resolved inside a custom media definition.
:root {
--ms6: 4.5em;
}
@custom-media --palm (min-width: var(--ms6));
@media (--palm) {
html {
color: red !important;
}
}
@media min-width: var(--ms6) {
html {
color: red;
}
}
My custom property should be resolved.
:root {
--ms6: 4.5em;
}
@custom-media --palm (min-width: var(--ms6));
@media (--palm) {
html {
color: red !important;
}
}
@media (min-width: 4.5em) {
html {
color: red;
}
}
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))
add a custom property
use it in an @custom-media
definition
see that your output contains the custom property name, not the rendered value.
Am I doing anything wrong?
Thanks!
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>
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
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!
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.
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.
It works correctly only if queries file has css
extension. But it doesn't work for pcss
.
module.exports = () => ({
plugins: {
'postcss-import': {},
'postcss-preset-env': {
features: {
'custom-media-queries': {
importFrom: '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);
@media (--small-screen) {
body {
background: #eee;
}
}
{
"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"
}
}
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";
}
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.
@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 */
}
}
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?
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.
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);
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 ๐
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?
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
Do you think this should be supported?
@custom-media --foo (width < 10em);
@custom-media --bar (--foo);
I also asked it on www-style.
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:
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
.
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?
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.
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! ๐
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' } ]
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; }
}
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?
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?
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 extensions
option 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
?
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!
I don't see in the releases the fact you removed the option/attribute "extensions" which I used.
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!
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.
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
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
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 {[...]}
}
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.)
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?
Cool plugin. Can you add it to examples list in PostCSS README if it finished?
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.
Tests are probably buggy because it indicate that it should works without.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.