Skip to content

Add test case that demonstrates a crash with ::slotted + attribute selector - #925

Closed
papandreou wants to merge 1 commit into
cssnano:masterfrom
papandreou:test/slottedAttributeSelector
Closed

Add test case that demonstrates a crash with ::slotted + attribute selector#925
papandreou wants to merge 1 commit into
cssnano:masterfrom
papandreou:test/slottedAttributeSelector

Conversation

@papandreou

@papandreou papandreou commented Jul 24, 2020

Copy link
Copy Markdown

I'm playing around with generating random CSS and stumbled upon a selector that crashes postcss-minify-selectors.

@anikethsaha

anikethsaha commented Jul 24, 2020 •
edited
Loading

Copy link
Copy Markdown
Member

Please share some more info
Creating an issue would be great

@papandreou

papandreou commented Jul 24, 2020 •
edited
Loading

Copy link
Copy Markdown
Author

I don't really have any more info. As I said I literally randomly stumbled upon it while playing with generated CSS. The selector appears to be valid according to the CSS Scoping Module Level 1 WD

The failing CI build has the stack trace of the failure:

    TypeError: Cannot read property 'trim' of undefined

      at <input css 71>:1:1
      at Object.attribute (packages/postcss-minify-selectors/src/index.js:28:43)
      at packages/postcss-minify-selectors/src/index.js:199:13
      at packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/container.js:176:26
      at Selector.each (packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/container.js:159:22)
      at Selector.walk (packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/container.js:175:21)
      at packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/container.js:179:31
      at Pseudo.each (packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/container.js:159:22)
      at Pseudo.walk (packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/container.js:175:21)
      at packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/container.js:179:31
      at Selector.each (packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/container.js:159:22)
      at Selector.walk (packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/container.js:175:21)
      at packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/container.js:179:31
      at Root.each (packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/container.js:159:22)
      at Root.walk (packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/container.js:175:21)
      at Processor.func (packages/postcss-minify-selectors/src/index.js:192:19)
      at Processor._runSync (packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/processor.js:84:30)
      at Processor.processSync (packages/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/processor.js:177:27)
      at getParsed (packages/postcss-minify-selectors/src/index.js:16:27)
      at callback (packages/postcss-minify-selectors/src/index.js:187:33)

@anikethsaha

anikethsaha commented Jul 24, 2020

Copy link
Copy Markdown
Member

::slotted([foo|bar]) is an incorrect syntax as inside the (...) because if doesnt support universal inside it.

foo|bar is a universal selector

You can refer more here

@anikethsaha anikethsaha added invalid syntax The coding bugging the issue is not part of the css official specs and removed need more info labels Jul 24, 2020
@papandreou

papandreou commented Jul 25, 2020

Copy link
Copy Markdown
Author

It does look weird, and I don't claim to understand exactly what the selector means, but isn't it valid per these rules?

::slotted( <compound-selector-list> )
<compound-selector-list> = <compound-selector>#
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
<attr-matcher> = [ '~' |  '|'  | '^' | '$' | '*' ]? '='
<wq-name> = <ns-prefix>? <ident-token>

One step at a time:

::slotted( <compound-selector-list> )
::slotted( <compound-selector># )
::slotted( [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]! )
::slotted( <subclass-selector> )
::slotted( <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector> )
::slotted( <attribute-selector> )
::slotted( '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']' )
::slotted( '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']' )
::slotted( '[' <wq-name> '|' [ <string-token> | <ident-token> ] <attr-modifier>? ']' )
::slotted( '[' <wq-name> '|' <ident-token> ']' )
::slotted( '[' <ns-prefix>? <ident-token> '|' <ident-token> ']' )
::slotted( '[' <ident-token> '|' <ident-token> ']' )
::slotted( '[' foo '|' bar ']' )

Replacing the literals it becomes ::slotted( [ foo | bar ] ).

@alexander-akait

alexander-akait commented Jul 25, 2020

Copy link
Copy Markdown
Member

It should be reported to postcss-selector-parser, we can't fix it on our side

@anikethsaha

anikethsaha commented Jul 25, 2020

Copy link
Copy Markdown
Member

@papandreou thanks for the explanation, yes it does looks like valid syntax.

@anikethsaha anikethsaha added upstream and removed invalid syntax The coding bugging the issue is not part of the css official specs labels Jul 25, 2020
@papandreou papandreou mentioned this pull request Jul 25, 2020
Open
@papandreou

papandreou commented Jul 25, 2020

Copy link
Copy Markdown
Author

Thanks! I've reported it here: postcss/postcss-selector-parser#229

@anikethsaha

anikethsaha commented Jul 25, 2020

Copy link
Copy Markdown
Member

@papandreou I think it does looks like a valid parsing by the postcss-selector-parser as it is attributes selector and namespace which is correctly being parsed by the parser.

here, the prefix is the namespace and the later is the attribute

[foo|bar]

...
nodes: [
    Attribute {
      source: [Object],
      sourceIndex: 0,
      _namespace: 'foo',
      _attribute: 'bar',
      spaces: [Object],
      type: 'attribute',
      raws: {},
      _constructed: true,
      parent: [Circular]
    }
  ],
...

I think we need to check for node.operator on our end

@anikethsaha anikethsaha mentioned this pull request Jul 25, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

upstream

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@papandreou @anikethsaha @alexander-akait