Add support for pseudo class :is

.gitignore

@@ -0,0 +1,3 @@
+.nyc_output
+node_modules
+package-lock.json

.npmrc

@@ -0,0 +1 @@
+package-lock=false

dist/dropcss.cjs.js

@@ -1,5 +1,5 @@
 /**
-* Copyright (c) 2021, Leon Sorokin
+* Copyright (c) 2022, Leon Sorokin
 * All rights reserved. (MIT Licensed)
 *
 * dropcss.js (DropCSS)
@@ -481,6 +481,8 @@ function nth(a, b, pos) {
 	return pos <= b && pos % a === bMod;
 }
 
+const pseudoClasses = /not|is/;
+
 // assumes stripPseudos(sel); has already been called
 function parse(sel) {
 	const RE = {
@@ -530,7 +532,7 @@ function parse(sel) {
 				if (m[2] == '(') {
 					let subsel = takeUntilMatchedClosing(sel, RE.PSEUDO.lastIndex, '(', ')');
 					RE.PSEUDO.lastIndex += subsel.length + 1;
-					m[2] = m[1] == 'not' ? parse(subsel) : subsel;
+					m[2] = pseudoClasses.test(m[1]) ? parse(subsel) : subsel;
 				}
 
 				toks.splice(
@@ -707,6 +709,9 @@ function find(m, ctx) {
 					case 'not':
 						res = !find(val, {node: ctx.node, idx: val.length - 1});
 						break;
+					case 'is':
+						res = find(val, {node: ctx.node, idx: val.length - 1});
+						break;
 					case 'first-child':
 						res = tidx == 0;
 						break;
@@ -960,7 +965,7 @@ function postProc(out, shouldDrop, log, START) {
 
 const ATTRIBUTES = /\[([\w-]+)(?:(.?=)"?([^\]]*?)"?)?\]/i;
 
-const pseudoAssertable = /:(?:first|last|nth|only|not)\b/;
+const pseudoAssertable = /:(?:first|last|nth|only|not|is)\b/;
 
 const pseudoNonAssertableParenth = /:(?:lang)\([^)]*\)/g;
 

dist/dropcss.iife.js

@@ -1,5 +1,5 @@
 /**
-* Copyright (c) 2021, Leon Sorokin
+* Copyright (c) 2022, Leon Sorokin
 * All rights reserved. (MIT Licensed)
 *
 * dropcss.js (DropCSS)
@@ -482,6 +482,8 @@ var dropcss = (function () {
 		return pos <= b && pos % a === bMod;
 	}
 
+	const pseudoClasses = /not|is/;
+
 	// assumes stripPseudos(sel); has already been called
 	function parse(sel) {
 		const RE = {
@@ -531,7 +533,7 @@ var dropcss = (function () {
 					if (m[2] == '(') {
 						let subsel = takeUntilMatchedClosing(sel, RE.PSEUDO.lastIndex, '(', ')');
 						RE.PSEUDO.lastIndex += subsel.length + 1;
-						m[2] = m[1] == 'not' ? parse(subsel) : subsel;
+						m[2] = pseudoClasses.test(m[1]) ? parse(subsel) : subsel;
 					}
 
 					toks.splice(
@@ -708,6 +710,9 @@ var dropcss = (function () {
 						case 'not':
 							res = !find(val, {node: ctx.node, idx: val.length - 1});
 							break;
+						case 'is':
+							res = find(val, {node: ctx.node, idx: val.length - 1});
+							break;
 						case 'first-child':
 							res = tidx == 0;
 							break;
@@ -961,7 +966,7 @@ var dropcss = (function () {
 
 	const ATTRIBUTES = /\[([\w-]+)(?:(.?=)"?([^\]]*?)"?)?\]/i;
 
-	const pseudoAssertable = /:(?:first|last|nth|only|not)\b/;
+	const pseudoAssertable = /:(?:first|last|nth|only|not|is)\b/;
 
 	const pseudoNonAssertableParenth = /:(?:lang)\([^)]*\)/g;
 
@@ -1091,4 +1096,4 @@ var dropcss = (function () {
 
 	return dropcss;
 
-}());
+})();

src/dropcss.js

@@ -6,7 +6,7 @@ import { LOGGING } from './env';
 
 const ATTRIBUTES = /\[([\w-]+)(?:(.?=)"?([^\]]*?)"?)?\]/i;
 
-const pseudoAssertable = /:(?:first|last|nth|only|not)\b/;
+const pseudoAssertable = /:(?:first|last|nth|only|not|is)\b/;
 
 const pseudoNonAssertableParenth = /:(?:lang)\([^)]*\)/g;
 
@@ -150,4 +150,4 @@ export default function dropcss(opts) {
 	return {
 		css: stripEmptyAts(out),
 	};
-}
+}

src/find.js

@@ -99,6 +99,9 @@ function find(m, ctx) {
 					case 'not':
 						res = !find(val, {node: ctx.node, idx: val.length - 1});
 						break;
+					case 'is':
+						res = find(val, {node: ctx.node, idx: val.length - 1});
+						break;
 					case 'first-child':
 						res = tidx == 0;
 						break;
@@ -200,4 +203,4 @@ function _some(nodes, m) {
 
 export const some = (nodes, sel) => {
 	return _some(nodes, Array.isArray(sel) ? sel : parseSel(sel));
-};
+};

src/sel.js

@@ -1,6 +1,8 @@
 import { takeUntilMatchedClosing } from './css';
 import { parseErr } from './err';
 
+const pseudoClasses = /not|is/
+
 // assumes stripPseudos(sel); has already been called
 export function parse(sel) {
 	const RE = {
@@ -50,7 +52,7 @@ export function parse(sel) {
 				if (m[2] == '(') {
 					let subsel = takeUntilMatchedClosing(sel, RE.PSEUDO.lastIndex, '(', ')');
 					RE.PSEUDO.lastIndex += subsel.length + 1;
-					m[2] = m[1] == 'not' ? parse(subsel) : subsel;
+					m[2] = pseudoClasses.test(m[1]) ? parse(subsel) : subsel;
 				}
 
 				toks.splice(
@@ -128,4 +130,4 @@ export function parseNth(expr) {
 	}
 
 	return [0, 0];
-}
+}

test/src/0-context-free-unary-sel.js

@@ -346,5 +346,150 @@ describe('Context-free, unary selector', () => {
 		});
 	});
 
+	describe(':is(<tag>)', () => {
+		it('should retain present', function() {
+			let {css: out} = dropcss({
+				html:	'<div></div>',
+				css:	':is(div) {a:b;}',
+			});
+			assert.equal(out, ':is(div){a:b;}')
+		});
+
+		it('should drop absent', function() {
+			let {css: out} = dropcss({
+				html:	'<div></div>',
+				css:	':is(span) {a:b;}',
+			});
+			assert.equal(out, '');;
+		});
+	});
+
+	describe(':is(#id)', () => {
+		it('should retain present', function() {
+			let {css: out} = dropcss({
+				html:	'<div id="a"></div>',
+				css:	':is(#a) {a:b;}',
+			});
+			assert.equal(out, ':is(#a){a:b;}');
+		});
+
+		it('should drop absent', function() {
+			let {css: out} = dropcss({
+				html:	'<div id="a"></div>',
+				css:	':is(#b) {a:b;}',
+			});
+			assert.equal(out, '');
+		});
+	});
+
+	describe(':is(.class)', () => {
+		it('should retain present', function() {
+			let {css: out} = dropcss({
+				html:	'<div class="a"></div>',
+				css:	':is(.a) {a:b;}',
+			});
+			assert.equal(out, ':is(.a){a:b;}');
+		});
+
+		it('should drop absent', function() {
+			let {css: out} = dropcss({
+				html:	'<div class="a"></div>',
+				css:	':is(.b) {a:b;}',
+			});
+			assert.equal(out, '');
+		});
+	});
+
+	describe(':is([attr])', () => {
+		it('should retain present', function() {
+			let {css: out} = dropcss({
+				html:	'<div foo></div>',
+				css:	':is([foo]) {a:b;}',
+			});
+			assert.equal(out, ':is([foo]){a:b;}');
+		});
+
+		it('should drop absent', function() {
+			let {css: out} = dropcss({
+				html:	'<div foo></div>',
+				css:	':is([bar]) {a:b;}',
+			});
+			assert.equal(out, '');
+		});
+	});
+
+	// todo: test [foo="val"], [foo='val']
+	describe(':is([attr=value])', () => {
+		it('should retain present', function() {
+			let {css: out} = dropcss({
+				html:	'<div foo="bar"></div>',
+				css:	':is([foo=bar]) {a:b;}',
+			});
+			assert.equal(out, ':is([foo=bar]){a:b;}');
+		});
+
+		it('should drop absent', function() {
+			let {css: out} = dropcss({
+				html:	'<div foo="bar"></div>',
+				css:	':is([foo=cow]) {a:b;}',
+			});
+			assert.equal(out, '');
+		});
+	});
+
+	describe(':is([attr*=value])', () => {
+		it('should retain present', function() {
+			let {css: out} = dropcss({
+				html:	'<div foo="bar"></div>',
+				css:	':is([foo*=a]) {a:b;}',
+			});
+			assert.equal(out, ':is([foo*=a]){a:b;}');
+		});
+
+		it('should drop absent', function() {
+			let {css: out} = dropcss({
+				html:	'<div foo="bar"></div>',
+				css:	':is([foo*=c]) {a:b;}',
+			});
+			assert.equal(out, '');
+		});
+	});
+
+	describe(':is([attr^=value])', () => {
+		it('should retain present', function() {
+			let {css: out} = dropcss({
+				html:	'<div foo="bar"></div>',
+				css:	':is([foo^=b]) {a:b;}',
+			});
+			assert.equal(out, ':is([foo^=b]){a:b;}');
+		});
+
+		it('should drop absent', function() {
+			let {css: out} = dropcss({
+				html:	'<div foo="bar"></div>',
+				css:	':is([foo^=c]) {a:b;}',
+			});
+			assert.equal(out, '');
+		});
+	});
+
+	describe(':is([attr$=value])', () => {
+		it('should retain present', function() {
+			let {css: out} = dropcss({
+				html:	'<div foo="bar"></div>',
+				css:	':is([foo$=r]) {a:b;}',
+			});
+			assert.equal(out, ':is([foo$=r]){a:b;}');
+		});
+
+		it('should drop absent', function() {
+			let {css: out} = dropcss({
+				html:	'<div foo="bar"></div>',
+				css:	':is([foo$=z]) {a:b;}',
+			});
+			assert.equal(out, '');
+		});
+	});
+
 	// *-child assertions dont make to test in a unary selector since all root elements will be first/last/only "children"
 });

test/src/1-context-free-multi-sel.js

@@ -211,6 +211,50 @@ describe('Context-free, multi selector', () => {
 		});
 	});
 
+	describe('<tag>:is(.class)', () => {
+		it('should retain present', function() {
+			let {css: out} = dropcss({
+				html:	'<div class="bar"></div>',
+				css:	'div:is(.bar) {a:b;}',
+			});
+			assert.equal(out, 'div:is(.bar){a:b;}');
+		});
+
+		it('should drop absent', function() {
+			let {css: out} = dropcss({
+				html:	'<div class="foo"></div><i></i>',
+				css:	'div:is(.bar) {a:b;}',
+			});
+			assert.equal(out, '');
+		});
+
+		it('should drop absent', function() {
+			let {css: out} = dropcss({
+				html:	'<i></i>',
+				css:	'div:is(.foo) {a:b;}',
+			});
+			assert.equal(out, '');
+		});
+	});
+
+	describe('<tag>:not(:nth-child(n+3))', () => {
+		it('should retain present', function() {
+			let {css: out} = dropcss({
+				html:	'<div><p></p><p></p><p></p><p></p></div>',
+				css:	'p:is(:nth-child(n+3)) {a:b;}',
+			});
+			assert.equal(out, 'p:is(:nth-child(n+3)){a:b;}');
+		});
+
+		it('should drop absent', function() {
+			let {css: out} = dropcss({
+				html:	'<div><i></i><i></i><p></p><p></p></div>',
+				css:	'p:is(:nth-child(n+5)) {a:b;}',
+			});
+			assert.equal(out, '');
+		});
+	});
+
 	// TODO: rest that match the non-:not() versions
 
 	// *-child assertions dont make to test in a unary selector since all root elements will be first/last/only "children"