fix: handle basic css media query selectors

This commit is contained in:
Mikael Sand
2019-10-21 23:51:03 +03:00
parent 091ca82900
commit 168ee25ee4
2 changed files with 19 additions and 20 deletions
+11 -12
View File
@@ -13,6 +13,7 @@ import {
} from './xml'; } from './xml';
import csstree, { import csstree, {
Atrule, Atrule,
AtrulePrelude,
CssNode, CssNode,
Declaration, Declaration,
DeclarationList, DeclarationList,
@@ -89,7 +90,7 @@ function removeSubsets(nodes: Array<XmlAST | string>): Array<XmlAST | string> {
replace = true; replace = true;
while (ancestor) { while (ancestor) {
if (nodes.indexOf(ancestor) > -1) { if (nodes.includes(ancestor)) {
replace = false; replace = false;
nodes.splice(idx, 1); nodes.splice(idx, 1);
break; break;
@@ -276,15 +277,14 @@ function flattenToSelectors(cssAst: CssNode, selectors: FlatSelectorList) {
function filterByMqs(selectors: FlatSelectorList) { function filterByMqs(selectors: FlatSelectorList) {
return selectors.filter(({ atrule }) => { return selectors.filter(({ atrule }) => {
if (atrule === null) { if (atrule === null) {
return ~useMqs.indexOf(''); return true;
} }
// @ts-ignore const { name, prelude } = atrule;
const { name, expression } = atrule; const atPrelude = prelude as AtrulePrelude;
return ~useMqs.indexOf( const first = atPrelude && atPrelude.children.first();
expression && expression.children.first().type === 'MediaQueryList' const mq = first && first.type === 'MediaQueryList';
? [name, csstree.generate(expression)].join(' ') const query = mq ? csstree.generate(atPrelude) : name;
: name, return useMqs.includes(query);
);
}); });
} }
// useMqs Array with strings of media queries that should pass (<name> <expression>) // useMqs Array with strings of media queries that should pass (<name> <expression>)
@@ -297,9 +297,8 @@ const useMqs = ['', 'screen'];
* @return {Array} Filtered selectors that match the passed pseudo-elements and/or -classes * @return {Array} Filtered selectors that match the passed pseudo-elements and/or -classes
*/ */
function filterByPseudos(selectors: FlatSelectorList) { function filterByPseudos(selectors: FlatSelectorList) {
return selectors.filter( return selectors.filter(({ pseudos }) =>
({ pseudos }) => usePseudos.includes(
~usePseudos.indexOf(
csstree.generate({ csstree.generate({
type: 'Selector', type: 'Selector',
children: new List<CssNode>().fromArray( children: new List<CssNode>().fromArray(
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es2017", "target": "es2017",
"lib": ["es6"], "lib": ["es6", "es2016"],
"jsx": "react-native", "jsx": "react-native",
"strict": true, "strict": true,
"noImplicitAny": true, "noImplicitAny": true,