LearnBoost/stylus — Issue #535: Bug: post-fix if throws: Cannot read property 'length' of undefined
Author: jasonkuhrt
Created: 2012-01-20 14:53:05+00:00
State: open

The following function has 2 forms. The first version passes fine, no errors:

// This is a technique to customize input[tpye=file] ui
// there is no native way to paint the look-and-feel of the the input[type=file]
// so the strategy is as follows:
// - create a container styled as our button
// - put our label inside it
// - put our input[type=file] in it, but: hidden and stacked on top
// in short we make it feel like users are clicking on our custom button
// but in reality they are clicking on an invisible input[type=file]
custom-file-input(ccursor=false)
relative()
// prevent input[type=file] from having any possible click-events triggered outside our custom container
overflow hidden
input[type=file]
if ccursor
cursor ccursor
// cover whole container
absolute(0)
// hide input[type=file] via opacity to retain click events
// force to a reasonably high z-index to ensure it stacks above
// the visual customization
z-index 10
opacity 0
// padding because we cannot
// change cursor over file
// input button directly
// ... this ensures the button
// itself is always overflown
// and we're dealing with its padding
// which will respect the cursor
// property
padding 100% o o 100%

.button-file-input
custom-file-input(pointer)

Now watch the bug reveal itself. I use a post-if for the `cursor` property

// This is a technique to customize input[tpye=file] ui
// there is no native way to paint the look-and-feel of the the input[type=file]
// so the strategy is as follows:
// - create a container styled as our button
// - put our label inside it
// - put our input[type=file] in it, but: hidden and stacked on top
// in short we make it feel like users are clicking on our custom button
// but in reality they are clicking on an invisible input[type=file]
custom-file-input(ccursor=false)
relative()
// prevent input[type=file] from having any possible click-events triggered outside our custom container
overflow hidden
input[type=file]
cursor ccursor if ccursor
// cover whole container
absolute(0)
// hide input[type=file] via opacity to retain click events
// force to a reasonably high z-index to ensure it stacks above
// the visual customization
z-index 10
opacity 0
// padding because we cannot
// change cursor over file
// input button directly
// ... this ensures the button
// itself is always overflown
// and we're dealing with its padding
// which will respect the cursor
// property
padding 100% o o 100%

.button-file-input
custom-file-input(pointer)

TypeError: /Users/KUHRT/code/artfox/app/assets/stylesheets/the-website/modules/ui.styl:72
68| relative()
69| // prevent input[type=file] from having any possible click-events triggered outside our custom container
70| overflow hidden
71| input[type=file]
> 72| cursor ccursor if ccursor
73| // cover whole container
74| absolute(0)
75| // hide input[type=file] via opacity to retain click events

Cannot read property 'length' of undefined
at "undefined" (/Users/KUHRT/code/artfox/app/assets/stylesheets/the-website/modules/ui.styl:72)
at custom-file-input() (/Users/KUHRT/code/artfox/app/assets/stylesheets/the-website/modules/ui.styl:68)
at ".button-file-input" (/Users/KUHRT/code/artfox/app/assets/stylesheets/the-website/modules/ui.styl:91)

at Evaluator._mixin (/usr/local/lib/node_modules/stylus/lib/visitor/evaluator.js:843:18)
at Evaluator.mixin (/usr/local/lib/node_modules/stylus/lib/visitor/evaluator.js:829:8)
at Evaluator.visitIf (/usr/local/lib/node_modules/stylus/lib/visitor/evaluator.js:579:10)
at Evaluator. (/usr/local/lib/node_modules/stylus/lib/visitor/index.js:28:39)
at Evaluator.visit (/usr/local/lib/node_modules/stylus/lib/visitor/evaluator.js:74:18)
at Evaluator.visitBlock (/usr/local/lib/node_modules/stylus/lib/visitor/evaluator.js:516:39)
at Evaluator. (/usr/local/lib/node_modules/stylus/lib/visitor/index.js:28:39)
at Evaluator.visit (/usr/local/lib/node_modules/stylus/lib/visitor/evaluator.js:74:18)
at Evaluator.visitGroup (/usr/local/lib/node_modules/stylus/lib/visitor/evaluator.js:158:22)
at Evaluator. (/usr/local/lib/node_modules/stylus/lib/visitor/index.js:28:39)