This Bugzilla instance is a read-only archive of historic NetBeans bug reports. To report a bug in NetBeans please follow the project's instructions for reporting issues.

Bug 262769

Summary: Support for css variables
Product: web Reporter: Petr Hejl <phejl>
Component: CSS EditorAssignee: Milutin Kristofic <mkristofic>
Status: NEW ---    
Severity: normal CC: merlin2v, ppisl, skylarmt, stevenwdv
Priority: P2    
Version: 8.2   
Hardware: All   
OS: All   
Issue Type: ENHANCEMENT Exception Reporter:
Attachments: patch

Description Petr Hejl 2016-07-11 13:14:25 UTC
We should support css variables as specified here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility

React is already using it.
Comment 1 Milutin Kristofic 2016-07-13 13:38:38 UTC
Created attachment 160370 [details]
patch

Here is my first try for parsing variables. Can I somehow test it with your examples?
Comment 2 Petr Hejl 2016-07-13 13:44:35 UTC
Clone https://github.com/kriasoft/react-starter-kit.git and watch for errors in css.
Comment 3 Milutin Kristofic 2016-07-13 13:52:20 UTC
I see now, they use future CSS features because they use this plugin http://cssnext.io/ There are more stuff that css for example color function etc. 

I will look at this, but this is more about supporting cssnext
Comment 4 skylarmt 2017-07-24 04:26:57 UTC
Most major browsers now support CSS variables: http://caniuse.com/#feat=css-variables.  At minimum Netbeans shouldn't show syntax errors when handling them, but the best thing would be variable autocompletion.
Comment 5 skylarmt 2017-07-24 04:39:58 UTC
Here's the spec URL: https://drafts.csswg.org/css-variables/
Comment 6 merlin2v 2017-09-10 22:26:37 UTC
I was looking up a way to have vars however NetBeans thinks it is an error.
Also I found that when using the CSS Styles window to edit styles it shows up the variable in category unknown as well as a var name will loose some of its beginning letters. 

Ex:

:root{
    --myVar: 18;
}

  ↓    ↓    ↓    ↓

----------------
[+] Unknown
----------------
 yVar  |  18   |


Note that "yVar" was red and was strike through and missing 'm'