classes, removed any types

Author: notoriousbot

src/cssPlugin.ts

@@ -1,14 +1,61 @@
 import * as postcss from 'postcss';
-import { cssPlugin, getContents } from './cssPlugin';
-
-// typings on postcss don't appear to be correct
-const postcss2 = postcss as Function;
+import { DeclarationWalker, RuleWalker } from './walkers';
 
 export function convertCss(contents: string): Promise<string> {
+  let fileContents = '';
+
+  // create a css plugin for post css to parse and walk the document
+  const cssPlugin = postcss.plugin('css-to-typestyle', (options: postcss.ProcessOptions): postcss.Transformer => {
+    return (root: postcss.Root) => {
+      fileContents = `import{cssRule,fontFace}from'typestyle';`;
+
+      const ruleWalker = new RuleWalker();
+      const declarationWalker = new DeclarationWalker();
+
+      // process regular rules
+      root.walkRules((rule: postcss.Rule) => {
+        const parentType = rule.parent && rule.parent.type;
+        if (parentType === 'atrule') {
+          return;
+        }
+        ruleWalker.walk(rule);
+      });
+      const normalRules = ruleWalker.getRules();
+      fileContents += Object.keys(normalRules)
+        .map((r: string) => `\ncssRule('${r}',${JSON.stringify(normalRules[r])});`)
+        .join('');
+
+      // process at rules
+      root.walkAtRules((atRule: postcss.AtRule) => {
+        // process keyframes and media
+        if (atRule.name === 'keyframes' || atRule.name.indexOf('media') === 0) {
+          ruleWalker.clearRules();
+          atRule.walkRules(ruleWalker.walk);
+          fileContents += `\ncssRule('@${atRule.name} ${atRule.params}',` + JSON.stringify({ $nest: ruleWalker.getRules() }) + ');';
+          return;
+        }
+        // process font-face
+        if (atRule.name === 'font-face') {
+          declarationWalker.clearProperties();
+          atRule.walkDecls(declarationWalker.walk);
+          fileContents += `\nfontFace(` + JSON.stringify(declarationWalker.getProperties()) + ');';
+          return;
+        }
+        // process page
+        if (atRule.name === 'page') {
+          declarationWalker.clearProperties();
+          atRule.walkDecls(declarationWalker.walk);
+          fileContents += `\ncssRule('@page',` + JSON.stringify(declarationWalker.getProperties()) + ');';
+          return;
+        }
+      });
+    };
+  });
+
   return new Promise((resolve, reject) => {
+    const postcss2 = postcss as Function;
     postcss2([cssPlugin])
       .process(contents, {})
-      .then(() => resolve(getContents()), (err: any) => reject(err));
+      .then(() => resolve(fileContents), (err: string) => reject(err));
   });
 };
-

src/cssWalkers.ts

@@ -0,0 +1,3 @@
+export type Properties = {
+  [key: string]: (string | number | (string | number)[]);
+};

src/main.ts

@@ -0,0 +1,46 @@
+import * as postcss from 'postcss';
+import { isNumber, toCamelCase } from '../utils/strings';
+import { Properties } from '../types';
+
+export class DeclarationWalker {
+  private _props: Properties = {};
+
+  public clearProperties(): void {
+    this._props = {};
+  }
+
+  public getProperties(): Properties {
+    return this._props;
+  }
+
+  public walk = (dec: postcss.Declaration): void => {
+    // get property name
+    const declarations = this._props;
+    const propName = dec.prop;
+    const prop = propName.indexOf('-') === 0 ? propName : toCamelCase(propName);
+
+    const objValue = dec.value;
+    let value: string | number;
+    if (typeof objValue === 'number') {
+      value = objValue as number;
+    } else if (isNumber(objValue)) {
+      value = parseFloat(objValue);
+    } else {
+      value = objValue;
+    }
+
+    if (!declarations.hasOwnProperty(prop)) {
+      // set the value directly
+      declarations[prop] = value;
+    } else {
+      // if property has been collected, convert to an array for fallback
+      const propValue = declarations[prop];
+      if (typeof propValue === 'string' || typeof propValue === 'number') {
+        declarations[prop] = [propValue];
+      }
+      // add to the list of values
+      (declarations[prop] as (string | number)[]).push(value)
+    }
+  }
+}
+

src/types.ts

@@ -0,0 +1,28 @@
+import * as postcss from 'postcss';
+import { DeclarationWalker } from './DeclarationWalker';
+import { Properties } from '../types';
+
+
+export class RuleWalker {
+  private _rules: { [selector: string]: Properties; } = {};
+
+  public clearRules(): void {
+    this._rules = {};
+  }
+
+  public getRules(): { [selector: string]: Properties; } {
+    return this._rules;
+  }
+
+  public walk = (rule: postcss.Rule): void => {
+    const decWalker = new DeclarationWalker();
+
+    // find all rules and collect the properties
+    rule.walkDecls((dec: postcss.Declaration) => {
+      decWalker.walk(dec);
+    });
+
+    // convert to string and add to file
+    this._rules[rule.selector] = decWalker.getProperties();
+  }
+}

src/strings.ts src/utils/strings.tssrc/strings.ts renamed to src/utils/strings.ts

@@ -0,0 +1,2 @@
+export * from './DeclarationWalker';
+export * from './RuleWalker';