next-yak 0.0.1

package/loaders/lib/replaceQuasiExpressionTokens.cjs

@@ -0,0 +1,56 @@
+/**
+ * Replace tokens with predefined values e.g.
+ *
+ * ```js
+ *  css`
+ *    color: red;
+ *    ${query.xs} {
+ *      color: blue;
+ *   }
+ * `
+ *
+ * ```
+ * becomes
+ * ```js
+ * css`
+ *  color: red;
+ *  @media (min-width: 0px) {
+ *    color: blue;
+ * }
+ * `
+ * ```
+ *
+ * @param {import("@babel/types").TemplateLiteral} quasi
+ * @param {Record<string, Record<string, string>>} replaces
+ * @param {import("@babel/types")} t
+ */
+module.exports = function replaceTokensInQuasiExpressions(quasi, replaces, t) {
+  for (let i = 0; i < quasi.expressions.length; i++) {
+    const expression = quasi.expressions[i];
+    if (!t.isMemberExpression(expression)) {
+      continue;
+    }
+    const object = expression.object;
+    if (!t.isIdentifier(object)) {
+      continue;
+    }
+    const property = expression.property;
+    if (!t.isIdentifier(property)) {
+      continue;
+    }
+    const objectName = object.name;
+    const propertyName = property.name;
+    const replacement = replaces[objectName]?.[propertyName];
+    if (!replacement) {
+      continue;
+    }
+    // delete expression and append replacement to quasi value
+    quasi.expressions.splice(i, 1);
+    quasi.quasis[i].value.raw += replacement + quasi.quasis[i + 1].value.raw;
+    quasi.quasis[i].value.cooked +=
+      replacement + quasi.quasis[i + 1].value.cooked;
+    // delete next quasi
+    quasi.quasis.splice(i + 1, 1);
+    i--;
+  }
+};

package/loaders/lib/stripCssComments.cjs

@@ -0,0 +1,49 @@
+// from https://github.com/sindresorhus/strip-css-comments/tree/main
+/**
+ * 
+ * @param {string} cssString 
+ */
+module.exports = function stripCssComments(cssString) {
+	let isInsideString = false;
+	let currentCharacter = '';
+	let comment = '';
+	let returnValue = '';
+
+	for (let index = 0; index < cssString.length; index++) {
+		currentCharacter = cssString[index];
+
+		if (cssString[index - 1] !== '\\' && (currentCharacter === '"' || currentCharacter === '\'')) {
+			if (isInsideString === currentCharacter) {
+				isInsideString = false;
+			} else if (!isInsideString) {
+				isInsideString = currentCharacter;
+			}
+		}
+
+		// Find beginning of `/*` type comment
+		if (!isInsideString && currentCharacter === '/' && cssString[index + 1] === '*') {
+			let index2 = index + 2;
+
+			// Iterate over comment
+			for (; index2 < cssString.length; index2++) {
+				// Find end of comment
+				if (cssString[index2] === '*' && cssString[index2 + 1] === '/') {
+                    if (cssString[index2 + 2] === '\n') {
+                        index2++;
+                    } else if (cssString[index2 + 2] + cssString[index2 + 3] === '\r\n') {
+                        index2 += 2;
+                    }
+					comment = '';
+					break;
+				}
+				// Store comment text
+				comment += cssString[index2];
+			}
+			// Resume iteration over CSS string from the end of the comment
+			index = index2 + 1;
+			continue;
+		}
+		returnValue += currentCharacter;
+	}
+	return returnValue;
+}

package/loaders/tsloader.cjs

@@ -0,0 +1,240 @@
+/// @ts-check
+const path = require("path");
+const babel = require("@babel/core");
+const quasiClassifier = require("./lib/quasiClassifier.cjs");
+const replaceQuasiExpressionTokens = require("./lib/replaceQuasiExpressionTokens.cjs");
+const loadConfigOnce = require("./lib/loadConfigOnce.cjs");
+const murmurhash2_32_gc = require("./lib/hash.cjs");
+const { relative, resolve } = require("path");
+
+/**
+ * Loader for typescript files that use yacijs, it replaces the css template literal with a call to the 'styled' function
+ * @param {string} source
+ * @this {any}
+ * @returns {Promise<string>}
+ */
+module.exports = async function tsloader(source) {
+  // ignore files if they don't use yacijs
+  if (!source.includes("next-yak")) {
+    return source;
+  }
+
+  // Config for replacing tokens in css template literals
+  // can be based on a typescript file
+  const options = this.getOptions();
+  const config = options.configPath ? await loadConfigOnce(
+    async () => await this.importModule(resolve(this.rootContext, options.configPath))
+  ) : {};
+  const replaces = config.replaces || {};
+
+  /** @type {string | null} */
+  let hashedFile = null;
+  const { rootContext, resourcePath } = this;
+
+  const { types: t } = babel;
+  const fileName = path.basename(this.resourcePath).replace(/\.tsx?/, "");
+  // parse source with babel
+  const result = babel.transformSync(source, {
+    filename: this.resourcePath,
+    // Only for parsing - will be removed once moved to a swc or babel plugin
+    plugins: [
+      [
+        "@babel/plugin-syntax-typescript",
+        { isTSX: this.resourcePath.endsWith(".tsx") },
+      ],
+      /**
+       * @returns {import("@babel/core").PluginObj<import("@babel/core").PluginPass & {localVarNames: {css?: string, styled?: string}, isImportedInCurrentFile: boolean, classNameCount: number, varIndex: number}>}
+       */
+      function () {
+        return {
+          name: "next-yak",
+          pre() {
+            // Initialize state variables
+            this.localVarNames = {
+              css: undefined,
+              styled: undefined,
+            };
+            this.isImportedInCurrentFile = false;
+            this.classNameCount = 0;
+            this.varIndex = 0;
+          },
+          visitor: {
+            /**
+             * @param {import("@babel/traverse").NodePath<import("@babel/types").ImportDeclaration>} path
+             */
+            ImportDeclaration(path) {
+              const node = path.node;
+              if (
+                node.source.value !== "next-yak"
+              ) {
+                return;
+              }
+
+              // Import 'yacijs' styles and assign to '__styleYak'
+              // use webpacks !=! syntax to pretend that the typescript file is actually a css-module
+              path.insertAfter(
+                t.importDeclaration(
+                  [t.importDefaultSpecifier(t.identifier("__styleYak"))],
+                  t.stringLiteral(
+                    `./${fileName}.yak.module.css!=!./${fileName}?./${fileName}.yak.module.css`
+                  )
+                )
+              );
+
+              // Process import specifiers
+              node.specifiers.forEach((specifier) => {
+                if (
+                  !("imported" in specifier) ||
+                  !specifier.imported ||
+                  !t.isIdentifier(specifier.imported)
+                ) {
+                  return;
+                }
+
+                const importSpecifier = /** @type {babel.types.Identifier} */ (
+                  specifier.imported
+                );
+                const localSpecifier = specifier.local || importSpecifier;
+                if (
+                  importSpecifier.name === "styled" ||
+                  importSpecifier.name === "css"
+                ) {
+                  this.localVarNames[importSpecifier.name] =
+                    localSpecifier.name;
+                  this.isImportedInCurrentFile = true;
+                }
+              });
+            },
+            TaggedTemplateExpression(path) {
+              if (!this.isImportedInCurrentFile) {
+                return;
+              }
+              // Check if the tag name matches the imported 'css' or 'styled' variable
+              const tag = path.node.tag;
+
+              const isCssLiteral =
+                t.isIdentifier(tag) &&
+                /** @type {babel.types.Identifier} */ (tag).name ===
+                  this.localVarNames.css;
+              const isStyledLiteral =
+                t.isMemberExpression(tag) &&
+                t.isIdentifier(
+                  /** @type {babel.types.MemberExpression} */ (tag).object
+                ) &&
+                /** @type {babel.types.Identifier} */ (
+                  /** @type {babel.types.MemberExpression} */ (tag).object
+                ).name === this.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 === this.localVarNames.styled;
+
+              if (!isCssLiteral && !isStyledLiteral && !isStyledCall) {
+                return;
+              }
+
+              replaceQuasiExpressionTokens(path.node.quasi, replaces, t);
+
+              // Keep the same selector for all quasis belonging to the same css block
+              const classNameExpression = t.memberExpression(
+                t.identifier("__styleYak"),
+                t.identifier(`style${this.classNameCount++}`)
+              );
+
+              // Replace the tagged template expression with a call to the 'styled' function
+              const newArguments = new Set();
+              const quasis = path.node.quasi.quasis;
+              const quasiTypes = quasis.map((quasi) =>
+                quasiClassifier(quasi.value.raw)
+              );
+              const expressions = path.node.quasi.expressions;
+
+              let cssVariablesInlineStyle;
+
+              for (let i = 0; i < quasis.length; i++) {
+                if (quasiTypes[i].empty) {
+                  const expression = expressions[i];
+                  if (expression) {
+                    newArguments.add(expression);
+                  }
+                  continue;
+                }
+
+                // create css class name reference as argument
+                // e.g. `font-size: 2rem; display: flex;` -> `__styleYak.style1`
+
+                // AutoGenerate a unique className
+                newArguments.add(classNameExpression);
+
+                let isMerging = false;
+                // loop over all quasis belonging to the same css block
+                while (i < quasis.length - 1) {
+                  const type = quasiTypes[i];
+                  // expressions after a partial css are converted into css variables
+                  if (
+                    type.partialStart ||
+                    type.partialEnd ||
+                    (isMerging && type.empty)
+                  ) {
+                    isMerging = true;
+                    // expression: `x`
+                    // { style: { --v0: x}}
+                    const expression = expressions[i];
+                    i++;
+                    if (!expression) {
+                      continue;
+                    }
+                    if (!cssVariablesInlineStyle) {
+                      cssVariablesInlineStyle = t.objectExpression([]);
+                    }
+
+                    if (!hashedFile) {
+                      const relativePath = relative(rootContext, resourcePath);
+                      hashedFile = murmurhash2_32_gc(relativePath);
+                    }
+
+                    cssVariablesInlineStyle.properties.push(
+                      t.objectProperty(
+                        t.stringLiteral(`--🦬${hashedFile}${this.varIndex++}`),
+                        expression
+                      )
+                    );
+                  } else if (type.empty) {
+                    // empty quasis can be ignored
+                    // e.g. `transition: color ${duration} ${easing};`
+                  } else {
+                    if (expressions[i]) {
+                      newArguments.add(expressions[i]);
+                    }
+                    break;
+                  }
+                }
+              }
+
+              if (cssVariablesInlineStyle) {
+                newArguments.add(
+                  t.objectExpression([
+                    t.objectProperty(
+                      t.stringLiteral(`style`),
+                      cssVariablesInlineStyle
+                    ),
+                  ])
+                );
+              }
+
+              const styledCall = t.callExpression(tag, [...newArguments]);
+              path.replaceWith(styledCall);
+            },
+          },
+        };
+      },
+    ],
+  });
+
+  const code = (result && result.code);
+  return code == null ? source : code;
+};

package/loaders/withYak.cjs

@@ -0,0 +1,52 @@
+// @ts-check
+/// <reference types="node" />
+/** @typedef {import("./withYak.d.ts").YakConfigOptions} YakConfigOptions */
+
+/**
+ Add a Yak to a Next.js app
+ @param {YakConfigOptions} yakOptions
+ @param {any} nextConfig
+*/
+const addYak = (yakOptions, nextConfig) => {
+  const previousConfig = nextConfig.webpack;
+  nextConfig.webpack = (webpackConfig, options) => {
+    if (previousConfig) {
+      webpackConfig = previousConfig(webpackConfig, options);
+    }
+    webpackConfig.module.rules.push({
+      test: /\.tsx?$/,
+      loader: require.resolve("./tsloader.cjs"),
+      options: yakOptions,
+    });
+    webpackConfig.module.rules.push({
+      test: /\.yak\.module\.css$/,
+      loader: require.resolve("./cssloader.cjs"),
+      options: yakOptions,
+    });
+
+    return webpackConfig;
+  };
+  return nextConfig;
+};
+
+
+// Wrapper to allow sync, async, and function configuration of Next.js
+const withYak = (yakOptions, nextConfig) => {
+  if (nextConfig === undefined) {
+    return withYak({}, yakOptions);
+  }
+  if (typeof nextConfig === "function") {
+    return (...args) => {
+      const config = nextConfig(...args);
+      if (config.then) {
+        return config.then((config) => addYak(yakOptions, config));
+      }
+      return addYak(yakOptions, config);
+    };
+  }
+  return addYak(yakOptions, nextConfig);
+};
+
+module.exports = {
+  withYak
+};

package/loaders/withYak.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Add Yak to your Next.js app
+ * 
+ * @usage
+ *
+ * ```ts
+ * // next.config.js
+ * const { withYak } = require("next-yak/withYak");
+ * const nextConfig = {
+ *   // your next config here
+ * };
+ * module.exports = withYak(nextConfig);
+ * ```
+ * 
+ * With a custom yakConfig
+ *
+ * ```ts
+ * // next.config.js
+ * const { withYak } = require("next-yak/withYak");
+ * const nextConfig = {
+ *   // your next config here
+ * };
+ * const yakConfig = {
+ *   // your yak config
+ * };
+ * module.exports = withYak(yakConfig, nextConfig);
+ * ```
+ */
+export const withYak: {
+  <T extends Record<string, any>>(yakOptions: YakConfigOptions, nextConfig: T): T;
+  <T extends () => Record<string, any>> (yakOptions: YakConfigOptions, nextConfig: T): T;
+  <T extends () => Promise<Record<string, any>>> (yakOptions: YakConfigOptions, nextConfig: T): T;
+  // no yakConfig
+  <T extends Record<string, any>>(nextConfig: T): T;
+  <T extends () => Record<string, any>> (nextConfig: T): T;
+  <T extends () => Promise<Record<string, any>>> (nextConfig: T): T;
+}
+
+export type YakConfigOptions = { configPath: string }

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "next-yak",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./withYak": "./loaders/withYak.cjs"
+  },
+  "typesVersions": {
+    "*": {
+      "withYak": ["./loaders/withYak.d.ts"],
+      "*": ["./runtime/index.d.ts"]
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "npm run build && npm run test",
+    "build": "tsc -p tsconfig.json --outDir dist/",
+    "test": "vitest run",
+    "test:watch": "vitest --watch -u"
+  },
+  "dependencies": {
+    "postcss-nested": "^6.0.1",
+    "@babel/core": "^7.16.12",
+    "@babel/plugin-syntax-typescript": "^7.16.7"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "@babel/traverse": "^7.16.12",
+    "@types/node": "20.4.5",
+    "@types/react": "18.2.16",
+    "@types/react-dom": "18.2.7",
+    "@types/jest": "29.5.5",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "vitest": "0.34.5",
+    "typescript": "5.1.6"
+  },
+  "files": [
+    "dist",
+    "loaders",
+    "runtime"
+  ]
+}

package/runtime/cssLiteral.tsx

@@ -0,0 +1,100 @@
+type ComponentStyles<TProps extends Record<string, unknown>> = (
+  props: TProps
+) => {
+  className: string;
+  style?: {
+    [key: string]: string;
+  };
+};
+
+export type CSSInterpolation<TProps extends Record<string, unknown>> =
+  | string
+  | number
+  | undefined
+  | null
+  | false
+  | ComponentStyles<TProps>
+  | ((props: TProps) => CSSInterpolation<TProps>);
+
+type CSSStyles<TProps extends Record<string, unknown>> = {
+  style: { [key: string]: string | ((props: TProps) => string) };
+};
+
+type CSSFunction = <TProps extends Record<string, unknown>>(
+  styles: TemplateStringsArray,
+  ...values: CSSInterpolation<TProps>[]
+) => ComponentStyles<TProps>;
+
+const internalImplementation = (
+  ...args: Array<string | CSSFunction | CSSStyles<any>>
+): ComponentStyles<any> => {
+  type PropsToClassNameFn = (props: unknown) => {
+    className?: string;
+    style?: Record<string, string>;
+  };
+  const classNames: string[] = [];
+  const dynamicCssFunctions: PropsToClassNameFn[] = [];
+  const style: Record<string, string> = {};
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      classNames.push(arg);
+    } else if (typeof arg === "function") {
+      dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);
+    } else if (typeof arg === "object" && "style" in arg) {
+      for (const key in arg.style) {
+        const value = arg.style[key];
+        if (typeof value === "function") {
+          dynamicCssFunctions.push((props: unknown) => ({
+            style: { [key]: value(props) },
+          }));
+        } else {
+          style[key] = value;
+        }
+      }
+    }
+  }
+
+  // Non Dynamic CSS
+  if (dynamicCssFunctions.length === 0) {
+    const className = classNames.join(" ");
+    return () => ({ className, style });
+  }
+
+  // Dynamic CSS with runtime logic
+  const unwrapProps = (
+    props: unknown,
+    fn: PropsToClassNameFn,
+    classNames: string[],
+    style: Record<string, string>
+  ) => {
+    const result = fn(props);
+    if (typeof result === "function") {
+      unwrapProps(props, result, classNames, style);
+    } else if (typeof result === "object") {
+      if ("className" in result && result.className) {
+        classNames.push(result.className);
+      }
+      if ("style" in result && result.style) {
+        for (const key in result.style) {
+          const value = result.style[key];
+          style[key] = value;
+        }
+      }
+    }
+  };
+
+  return (props: unknown) => {
+    const allClassNames: string[] = [...classNames];
+    const allStyles: Record<string, string> = { ...style };
+    for (let i = 0; i < dynamicCssFunctions.length; i++) {
+      unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);
+    }
+    return {
+      className: allClassNames.join(" "),
+      style: allStyles,
+    };
+  };
+};
+
+export const css = internalImplementation as any as CSSFunction;

package/runtime/index.ts

@@ -0,0 +1,2 @@
+export {css} from "./cssLiteral";
+export * from "./styled";

package/runtime/styled.tsx

@@ -0,0 +1,48 @@
+import { FunctionComponent } from "react";
+import { CSSInterpolation, css } from "./cssLiteral";
+import React from "react";
+
+const StyledFactory = function (Component: string | FunctionComponent<any>) {
+  return <TProps extends Record<string, unknown>>(
+    styles: TemplateStringsArray,
+    ...values: CSSInterpolation<TProps>[]
+  ) => {
+    return (props: TProps) => {
+      const runtimeStyles = css(styles, ...values)(props as any);
+      const filteredProps =
+        typeof Component === "string" ? removePrefixedProperties(props) : props;
+      return (
+        <Component
+          {...filteredProps}
+          style={{ ...(props.style || {}), ...runtimeStyles.style }}
+          className={
+            (props.className ? props.className + " " : "") +
+            runtimeStyles.className
+          }
+        />
+      );
+    };
+  };
+};
+
+export const styled = new Proxy(StyledFactory, {
+  get(target, TagName) {
+    if (typeof TagName !== "string") {
+      throw new Error("Only string tags are supported");
+    }
+    return target(TagName);
+  },
+}) as typeof StyledFactory & {
+  [TagName in keyof JSX.IntrinsicElements]: ReturnType<typeof StyledFactory>;
+};
+
+// Remove all entries that start with a $ sign
+function removePrefixedProperties<T extends Record<string, unknown>>(obj: T) {
+  const result = {} as T;
+  for (const key in obj) {
+    if (!key.startsWith("$")) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}