css-modules / css-selector-tokenizer Goto Github PK
View Code? Open in Web Editor NEWParses and stringifies CSS selectors.
License: MIT License
Parses and stringifies CSS selectors.
License: MIT License
I use the symbolset ss-pika in several projects and when trying to use webpack with the css-loader the resulting CSS string breaks and I end up with two scrambled characters (��) instead of my search icon (🔎).
This happens when you have UTF-16 characters like 🔎 (escapes properly to \1F50E
) which becomes a surrogate pair when trying to escape it in Javascript.
I've been attempting to fix this using the cssesc module:
var cssesc = require("cssesc");
function escape(str, stringType) {
return cssesc(str, {
quotes: stringType === "'" ? "single" : "double"
});
}
The tests break though, cause assert.deepAssert
creates a surrogate pair when comparing the parseValues
result of the file test-cases-values.js
.
However, if I rollback css-loader to 0.14.5 (webpack-contrib/css-loader@51e11f3) then this is no longer an issue as the CSS isn't escaped.
Not escaping the content might be a more sane option?
Related reading:
https://mathiasbynens.be/notes/javascript-encoding
https://mathiasbynens.be/notes/css-escapes
Currently, the parse tree doesn't include full details for attribute selectors. For example, [att*=val]
is parsed into:
{"type":"selectors","nodes":[
{
"type":"selector",
"nodes":[
{
"type":"attribute",
"content":"att*=val"
}
]
}
]}
It would be better if the "content" was further parsed, so we could get something like:
{"type":"selectors","nodes":[
{
"type":"selector",
"nodes":[
{
"type":"attribute",
"name":"att",
"operator":"*=",
"content":"val"
}
]
}
]}
Let's say we have a selector used to select an element in HTML with the class name "10w"
.\31 0w
This is valid selector according to https://jigsaw.w3.org/css-validator/#validate_by_input (enter .\31 0w {}
)
But when we parse it we get the following result
{
"type": "selectors",
"nodes": [
{
"type": "selector",
"nodes": [
{
"type": "element",
"name": "31"
},
{
"type": "spacing",
"value": " "
},
{
"type": "invalid",
"value": "0"
},
{
"type": "element",
"name": "w"
}
]
}
]
}
While expected result is
{
"type": "selectors",
"nodes": [
{
"type": "selector",
"nodes": [
{
"type": "class",
"name": "10w"
}
]
}
]
}
The following are valid unicode escaped strings:
'\a'
'\00000A'
Both of these aren't matched by unescapeString()
, which wants to have at least 2 characters and a maximum of 5. In fact stringifyValues() can stringily to '\A'
, which then can't be parsed again by parseValues().
See http://drafts.csswg.org/selectors-4/#the-nth-child-pseudo
Currently, in e.g. :nth-child(n+3 of li.important)
, the li.important
portion is just returned as part of a content
string and doesn't get parsed into a selector subtree.
The column combinator (A || B
) currently results in a parse error (i.e. it produces "type":"invalid"
nodes).
For example, A >> B
is currently parsed as two {"type":"operator","operator":">", ...}
s in a row instead of a single >>
operator.
Hi,
Just to note that latest patch release increased the bundle size by more then 10x.
The reason is that the new version of regexpu-core
is now depended on regenerate-unicode-properties
(380k)
See :matches()
.
:not(.b)
parses to:
{
"type":"selectors",
"nodes":[
{
"type":"selector",
"nodes":[
{
"type":"nested-pseudo-class",
"name":"not",
"nodes":[
{
"type":"selector",
"nodes":[
{
"type":"class",
"name":"b"
}
]
}
]
}
]
}
]
}
whereas :matches(.b)
currently parses to:
{
"type":"selectors",
"nodes":[
{
"type":"selector",
"nodes":[
{
"type":"pseudo-class",
"name":"matches",
"content":".b"
}
]
}
]
}
The selector .🍰
is valid CSS, but this parses it to .\�\�
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.