fix: handle basic css media query selectors

src/css.tsx

@@ -13,6 +13,7 @@ import {
 } from './xml';
 import csstree, {
   Atrule,
+  AtrulePrelude,
   CssNode,
   Declaration,
   DeclarationList,
@@ -89,7 +90,7 @@ function removeSubsets(nodes: Array<XmlAST | string>): Array<XmlAST | string> {
     replace = true;
 
     while (ancestor) {
-      if (nodes.indexOf(ancestor) > -1) {
+      if (nodes.includes(ancestor)) {
         replace = false;
         nodes.splice(idx, 1);
         break;
@@ -276,15 +277,14 @@ function flattenToSelectors(cssAst: CssNode, selectors: FlatSelectorList) {
 function filterByMqs(selectors: FlatSelectorList) {
   return selectors.filter(({ atrule }) => {
     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>)
@@ -297,16 +297,15 @@ const useMqs = ['', 'screen'];
  * @return {Array} Filtered selectors that match the passed pseudo-elements and/or -classes
  */
 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(
+          pseudos.map(pseudo => pseudo.item.data),
-            pseudos.map(pseudo => pseudo.item.data),
+        ),
-          ),
+      }),
-        }),
+    ),
-      ),
   );
 }
 // usePseudos Array with strings of single or sequence of pseudo-elements and/or -classes that should pass

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2017",
-    "lib": ["es6"],
+    "lib": ["es6", "es2016"],
     "jsx": "react-native",
     "strict": true,
     "noImplicitAny": true,