Migrate to TS

Author: artf

package-lock.json

@@ -37,6 +37,7 @@
   "devDependencies": {
     "@babel/preset-typescript": "^7.18.6",
     "eslint": "^8.21.0",
+    "grapesjs": "^0.19.5",
     "grapesjs-cli": "^3.0.1",
     "jest": "^28.1.3"
   },

package.json

@@ -1,5 +1,8 @@
+import type grapesjs from 'grapesjs';
 import parser from './parser';
 
-export default (editor) => {
+const plugin: grapesjs.Plugin = (editor) => {
   editor.setCustomParserCss(parser);
 };
+
+export default plugin;

src/index.ts

@@ -1,21 +1,31 @@
-import postcss from 'postcss';
+import type grapesjs from 'grapesjs';
+import postcss, { Rule, AtRule, Declaration } from 'postcss';
+
+export type ParsedRule = {
+  selectors: string;
+  style: Record<string, string>;
+  atRule?: string;
+  params?: string;
+}
+
+type Editor = grapesjs.Editor;
 
 /**
  * Log stuff
  * @param  {Editor} editor
  * @param  {*} msg
  */
-export const log = (editor, msg) =>
+export const log = (editor: Editor, msg: any) =>
   editor && editor.log(msg, { ns: 'parser-poscss' });
 
 /**
  * Create rule from node
  * @param  {Object} node
  * @return {Object}
  */
-export const createRule = node => {
-  const declarations = node.nodes || [];
-  const style = {};
+export const createRule = (node: Rule): ParsedRule => {
+  const declarations = (node.nodes as Declaration[]) || [];
+  const style: Record<string, string> = {};
 
   declarations.forEach(({ prop, value, important }) => {
     style[prop] = value + (important ? ' !important' : '');
@@ -33,28 +43,29 @@ export const createRule = node => {
  * @param  {Array<Object>} result
  * @return {Object}
  */
-export const createAtRule = (node, result) => {
+export const createAtRule = (node: AtRule, result: ParsedRule[]) => {
   const { name, params } = node;
   const isNested = ['media', 'keyframes'].indexOf(name) >= 0;
 
   if (isNested) {
     node.nodes.forEach(node => {
       result.push({
-        ...createRule(node),
+        ...createRule(node as Rule),
         atRule: name,
         params,
       })
     });
   } else {
     result.push({
-      ...createRule(node),
+      // @ts-ignore
+      ...createRule(node as Rule),
       atRule: name,
     })
   }
 };
 
-export default (css, editor) => {
-  const result = [];
+export default (css: string, editor: Editor) => {
+  const result: ParsedRule[] = [];
   log(editor, ['Input CSS', css]);
 
   const ast = postcss().process(css).sync().root;

src/parser.ts

@@ -0,0 +1,4 @@
+{
+    "extends": "./node_modules/grapesjs-cli/src/template/tsconfig.json",
+    "include": ["src"]
+}