From 28bd145e55d592ad37766577b3106f5301a86c0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Auswo=CC=88ger?= Date: Mon, 21 Dec 2015 12:33:05 +0100 Subject: [PATCH] Fix bug with pseudo element selectors, see #7 --- cq-prolyfill.js | 3 ++- tests.js | 20 ++++++++++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/cq-prolyfill.js b/cq-prolyfill.js index 7e1ffd1..00308c1 100644 --- a/cq-prolyfill.js +++ b/cq-prolyfill.js @@ -374,7 +374,8 @@ function parseRule(rule) { + selector.substr(offset + match.length).replace(/^((?:\([^)]*\)|[^\s>+~])*).*$/, '$1') ) .replace(SELECTOR_ESCAPED_REGEXP, '') - .replace(/:(?:active|hover|focus|checked)/gi, ''); + .replace(PSEUDO_ELEMENT_REGEXP, '') + .replace(/:(?:active|hover|focus|checked|before|after)/gi, ''); if (!precedingSelector.substr(-1).trim()) { precedingSelector += '*'; } diff --git a/tests.js b/tests.js index 9957162..80711f8 100644 --- a/tests.js +++ b/tests.js @@ -163,13 +163,15 @@ QUnit.test('parseRules', function(assert) { + '.double-comparison:container(width > 100px < 200px) { display: block }' + '.filter:container(color lightness < 10%) { display: block }' + ':nth-of-type(2n+1):container(width > 100px) { display: block }' + + '.pseudo-before:container(width > 100px):before { display: block }' + + '.pseudo-after:container(width > 100px)::after { display: block }' + '@media screen { .inside-media-query:container(height < 10em) { display: block } }'; fixture.appendChild(style); var done = assert.async(); preprocess(function () { parseRules(); - assert.equal(Object.keys(queries).length, 8, 'Eight queries'); + assert.equal(Object.keys(queries).length, 10, 'Ten queries'); assert.ok(Object.keys(queries)[0].match(/^\.foo (?:\.before|\.after){2}\.\\:container\\\(width\\>\\=100\\\.00px\\\)$/), 'Correct key'); assert.ok(queries[Object.keys(queries)[0]]._selector.match(/^\.foo (?:\.before|\.after){2}$/), 'Preceding selector'); @@ -224,7 +226,21 @@ QUnit.test('parseRules', function(assert) { assert.deepEqual(queries[Object.keys(queries)[6]]._values, ['100px'], 'Value'); assert.equal(queries[Object.keys(queries)[6]]._className, ':container(width>100px)', 'Class name'); - assert.equal(Object.keys(queries)[7], '.inside-media-query.\\:container\\(height\\<10em\\)', 'Correct key'); + assert.equal(Object.keys(queries)[7], '.pseudo-before.\\:container\\(width\\>100px\\)', 'Correct key'); + assert.equal(queries[Object.keys(queries)[7]]._selector, '.pseudo-before', 'Preceding selector'); + assert.equal(queries[Object.keys(queries)[7]]._prop, 'width', 'Property'); + assert.deepEqual(queries[Object.keys(queries)[7]]._types, ['>'], 'Mode'); + assert.deepEqual(queries[Object.keys(queries)[7]]._values, ['100px'], 'Value'); + assert.equal(queries[Object.keys(queries)[7]]._className, ':container(width>100px)', 'Class name'); + + assert.equal(Object.keys(queries)[8], '.pseudo-after.\\:container\\(width\\>100px\\)', 'Correct key'); + assert.equal(queries[Object.keys(queries)[8]]._selector, '.pseudo-after', 'Preceding selector'); + assert.equal(queries[Object.keys(queries)[8]]._prop, 'width', 'Property'); + assert.deepEqual(queries[Object.keys(queries)[8]]._types, ['>'], 'Mode'); + assert.deepEqual(queries[Object.keys(queries)[8]]._values, ['100px'], 'Value'); + assert.equal(queries[Object.keys(queries)[8]]._className, ':container(width>100px)', 'Class name'); + + assert.equal(Object.keys(queries)[9], '.inside-media-query.\\:container\\(height\\<10em\\)', 'Correct key'); done(); });