wolfgangkluge / postcss-media-variables Goto Github PK

I am running a series of PostCSS plugins in the order shown below. When using the postcss-media-variables, all media queries are removed from the output.

package.json script
postcss --use precss --use postcss-media-variables --use autoprefixer --use postcss-calc --use postcss-media-variables

css files
`.my-class {
padding-top: 0;
border-bottom: none;

@media (max-width: calc($(screen-sm-min) - 1)) {
    padding-left: 0;
    padding-right: 0;
}

}`

Hello guys! I have a strange behaviour when I try to use these two packages. Here is my gulp-pipe task for postcss:

    .pipe(
      postcss([
        postcssimport(),
        mediavariables(),
        hexalpha(),
        autoprefixer(),
        mqpacker({
          sort: (a, b) => a.localeCompare(b),
        }),
        mediavariables(),
      ])
    )

The code I want to convert:

:root {
  --min-width: 200px;
}
@media (min-width: var(--min-width)) {
  body {
    background: red;
  }
}

If I use it this way, I get this result. I have "background: red" in the css bundle, but some of the media queries are undefined:

If I swap mqpacker with the mediavariables task, I get this result(there are no any info about "background: red"):

Could you tell me how I can fix it?

Upgrade the PostCSS dependency to v5.x and use new walk methods.

I've setup the plugin to run via postcss-loader and a postcss.config.js file. However, it appears the plugin isn't ran a second time.

Is this a limitation on using postcss-loader and postcss.config.js or is this a bug?

In the min-width in sub-decl.output.css spec you are leaving off a semi colon.

I discovered this whilst tracking down another issue extra new lines between rules I'm not sure if that is related to this.

Cheers

I cannot seem to get this plugin to work.

I'm using postcss-loader through webpack 2 and I have the following in my PostCSS config file:

module.exports = () => ({
  plugins: {
    'postcss-import': {},
    'postcss-media-variables': {},
    'postcss-cssnext': {
      browsers: ['last 2 versions']
    }
  }
});

Here are the version numbers of the packages I'm using:

"postcss-cssnext": "^2.10.0",
"postcss-import": "^9.1.0",
"postcss-loader": "^1.3.3"

The output of this results in the following:

::-postcss-media-variables {-postcss-media-run: 1 }
::-postcss-media-variables {-pcs-mv-40-12e: 500px }

@media (max-width:-pcs-mv-40-12e) {
  ::-postcss-media-variables {
    .zOWzDY-App-h1-heading {
      background: red;
    }
  }
}

I tried adding in the postcss-media-variables plugin twice in my PostCSS config file, but this didn't seem to make a difference.

Do you know of a way to get this working with postcss-loader?

Doesn't seem like the second run works anymore. Here's the example from README.md, shortened a little bit:

const postcss = require("postcss");
const mediaVariables = require("postcss-media-variables");
const css = `
	:root {
		--min-width: 1000px;
		--smallscreen: 480px;
	}
	@media (min-width: var(--min-width)) {}
`;
// Process your CSS
const output = postcss([
        mediaVariables(), // first run
        mediaVariables() // second run
    ])
    .process(css)
    .css;

console.log(output);

The output is ([email protected]):

        :root {
                --min-width: 1000px;
                --smallscreen: 480px;
        }
        @media (min-width: var(--min-width)) {}

and with the newest [email protected], the output is:

::-postcss-media-variables {
                /* If you can see this comment, you might have forgotten to add
postcss-media-variables to the plugin list for a second time.

Otherwise, it's a bug :) Sorry
Please report here: https://github.com/WolfgangKluge/postcss-media-variables/issues */
                -postcss-media-run: 1;
}
        :root {
                --min-width: 1000px;
                --smallscreen: 480px;
        }
        ::-postcss-media-variables {
                /* If you can see this comment, you might have forgotten to add
postcss-media-variables to the plugin list for a second time.

Otherwise, it's a bug :) Sorry
Please report here: https://github.com/WolfgangKluge/postcss-media-variables/issues */
}
        ::-postcss-media-variables {
                /* If you can see this comment, you might have forgotten to add
postcss-media-variables to the plugin list for a second time.

Otherwise, it's a bug :) Sorry
Please report here: https://github.com/WolfgangKluge/postcss-media-variables/issues */
}

If customMedia option preserve: true error build. With option preserve: false good work. And necessarily import css variables in css file where used vars

We are using postcss-custom-media along with postcss-media-variables and postcss-custom-properties together in a monorepo setup.

We found out that our custom media query was not parsed correctly.
@media (--sm-and-below) was parsed to @media screen and (max-width: var(-screen-sm-max)).
@media (--sm-and-below) is defined as @custom-media --sm-and-below screen and (max-width: var(--screen-sm-max)); with --screen-sm-max defined somewhere else.

We ended up reordering the plugin like so and it worked.

• postcss-custom-media (this one got moved to the first)
• postcss-media-variables (first occurence)
• postcss-custom-properties
• postcss-media-variables (second occurence)

Not sure if my setup was wrong or the problem lies with one of the plugins we use.

Use properties for different stages of running to avoid confusion and add more composibility, flexibility: mediaVariables.inspect() and mediaVariables.resolve()

var postcss = require('postcss');

var mediaVariables = require('postcss-media-variables');

var mycss = fs.readFileSync('input.css', 'utf8');

// Process your CSS
var output = postcss([
        mediaVariables.inspect(), // first run
       // ...
        mediaVariables.resolve() // second run
    ])
    .process(mycss)
    .css;

console.log(output);

Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.14, but postcss-media-variables us es 6.0.23.

I am trying to use this with PostCSS v5 before the upgrade (should work, just deprecated method warnings).

I ran the tests on this repo and they pass but when I try to use this plugin, it keeps ::-postcss-media-variables bugs in the output. It seems to happen whether I run the other plugins in the stack or not.

"devDependencies": {
    "postcss": "^5.0.6",
    "postcss-calc": "^5.0.0",
    "postcss-css-variables": "^0.5.0",
    "postcss-custom-media": "^5.0.0",
    "postcss-import": "^7.0.0",
    "postcss-media-variables": "^1.1.2"
}

'use strict';

let postcss = require('postcss');
let mediaVariables = require('postcss-media-variables');

let cssVariables = require('postcss-css-variables');
let calc = require('postcss-calc');
let customMedia = require('postcss-custom-media');

let warningToString = function(warning) {
    return warning.type + ': ' + warning.text;
};


let processor = postcss(
    mediaVariables(),
    /* */
    customMedia(),
    cssVariables(),
    calc(),
    /* */
    mediaVariables()
);

let input = `
:root {
    --min-width: 1000px;
}
@media (max-width: calc(var(--min-width) - 1px)) {}
`;

processor
    .process(input)
    .then(function (result) {
        let output = result.css;
        let warnings = result.warnings().map(warningToString).join('\n\n');

        console.log(output);
    });