header {
36 | margin-top: 1.5em;
37 | margin-bottom: 1em;
38 | }
39 |
40 | body > header > h1 {
41 | margin: 0;
42 | text-align: center;
43 | font-size: 500%;
44 | }
45 |
46 | body > header > h1::before {
47 | content: "🐍";
48 | display: block;
49 | font-size: 150%;
50 | }
51 |
52 | body > header > h2 {
53 | margin-bottom: .5em;
54 | text-align: center;
55 | font-size: 200%;
56 | }
57 |
58 | body > header li::marker {
59 | content: "✔";
60 | color: var(--color-green);
61 | }
62 |
63 | @media (min-width: 40em) {
64 | body > header ul {
65 | columns: 2;
66 | }
67 | }
68 |
69 | body > section,
70 | body > header > *,
71 | body > footer > * {
72 | max-width: 80em;
73 | margin: auto;
74 | }
75 |
76 | #tryout {
77 |
78 | }
79 |
80 | #tryout h2 {
81 | display: flex;
82 | font-size: 200%;
83 | }
84 |
85 | #tryout h2 code {
86 | margin-left: auto;
87 | font-size: 60%;
88 | background: none;
89 | }
90 |
91 | #tryout header {
92 | grid-column-end: span 2;
93 | position: sticky;
94 | top: 0;
95 | display: block;
96 | background: white;
97 | }
98 |
99 | #selectorText {
100 | display: block;
101 | border: 3px solid var(--color-green);
102 | border-radius: .2em;
103 | padding: .2em .4em;
104 | margin-bottom: .4em;
105 | font-size: 140%;
106 | font-family: var(--font-mono);
107 | width: 100%;
108 | box-sizing: border-box;
109 | }
110 |
111 | #specificity-display {
112 | grid-column: 1 / span 2;
113 | display: grid;
114 | margin: .5em 0;
115 | padding: 1em;
116 | background: var(--color-green);
117 | font-family: var(--font-heading);
118 | font-size: 150%;
119 | }
120 |
121 | #specificity {
122 | font-family: var(--font-body);
123 | font-size: 200%;
124 | }
125 |
126 | @media (min-width: 600px) {
127 | #specificity-display {
128 | grid-template-columns: 1fr auto;
129 | }
130 |
131 | #specificity {
132 | grid-column: 2;
133 | grid-row: 1 / span 2;
134 | }
135 | }
136 |
137 | #specificity-display code {
138 | background: none;
139 | text-shadow: 0 0 .1em white;
140 | font-size: 75%;
141 | }
142 |
143 | #results {
144 | display: flex;
145 | gap: .5em;
146 | }
147 |
148 | @media (min-width: 60em) {
149 | #results > article {
150 | flex: 1;
151 | }
152 | }
153 |
154 | #results > article {
155 | flex-shrink: 1;
156 | overflow: hidden;
157 | transition: .5s;
158 | }
159 |
160 | @media (max-width: 60em) {
161 | #results > article h2 code {
162 | display: none;
163 | }
164 |
165 | #results > article {
166 | flex-basis: 0;
167 | min-width: 5em;
168 | }
169 | }
170 |
171 | #results > article:not(:focus-within):not(:active):not(:hover) + article:nth-child(2),
172 | #results > article:focus-within,
173 | #results > article:active,
174 | #results > article:hover {
175 | flex-grow: 1;
176 | }
177 |
178 | #tryout pre {
179 | grid-row: 2;
180 | }
181 |
182 | .error {
183 | color: #c00;
184 | }
185 |
186 | body > footer {
187 | padding: 1em;
188 | margin: -.5rem;
189 | margin-top: 1em;
190 | background: var(--color-dark-blue);
191 | color: white;
192 | font-weight: bolder;
193 | }
194 |
195 | body > footer a {
196 | color: var(--color-pale-blue);
197 | }
198 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Parsel: A tiny, permissive CSS selector parser
6 |
24 | parsel
25 | A tiny, permissive CSS selector parser
26 |
27 |
28 | Easy to use
29 | Simple API
30 | Parse & traverse CSS selectors
31 | Calculate specificity
32 | Only 2KB and no dependencies
33 | Supports the entire Selectors 4 syntax
34 | Permissive enough to work with a lot of potential future syntax
35 | Extensible
37 |
38 |
39 |
40 |
50 |
51 | Specificity:
52 | parsel.specificity(selector);
53 |
54 |
55 |
56 | Tokens parsel.tokenize(selector);
57 |
59 |
60 | AST parsel.parse(selector);
61 |
63 |
65 |
66 |
67 | Usage
68 |
69 | Parsel is an ES module. You import it like so:
70 |
71 | import * as parsel from "https://parsel.verou.me/dist/parsel.js"Note that to use that your script needs to use type="module" or be imported from a script that does.
74 | If you can't or don't want to use ES modules you can use parsel_nomodule.js in a regular <script> tag:
75 |
76 |
77 |
78 | <script src="https://parsel.verou.me/dist/nomodule/parsel.js"></script>
79 | After that, you can use parsel as a global.
82 |
83 | Fun fact: You could also use the module version of Parsel and convert it to a global this way:
84 |
85 |
86 | <script type="module">
87 | import * as parsel from "https://parsel.verou.me/dist/parsel.js";
88 | window.parsel = parsel;
89 | </script>
90 | Then, assuming your code runs after the DOMContentLoaded event, you can use the global normally.
93 | In fact, we are assigning parsel to a global in this very page this way, so you can open your console and play with it!
94 |
95 | You can also install via npm: npm install parsel-js
96 |
97 |
98 |
99 | API
100 |
101 | Get list of tokens as a flat array:
102 |
103 | parsel.tokenize(selector)Get AST:
106 |
107 | parsel.parse(selector)You can also provide options:
110 |
111 | parsel.parse(selector, {recursive: false, list: false})The recursive option parses the arguments of pseudo-classes whose argument is a selector like :not(), :is(), :where() etc into a subtree property.
114 | The list option parses selector lists (A, B, C). The only reason to turn it off is as a performance optimization when you are processing a large volume of selectors that are not lists (e.g. the output of certain CSS parsers like Rework)
115 |
116 | Traverse all tokens of a (sub)tree:
117 |
118 | parsel.walk(node, callback)callback is called with each node as the only argument.
121 |
122 | Generate all tokens of a (sub)tree:
123 |
124 | parsel.flatten(node)This can be looped through with for ... of. Uses the same order as walk
127 |
128 | Convert a list of tokens or a (sub)tree to a string:
129 |
130 | parsel.stringify(listOrNode)Calculate specificity (returns an array of 3 numbers):
133 |
134 | parsel.specificity(selectorOrNode)To convert the specificity array to a number, you can use parsel.specificityToNumber(specificity [, base]).
137 | If a base is not provided, it will be the max specificity component + 1.
138 |
139 | Try it out! In this page, parsel is assigned to a global so you can experiment with the API in the console!
140 |
141 |
142 |
143 | Extensibility
144 |
145 | You can import TOKENS and add new types.
146 | All values need to be regular expression objects with the global flag on.
147 | For example, to add the nesting selector :
148 |
149 |
150 | parsel.TOKENS.nesting = /&/g;
151 | Do note that this way, new tokens are added to the end of the object literal.
154 | You may want to add tokens before other tokens, e.g. to add support for @nestdelete all properties after that property, add your new property, then re-add them.
157 |
158 |
159 | So, to add support for @nest, we need to add it before the type token, since @nest tokens are currently incorrectly parsed as type tokens.
160 | Since type is the very last token, we only need to delete and re-add that:
161 |
162 |
163 | // Delete property type
164 | let temp = {};
165 | temp.type = parsel.TOKENS.type;
166 | delete parsel.TOKENS.type;
167 |
168 | // Add new token
169 | parsel.TOKENS.nest = /@nest\b/g;
170 |
171 | // Re-add type
172 | parsel.TOKENS.type = temp.type;
173 | This can get tedious, so you can use a helper function for that:
176 |
177 |
178 | function insert(obj, {before, property, value}) {
179 | let found, temp = {};
180 |
181 | for (let p in obj) {
182 | if (p === before) {
183 | found = true;
184 | }
185 |
186 | if (found) {
187 | temp[p] = obj[p];
188 | delete obj[p];
189 | }
190 | }
191 |
192 | Object.assign(obj, {property: value, ...temp});
193 | }
194 | Then you can do:
197 |
198 |
199 | insert(parsel.TOKENS, {before: "type", property: "nest", value: /@nest\b/g});
200 | For convenience, you can also find this helper function in insert.js
203 |
204 |
205 | import insert from "./parsel/insert.js";
206 | insert(parsel.TOKENS, {before: "type", property: "nest", value: /@nest\b/g});
207 | There are also some alternative implementations of this helper available.
210 |
211 |
212 |
217 |
218 |
249 |
250 |
251 |
252 |
--------------------------------------------------------------------------------
/insert.js:
--------------------------------------------------------------------------------
1 | // Inserts a property before another in an object literal without breaking references to it
2 | export default function insert(obj, {before, property, value}) {
3 | let found, temp = {};
4 |
5 | for (let p in obj) {
6 | if (p === before) {
7 | found = true;
8 | }
9 |
10 | if (found) {
11 | temp[p] = obj[p];
12 | delete obj[p];
13 | }
14 | }
15 |
16 | Object.assign(obj, {property: value, ...temp});
17 | }
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "parsel-js",
3 | "version": "1.2.1",
4 | "description": "A tiny, permissive CSS selector parser",
5 | "type": "module",
6 | "main": "dist/parsel.min.cjs",
7 | "module": "dist/parsel.min.js",
8 | "types": "./dist/parsel.d.ts",
9 | "exports": {
10 | ".": {
11 | "browser": "./dist/parsel.js",
12 | "import": "./dist/parsel.min.js",
13 | "require": "./dist/parsel.min.cjs",
14 | "types": "./dist/parsel.d.ts",
15 | "umd": "./dist/umd/parsel.min.js"
16 | }
17 | },
18 | "scripts": {
19 | "start": "http-server -o index.html -c-1",
20 | "test": "http-server -o test.html -c-1",
21 | "build": "npx rollup -c",
22 | "prepare": "npm run build",
23 | "release": "release-it"
24 | },
25 | "repository": {
26 | "type": "git",
27 | "url": "git+https://github.com/LeaVerou/parsel.git"
28 | },
29 | "keywords": [
30 | "CSS",
31 | "selectors"
32 | ],
33 | "author": "Lea Verou",
34 | "license": "MIT",
35 | "bugs": {
36 | "url": "https://github.com/LeaVerou/parsel/issues"
37 | },
38 | "homepage": "https://parsel.verou.me/",
39 | "devDependencies": {
40 | "@rollup/plugin-typescript": "^11.0.0",
41 | "http-server": "^14.1.1",
42 | "release-it": "^17.10.0",
43 | "rollup": "^2.49.0",
44 | "rollup-plugin-terser": "^7.0.2",
45 | "tslib": "^2.5.0",
46 | "typescript": "^4.9.5"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/parsel.ts:
--------------------------------------------------------------------------------
1 | export const TOKENS: Record = {
2 | attribute:
3 | /\[\s*(?:(?\*|[-\w\P{ASCII}]*)\|)?(?[-\w\P{ASCII}]+)\s*(?:(?\W?=)\s*(?.+?)\s*(\s(?[iIsS]))?\s*)?\]/gu,
4 | id: /#(?[-\w\P{ASCII}]+)/gu,
5 | class: /\.(?[-\w\P{ASCII}]+)/gu,
6 | comma: /\s*,\s*/g, // must be before combinator
7 | combinator: /\s*[\s>+~]\s*/g, // this must be after attribute
8 | 'pseudo-element': /::(?[-\w\P{ASCII}]+)(?:\((?¶*)\))?/gu, // this must be before pseudo-class
9 | 'pseudo-class': /:(?[-\w\P{ASCII}]+)(?:\((?¶*)\))?/gu,
10 | universal: /(?:(?\*|[-\w\P{ASCII}]*)\|)?\*/gu,
11 | type: /(?:(?\*|[-\w\P{ASCII}]*)\|)?(?[-\w\P{ASCII}]+)/gu, // this must be last
12 | };
13 |
14 | export const TRIM_TOKENS = new Set(['combinator', 'comma']);
15 |
16 | export const RECURSIVE_PSEUDO_CLASSES = new Set([
17 | 'not',
18 | 'is',
19 | 'where',
20 | 'has',
21 | 'matches',
22 | '-moz-any',
23 | '-webkit-any',
24 | 'nth-child',
25 | 'nth-last-child',
26 | ]);
27 |
28 | const nthChildRegExp = /(?[\dn+-]+)\s+of\s+(?.+)/;
29 | export const RECURSIVE_PSEUDO_CLASSES_ARGS: Record = {
30 | 'nth-child': nthChildRegExp,
31 | 'nth-last-child': nthChildRegExp,
32 | };
33 |
34 | const getArgumentPatternByType = (type: string) => {
35 | switch (type) {
36 | case 'pseudo-element':
37 | case 'pseudo-class':
38 | return new RegExp(
39 | TOKENS[type]!.source.replace(
40 | '(?¶*)',
41 | '(?.*)'
42 | ),
43 | 'gu'
44 | );
45 | default:
46 | return TOKENS[type];
47 | }
48 | };
49 |
50 | export function gobbleParens(text: string, offset: number): string {
51 | let nesting = 0;
52 | let result = '';
53 | for (; offset < text.length; offset++) {
54 | const char = text[offset];
55 | switch (char) {
56 | case '(':
57 | ++nesting;
58 | break;
59 | case ')':
60 | --nesting;
61 | break;
62 | }
63 | result += char;
64 | if (nesting === 0) {
65 | return result;
66 | }
67 | }
68 | return result;
69 | }
70 |
71 | export function tokenizeBy(text: string, grammar = TOKENS): Token[] {
72 | if (!text) {
73 | return [];
74 | }
75 |
76 | const tokens: (Token | string)[] = [text];
77 | for (const [type, pattern] of Object.entries(grammar)) {
78 | for (let i = 0; i < tokens.length; i++) {
79 | const token = tokens[i];
80 | if (typeof token !== 'string') {
81 | continue;
82 | }
83 |
84 | pattern.lastIndex = 0;
85 | const match = pattern.exec(token);
86 | if (!match) {
87 | continue;
88 | }
89 |
90 | const from = match.index - 1;
91 | const args: typeof tokens = [];
92 | const content = match[0];
93 |
94 | const before = token.slice(0, from + 1);
95 | if (before) {
96 | args.push(before);
97 | }
98 |
99 | args.push({
100 | ...match.groups,
101 | type,
102 | content,
103 | } as unknown as Token);
104 |
105 | const after = token.slice(from + content.length + 1);
106 | if (after) {
107 | args.push(after);
108 | }
109 |
110 | tokens.splice(i, 1, ...args);
111 | }
112 | }
113 |
114 | let offset = 0;
115 | for (const token of tokens) {
116 | switch (typeof token) {
117 | case 'string':
118 | throw new Error(
119 | `Unexpected sequence ${token} found at index ${offset}`
120 | );
121 | case 'object':
122 | offset += token.content.length;
123 | token.pos = [offset - token.content.length, offset];
124 | if (TRIM_TOKENS.has(token.type)) {
125 | token.content = token.content.trim() || ' ';
126 | }
127 | break;
128 | }
129 | }
130 |
131 | return tokens as Token[];
132 | }
133 |
134 | const STRING_PATTERN = /(['"])([^\\\n]+?)\1/g;
135 | const ESCAPE_PATTERN = /\\./g;
136 | export function tokenize(selector: string, grammar = TOKENS): Token[] {
137 | // Prevent leading/trailing whitespaces from being interpreted as combinators
138 | selector = selector.trim();
139 | if (selector === '') {
140 | return [];
141 | }
142 |
143 | type Replacement = { value: string; offset: number };
144 | const replacements: Replacement[] = [];
145 |
146 | // Replace escapes with placeholders.
147 | selector = selector.replace(
148 | ESCAPE_PATTERN,
149 | (value: string, offset: number) => {
150 | replacements.push({ value, offset });
151 | return '\uE000'.repeat(value.length);
152 | }
153 | );
154 |
155 | // Replace strings with placeholders.
156 | selector = selector.replace(
157 | STRING_PATTERN,
158 | (value: string, quote: string, content: string, offset: number) => {
159 | replacements.push({ value, offset });
160 | return `${quote}${'\uE001'.repeat(content.length)}${quote}`;
161 | }
162 | );
163 |
164 | // Replace parentheses with placeholders.
165 | {
166 | let pos = 0;
167 | let offset: number;
168 | while ((offset = selector.indexOf('(', pos)) > -1) {
169 | const value = gobbleParens(selector, offset);
170 | replacements.push({ value, offset });
171 | selector = `${selector.substring(0, offset)}(${'¶'.repeat(
172 | value.length - 2
173 | )})${selector.substring(offset + value.length)}`;
174 | pos = offset + value.length;
175 | }
176 | }
177 |
178 | // Now we have no nested structures and we can parse with regexes
179 | const tokens = tokenizeBy(selector, grammar);
180 |
181 | // Replace placeholders in reverse order.
182 | const changedTokens = new Set();
183 | for (const replacement of replacements.reverse()) {
184 | for (const token of tokens) {
185 | const { offset, value } = replacement;
186 | if (
187 | !(
188 | token.pos[0] <= offset &&
189 | offset + value.length <= token.pos[1]
190 | )
191 | ) {
192 | continue;
193 | }
194 |
195 | const { content } = token;
196 | const tokenOffset = offset - token.pos[0];
197 | token.content =
198 | content.slice(0, tokenOffset) +
199 | value +
200 | content.slice(tokenOffset + value.length);
201 | if (token.content !== content) {
202 | changedTokens.add(token);
203 | }
204 | }
205 | }
206 |
207 | // Update changed tokens.
208 | for (const token of changedTokens) {
209 | const pattern = getArgumentPatternByType(token.type);
210 | if (!pattern) {
211 | throw new Error(`Unknown token type: ${token.type}`);
212 | }
213 | pattern.lastIndex = 0;
214 | const match = pattern.exec(token.content);
215 | if (!match) {
216 | throw new Error(
217 | `Unable to parse content for ${token.type}: ${token.content}`
218 | );
219 | }
220 | Object.assign(token, match.groups);
221 | }
222 |
223 | return tokens;
224 | }
225 |
226 | /**
227 | * Convert a flat list of tokens into a tree of complex & compound selectors
228 | */
229 | function nestTokens(tokens: Token[], { list = true } = {}): AST {
230 | if (list && tokens.find((t: { type: string }) => t.type === 'comma')) {
231 | const selectors: AST[] = [];
232 | const temp: Token[] = [];
233 |
234 | for (let i = 0; i < tokens.length; i++) {
235 | if (tokens[i].type === 'comma') {
236 | if (temp.length === 0) {
237 | throw new Error('Incorrect comma at ' + i);
238 | }
239 |
240 | selectors.push(nestTokens(temp, { list: false }));
241 | temp.length = 0;
242 | } else {
243 | temp.push(tokens[i]);
244 | }
245 | }
246 |
247 | if (temp.length === 0) {
248 | throw new Error('Trailing comma');
249 | } else {
250 | selectors.push(nestTokens(temp, { list: false }));
251 | }
252 |
253 | return { type: 'list', list: selectors };
254 | }
255 |
256 | for (let i = tokens.length - 1; i >= 0; i--) {
257 | let token = tokens[i];
258 |
259 | if (token.type === 'combinator') {
260 | let left = tokens.slice(0, i);
261 | let right = tokens.slice(i + 1);
262 |
263 | if (left.length === 0) {
264 | return {
265 | type: 'relative',
266 | combinator: token.content,
267 | right: nestTokens(right),
268 | };
269 | }
270 |
271 | return {
272 | type: 'complex',
273 | combinator: token.content,
274 | left: nestTokens(left),
275 | right: nestTokens(right),
276 | };
277 | }
278 | }
279 |
280 | switch (tokens.length) {
281 | case 0:
282 | throw new Error('Could not build AST.');
283 | case 1:
284 | // If we're here, there are no combinators, so it's just a list.
285 | return tokens[0];
286 | default:
287 | return {
288 | type: 'compound',
289 | list: [...tokens], // clone to avoid pointers messing up the AST
290 | };
291 | }
292 | }
293 |
294 | /**
295 | * Traverse an AST in depth-first order
296 | */
297 | export function* flatten(
298 | node: AST,
299 | /**
300 | * @internal
301 | */
302 | parent?: AST
303 | ): IterableIterator<[Token, AST | undefined]> {
304 | switch (node.type) {
305 | case 'list':
306 | for (let child of node.list) {
307 | yield* flatten(child, node);
308 | }
309 | break;
310 | case 'complex':
311 | yield* flatten(node.left, node);
312 | yield* flatten(node.right, node);
313 | break;
314 | case 'relative':
315 | yield* flatten(node.right, node);
316 | break;
317 | case 'compound':
318 | yield* node.list.map((token): [Token, Compound] => [token, node]);
319 | break;
320 | default:
321 | yield [node, parent];
322 | }
323 | }
324 |
325 | /**
326 | * Traverse an AST (or part thereof), in depth-first order
327 | */
328 | export function walk(
329 | node: AST | undefined,
330 | visit: (node: AST, parentNode?: AST) => void,
331 | /**
332 | * @internal
333 | */
334 | parent?: AST
335 | ) {
336 | if (!node) {
337 | return;
338 | }
339 | for (const [token, ast] of flatten(node, parent)) {
340 | visit(token, ast);
341 | }
342 | }
343 |
344 | export interface ParserOptions {
345 | recursive?: boolean;
346 | list?: boolean;
347 | }
348 |
349 | /**
350 | * Parse a CSS selector
351 | *
352 | * @param selector - The selector to parse
353 | * @param options.recursive - Whether to parse the arguments of pseudo-classes like :is(), :has() etc. Defaults to true.
354 | * @param options.list - Whether this can be a selector list (A, B, C etc). Defaults to true.
355 | */
356 | export function parse(
357 | selector: string,
358 | { recursive = true, list = true }: ParserOptions = {}
359 | ): AST | undefined {
360 | const tokens = tokenize(selector);
361 | if (!tokens) {
362 | return;
363 | }
364 |
365 | const ast = nestTokens(tokens, { list });
366 |
367 | if (!recursive) {
368 | return ast;
369 | }
370 |
371 | for (const [token] of flatten(ast)) {
372 | if (token.type !== 'pseudo-class' || !token.argument) {
373 | continue;
374 | }
375 | if (!RECURSIVE_PSEUDO_CLASSES.has(token.name)) {
376 | continue;
377 | }
378 | let argument = token.argument;
379 | const childArg = RECURSIVE_PSEUDO_CLASSES_ARGS[token.name];
380 | if (childArg) {
381 | const match = childArg.exec(argument);
382 | if (!match) {
383 | continue;
384 | }
385 |
386 | Object.assign(token, match.groups);
387 | argument = match.groups!['subtree'];
388 | }
389 | if (!argument) {
390 | continue;
391 | }
392 | Object.assign(token, {
393 | subtree: parse(argument, {
394 | recursive: true,
395 | list: true,
396 | }),
397 | });
398 | }
399 |
400 | return ast;
401 | }
402 |
403 | /**
404 | * Converts the given list or (sub)tree to a string.
405 | */
406 | export function stringify(listOrNode: Token[] | AST): string {
407 | if (Array.isArray(listOrNode)) {
408 | return listOrNode.map((token) => token.content).join("");
409 | }
410 |
411 | switch (listOrNode.type) {
412 | case "list":
413 | return listOrNode.list.map(stringify).join(",");
414 | case "relative":
415 | return (
416 | listOrNode.combinator +
417 | stringify(listOrNode.right)
418 | );
419 | case "complex":
420 | return (
421 | stringify(listOrNode.left) +
422 | listOrNode.combinator +
423 | stringify(listOrNode.right)
424 | );
425 | case "compound":
426 | return listOrNode.list.map(stringify).join("");
427 | default:
428 | return listOrNode.content;
429 | }
430 | }
431 |
432 | /**
433 | * To convert the specificity array to a number
434 | */
435 | export function specificityToNumber(
436 | specificity: number[],
437 | base: number
438 | ): number {
439 | base = base || Math.max(...specificity) + 1;
440 | return (
441 | specificity[0] * (base << 1) + specificity[1] * base + specificity[2]
442 | );
443 | }
444 |
445 | /**
446 | * Calculate specificity of a selector.
447 | *
448 | * If the selector is a list, the max specificity is returned.
449 | */
450 | export function specificity(selector: string | AST): number[] {
451 | let ast: string | AST | undefined = selector;
452 | if (typeof ast === 'string') {
453 | ast = parse(ast, { recursive: true });
454 | }
455 | if (!ast) {
456 | return [];
457 | }
458 |
459 | if (ast.type === 'list' && 'list' in ast) {
460 | let base = 10;
461 | const specificities = ast.list.map((ast) => {
462 | const sp = specificity(ast);
463 | base = Math.max(base, ...specificity(ast));
464 | return sp;
465 | });
466 | const numbers = specificities.map((ast) =>
467 | specificityToNumber(ast, base)
468 | );
469 | return specificities[numbers.indexOf(Math.max(...numbers))];
470 | }
471 |
472 | const ret = [0, 0, 0];
473 | for (const [token] of flatten(ast)) {
474 | switch (token.type) {
475 | case 'id':
476 | ret[0]++;
477 | break;
478 | case 'class':
479 | case 'attribute':
480 | ret[1]++;
481 | break;
482 | case 'pseudo-element':
483 | case 'type':
484 | ret[2]++;
485 | break;
486 | case 'pseudo-class':
487 | if (token.name === 'where') {
488 | break;
489 | }
490 | if (
491 | !RECURSIVE_PSEUDO_CLASSES.has(token.name) ||
492 | !token.subtree
493 | ) {
494 | ret[1]++;
495 | break;
496 | }
497 | const sub = specificity(token.subtree);
498 | sub.forEach((s, i) => (ret[i] += s));
499 | // :nth-child() & :nth-last-child() add (0, 1, 0) to the specificity of their most complex selector
500 | if (
501 | token.name === 'nth-child' ||
502 | token.name === 'nth-last-child'
503 | ) {
504 | ret[1]++;
505 | }
506 | }
507 | }
508 |
509 | return ret;
510 | }
511 |
512 | export interface BaseToken {
513 | type: string;
514 | content: string;
515 | pos: [number, number];
516 | }
517 |
518 | export interface CommaToken extends BaseToken {
519 | type: 'comma';
520 | }
521 |
522 | export interface CombinatorToken extends BaseToken {
523 | type: 'combinator';
524 | }
525 |
526 | export interface NamedToken extends BaseToken {
527 | name: string;
528 | }
529 |
530 | export interface IdToken extends NamedToken {
531 | type: 'id';
532 | }
533 |
534 | export interface ClassToken extends NamedToken {
535 | type: 'class';
536 | }
537 |
538 | export interface PseudoElementToken extends NamedToken {
539 | type: 'pseudo-element';
540 | argument?: string;
541 | }
542 |
543 | export interface PseudoClassToken extends NamedToken {
544 | type: 'pseudo-class';
545 | argument?: string;
546 | subtree?: AST;
547 | }
548 |
549 | export interface NamespacedToken extends BaseToken {
550 | namespace?: string;
551 | }
552 |
553 | export interface UniversalToken extends NamespacedToken {
554 | type: 'universal';
555 | }
556 |
557 | export interface AttributeToken extends NamespacedToken, NamedToken {
558 | type: 'attribute';
559 | operator?: string;
560 | value?: string;
561 | caseSensitive?: 'i' | 'I' | 's' | 'S';
562 | }
563 |
564 | export interface TypeToken extends NamespacedToken, NamedToken {
565 | type: 'type';
566 | }
567 |
568 | export interface UnknownToken extends BaseToken {
569 | type: never;
570 | }
571 |
572 | export type Token =
573 | | AttributeToken
574 | | IdToken
575 | | ClassToken
576 | | CommaToken
577 | | CombinatorToken
578 | | PseudoElementToken
579 | | PseudoClassToken
580 | | UniversalToken
581 | | TypeToken
582 | | UnknownToken;
583 |
584 | export interface Complex {
585 | type: 'complex';
586 | combinator: string;
587 | right: AST;
588 | left: AST;
589 | }
590 |
591 | export interface Relative {
592 | type: 'relative';
593 | combinator: string;
594 | right: AST;
595 | }
596 |
597 | export interface Compound {
598 | type: 'compound';
599 | list: Token[];
600 | }
601 |
602 | export interface List {
603 | type: 'list';
604 | list: AST[];
605 | }
606 |
607 | export type AST = Complex | Relative | Compound | List | Token;
608 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import { terser } from 'rollup-plugin-terser';
2 | import typescript from '@rollup/plugin-typescript';
3 |
4 | export default [
5 | {
6 | input: 'parsel.ts',
7 | output: [
8 | {
9 | file: 'dist/parsel.cjs',
10 | format: 'cjs',
11 | },
12 | {
13 | name: 'parsel',
14 | file: 'dist/nomodule/parsel.js',
15 | format: 'iife',
16 | },
17 | {
18 | name: 'parsel',
19 | file: 'dist/umd/parsel.js',
20 | format: 'umd',
21 | },
22 | {
23 | file: 'dist/parsel.js',
24 | format: 'es',
25 | },
26 | ].concat(
27 | [
28 | {
29 | file: 'dist/parsel.min.cjs',
30 | format: 'cjs',
31 | },
32 | {
33 | name: 'parsel',
34 | file: 'dist/nomodule/parsel.min.js',
35 | format: 'iife',
36 | },
37 | {
38 | name: 'parsel',
39 | file: 'dist/umd/parsel.min.js',
40 | format: 'umd',
41 | },
42 | {
43 | file: 'dist/parsel.min.js',
44 | format: 'es',
45 | },
46 | ].map((output) => Object.assign(output, { plugins: [terser()] }))
47 | ),
48 | plugins: [typescript({ outputToFilesystem: true })],
49 | },
50 | ];
51 |
--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Parsel Tests
6 |