Plugin doesn't return messages or warnings for undefined variable usage

[tbremer]

I am coming up with an issue that when I have declarations with a missing or non-existent variable the CSS returns undefined (which is expected) however no warnings or messages coming through to the result…here is a gist that contains a rudimentary setup.

if you pull down that gist and run node index.js you will see the compiled CSS compiles with an undefined but results.messages & results.warnings() both return blank.

:root {
    --font-family: 'Wingdings', 'Comic Sans', 'Papyrus', sans-serif;
}

body {
    font-family: var(--font-family);
    color: var(--black);
}

Please let me know if I can help in anyway! 🍻

[MadLittleMods]

Hey @tbremer, sorry for the late reply 😔

We currently only warn you about undefined variable usage when composing other CSS variables if there isn't a fallback provided.

input.css

:root {
    /* `--bar` isn't defined */
    --foo: var(--bar);
    /* `--qwer` isn't defined but we have a fallback so no warning will be added */
    --asdf: var(--qwer, #f00);
}

var postcss = require('postcss');
var readFile = require('fs').readFileSync;

var css = readFile('./input.css');

postcss([require('postcss-css-variables')])
    .process(css)
    .then(function(results) {
        console.log('messages', results.messages);
        console.log('warnings', results.warnings());
        console.log(results.css);
    });

Result:

messages [ Warning {
    type: 'warning',
    text: 'variable --bar is undefined and used without a fallback',
    line: 3,
    column: 2,
    node:
     Declaration {
       raws: [Object],
       type: 'decl',
       parent: undefined,
       source: [Object],
       prop: '--foo',
       value: 'var(--bar)' },
    plugin: 'postcss-css-variables' } ]
warnings [ Warning {
    type: 'warning',
    text: 'variable --bar is undefined and used without a fallback',
    line: 3,
    column: 2,
    node:
     Declaration {
       raws: [Object],
       type: 'decl',
       parent: undefined,
       source: [Object],
       prop: '--foo',
       value: 'var(--bar)' },
    plugin: 'postcss-css-variables' } ]
:root {
        /* `--bar` isn't defined */
        /* `--qwer` isn't defined but we have a fallback so no warning will be added */
}

---

But I can't remember on a decision either way for or against adding a warning for undefined usage on the substitutions on regular properties. Adding this in would probably be good though.

Adding this functionality is easy as passing in the logResolveValueResult function into the resolveDecl call here:

postcss-css-variables/index.js

Line 237 in 4265ae7

resolveDecl(decl, map, opts.preserve);

resolveDecl(decl, map, opts.preserve, logResolveValueResult);

@tbremer Care to make a PR?

[stephenway]

Where can I find this output if I'm using gulp? All I see is indexOf errors with no trace.

[MadLittleMods]

@stephenway postcss-reporter will probably show them

[herrernst]

Would be nice to have that. Don't want to have 'undefined' properties in my distribution bundle by accident.

[egorshulga]

That is still the issue. Warnings still are not displayed.
Is there any workaround?

[anru]

@MadLittleMods postcss-reporter doesn't show any warnings in case of undefined variables

[pixeldrew]

Can confirm, this postcss-reporter doesn't show any errors. It looks like resolveDecl(decl, map, opts.preserve, logResolveValueResult); wasn't added.

I've made a PR:
#69

[ronaiza-cardoso]

Hi, the warning about using CSS vars without fallback can be disabled?

[MadLittleMods]

@ronaiza-cardoso I don't think there is configurable a way in the plugin itself to disable. But this may work for you: https://stackoverflow.com/a/38914354/796832