fix:style: Refactored code for better typing and readability

Author: blyedev

src/nodes/document.d.ts

@@ -0,0 +1,6 @@
+import postcss from "postcss";
+import { StyleRoot } from "./root.js";
+
+export declare class Document extends postcss.Document {
+  nodes: StyleRoot[];
+}

src/nodes/document.js

@@ -0,0 +1,23 @@
+import * as postcss from "postcss";
+import { stringify } from "../index.js";
+
+/**
+ * A customized PostCSS Document node.
+ *
+ * @augments {postcss.Document}
+ */
+export class Document extends postcss.Document {
+  /**
+   * It compiles the node to browser readable cascading style sheets string depending on it's type.
+   *
+   * @param {(postcss.Stringifier | postcss.Syntax)} [stringifier] - Optional stringifier to customize the output format.
+   * @returns {string} The compiled CSS string of this node.
+   */
+  toString(stringifier) {
+    return super.toString(
+      stringifier || {
+        stringify: stringify,
+      },
+    );
+  }
+}

src/nodes/root.d.ts

@@ -0,0 +1,15 @@
+import postcss from "postcss";
+import { RootProps, RootRaws } from "postcss/lib/root";
+
+interface StyleRaws extends RootRaws {
+  stringType: '"' | "'" | "`";
+}
+
+interface StyleProps extends RootProps {
+  raws: StyleRaws;
+}
+
+export declare class StyleRoot extends postcss.Root {
+  raws: StyleRaws;
+  constructor(options?: StyleProps);
+}

src/nodes/root.js

@@ -0,0 +1,34 @@
+import * as postcss from "postcss";
+import stringify from "../stringify.js";
+
+/**
+ * A customized PostCSS Root node with extended raw properties.
+ *
+ * @augments {postcss.Root}
+ * @property {import("./types").StyleRaws} raws - Extended raw properties for StyleRoot.
+ */
+export class StyleRoot extends postcss.Root {
+  /**
+   * Creates an instance of StyleRoot.
+   *
+   * @class
+   * @param {import("./root.js").StyleProps} options - Properties to initialize the StyleRoot instance.
+   */
+  constructor(options) {
+    super(options);
+  }
+
+  /**
+   * Compiles the node to a CSS string using the specified stringifier.
+   *
+   * @param {(postcss.Stringifier | postcss.Syntax)} [stringifier] - Optional stringifier to customize the output format.
+   * @returns {string} The compiled CSS string of this node.
+   */
+  toString(stringifier) {
+    return super.toString(
+      stringifier || {
+        stringify: stringify,
+      },
+    );
+  }
+}

src/parse.js

@@ -1,5 +1,5 @@
 import { Document, Input } from "postcss";
-import { AngularParser } from "./parser-angular.js";
+import { parseAngular } from "./parser/parser-angular.js";
 
 /**
  * Represents an object that can be converted to a string.
@@ -19,8 +19,5 @@ import { AngularParser } from "./parser-angular.js";
 export default function parse(angularCode, opts) {
   const input = new Input(angularCode.toString(), opts);
 
-  const angularParser = new AngularParser(input);
-  angularParser.parse(opts);
-
-  return angularParser.doc;
+  return parseAngular(input, opts);
 }

src/parser-angular.js

@@ -4,36 +4,46 @@ import { Project, SyntaxKind } from "ts-morph";
  * @typedef {import("ts-morph").StringLiteral | import("ts-morph").NoSubstitutionTemplateLiteral} StyleLiteral
  */
 
-export class TypescriptParser {
-  /**
-   * Creates an instance of TypescriptParser.
-   *
-   * @param {import("postcss").Input} input - The PostCSS input containing the source CSS and its originating file.
-   */
-  constructor(input) {
-    const project = new Project({
-      useInMemoryFileSystem: true,
-    });
+/**
+ * Parses TypeScript source to extract style literals from component decorators.
+ *
+ * @param {import("postcss").Input} input - The PostCSS input containing the source CSS and its originating file.
+ * @returns {StyleLiteral[]} An array of style literals extracted from the components within the source file.
+ */
+export function parseTypescript(input) {
+  const project = new Project({
+    useInMemoryFileSystem: true,
+  });
 
-    this.sourceFile = project.createSourceFile(input.from, input.css);
-  }
+  const sourceFile = project.createSourceFile(input.from, input.css);
+  return extractStyleLiterals(sourceFile);
+}
 
-  /**
-   * Parses the TypeScript source file to extract style literals from component decorators.
-   *
-   * @returns {StyleLiteral[]} An array of style literals extracted from the components within the source file.
-   */
-  parse() {
-    return this.sourceFile
-      .getClasses()
-      .flatMap((cls) => cls.getDecorators())
-      .filter(isComponentDecorator)
-      .flatMap((decorator) => decorator.getArguments())
-      .filter(isObjectLiteral)
-      .flatMap(getStylesProperty)
-      .flatMap(getStyleValues)
-      .map(castToStyleLiteral);
-  }
+/**
+ * Extracts style literals from a source file.
+ *
+ * @param {import("ts-morph").SourceFile} sourceFile - The TypeScript source file to parse.
+ * @returns {StyleLiteral[]} An array of extracted style literals.
+ */
+function extractStyleLiterals(sourceFile) {
+  return sourceFile
+    .getClasses()
+    .flatMap(getComponentDecorators)
+    .flatMap(getDecoratorArguments)
+    .filter(isObjectLiteral)
+    .flatMap(getStylesProperty)
+    .flatMap(getStyleValues)
+    .map(castToStyleLiteral);
+}
+
+/**
+ * Retrieves component decorators from a class.
+ *
+ * @param {import("ts-morph").ClassDeclaration} cls - The class declaration.
+ * @returns {import("ts-morph").Decorator[]} An array of Component decorators.
+ */
+function getComponentDecorators(cls) {
+  return cls.getDecorators().filter(isComponentDecorator);
 }
 
 /**
@@ -46,6 +56,16 @@ function isComponentDecorator(decorator) {
   return decorator.getName() === "Component";
 }
 
+/**
+ * Retrieves arguments from a decorator.
+ *
+ * @param {import("ts-morph").Decorator} decorator - The decorator.
+ * @returns {import("ts-morph").Node[]} An array of decorator arguments.
+ */
+function getDecoratorArguments(decorator) {
+  return decorator.getArguments();
+}
+
 /**
  * Checks if the provided expression is an object literal.
  *

src/parser-typescript.js src/parser/parse-typescript.jssrc/parser-typescript.js renamed to src/parser/parse-typescript.js

@@ -0,0 +1,51 @@
+import { Input } from "postcss";
+import { StyleParser } from "./parser-styles.js";
+import { Document } from "../nodes/document.js";
+import { parseTypescript } from "./parse-typescript.js";
+
+/**
+ * Parses the input TypeScript file to extract and process Angular component styles.
+ *
+ * @param {Input} input - The PostCSS `Input` object wrapping the source file.
+ * @param {Pick<import("postcss").ProcessOptions, "from" | "map">} opts - The PostCSS processing options.
+ * @returns {Document} The root node of the generated Abstract Syntax Tree (AST).
+ */
+export function parseAngular(input, opts) {
+  const styleLiterals = parseTypescript(input);
+
+  let index = 0;
+  const nodes = styleLiterals.map((styleLiteral, idx) => {
+    const styleParser = new StyleParser(input, styleLiteral);
+    const stylesRoot = styleParser.parse(opts);
+
+    stylesRoot.raws.codeBefore = input.css.slice(
+      index,
+      styleLiteral.getStart(),
+    );
+
+    index = styleLiteral.getEnd();
+
+    // In case this is the last style node we save the rest of the file
+    if (idx === styleLiterals.length - 1) {
+      stylesRoot.raws.codeAfter = input.css.slice(index);
+    }
+
+    return stylesRoot;
+  });
+
+  const offset = input.css.length - 1;
+  const { col: column, line } = input.fromOffset(offset);
+
+  return new Document({
+    nodes,
+    source: {
+      input,
+      start: { column: 1, line: 1, offset: 0 },
+      end: {
+        column,
+        line,
+        offset,
+      },
+    },
+  });
+}