fb55 / css-what Goto Github PK

CSSwhat.parse('/*ul*/.nav')

Error: Unmatched selector: /ul/.nav

Please have a look.

# npm audit report

css-what  <5.0.1
Severity: high
Denial of Service - https://npmjs.com/advisories/1754
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/css-what
  css-select  <=3.1.2
  Depends on vulnerable versions of css-what
  node_modules/css-select
    react-native-svg  >=9.13.0
    Depends on vulnerable versions of css-select
    node_modules/react-native-svg
      @ui-kitten/components  >=5.0.0-alpha.1
      Depends on vulnerable versions of react-native-svg
      node_modules/@ui-kitten/components
      @ui-kitten/eva-icons  >=5.0.0-alpha.1
      Depends on vulnerable versions of react-native-svg
      node_modules/@ui-kitten/eva-icons

5 high severity vulnerabilities

Selector gave me error: SyntaxError: parenthesis not matched

script:contains("setImgSrc(")

I tried parsing it for testing

const CSSwhat = require('css-what');
CSSwhat.parse('script:contains("setImgSrc(")');

but got error: Uncaught TypeError: CSSwhat.parse is not a function
at parseSelector (/home/.../node_modules/css-what/index.js:226:14)
... so testing has to wait

but why I got this parenthesis error, "(" is as text inside data field, not sure ... maybe you can provide some examples how pseudos data field should be used.

Version 2.9.5 of jshint just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As jshint is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Right now, parser will throw even in the case of :is() pseudo-class that contains an invalid selector (even if there are other valid selectors).

That pseudo-class apparent accepts a forgiving selector list: https://developer.mozilla.org/en-US/docs/Web/CSS/:is#forgiving_selector_parsing

For example, in the following case css will still apply to valid selectors

:is(ol, ul, ??$#$@#) {
  color: green;
}

Hi!

Looks like this library can't parse the CSS animation declarations 😅

https://www.w3.org/TR/selectors-4/#attribute-case

CSSwhat.parse('[type="a" s]')

Error: Malformed attribute selector: [type="a" s]

Wondering if you'd be interested in adding customizable attribute selectors as an option for the parser? # = id and . = class are currently hard-coded, which is obviously what you'd expect to see for HTML, but if you're trying to parse something else (e.g. JSX), it might be valuable to map those attribute selectors to something else (e.g. className for React).

I'm more than happy to make a PR if that's something you'd like to add to this project :) Thanks!

The Acid3 test contains the selector #\ (note trailing space), which is supposed to match id=" ".

Parsing this selector throws an exception:

TypeError: Cannot read property '0' of null
    at getName (CSSselect/node_modules/CSSwhat/index.js:61:36)
    at parse (CSSselect/node_modules/CSSwhat/index.js:83:13)
    at Function.parse (CSSselect/index.js:657:18)

When an id selector contains a period I get a runtime error here:

https://github.com/fb55/css-what/blob/master/index.js#L97

Such as (truncated for brevity):

TypeError: Cannot read property '0' of null
    at getName (/home/muji/git/makestatic/compiler/packages/auto-title/node_modules/css-what/index.js:97:36)
    at parseSelector (/home/muji/git/makestatic/compiler/packages/auto-title/node_modules/css-what/index.js:145:13)
    at parse (/home/muji/git/makestatic/compiler/packages/auto-title/node_modules/css-what/index.js:82:13)
    at Function.compileUnsafe (/home/muji/git/makestatic/compiler/packages/auto-title/node_modules/css-select/lib/compile.js:33:15)
    at Function.select [as selectOne] (/home/muji/git/makestatic/compiler/packages/auto-title/node_modules/css-select/index.js:20:51)
...

As browsers handle this fine I am wondering whether it is legal to have a period in an id as far as selectors go.

Can you advise? If you feel it's worth patching I am happy to give it a shot and submit a PR.

I would think:

require('css-what')('.hi')

would end up looking like:

{
  type: 'attribute', 
  action: 'equals',
  name: 'class',
  value: 'hi'
}

or [class="hi"].

CSSwhat.parse('[a=b i ]')

Error: Malformed attribute selector: [a=b i ]

Please publish the latest versions of css-what, css-select, and entities to NPM.

Hi !

I'm using cheerio, which use this module.
I use it as an XML parser and I have a problem with index.js line 94. The regex doesn't match my selector.

re_attr = /^\s*((?:\\.|[\w\u00c0-\uFFFF\-])+)\s*(?:(\S?)=\s*(?:(['"])(.*?)\3|(#?(?:\\.|[\w\u00c0-\uFFFF\-])*)|)|)\s*(i)?\]/;
data = 'resource[rel=host/simplemodel]'.match(re_attr);
console.log(data) // null

in index.js

selector = selector.substr(data[0].length);

Thanks !

After upgrade to version "5.0.1" getting an error parse is not a function

Application is created using Create React app template

Error:

node_modules\css-select\lib\compile.js:31
var token = parse(selector, options);
^

TypeError: parse is not a function

Version: "5.0.1"

Are you letting people use this code that you published here?

If so, please put an Open Source license on the code -- e.g. the MIT license is very common for this kind of software. Here's the text you can use. Just add a file called LICENSE, or add this text to your README, and we'll know that you are giving people permission to use your code. If this is your code, put in your name for the copyright. If you work for a company and they own your IP, then use your company's name (with permission of course).

Thanks!

---------------->

MIT License
Copyright (c) 2012 [YOUR NAME or YOUR COMPANY'S NAME]. All Rights Reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Hello, great work, what do you think if we union around postcss-selector-parser, many tools need this module and we can work together on one project

Expected: .before\\:h-\\[calc\\(100\\%-28px\\)\\]
Actual: .before\\:h-\\[calc\\(100%-28px\\)\\]

Hi,
So I found out that css-what does not parse anything inside :host() and :host-context() and just return the value as it is.

For example:
If you try to parse :host-context(#test.cl) it returns-
[[{type: "pseudo", name: "host-context", data: "#test.cl"}]]

Expected output-
[[{type: "pseudo", name: "host-context", data: [[ {type:"attribute", name:"id", value="test"....}, {type:"attribute", name:"class", value="cl"....} ]] }]]

Thanks!

E.g. namespace_example|el {background: red;}

SyntaxError: Unmatched selector: |el

http://www.w3.org/TR/css3-selectors/#univnmsp

https://www.w3.org/TR/selectors-4/#case-sensitive

CSSwhat.parse('#foo\>a')

Output:

[
  [
    {
      type: 'attribute',
      name: 'id',
      action: 'equals',
      value: 'foo',
      ignoreCase: false,
      namespace: null
    },
    { type: 'child' },
    { type: 'tag', name: 'a', namespace: null }
  ]
]

Expected output:

[
  [
    {
      type: 'attribute',
      name: 'id',
      action: 'equals',
      value: 'foo>a',
      ignoreCase: false,
      namespace: null
    }
  ]
]

CSSwhat.parse('.h-0\.5')

Output:

[
  [
    {
      type: 'attribute',
      name: 'class',
      action: 'element',
      value: 'h-0',
      ignoreCase: false,
      namespace: null
    },
    {
      type: 'attribute',
      name: 'class',
      action: 'element',
      value: '5',
      ignoreCase: false,
      namespace: null
    }
  ]
]

Expected output:

[
  [
    {
      type: 'attribute',
      name: 'class',
      action: 'element',
      value: 'h-0.5',
      ignoreCase: false,
      namespace: null
    }
  ]
]

css-what breaks on xml documents with namespaces

use case: parse and query docx documents with <w:t>hello</w:t> etc.

actual

require('css-what').parse('w:t', { xmlMode: true }) ==
[
  [
    { type: 'tag', name: 'w', namespace: null },
    { type: 'pseudo', name: 't', data: null }
  ]
]

css-select throws Error: unmatched pseudo-class :t

expected

require('css-what').parse('w:t', { xmlMode: true }) ==
[
  [
    { type: 'tag', name: 't', namespace: 'w' }
  ]
]

possible solution:
parse only valid pseudo elements (:first-child etc), and treat the rest as namespaced tags
and/or add an option to disable all pseudo elements, and treat them all as namespaced tags

Is there anything that can take css-what tokens and return the selector?

Hello.

The following code

require('css-what')('.m²')

throws an exception

SyntaxError: Unmatched selector: ²

But the default document.querySelector('.m²') works, so .m² is a valid selector.

https://www.w3.org/TR/selectors-4/#table-pseudos

CSSwhat.parse('col.selected || td')

Error: Unmatched selector: || td

When upgrading the 'laravel-mix' package to the latest 6.0.24. version, your package has some problem (see below). Would you be so kind to fix it, please? I don't have 5th version of the 'laravel-mix' anymore...

Moved over from cheeriojs/cheerio#1292. Tl;dr the parser should handle a couple of cases more gracefully.

It appears ::part() selectors do not parse and instead emit an error:

console.log(cssWhat.parse('foo::part(bar)'));

Error: Unmatched selector: )

Some attributes are case-insensitive in HTML: https://html.spec.whatwg.org/multipage/semantics-other.html#case-sensitivity-of-selectors

Unless we are in XML mode, the ignoreCase attribute should use this list to automatically infer case-insensitivity for attributes.

# npm audit report

css-what  <5.0.1
Severity: high
Denial of Service - https://npmjs.com/advisories/1754
No fix available

When a fix is available, it is going to take a while for this upstream project to make it to us.

=> Found "svgo#[email protected]"
info Reasons this module exists
   - "@quasar#app#cssnano#cssnano-preset-default#postcss-svgo#svgo#css-select" depends on it
   - Hoisted from "@quasar#app#cssnano#cssnano-preset-default#postcss-svgo#svgo#css-select#css-what"

We have 5 levels that will need the update before we can get it. :(

https://www.w3.org/TR/selectors-4/#type-nmsp

CSSwhat.parse('|E')

Output:

[ [ { type: 'tag', name: '|e', namespace: null } ] ]

Expected output:

[ [ { type: 'tag', name: 'e', namespace: '' } ] ]

CSSwhat.parse('[ng:cloak=x]')

Error: Malformed attribute selector: [ng:cloak=x]

the compile method does not throw an error in case of bad selectors are given.

const cssSelect = require('css-select');
cssSelect.compile("##button"); 

the compile method returns with a function, but an error expected Uncaught Error: Expected name, found ##button

The problem is with the css-what 's latest version where parser method does not throw the error.

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml
• The new Node.js version is in-range for the engines in 1 of your package.json files, so that was left alone

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

Hi,

one of my legacy apps that happens to use grunt and grunt-svg-sprite has begun failing to build recently and apparently this is due to a recent change in css-what which happened in commit 138b101: Object.values is not supported in node.js < 7, despite css-what having

    "engines": {
        "node": ">= 6"
    },

declared in package.json.

Could you please either update the engines section in package.json to correctly express which node.js version is actually supported or update your code to not use Object.values?
I've made a PR: #295