next-yak 0.0.36 → 0.0.39

package/loaders/{babel-yak-plugin.cjs → babel-yak-plugin.ts}

@@ -1,43 +1,59 @@
-/// @ts-check;
-const quasiClassifier = require("./lib/quasiClassifier.cjs");
-const replaceQuasiExpressionTokens = require("./lib/replaceQuasiExpressionTokens.cjs");
-const murmurhash2_32_gc = require("./lib/hash.cjs");
-const { relative, resolve, basename } = require("path");
-const localIdent = require("./lib/localIdent.cjs");
-const getStyledComponentName = require("./lib/getStyledComponentName.cjs");
-const appendCssUnitToExpressionValue = require("./lib/appendCssUnitToExpressionValue.cjs");
-const getCssName = require("./lib/getCssName.cjs");
-const {
-  getConstantName,
-  getConstantValues,
-} = require("./lib/getConstantValues.cjs");
+import type babelCore from "@babel/core";
+import {
+  BabelFile,
+  NodePath,
+  PluginObj,
+  PluginPass,
+  types as babelTypes,
+} from "@babel/core";
+import quasiClassifier from "./lib/quasiClassifier.js";
+import replaceQuasiExpressionTokens from "./lib/replaceQuasiExpressionTokens.js";
+import murmurhash2_32_gc from "./lib/hash.js";
+import { relative, resolve, basename } from "node:path";
+import localIdent from "./lib/localIdent.js";
+import getStyledComponentName from "./lib/getStyledComponentName.js";
+import appendCssUnitToExpressionValue from "./lib/appendCssUnitToExpressionValue.js";
+import getCssName from "./lib/getCssName.js";
+import { getConstantName, getConstantValues } from "./lib/getConstantValues.js";
 
-/** @typedef {{replaces: Record<string, unknown>, rootContext?: string}} YakBabelPluginOptions */
-/** @typedef {{ css: string | undefined, styled: string | undefined, keyframes: string | undefined }} YakLocalIdentifierNames */
+type YakBabelPluginOptions = {
+  replaces: Record<string, unknown>;
+  rootContext?: string;
+};
+
+type YakLocalIdentifierNames = {
+  css: string | undefined;
+  styled: string | undefined;
+  keyframes: string | undefined;
+};
 
 /**
  * Babel plugin for typescript files that use yak - it will do things:
  * - inject the import to the css-module (with .yak.module.css extension)
  * - replace the css template literal with styles from the css-module
- *
- * @param {import("@babel/core")} babel
- * @param {YakBabelPluginOptions} options
- * @returns {babel.PluginObj<import("@babel/core").PluginPass & {
- *   localVarNames: YakLocalIdentifierNames,
- *   isImportedInCurrentFile: boolean,
- *   classNameCount: number,
- *   topLevelConstBindings: Map<string, number | string | null>,
- *   varIndex: number,
- *   variableNameToStyledCall: Map<string, {
- *     wasAdded: boolean,
- *     className: string,
- *     astNode: import("@babel/types").CallExpression
- *   }>
- *  yakImportPath?: import("@babel/core").NodePath<import("@babel/core").types.ImportDeclaration>
- *  runtimeInternalHelpers: Set<string>
- * }>}
  */
-module.exports = function (babel, options) {
+export default function (
+  babel: typeof babelCore,
+  options: YakBabelPluginOptions
+): PluginObj<
+  PluginPass & {
+    localVarNames: YakLocalIdentifierNames;
+    isImportedInCurrentFile: boolean;
+    classNameCount: number;
+    topLevelConstBindings: Map<string, number | string | null>;
+    varIndex: number;
+    variableNameToStyledCall: Map<
+      string,
+      {
+        wasAdded: boolean;
+        className: string;
+        astNode: babelTypes.CallExpression;
+      }
+    >;
+    yakImportPath?: NodePath<babelTypes.ImportDeclaration>;
+    runtimeInternalHelpers: Set<string>;
+  }
+> {
   const { replaces } = options;
   const rootContext = options.rootContext || process.cwd();
   const { types: t } = babel;
@@ -45,13 +61,9 @@ module.exports = function (babel, options) {
   /**
    * A unique prefix for each file to avoid collisions
    * (generated on first use by hashing the relative file path)
-   * @type {WeakMap<import("@babel/core").BabelFile, string>}
-   */
-  const hashedFilePaths = new WeakMap();
-  /**
-   * @param {import("@babel/core").BabelFile} file
    */
-  const getHashedFilePath = (file) => {
+  const hashedFilePaths = new WeakMap<BabelFile, string>();
+  const getHashedFilePath = (file: BabelFile) => {
     const fromCache = hashedFilePaths.get(file);
     if (fromCache) {
       return fromCache;
@@ -78,12 +90,11 @@ module.exports = function (babel, options) {
    * - styled(Component)`...` -> styledCall
    * - styled.div.attrs({})`...` -> attrsCall
    * - keyframes`...` -> keyframesLiteral
-   *
-   * @param {babel.types.Expression} tag
-   * @param {YakLocalIdentifierNames} localVarNames
-   * @returns {"cssLiteral" | "keyframesLiteral" | "styledLiteral" | "styledCall" | "attrsCall" | "unknown"}
    */
-  const getYakExpressionType = (tag, localVarNames) => {
+  const getYakExpressionType = (
+    tag: babelTypes.Expression,
+    localVarNames: YakLocalIdentifierNames
+  ) => {
     if (t.isIdentifier(tag)) {
       if (tag.name === localVarNames.css) {
         return "cssLiteral";
@@ -157,9 +168,6 @@ module.exports = function (babel, options) {
        *
        * Inject the import to the css-module (with .yak.module.css extension)
        * e.g. `import './App.yak.module.css!=!./App?./App.yak.module.css'`
-       *
-       * @param {import("@babel/core").NodePath<import("@babel/types").ImportDeclaration>} path
-       * @param {babel.PluginPass & {localVarNames: YakLocalIdentifierNames, isImportedInCurrentFile: boolean, classNameCount: number, varIndex: number}} state
        */
       ImportDeclaration(path, state) {
         const node = path.node;
@@ -193,9 +201,7 @@ module.exports = function (babel, options) {
             return;
           }
 
-          const importSpecifier = /** @type {babel.types.Identifier} */ (
-            specifier.imported
-          );
+          const importSpecifier = specifier.imported;
           const localSpecifier = specifier.local || importSpecifier;
 
           if (
@@ -215,9 +221,6 @@ module.exports = function (babel, options) {
        * - styled(Component)`...`
        * - styled.div.attrs({})`...`
        * - keyframes`...`
-       *
-       * @param {import("@babel/core").NodePath<import("@babel/core").types.TaggedTemplateExpression>} path
-       * @param {babel.PluginPass & {localVarNames: YakLocalIdentifierNames, isImportedInCurrentFile: boolean, classNameCount: number, varIndex: number}} state
        */
       TaggedTemplateExpression(path, state) {
         if (!this.isImportedInCurrentFile) {
@@ -300,10 +303,9 @@ module.exports = function (babel, options) {
          * e.g. css`` -> css(...)
          * newArguments is a set of all arguments that will be passed to the function
          */
-        const newArguments = new Set();
+        const newArguments = new Set<babelTypes.Expression>();
         const quasis = path.node.quasi.quasis;
-        /** @type {string[]} */
-        let currentNestingScopes = [];
+        let currentNestingScopes: string[] = [];
         const quasiTypes = quasis.map((quasi) => {
           const classification = quasiClassifier(
             quasi.value.raw,
@@ -314,8 +316,8 @@ module.exports = function (babel, options) {
         });
 
         const expressions = path.node.quasi.expressions.filter(
-          /** @type {(expression: babel.types.Expression | babel.types.TSType) => expression is babel.types.Expression} */
-          (expression) => t.isExpression(expression)
+          (expression): expression is babelTypes.Expression =>
+            t.isExpression(expression)
         );
 
         let cssVariablesInlineStyle;
@@ -397,7 +399,7 @@ module.exports = function (babel, options) {
             cssVariablesInlineStyle.properties.push(
               t.objectProperty(
                 t.stringLiteral(cssVariableName),
-                /** @type {babel.types.Expression} */ (transformedExpression)
+                transformedExpression
               )
             );
           }
@@ -455,18 +457,19 @@ module.exports = function (babel, options) {
       },
     },
   };
-};
+}
 
-class InvalidPositionError extends Error {
+export class InvalidPositionError extends Error {
   /**
    * Add the expression code that caused the error to the message
    * for better debugging
-   * @param {string} message
-   * @param {import("@babel/types").Expression} expression
-   * @param {import("@babel/core").BabelFile} file
-   * @param {string} [recommendedFix]
    */
-  constructor(message, expression, file, recommendedFix) {
+  constructor(
+    message: string,
+    expression: babelTypes.Expression,
+    file: BabelFile,
+    recommendedFix?: string
+  ) {
     let errorText = message;
     const line = expression.loc?.start.line ?? -1;
     if (line !== -1) {
@@ -484,5 +487,3 @@ class InvalidPositionError extends Error {
     super(errorText);
   }
 }
-
-module.exports.InvalidPositionError = InvalidPositionError;

package/loaders/{cssloader.cjs → cssloader.ts}

@@ -1,29 +1,27 @@
-/// @ts-check
-const getYakImports = require("./lib/getYakImports.cjs");
-const babel = require("@babel/core");
-const quasiClassifier = require("./lib/quasiClassifier.cjs");
-const localIdent = require("./lib/localIdent.cjs");
-const replaceQuasiExpressionTokens = require("./lib/replaceQuasiExpressionTokens.cjs");
-const getStyledComponentName = require("./lib/getStyledComponentName.cjs");
-const getCssName = require("./lib/getCssName.cjs");
-const murmurhash2_32_gc = require("./lib/hash.cjs");
-const { relative } = require("path");
-const {
-  getConstantName,
-  getConstantValues,
-} = require("./lib/getConstantValues.cjs");
-
-/**
- * @typedef {{ selector: string, hasParent: boolean, quasiCode: Array<{ insideCssValue: boolean, code: string }>, cssPartExpressions: { [key: number]: CssPartExpression[]} }} CssPartExpression
- * A CssPartExpression is the css code block for each tagged template expression
- */
+import getYakImports from "./lib/getYakImports.js";
+import babel, { NodePath } from "@babel/core";
+import quasiClassifier from "./lib/quasiClassifier.js";
+import localIdent from "./lib/localIdent.js";
+import replaceQuasiExpressionTokens from "./lib/replaceQuasiExpressionTokens.js";
+import getStyledComponentName from "./lib/getStyledComponentName.js";
+import getCssName from "./lib/getCssName.js";
+import murmurhash2_32_gc from "./lib/hash.js";
+import { relative } from "path";
+import { getConstantName, getConstantValues } from "./lib/getConstantValues.js";
+import { Identifier, TaggedTemplateExpression } from "@babel/types";
+
+// A CssPartExpression is the css code block for each tagged template expression
+type CssPartExpression = {
+  selector: string;
+  hasParent: boolean;
+  quasiCode: Array<{ insideCssValue: boolean; code: string }>;
+  cssPartExpressions: { [key: number]: CssPartExpression[] };
+};
 
-/**
- * @param {string} source
- * @this {any}
- * @returns {Promise<string>}
- */
-module.exports = async function cssLoader(source) {
+export default async function cssLoader(
+  this: any,
+  source: string
+): Promise<string> {
   const { rootContext, resourcePath } = this;
 
   /** .yak files are constant definition files */
@@ -34,8 +32,7 @@ module.exports = async function cssLoader(source) {
   // However .yak files inside .yak files are not be compiled
   // to avoid performance overhead
   const importedYakConstants = isYakFile ? [] : getYakImports(source);
-  /** @type {Record<string, unknown>} */
-  const replaces = {};
+  const replaces: Record<string, unknown> = {};
   await Promise.all(
     importedYakConstants.map(async ({ imports, from }) => {
       const constantValues = await this.importModule(from, {
@@ -65,8 +62,12 @@ module.exports = async function cssLoader(source) {
 
   const { types: t } = babel;
 
-  /** @type {{css?: string, styled?: string, attrs?: "attrs", keyframes?: string}} */
-  const localVarNames = {
+  const localVarNames: {
+    css: string | undefined;
+    styled: string | undefined;
+    attrs: string;
+    keyframes: string | undefined;
+  } = {
     css: undefined,
     styled: undefined,
     attrs: "attrs",
@@ -78,28 +79,23 @@ module.exports = async function cssLoader(source) {
    *
    * Babel iterates over the full TaggedLiteralExpression before it iterates over their children
    * To keep the order as written in the original code the code fragments are stored in an ordered map
-   * @type {Map<import("@babel/core").NodePath<import("@babel/types").TaggedTemplateExpression>, CssPartExpression>}
    */
-  const cssParts = new Map();
+  const cssParts = new Map<
+    NodePath<TaggedTemplateExpression>,
+    CssPartExpression
+  >();
 
   let index = 0;
   let varIndex = 0;
-  /** @type {string | null} */
-  let hashedFile = null;
-
-  /** @type {Map<string, string>} */
-  const variableNameToStyledClassName = new Map();
+  let hashedFile: string | null = null;
 
-  /** @type {Map<string, number | string | null>} */
-  let topLevelConstBindings = new Map();
+  const variableNameToStyledClassName = new Map<string, string>();
+  let topLevelConstBindings = new Map<string, number | string | null>();
 
   babel.traverse(ast, {
     Program(path) {
       topLevelConstBindings = getConstantValues(path, t);
     },
-    /**
-     * @param {import("@babel/core").NodePath<import("@babel/types").ImportDeclaration>} path
-     */
     ImportDeclaration(path) {
       const node = path.node;
       if (node.source.value !== "next-yak") {
@@ -115,9 +111,8 @@ module.exports = async function cssLoader(source) {
           return;
         }
 
-        const importSpecifier = /** @type {babel.types.Identifier} */ (
-          specifier.imported
-        );
+        const importSpecifier =
+          /** @type {babel.types.Identifier} */ specifier.imported;
         const localSpecifier = specifier.local || importSpecifier;
         if (
           importSpecifier.name === "styled" ||
@@ -137,36 +132,31 @@ module.exports = async function cssLoader(source) {
 
       const isCssLiteral =
         t.isIdentifier(tag) &&
-        /** @type {babel.types.Identifier} */ (tag).name === localVarNames.css;
+        /** @type {babel.types.Identifier} */ tag.name === localVarNames.css;
 
       const isKeyFrameLiteral =
         t.isIdentifier(tag) &&
-        /** @type {babel.types.Identifier} */ (tag).name ===
+        /** @type {babel.types.Identifier} */ tag.name ===
           localVarNames.keyframes;
 
       const isStyledLiteral =
         t.isMemberExpression(tag) &&
         t.isIdentifier(
-          /** @type {babel.types.MemberExpression} */ (tag).object
+          /** @type {babel.types.MemberExpression} */ tag.object
         ) &&
-        /** @type {babel.types.Identifier} */ (
-          /** @type {babel.types.MemberExpression} */ (tag).object
-        ).name === localVarNames.styled;
+        /** @type {babel.types.Identifier} */ /** @type {babel.types.MemberExpression} */ tag
+          .object.name === localVarNames.styled;
 
       const isStyledCall =
         t.isCallExpression(tag) &&
-        t.isIdentifier(
-          /** @type {babel.types.CallExpression} */ (tag).callee
-        ) &&
-        /** @type {babel.types.Identifier} */ (
-          /** @type {babel.types.CallExpression} */ (tag).callee
-        ).name === localVarNames.styled;
+        t.isIdentifier(/** @type {babel.types.CallExpression} */ tag.callee) &&
+        /** @type {babel.types.Identifier} */ /** @type {babel.types.CallExpression} */ tag
+          .callee.name === localVarNames.styled;
 
       const isAttrsCall =
         t.isCallExpression(tag) &&
         t.isMemberExpression(tag.callee) &&
-        /** @type {babel.types.Identifier} */ (tag.callee.property).name ===
-          "attrs";
+        (tag.callee.property as Identifier).name === "attrs";
 
       if (
         !isCssLiteral &&
@@ -213,8 +203,7 @@ module.exports = async function cssLoader(source) {
         isKeyFrameLiteral ? "keyframes" : "selector"
       );
 
-      /** @type {CssPartExpression} */
-      const currentCssParts = {
+      const currentCssParts: CssPartExpression = {
         quasiCode: [],
         cssPartExpressions: [],
         selector: !parentLocation
@@ -223,7 +212,10 @@ module.exports = async function cssLoader(source) {
         hasParent: Boolean(parentLocation),
       };
       const parentCssParts =
-        parentLocation && cssParts.get(parentLocation.parent);
+        parentLocation &&
+        cssParts.get(
+          parentLocation.parent as NodePath<TaggedTemplateExpression>
+        );
       cssParts.set(path, currentCssParts);
       if (parentCssParts) {
         parentCssParts.cssPartExpressions[parentLocation.currentIndex] ||= [];
@@ -313,31 +305,25 @@ module.exports = async function cssLoader(source) {
   );
 
   return mergeCssPartExpression(rootCssParts).trim();
-};
+}
 
 /**
  * In jscode slashes are escaped however in css code they are not
  * e.g. in javascript `:before { content: "\\f0c9"; }` would be `:before { content: "\f0c9"; }` in css
  * slashes are still possible with `:before { content: "\\\\"; }`
- * @param {string} code
  */
-const unEscapeCssCode = (code) => code.replace(/\\\\/gi, "\\");
+const unEscapeCssCode = (code: string) => code.replace(/\\\\/gi, "\\");
 
 /**
  * Searches the closest parent TaggedTemplateExpression using a name from localNames
  * Returns the location inside this parent
- *
- * @param {import("@babel/core").NodePath<import("@babel/types").TaggedTemplateExpression>} path
- * @param {{ css?: string , styled?: string }} localNames
  */
 const getClosestTemplateLiteralExpressionParentPath = (
-  path,
-  { css, styled }
+  path: NodePath<TaggedTemplateExpression>,
+  { css, styled }: { css?: string; styled?: string }
 ) => {
-  /** @type {import("@babel/core").NodePath} */
-  let grandChild = path;
-  /** @type {import("@babel/core").NodePath} */
-  let child = path;
+  let grandChild: NodePath = path;
+  let child: NodePath = path;
   let parent = path.parentPath;
   const t = babel.types;
   while (parent) {
@@ -345,28 +331,23 @@ const getClosestTemplateLiteralExpressionParentPath = (
       const tag = parent.node.tag;
       const isCssLiteral =
         t.isIdentifier(tag) &&
-        /** @type {babel.types.Identifier} */ (tag).name === css;
+        /** @type {babel.types.Identifier} */ tag.name === css;
       const isStyledLiteral =
         t.isMemberExpression(tag) &&
         t.isIdentifier(
-          /** @type {babel.types.MemberExpression} */ (tag).object
+          /** @type {babel.types.MemberExpression} */ tag.object
         ) &&
-        /** @type {babel.types.Identifier} */ (
-          /** @type {babel.types.MemberExpression} */ (tag).object
-        ).name === styled;
+        /** @type {babel.types.Identifier} */ /** @type {babel.types.MemberExpression} */ tag
+          .object.name === styled;
       const isStyledCall =
         t.isCallExpression(tag) &&
-        t.isIdentifier(
-          /** @type {babel.types.CallExpression} */ (tag).callee
-        ) &&
-        /** @type {babel.types.Identifier} */ (
-          /** @type {babel.types.CallExpression} */ (tag).callee
-        ).name === styled;
+        t.isIdentifier(/** @type {babel.types.CallExpression} */ tag.callee) &&
+        /** @type {babel.types.Identifier} */ /** @type {babel.types.CallExpression} */ tag
+          .callee.name === styled;
       const isAttrsCall =
         t.isCallExpression(tag) &&
         t.isMemberExpression(tag.callee) &&
-        /** @type {babel.types.Identifier} */ (tag.callee.property).name ===
-          "attrs";
+        (tag.callee.property as Identifier).name === "attrs";
       if (isCssLiteral || isStyledLiteral || isStyledCall || isAttrsCall) {
         if (
           !t.isTemplateLiteral(child.node) ||
@@ -377,9 +358,7 @@ const getClosestTemplateLiteralExpressionParentPath = (
         const currentIndex = child.node.expressions.indexOf(grandChild.node);
         return {
           parent:
-            /** @type {import("@babel/core").NodePath<import("@babel/types").TaggedTemplateExpression>} */ (
-              parent
-            ),
+            /** @type {import("@babel/core").NodePath<import("@babel/types").TaggedTemplateExpression>} */ parent,
           currentIndex,
         };
       }
@@ -396,11 +375,11 @@ const getClosestTemplateLiteralExpressionParentPath = (
 
 /**
  * depthFirst traversal of the css parts
- * @param {CssPartExpression[]} cssPartExpression
- * @param {number} [level]
- * @returns
  */
-const mergeCssPartExpression = (cssPartExpression, level = 0) => {
+const mergeCssPartExpression = (
+  cssPartExpression: CssPartExpression[],
+  level = 0
+) => {
   let css = "";
   for (const { quasiCode, cssPartExpressions, selector } of cssPartExpression) {
     let cssPart = "";
@@ -426,7 +405,4 @@ const mergeCssPartExpression = (cssPartExpression, level = 0) => {
   return css;
 };
 
-/**
- * @param {string} str
- */
-const trimNewLines = (str) => str.replace(/^\s*\n+|\s+$/g, "");
+const trimNewLines = (str: string) => str.replace(/^\s*\n+|\s+$/g, "");

package/loaders/lib/{appendCssUnitToExpressionValue.cjs → appendCssUnitToExpressionValue.ts}

@@ -1,16 +1,13 @@
+import type { types as babelTypes } from "@babel/core";
+
 /**
  * Extracts the css unit from a css string and checks if it is a valid CSS unit
- *
- * @param {string} cssUnit
- * @param {babel.types.Expression} expression
- * @param {Set<string>} runtimeInternalHelpers
- * @param {import("@babel/types")} t
  */
 const appendCssUnitToExpressionValue = (
-  cssUnit,
-  expression,
-  runtimeInternalHelpers,
-  t
+  cssUnit: string,
+  expression: babelTypes.Expression,
+  runtimeInternalHelpers: Set<string>,
+  t: typeof babelTypes
 ) => {
   if (expression.type === "ArrowFunctionExpression") {
     if (expression.body.type !== "BlockStatement") {
@@ -48,4 +45,4 @@ const appendCssUnitToExpressionValue = (
   return callExpression;
 };
 
-module.exports = appendCssUnitToExpressionValue;
+export default appendCssUnitToExpressionValue;

package/loaders/lib/{getConstantValues.cjs → getConstantValues.ts}

@@ -1,13 +1,12 @@
-// @ts-check
-
-/** @typedef {import("@babel/types")} babel */
+import type { NodePath, types as babelTypes } from "@babel/core";
 
 /**
  * Returns the name of the expression
- * @param {babel.types.Expression} expression
- * @param {import("@babel/types")} t
  */
-const getConstantName = (expression, t) => {
+export const getConstantName = (
+  expression: babelTypes.Expression,
+  t: typeof babelTypes
+) => {
   // e.g. styled.div`color: ${x};`
   if (t.isIdentifier(expression)) {
     // e.g. x
@@ -38,13 +37,12 @@ const getConstantName = (expression, t) => {
 
 /**
  * Extracts all top level constant values from a program path
- *
- * @param {babel.NodePath<babel.types.Program>} path
- * @param {import("@babel/types")} t
  */
-function getConstantValues(path, t) {
-  /** @type {Map<string, string | number | null>} */
-  const topLevelConstBindings = new Map();
+export function getConstantValues(
+  path: NodePath<babelTypes.Program>,
+  t: typeof babelTypes
+) {
+  const topLevelConstBindings = new Map<string, string | number | null>();
   const bindings = Object.entries(path.scope.bindings);
   for (const [name, binding] of bindings) {
     if (binding.kind === "module") {
@@ -76,8 +74,3 @@ function getConstantValues(path, t) {
   }
   return topLevelConstBindings;
 }
-
-module.exports = {
-  getConstantValues,
-  getConstantName,
-};