Stylus doesn't throw error at not existed property in json

[mars-abd]

For example
data.json:

{
    "color": "black"
}

styles.styl:

$data = json('data.json', { hash: true })

div
    color: $data.someProp

Command:
npx stylus styles.styl
will compile:

div {
    color: ;
}

without any errors

Json func documentation:
https://stylus-lang.com/docs/bifs.html#jsonpath-options

[iChenLei]

Thanks for report.

[mars-abd]

https://stackoverflow.com/questions/41501951/is-there-a-way-to-trigger-an-error-in-stylus-when-missing-a-variable

[mars-abd]

It seems I have found out why stylus do this behaviour

red = #000

div
    color red // if no variable 'red' then stylus will do nothing and we will get there native color red css value

But it is so unobviously

[mars-abd]

But in this case:

div
    color $red

Stylus could throw error that 'red' variable is undefined

We have hundreds stylus files in project, and after some refactoring of styles data in json files we can't find all errors

[iChenLei]

# e.g add new stylus cli options ?
stylus iChenLei.styl -o iChenLei.css --json-check

@groenroos What's your opinion ?

[groenroos]

I don't know if a JSON-specific option like that would have a wide enough audience - but I do think in the wider view, there should be an option on whether to throw errors when any variables (JSON or otherwise) or properties/indices within hash variables don't exist (as per the StackOverflow thread linked above). Some kind of --strict mode or so.

As @mars-abd pointed out above, it would be easy to throw errors when dollar-prefixed variables don't exist - but then this would create a gotcha for people who prefer non-prefixed variables, where they might reasonably expect --strict to function for them and it doesn't.

// would throw an error
div
    color $foo

// would not throw an error, but would render as-is
// even though "foo" isn't a valid color
div
    color foo

So, either;

1. Non-prefixed variables never trigger undefined errors, and we accept the behaviour will be different here, compared to prefixed variables; or
2. Stylus has (and continues to maintain) a comprehensive list of every possible valid CSS literal non-numerical value (colours, directions, flex options, etc), and throws an error in --strict whenever you use something that isn't one of them and also isn't a defined variable

To put it in context of this issue, for consistency, I would see the missing JSON property error also as part of a --strict mode, that didn't affect current default behaviour.

[groenroos]

Having said that, according to the issue description there is a weird inconsistency, where the undefined JSON hash property will be rendered as empty, while other undefined variables get rendered as literals;

$colors = json('data.json', { hash: true })

// all the following are undefined
div
    color red
    background $blue
    border-color $colors.gray

would according to the above be currently rendered as;

div {
    color: red;
    background: $blue;
    border-color: ;
}

which is an unexplained inconsistency. I would expect the $colors.gray to also be rendered as a literal - regardless of whether it throws an error, or whether we make a --strict mode.