CSS style selectors with multiple classes are not parsed correctly.

Environment info

• Cytoscape.js version : 3.21.0
• Browser/Node.js & version : Chrome/14.19.0

Current (buggy) behaviour

When specifying a style selector such as node.class1.class2 { ... } in a css file, cytoscape fails to parse the selector correctly. It actually parses the selector as [‘node’, ‘class1.class2’] instead of [‘node’, ‘class1’, ‘class2’]. This appears to be caused by an incorrect regular expression ^\\.((?:[\\w-.]|(?:\\\\[\\!\\\"\\#\\$\\%\\&\\'\\(\\)\\*\\+\\,\\.\\/\\:\\;\\<\\=\\>\\?\\@\\[\\]\\^\\`\\{\\|\\}\\~]))+) being used to match the class. The correct expression is ^\\.((?:[\\w-]|(?:\\\\[\\!\\\"\\#\\$\\%\\&\\'\\(\\)\\*\\+\\,\\.\\/\\:\\;\\<\\=\\>\\?\\@\\[\\]\\^\\`\\{\\|\\}\\~]))+) (i.e. without the . after the [\\w- part.

Desired behaviour Ability to specify more than one selector class in the css (e.g. node.class1.class2).

Minimum steps to reproduce Create a style sheet file called my-style.css that defines a style with more than one class as a selector:

node.class1.class2 {
  background-fill: solid;
  background-color: #268dae;
}

Create a cytoscape graph that specifies the style: require('./my-style.css') property in the config (e.g. var myGraph = cytoscape({ ..., style: require('./my-style.css'), ... }).

Observe that the consumeExpr function in src/selector/parse.js fails to correctly parse the .class1.class2 as two separate classes. Instead in parses it as a single class and therefore fails to match the style properly when the match[Type.CLASS] function (in src/selector/query-type-match.js is invoked. The class passed into the match[Type.CLASS] function is .class1.class2 and therefore never matches anything since the node.classes property is an array with each class as a separate element.

[mkelly1495]

I added a test that verifies correct behavior when an element has a period in the id name and updated the other tests where necessary.

[maxkfranz]

Your PR and issue are being used as an example to help onboard new contributors to Cytoscape.js. It will be merged in and released once that onboarding has completed – hopefully some time this week.

Thank you for your patience