Prevent ReferenceError in style tags

[steebchen]

When I use inline media queries like this:

<style>
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1
  }
}
</style>

it shows this error:

ReferenceError: Problem while rendering template at line 60, character 0.
Original message: keyframes is not defined.
Context: 

    58 |         }
    59 | 
  > 60 |         @keyframes blink {
    61 |             0% {
    62 |                 opacity: 0;
    63 |             }


    at eval (eval at <anonymous> (/home/luca/Documents/projects/nodejsapp/node_modules/vash/runtime.js:308:26), <anonymous>:562:28)
    at linked (/home/luca/Documents/projects/nodejsapp/node_modules/vash/runtime.js:348:14)
    at /home/luca/Documents/projects/nodejsapp/node_modules/vash/lib/helpers/layout.js:80:22
    at Object.vash.loadFile (/home/luca/Documents/projects/nodejsapp/node_modules/vash/lib/helpers/layout.js:68:11)
    at View.vash.renderFile.vash.__express [as engine] (/home/luca/Documents/projects/nodejsapp/node_modules/vash/lib/helpers/layout.js:76:8)
    at View.render (/home/luca/Documents/projects/nodejsapp/node_modules/express/lib/view.js:126:8)
    at tryRender (/home/luca/Documents/projects/nodejsapp/node_modules/express/lib/application.js:639:10)
    at EventEmitter.render (/home/luca/Documents/projects/nodejsapp/node_modules/express/lib/application.js:591:3)
    at ServerResponse.render (/home/luca/Documents/projects/nodejsapp/node_modules/express/lib/response.js:961:7)
    at /home/luca/Documents/projects/nodejsapp/Steebchen/app.js:139:6
    at Layer.handle [as handle_request] (/home/luca/Documents/projects/nodejsapp/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/luca/Documents/projects/nodejsapp/node_modules/express/lib/router/route.js:131:13)
    at Route.dispatch (/home/luca/Documents/projects/nodejsapp/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/home/luca/Documents/projects/nodejsapp/node_modules/express/lib/router/layer.js:95:5)
    at /home/luca/Documents/projects/nodejsapp/node_modules/express/lib/router/index.js:277:22
    at Function.process_params (/home/luca/Documents/projects/nodejsapp/node_modules/express/lib/router/index.js:330:12)
    at next (/home/luca/Documents/projects/nodejsapp/node_modules/express/lib/router/index.js:271:10)
    at /home/luca/Documents/projects/nodejsapp/node_modules/express-subdomain/index.js:37:5
    at Layer.handle [as handle_request] (/home/luca/Documents/projects/nodejsapp/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/home/luca/Documents/projects/nodejsapp/node_modules/express/lib/router/index.js:312:13)

It would be great if @keyframes and @media could be simply ignored.
I obviously could just use @@ instead but this breaks my syntax highlighting in IntelliJ Idea:

(The only thing I am currently missing is a vash plugin for IntelliJ Idea.. maybe I'll write it one day..)

Meanwhile, I'll add this to prevent this temporarily:
@{ var keyframes = '@keyframes'; }

Thanks again for vash and maintaining it - it's so freakin' awesome! Can I anyhow donate you a coffee?

node -v: v5.5.0
npm list vash: vash@0.11.2

[kirbysayshi]

Thanks for the kind words! I haven't really considered any sort of donations, perhaps I'll look into something.

I think this idea is pretty interesting! I have an idea of how to implement it, and I don't think it would be too difficult. But I am concerned that this sort of nicety might be confusing if someone weren't expecting it. Also of course the maintenance cost of something like this... are @keyframes and @media the only exceptions? I suppose they're only really valid within a style tag, so maybe that's the key difference here.

I'll have to think about this for a while, but if you have other input please share it. I wonder how razor itself handles this... it's been so long since I used it.

[steebchen]

You can simply give me your PayPal email or a Bitcoin wallet address ;)

Yes, they are only used in the style tag. Here is an article where you can find all css @-rules. I don't think there will be released dozens of brand new @-rules.

As far as I know, razor doesn't handle it either, you have to use @@ too.

I think a good solution would be to ignore these specific @-rules in style tags. To prevent that people use these variable names for non-@-rules, you maybe could throw an error that this name is a reserved rule. Another possible solution: like as I said, but when a user defines e.g. { var media = 'foo'; }, @media would just return foo instead of @media.

Another (but rather crazy) idea would be to simply ignore uninitialized variables and print an at sign and their name instead, but that would probably be bad when users do typos and they don't see any error.

But yeah, think of it. Not the most urgent issue. Razor had no solution either for this..