feat: Create utils package to share logic across runtime and bundler …

…packages

packages/eslint-plugin-material-ui/package.json

@@ -9,8 +9,5 @@
     "@typescript-eslint/experimental-utils": "^5.62.0",
     "@typescript-eslint/parser": "^7.5.0"
   },
-  "scripts": {
-    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js' --timeout 3000"
-  },
   "license": "MIT"
 }

packages/pigment-css-theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pigment-css/theme",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "main": "build/index.js",
   "module": "build/index.mjs",
   "types": "build/index.d.ts",

packages/pigment-css-utils/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Material-UI SAS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/pigment-css-utils/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@pigment-css/utils",
+  "version": "0.0.28",
+  "main": "build/index.js",
+  "module": "build/index.mjs",
+  "types": "build/index.d.ts",
+  "author": "MUI Team",
+  "description": "Utilities to be used internally across Pigment CSS libraries.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mui/pigment-css.git",
+    "directory": "packages/pigment-css-utils"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui/pigment-css/issues"
+  },
+  "homepage": "https://github.com/mui/pigment-css/tree/master/README.md",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui-org"
+  },
+  "scripts": {
+    "clean": "rimraf build types processors utils",
+    "watch": "tsup --watch --clean false",
+    "copy-license": "node ../../scripts/pigment-license.mjs",
+    "build": "tsup",
+    "test": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/pigment-css-utils/**/*.test.{js,ts,tsx}'",
+    "test:update": "cd ../../ && cross-env NODE_ENV=test UPDATE_FIXTURES=true mocha 'packages/pigment-css-utils/**/*.test.{js,ts,tsx}'",
+    "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-utils mocha 'packages/pigment-css-utils/**/*.test.{js,ts,tsx}'",
+    "typescript": "tsc --noEmit -p ."
+  },
+  "dependencies": {
+    "@babel/types": "^7.26.0",
+    "@babel/parser": "^7.26.2",
+    "@emotion/unitless": "0.10.0",
+    "@emotion/serialize": "^1.3.2",
+    "@pigment-css/theme": "workspace:*",
+    "@wyw-in-js/processor-utils": "^0.5.5",
+    "@wyw-in-js/shared": "^0.5.5",
+    "@wyw-in-js/transform": "^0.5.5",
+    "cssesc": "^3.0.0",
+    "lodash": "4.17.21"
+  },
+  "devDependencies": {
+    "@types/cssesc": "3.0.2",
+    "chai": "^4.4.1"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "build",
+    "package.json",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": {
+        "types": "./build/index.d.mts",
+        "default": "./build/index.mjs"
+      },
+      "require": "./build/index.js",
+      "default": "./build/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "nx": {
+    "targets": {
+      "test": {
+        "cache": false,
+        "dependsOn": [
+          "build"
+        ]
+      },
+      "test:update": {
+        "cache": false,
+        "dependsOn": [
+          "build"
+        ]
+      },
+      "test:ci": {
+        "cache": false,
+        "dependsOn": [
+          "build"
+        ]
+      },
+      "build": {
+        "outputs": [
+          "{projectRoot}/build"
+        ]
+      }
+    }
+  }
+}

packages/pigment-css-utils/src/base-processor.ts

@@ -0,0 +1,14 @@
+import { BaseProcessor as WywBaseProcessor } from '@wyw-in-js/processor-utils';
+
+/**
+ * This is going to be expanded when the react package comes into picture.
+ * Right now, it only has the bare mimimum.
+ */
+export default abstract class BaseProcessor extends WywBaseProcessor {
+  abstract getBaseClass(): string | undefined;
+
+  get asSelector(): string {
+    const baseClass = this.getBaseClass();
+    return `.${baseClass ?? this.className}`;
+  }
+}

packages/pigment-css-utils/src/config.ts

@@ -0,0 +1,46 @@
+import { Theme } from '@pigment-css/theme';
+import { IOptions } from '@wyw-in-js/processor-utils';
+
+export type GenerateClassData<M, E> = {
+  /**
+   * Original classname that would be used if not customized.
+   */
+  slug: string;
+  /**
+   * The metadata argument that you passed to the function call, usually as the 2nd argument.
+   *
+   * ```js
+   * const className = css(cssObject, metadata);
+   */
+  metadata: M;
+  /**
+   * The variable name that the function call's return value is assigned to.
+   */
+  displayName: string;
+  /**
+   * The name of the function that is being called, ie, `css`, `styled`, etc
+   */
+  functionName: string;
+  /**
+   * All the extra data specific to the above `functionName` call.
+   */
+  extraData: E;
+};
+
+/**
+ * Feature flags that user can choose to enable/disable to control the output
+ */
+type PigmentFeature = {
+  useLayer?: boolean;
+};
+
+/**
+ * This is the base Pigment Config that'll be used by bundler package with some extra bundler specific options.
+ */
+export type PigmentConfig = IOptions & {
+  features?: PigmentFeature;
+  generateClassName<M, E>(data: GenerateClassData<M, E>): string;
+  themeArgs?: {
+    theme: Theme;
+  };
+};

packages/pigment-css-utils/src/index.ts

@@ -0,0 +1,3 @@
+export { default as BaseProcessor } from './base-processor';
+export * from './config';
+export * from './utils';

packages/pigment-css-utils/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './processStyle';
+export * from './valueToLiteral';
+export * from './parseExpression';

packages/pigment-css-utils/src/utils/parseExpression.ts

@@ -0,0 +1,16 @@
+import { parseExpression, ParserOptions } from '@babel/parser';
+import { ArrayExpression } from '@babel/types';
+
+/**
+ * Parses array expression string to AST for locating sourcemap points.
+ */
+export function parseArray(
+  expressionStr: string,
+  opts: Pick<ParserOptions, 'startColumn' | 'startIndex' | 'startLine'>,
+): ArrayExpression | null {
+  const expr = parseExpression(expressionStr, opts);
+  if (expr.type === 'ArrayExpression') {
+    return expr;
+  }
+  return null;
+}