Closed tbremer closed 6 years ago
Hey @tbremer, sorry for the late reply :pensive:
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: https://github.com/MadLittleMods/postcss-css-variables/blob/4265ae711f5e5832516e3205daba925d8dfb8b03/index.js#L237
resolveDecl(decl, map, opts.preserve, logResolveValueResult);
@tbremer Care to make a PR?
Where can I find this output if I'm using gulp? All I see is indexOf errors with no trace.
@stephenway postcss-reporter
will probably show them
Would be nice to have that. Don't want to have 'undefined' properties in my distribution bundle by accident.
That is still the issue. Warnings still are not displayed. Is there any workaround?
@MadLittleMods postcss-reporter doesn't show any warnings in case of undefined variables
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: https://github.com/MadLittleMods/postcss-css-variables/pull/69
Hi, the warning about using CSS vars without fallback can be disabled?
@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
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 anundefined
butresults.messages
&results.warnings()
both return blank.Please let me know if I can help in anyway! :beers: