chore: Removed unused deps, added typings.

.npmignore

@@ -32,10 +32,9 @@
 
 prettier.config.js
 
-# webpack
+# TypeScript
 
-serve.config.js
-webpack.config.js
+tsconfig.json
 
 # Various
 

package.json

@@ -1,14 +1,14 @@
 {
     "name": "postcss-managed-media",
-    "version": "0.0.2-alpha.0",
+    "version": "0.0.2-alpha.1",
     "description": "Really custom media in CSS",
     "main": "dist/index.js",
+    "types": "dist/index.d.ts",
     "repository": "https://github.com/miyamarisubs/postcss-custom-media",
     "author": "Marina Miyaoka <[email protected]> (https://t.me/miyaokamarina)",
     "license": "MIT",
     "scripts": {
-        "watch": "webpack-serve ./serve.config.js",
-        "build": "babel -o ./dist/index.js ./src/plugin.ts",
+        "build": "babel -o ./dist/index.js ./src/index.ts && tsc -d --emitDeclarationOnly --declarationDir ./dist/ ./src/index.ts",
         "postinstall": "mkdirp build coverage cache dist temp var build",
         "clean": "rimraf build coverage cache dist temp var build",
         "postclean": "yarn run postinstall",
@@ -25,12 +25,7 @@
         "@babel/preset-env": "^7.0.0-beta.46",
         "@babel/preset-stage-0": "^7.0.0-beta.46",
         "@babel/preset-typescript": "^7.0.0-beta.46",
-        "babel-loader": "^8.0.0-beta.2",
-        "html-webpack-plugin": "^3.2.0",
         "prettier": "^1.12.1",
-        "typescript": "^2.8.3",
-        "webpack": "^4.8.1",
-        "webpack-cli": "^2.1.3",
-        "webpack-serve": "^0.3.2"
+        "typescript": "^2.8.3"
     }
 }

src/index.ts

@@ -1,18 +1,125 @@
-import * as postcss from 'postcss';
+import { plugin } from 'postcss';
+import parseValue, { stringify, Node } from 'postcss-value-parser';
 
-import plugin from './plugin';
+const noSpace = (node: Node) => node.type !== 'space';
+const noAnd = (node: Node) => node.type !== 'word' || node.value !== 'and';
+const noOnly = (node: Node) => node.type !== 'word' || node.value !== 'only';
+const uniq = <A extends any>(as: A[]): A[] => [...new Set(as)];
+const rename = (x: string): string => `[data-managed-media-${x.replace(/^--/, '')}]`;
 
-/* language=PostCSS */
-const code = String.raw`
-    @managed-media --touch;
-    @managed-media --light;
-    @managed-media --dark;
+const split = (nodes: Node[]) => {
+    const parts: Node[][] = [];
 
-    @media (--touch) {
-        .touch {}
+    let part: Node[] = [];
+    let divided: boolean = false;
+
+    for (const node of nodes) {
+        if (node.type === 'div' && node.value === ',') {
+            parts.push(part);
+
+            part = [];
+            divided = true;
+        } else {
+            part.push(node);
+
+            divided = false;
+        }
+    }
+
+    if (!divided) {
+        parts.push(part);
     }
-`;
 
-(async () => {
-    console.log((await postcss([plugin]).process(code, { from: undefined })).css);
-})();
+    return parts;
+};
+
+export default plugin('postcss-managed-media', () => root => {
+    const registry: string[] = [];
+
+    root.walkAtRules(at => {
+        if (at.name === 'managed-media') {
+            registry.push(at.params);
+
+            at.remove();
+        }
+    });
+
+    root.walkAtRules(at => {
+        const parsed = parseValue(at.params).nodes;
+
+        const filtered = parsed
+            .filter(noSpace)
+            .filter(noAnd)
+            .filter(noOnly);
+
+        const media: string[] = [];
+        const attrs: string[] = [];
+
+        for (const query of split(filtered)) {
+            const features: string[] = [];
+            const attrs_: string[] = [];
+
+            let negated = false;
+
+            for (const feature of query) {
+                if (feature.type === 'word' && feature.value === 'not') {
+                    negated = true;
+
+                    continue;
+                }
+
+                if (feature.type === 'word' && registry.includes(feature.value)) {
+                    attrs_.push(rename(feature.value));
+
+                    continue;
+                }
+
+                if (feature.type === 'function' && feature.nodes.length === 1 && registry.includes(feature.nodes[0].value)) {
+                    attrs_.push(rename(feature.nodes[0].value));
+
+                    continue;
+                }
+
+                features.push(stringify(feature));
+            }
+
+            const rawMedia = features.join(' and ');
+
+            media.push(`${negated && rawMedia ? 'not ' : ''}${rawMedia || 'all'}`);
+
+            if (attrs_.length > 0) {
+                const joined: string = attrs_.join('');
+
+                if (negated) {
+                    attrs.push(`:root:not(${joined})`);
+                } else {
+                    attrs.push(`:root${joined}`);
+                }
+            } else {
+                attrs.push('');
+            }
+        }
+
+        at.params = media.join(', ');
+
+        for (const node of at.nodes || []) {
+            if (node.type !== 'rule') {
+                // TODO: Warn.
+
+                continue;
+            }
+
+            const selectors = node.selectors || [];
+
+            node.selectors = uniq(
+                selectors.reduce(
+                    (result, selector) => [
+                        ...result,
+                        ...attrs.reduce((result, attr) => [...result, `${attr} ${selector}`.trim(), `${attr}${selector}`.trim()], [] as string[]),
+                    ],
+                    [] as string[],
+                ),
+            );
+        }
+    });
+});