When a selector only has CSS variables and no other inherited or applied properties, we don't show the rule.
<rdar://problem/24644058>
Created attachment 271284 [details] Patch
Created attachment 271285 [details] Screenshot
Some follow up bugs. Bug 154216 and bug 154217.
Created attachment 271291 [details] Computed Styles Screenshot They show up in computed styles, as expected too.
Comment on attachment 271284 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=271284&action=review Looks good to me, but I'm not a reviewer. > Source/WebInspectorUI/UserInterface/Models/CSSProperty.js:45 > + return /^--[\w-]+$/.test(name); "--9" is a valid CSS variable name in WebKit, I just checked. This regex should be fine.
(In reply to comment #6) > Comment on attachment 271284 [details] > Patch > > View in context: > https://bugs.webkit.org/attachment.cgi?id=271284&action=review > > Looks good to me, but I'm not a reviewer. > > > Source/WebInspectorUI/UserInterface/Models/CSSProperty.js:45 > > + return /^--[\w-]+$/.test(name); > > "--9" is a valid CSS variable name in WebKit, I just checked. This regex > should be fine. So I just tested this, and the variable name "--" is valid in the Nightlies. Not really sure if that's a bug, as it doesn't work in Chrome, but if that is allowed via the spec then we may want to change the regex to /^--[\w-]*$/
(In reply to comment #7) > (In reply to comment #6) > > Comment on attachment 271284 [details] > > Patch > > > > View in context: > > https://bugs.webkit.org/attachment.cgi?id=271284&action=review > > > > Looks good to me, but I'm not a reviewer. > > > > > Source/WebInspectorUI/UserInterface/Models/CSSProperty.js:45 > > > + return /^--[\w-]+$/.test(name); > > > > "--9" is a valid CSS variable name in WebKit, I just checked. This regex > > should be fine. > > So I just tested this, and the variable name "--" is valid in the Nightlies. > Not really sure if that's a bug, as it doesn't work in Chrome, but if that > is allowed via the spec then we may want to change the regex to /^--[\w-]*$/ A custom property is defined as: <https://drafts.csswg.org/css-variables/#defining-variables> (CSS Custom Properties 1) > A custom property is any property whose name starts with two dashes > (U+002D HYPHEN-MINUS), like --foo. The <custom-property-name> > production corresponds to this: itβs defined as any valid identifier > that starts with two dashes. An "identifier" here means: <https://drafts.csswg.org/css-syntax-3/#identifier> (CSS Syntax 3) > identifier > A portion of the CSS source that has the same syntax as an <ident-token>. And an <ident-token> has this sweet diagram: <https://drafts.csswg.org/css-syntax-3/#ident-token-diagram> So if we are looking at <ident-token> starting with two dashes (a subset of that diagram), then yes, I see both "--" and "--9" as valid tokens.
Comment on attachment 271284 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=271284&action=review r=me >>>> Source/WebInspectorUI/UserInterface/Models/CSSProperty.js:45 >>>> + return /^--[\w-]+$/.test(name); >>> >>> "--9" is a valid CSS variable name in WebKit, I just checked. This regex should be fine. >> >> So I just tested this, and the variable name "--" is valid in the Nightlies. Not really sure if that's a bug, as it doesn't work in Chrome, but if that is allowed via the spec then we may want to change the regex to /^--[\w-]*$/ > > A custom property is defined as: > <https://drafts.csswg.org/css-variables/#defining-variables> (CSS Custom Properties 1) Technically an escape sequence is allowed here as well: <https://drafts.csswg.org/css-syntax-3/#escape-diagram> --\u1234: valid; Perhaps just checking if it starts with double dashes is enough? name.startsWith("--");
Created attachment 271365 [details] Patch for Landing
Comment on attachment 271365 [details] Patch for Landing Clearing flags on attachment: 271365 Committed r196597: <http://trac.webkit.org/changeset/196597>
All reviewed patches have been landed. Closing bug.