NV / CSSOM

Unmaintained! ⚠️ CSS Object Model implemented in pure JavaScript. Also, a CSS parser.
https://nv.github.io/CSSOM/docs/parse.html
MIT License
752 stars 98 forks source link

Multiple-selector rules (definitions w. commas) #20

Closed psema4 closed 13 years ago

psema4 commented 13 years ago

I'm looking to use cssom alongside jsdom to validate (and expunge unused) css rules.

Cssom has saved me quite a bit of time but It seems like selectors separated by commas aren't treated as individual rules by cssom.

In my app the logic looks like:

  1. Set user-agent and request webpage
  2. Foreach CSS file
  3. Foreach selector
  4. Use jquery to count references to the current selector and store the count in a "registry"

The following is a log excerpt showing selectors read from the css file:

  • Setting UA: Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.63 Safari/534.3
  • Window Dimensions: 1024x768
  • Has document.getElementsByTagName: true
  • Processing css/ui.css:
  • Regsitry File Key: ui_css
  • Number of rules: 3296
  • Counting references to .ui-slider-vertical .ui-slider-range-max [clsui-slider-vertical-_cls_ui-slider-range-max]
  • Counting references to .ruler [cls_ruler]
  • Counting references to .ruler_time [cls_ruler_time]
  • Counting references to .ui-state-default1, .ui-widget-content .ui-state-default1 [clsui-state-default1,-_clsui-widget-content-_cls_ui-state-default1]
  • Skipping pseudo selector ".ui-state-default1 a, .ui-state-default1 a:link, .ui-state-default1 a:visited"

The rules above (with the last two showing commas) are from the jQuery UI CSS Framework:

.ui-state-default1, .ui-widget-content .ui-state-default1 { background: url(/js/sliders/aerow_normal.gif) 50% 50% no-repeat; font-weight: normal; color: #555555; outline: none; } .ui-state-default1 a, .ui-state-default1 a:link, .ui-state-default1 a:visited { color: #555555; text-decoration: none; outline: none; }

NV commented 13 years ago

... selectors separated by commas aren't treated as individual rules by cssom.

It has been done by design. Browsers do exact same thing.

You have to parse selectors on your own. I believe, simple split(',') would work in most cases.

psema4 commented 13 years ago

Fair enough - split's they way I've gone. Thanks @NV