Skip to content

Commit 8e3c4c7

Browse files
gorhillgorhill
committed
[mv3] Fix support of CSS selectors with pseudo-elements in custom filters
1 parent e2df53d commit 8e3c4c7

4 files changed

Lines changed: 79 additions & 65 deletions

File tree

‎platform/mv3/extension/js/scripting/css-procedural-api.js‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -772,7 +772,46 @@ self.ProceduralFiltererAPI = class {
772772
}
773773
}
774774

775-
addSelectors(selectors) {
775+
addDeclaratives(selectors) {
776+
const cssRuleFromProcedural = details => {
777+
const { tasks, action } = details;
778+
let mq, selector;
779+
if ( Array.isArray(tasks) ) {
780+
if ( tasks[0][0] !== 'matches-media' ) { return; }
781+
mq = tasks[0][1];
782+
if ( tasks.length > 2 ) { return; }
783+
if ( tasks.length === 2 ) {
784+
if ( tasks[1][0] !== 'spath' ) { return; }
785+
selector = tasks[1][1];
786+
}
787+
}
788+
let style;
789+
if ( Array.isArray(action) ) {
790+
if ( action[0] !== 'style' ) { return; }
791+
selector = selector || details.selector;
792+
style = action[1];
793+
}
794+
if ( mq === undefined && style === undefined && selector === undefined ) { return; }
795+
if ( mq === undefined ) {
796+
return `${selector}\n{${style}}`;
797+
}
798+
if ( style === undefined ) {
799+
return `@media ${mq} {\n${selector}\n{display:none!important;}\n}`;
800+
}
801+
return `@media ${mq} {\n${selector}\n{${style}}\n}`;
802+
};
803+
const sheetText = [];
804+
for ( const details of selectors ) {
805+
const ruleText = cssRuleFromProcedural(details);
806+
if ( ruleText === undefined ) { continue; }
807+
sheetText.push(ruleText);
808+
}
809+
if ( sheetText.length !== 0 ) {
810+
self.cssAPI.insert(sheetText.join('\n'));
811+
}
812+
}
813+
814+
addProcedurals(selectors) {
776815
if ( this.proceduralFilterer === null ) {
777816
this.proceduralFilterer = new ProceduralFilterer();
778817
}

‎platform/mv3/extension/js/scripting/css-procedural.js‎

Lines changed: 14 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -36,66 +36,25 @@ if ( selectors.length === 0 ) { return; }
3636

3737
proceduralImports.length = 0;
3838

39+
if ( self.ProceduralFiltererAPI === undefined ) {
40+
self.ProceduralFiltererAPI = chrome.runtime.sendMessage({
41+
what: 'injectCSSProceduralAPI'
42+
}).catch(( ) => {
43+
});
44+
}
45+
46+
await self.ProceduralFiltererAPI;
47+
48+
self.listsProceduralFiltererAPI = new self.ProceduralFiltererAPI();
49+
3950
const declaratives = selectors.filter(a => a.cssable);
4051
if ( declaratives.length !== 0 ) {
41-
const cssRuleFromProcedural = details => {
42-
const { tasks, action } = details;
43-
let mq, selector;
44-
if ( Array.isArray(tasks) ) {
45-
if ( tasks[0][0] !== 'matches-media' ) { return; }
46-
mq = tasks[0][1];
47-
if ( tasks.length > 2 ) { return; }
48-
if ( tasks.length === 2 ) {
49-
if ( tasks[1][0] !== 'spath' ) { return; }
50-
selector = tasks[1][1];
51-
}
52-
}
53-
let style;
54-
if ( Array.isArray(action) ) {
55-
if ( action[0] !== 'style' ) { return; }
56-
selector = selector || details.selector;
57-
style = action[1];
58-
}
59-
if ( mq === undefined && style === undefined && selector === undefined ) { return; }
60-
if ( mq === undefined ) {
61-
return `${selector}\n{${style}}`;
62-
}
63-
if ( style === undefined ) {
64-
return `@media ${mq} {\n${selector}\n{display:none!important;}\n}`;
65-
}
66-
return `@media ${mq} {\n${selector}\n{${style}}\n}`;
67-
};
68-
const sheetText = [];
69-
for ( const details of declaratives ) {
70-
const ruleText = cssRuleFromProcedural(details);
71-
if ( ruleText === undefined ) { continue; }
72-
sheetText.push(ruleText);
73-
}
74-
if ( sheetText.length !== 0 ) {
75-
self.cssAPI.insert(sheetText.join('\n'));
76-
}
52+
self.listsProceduralFiltererAPI.addDeclaratives(declaratives);
7753
}
7854

79-
const procedurals = selectors.filter(a => a.cssable === undefined);
55+
const procedurals = selectors.filter(a => !a.cssable);
8056
if ( procedurals.length !== 0 ) {
81-
const addSelectors = selectors => {
82-
if ( self.listsProceduralFiltererAPI instanceof Object === false ) { return; }
83-
self.listsProceduralFiltererAPI.addSelectors(selectors);
84-
};
85-
if ( self.ProceduralFiltererAPI === undefined ) {
86-
self.ProceduralFiltererAPI = chrome.runtime.sendMessage({
87-
what: 'injectCSSProceduralAPI'
88-
}).catch(( ) => {
89-
});
90-
}
91-
if ( self.ProceduralFiltererAPI instanceof Promise ) {
92-
self.ProceduralFiltererAPI.then(( ) => {
93-
self.listsProceduralFiltererAPI = new self.ProceduralFiltererAPI();
94-
addSelectors(procedurals);
95-
});
96-
} else {
97-
addSelectors(procedurals);
98-
}
57+
self.listsProceduralFiltererAPI.addProcedurals(procedurals);
9958
}
10059

10160
/******************************************************************************/

‎platform/mv3/extension/js/scripting/css-user.js‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,32 @@ const details = await chrome.runtime.sendMessage({
3030
}).catch(( ) => {
3131
});
3232

33-
if ( details?.proceduralSelectors?.length ) {
34-
if ( self.ProceduralFiltererAPI ) {
35-
self.customProceduralFiltererAPI = new self.ProceduralFiltererAPI();
36-
self.customProceduralFiltererAPI.addSelectors(
37-
details.proceduralSelectors.map(a => JSON.parse(a))
38-
);
39-
}
33+
self.customFilters = details;
34+
35+
if ( Boolean(details?.proceduralSelectors?.length) === false ) { return; }
36+
37+
if ( self.ProceduralFiltererAPI === undefined ) {
38+
self.ProceduralFiltererAPI = chrome.runtime.sendMessage({
39+
what: 'injectCSSProceduralAPI'
40+
}).catch(( ) => {
41+
});
4042
}
4143

42-
self.customFilters = details;
44+
await self.ProceduralFiltererAPI;
45+
46+
self.customProceduralFiltererAPI = new self.ProceduralFiltererAPI();
47+
48+
const selectors = details.proceduralSelectors.map(a => JSON.parse(a));
49+
50+
const declaratives = selectors.filter(a => a.cssable);
51+
if ( declaratives.length !== 0 ) {
52+
self.customProceduralFiltererAPI.addDeclaratives(declaratives);
53+
}
54+
55+
const procedurals = selectors.filter(a => !a.cssable);
56+
if ( procedurals.length !== 0 ) {
57+
self.customProceduralFiltererAPI.addProcedurals(procedurals);
58+
}
4359

4460
/******************************************************************************/
4561

‎platform/mv3/extension/js/scripting/picker.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ async function previewSelector(selector) {
257257
if ( self.pickerProceduralFilteringAPI === undefined ) {
258258
self.pickerProceduralFilteringAPI = new self.ProceduralFiltererAPI();
259259
}
260-
self.pickerProceduralFilteringAPI.addSelectors([ JSON.parse(selector) ]);
260+
self.pickerProceduralFilteringAPI.addProcedurals([ JSON.parse(selector) ]);
261261
return;
262262
}
263263
previewedCSS = `${selector}{display:none!important;}`;

0 commit comments

Comments
 (0)