@griffel/postcss-syntax 1.3.9 → 1.3.11

package/CHANGELOG.md

@@ -0,0 +1,263 @@
+# Change Log - @griffel/postcss-syntax
+
+<!-- This log was last generated on Thu, 21 May 2026 08:10:29 GMT and should not be manually modified. -->
+
+<!-- Start content -->
+
+## 1.3.11
+
+Thu, 21 May 2026 08:10:29 GMT
+
+### Patches
+
+- chore(deps): bump postcss from 8.5.12 to 8.5.14 (49699333+dependabot[bot]@users.noreply.github.com)
+- Bump @griffel/babel-preset to v1.8.5
+
+## 1.3.10
+
+Mon, 04 May 2026 12:34:39 GMT
+
+### Patches
+
+- chore(deps): bump @babel/helper-plugin-utils (49699333+dependabot[bot]@users.noreply.github.com)
+- chore(deps): bump @babel/core from 7.28.5 to 7.29.0 (49699333+dependabot[bot]@users.noreply.github.com)
+- Bump @griffel/babel-preset to v1.8.4
+
+## 1.3.9
+
+Thu, 30 Apr 2026 08:33:37 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.8.3
+
+## 1.3.8
+
+Wed, 29 Apr 2026 17:05:15 GMT
+
+### Patches
+
+- chore(deps): bump postcss from 8.4.47 to 8.5.10 (olfedias@microsoft.com)
+
+## 1.3.7
+
+Wed, 29 Apr 2026 08:41:14 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.8.2
+
+## 1.3.6
+
+Fri, 06 Mar 2026 15:56:28 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.8.1
+
+## 1.3.5
+
+Fri, 06 Mar 2026 08:17:06 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.8.0
+
+## 1.3.4
+
+Mon, 03 Nov 2025 15:43:56 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.7.0
+
+## 1.3.3
+
+Mon, 28 Jul 2025 09:12:30 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.6.8
+
+## 1.3.2
+
+Tue, 22 Apr 2025 10:05:48 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.6.7
+
+## 1.3.1
+
+Mon, 10 Feb 2025 08:07:43 GMT
+
+### Patches
+
+- fix(postcss-syntax): Silenced parse result should be stringifiable (lingfangao@hotmail.com)
+
+## 1.3.0
+
+Tue, 04 Feb 2025 14:53:08 GMT
+
+### Minor changes
+
+- feat: postcss-syntax should silence parse errors on demand (lingfangao@hotmail.com)
+
+## 1.2.4
+
+Thu, 23 Jan 2025 12:09:03 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.6.6
+
+## 1.2.3
+
+Wed, 22 Jan 2025 13:44:43 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.6.5
+
+## 1.2.2
+
+Wed, 08 Jan 2025 10:03:24 GMT
+
+### Patches
+
+- fix: Persist filename in postcss syntax (lingfangao@hotmail.com)
+- fix: return location of the makeStyles/makeResetStyles call expression when it is not called with object expression (yuanboxue@microsoft.com)
+- fix: parse styles with new lines (yuanboxue@microsoft.com)
+
+## 1.2.1
+
+Tue, 12 Nov 2024 09:58:11 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.6.4
+
+## 1.2.0
+
+Thu, 31 Oct 2024 16:16:50 GMT
+
+### Minor changes
+
+- feat: Support stylelint rule disabling for style slots (lingfangao@hotmail.com)
+- Bump @griffel/babel-preset to v1.6.3
+
+## 1.1.4
+
+Mon, 29 Jul 2024 07:31:53 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.6.2
+
+## 1.1.3
+
+Wed, 10 Jul 2024 14:36:29 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.6.1
+
+## 1.1.2
+
+Wed, 22 May 2024 08:24:17 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.6.0
+
+## 1.1.1
+
+Fri, 10 May 2024 10:13:20 GMT
+
+### Patches
+
+- fix: use plugins/presets from options.babelOptions to transform source. (yuanboxue@microsoft.com)
+- Bump @griffel/babel-preset to v1.5.9
+
+## 1.1.0
+
+Tue, 07 May 2024 12:51:34 GMT
+
+### Minor changes
+
+- Update `parse` to generate css rules one line per slot(makeStyles)/declaration(makeResetStyles) (yuanboxue@microsoft.com)
+
+## 1.0.8
+
+Thu, 02 May 2024 14:07:14 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.5.8
+
+## 1.0.7
+
+Tue, 19 Mar 2024 11:33:53 GMT
+
+### Patches
+
+- fix: Remove console.log (lingfangao@hotmail.com)
+- Bump @griffel/babel-preset to v1.5.7
+
+## 1.0.6
+
+Fri, 15 Mar 2024 11:30:24 GMT
+
+### Patches
+
+- fix: entrypoint to be correct path (lingfangao@hotmail.com)
+
+## 1.0.5
+
+Fri, 12 Jan 2024 11:08:40 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.5.6
+
+## 1.0.4
+
+Thu, 30 Nov 2023 16:42:15 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.5.5
+
+## 1.0.3
+
+Thu, 09 Nov 2023 14:35:07 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.5.4
+
+## 1.0.2
+
+Mon, 30 Oct 2023 14:08:55 GMT
+
+### Patches
+
+- chore: bump Babel dependencies (olfedias@microsoft.com)
+- Bump @griffel/babel-preset to v1.5.3
+
+## 1.0.1
+
+Tue, 03 Oct 2023 19:09:32 GMT
+
+### Patches
+
+- Bump @griffel/babel-preset to v1.5.2
+
+## 1.0.0
+
+Fri, 15 Sep 2023 08:08:42 GMT
+
+### Major changes
+
+- feat: Initial release (lingfangao@hotmail.com)
+- Bump @griffel/babel-preset to v1.5.1

package/eslint.config.mjs

@@ -0,0 +1,18 @@
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  {
+    ignores: ['**/dist', '**/out-tsc'],
+  },
+  ...baseConfig,
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    // Override or add rules here
+    rules: {},
+  },
+  {
+    files: ['**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/postcss-syntax",
-  "version": "1.3.9",
+  "version": "1.3.11",
   "description": "postcss syntax for Griffel",
   "license": "MIT",
   "repository": {
@@ -8,12 +8,10 @@
     "url": "https://github.com/microsoft/griffel"
   },
   "dependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/helper-plugin-utils": "^7.22.5",
-    "@griffel/babel-preset": "^1.8.3",
-    "postcss": "^8.5.10"
+    "@babel/core": "^7.29.0",
+    "@babel/helper-plugin-utils": "^7.28.6",
+    "@griffel/babel-preset": "^1.8.5",
+    "postcss": "^8.5.14"
   },
-  "main": "./src/index.js",
-  "types": "./src/index.d.ts",
-  "type": "commonjs"
-}
+  "main": "./src/index.js"
+}

package/project.json

@@ -0,0 +1,51 @@
+{
+  "name": "@griffel/postcss-syntax",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/postcss-syntax/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "test": {
+      "executor": "@nx/vitest:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "reportsDirectory": "{projectRoot}/../../coverage/packages/postcss-syntax"
+      }
+    },
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/postcss-syntax",
+        "tsConfig": "packages/postcss-syntax/tsconfig.lib.json",
+        "skipTypeField": true,
+        "packageJson": "packages/postcss-syntax/package.json",
+        "main": "packages/postcss-syntax/src/index.ts",
+        "assets": [
+          "packages/postcss-syntax/README.md",
+          {
+            "glob": "LICENSE.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "type-check": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/babel-preset",
+        "commands": [
+          {
+            "command": "tsc -b --pretty"
+          }
+        ]
+      },
+      "outputs": []
+    }
+  }
+}

package/src/constants.ts

@@ -0,0 +1,5 @@
+export const GRIFFEL_SLOT_RAW = 'griffel-slot';
+export const GRIFFEL_SRC_RAW = 'griffel-src';
+export const GRIFFEL_DECLARATOR_RAW = 'griffel-declarator';
+export const GRIFFEL_SLOT_LOCATION_RAW = 'griffel-slot-location';
+export const GRIFFEL_DECLARATOR_LOCATION_RAW = 'griffel-declarator-location';

package/src/createSyntax.ts

@@ -0,0 +1,19 @@
+import type { BabelPluginOptions } from '@griffel/babel-preset';
+import type * as postcss from 'postcss';
+
+import { parse } from './parse';
+import { stringify } from './stringify';
+
+/**
+ * Creates a custom syntax with configured options for @griffel/babel-preset
+ * @param options - Options to configure @griffel/babel-preset
+ * @returns a postcss custom syntax
+ */
+export function createSyntax(options: BabelPluginOptions): postcss.Syntax {
+  const extendedParse: postcss.Parser = (css, opts) => parse(css, { ...opts, ...options });
+
+  return {
+    stringify,
+    parse: extendedParse,
+  };
+}

package/src/{index.d.ts → index.ts}

@@ -1,12 +1,12 @@
 import { parse } from './parse';
 import { stringify } from './stringify';
+
 export { parse, stringify };
 export { createSyntax } from './createSyntax';
-declare const _default: {
-    parse: (css: string | {
-        toString(): string;
-    }, opts?: import("./parse").ParserOptions) => import("postcss").Root;
-    stringify: import("postcss").Stringifier;
+
+export default {
+  parse,
+  stringify,
 };
-export default _default;
+
 export { GRIFFEL_DECLARATOR_LOCATION_RAW, GRIFFEL_SLOT_LOCATION_RAW } from './constants';

package/src/location-preset.ts

@@ -0,0 +1,206 @@
+import type { PluginObj, PluginPass, types as t, ConfigAPI } from '@babel/core';
+import { declare } from '@babel/helper-plugin-utils';
+import type { BabelPluginOptions } from '@griffel/babel-preset';
+
+export type CommentDirective = [/** directive */ string, /** value */ string];
+export type CommentDirectivesBySlot = Record</** slot */ string, CommentDirective[]>;
+export type CommentDirectivesByHookDeclarator = Record</** hook declarator */ string, CommentDirectivesBySlot>;
+
+export type LocationsBySlot = Record</** slot */ string, t.SourceLocation>;
+export type LocationsByHookDeclarator = Record</** hook declarator */ string, LocationsBySlot>;
+
+export type ResetCommentDirectivesByHookDeclarator = Record</** hook declarator */ string, CommentDirective[]>;
+
+export type ResetLocationsByHookDeclarator = Record</** hook declarator */ string, t.SourceLocation>;
+
+export interface LocationPluginState extends PluginPass {
+  callExpressionLocations?: Record</** hook declarator */ string, t.SourceLocation>;
+  locations?: LocationsByHookDeclarator;
+  commentDirectives?: CommentDirectivesByHookDeclarator;
+
+  resetCommentDirectives?: ResetCommentDirectivesByHookDeclarator;
+  resetLocations?: ResetLocationsByHookDeclarator;
+}
+
+export interface LocationPluginMetadata {
+  callExpressionLocations: Record</** hook declarator */ string, t.SourceLocation>;
+  locations: LocationsByHookDeclarator;
+  commentDirectives: CommentDirectivesByHookDeclarator;
+
+  resetCommentDirectives: ResetCommentDirectivesByHookDeclarator;
+  resetLocations: ResetLocationsByHookDeclarator;
+}
+
+export type LocationPluginOptions = Pick<BabelPluginOptions, 'modules'>;
+
+/**
+ * A plugin that parses Griffel code and returns code locations mapped to respective styles and slots
+ */
+const plugin = declare<LocationPluginOptions, PluginObj<LocationPluginState>>((api, options) => {
+  api.assertVersion(7);
+
+  const {
+    modules = [
+      { moduleSource: '@griffel/react', importName: 'makeStyles', resetImportName: 'makeResetStyles' },
+      { moduleSource: '@fluentui/react-components', importName: 'makeStyles', resetImportName: 'makeResetStyles' },
+    ],
+  } = options;
+
+  const functionKinds = modules.map(moduleEntry => {
+    return moduleEntry.importName ?? 'makeStyles';
+  });
+
+  const resetFunctionKinds = modules.map(moduleEntry => {
+    return moduleEntry.resetImportName ?? 'makeResetStyles';
+  });
+
+  return {
+    name: '@griffel/slot-location-plugin',
+
+    pre() {
+      this.callExpressionLocations = {};
+      this.locations = {};
+      this.resetLocations = {};
+      this.commentDirectives = {};
+      this.resetCommentDirectives = {};
+    },
+
+    visitor: {
+      Program: {
+        exit() {
+          Object.assign(this.file.metadata, {
+            callExpressionLocations: this.callExpressionLocations,
+            locations: this.locations,
+            resetLocations: this.resetLocations,
+            commentDirectives: this.commentDirectives,
+            resetCommentDirectives: this.resetCommentDirectives,
+          } as LocationPluginMetadata);
+        },
+      },
+
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      CallExpression(path, state) {
+        const callee = path.get('callee');
+        const declarator = path.findParent(p => p.isVariableDeclarator());
+
+        if (!declarator?.isVariableDeclarator()) {
+          return;
+        }
+
+        const id = declarator.get('id');
+        const declaratorId = id.isIdentifier() ? id.node.name : 'unknown';
+
+        if (!callee.isIdentifier()) {
+          return;
+        }
+
+        // Technically we should check if these function kinds are from Griffel
+        // but since we only collect locations, the plugin is idempotent and we
+        // it's safe enough to avoid doing that check
+        if (functionKinds.includes(callee.node.name)) {
+          if (path.node.loc) {
+            state.callExpressionLocations ??= {};
+            state.callExpressionLocations[declaratorId] = {
+              ...path.node.loc,
+            };
+          }
+
+          const locations = path.get('arguments')[0];
+          if (!locations.isObjectExpression()) {
+            return;
+          }
+
+          const properties = locations.get('properties');
+          properties.forEach(property => {
+            if (!property.isObjectProperty()) {
+              return;
+            }
+
+            const key = property.get('key');
+            if (!key.isIdentifier()) {
+              return;
+            }
+
+            if (!property.node.loc) {
+              return;
+            }
+
+            state.locations ??= {};
+            state.locations[declaratorId] ??= {};
+            state.locations[declaratorId][key.node.name] = {
+              ...property.node.loc,
+            };
+
+            const commentDirectives = parseCommentDirectives(property.node.leadingComments);
+            if (commentDirectives) {
+              state.commentDirectives ??= {};
+              state.commentDirectives[declaratorId] ??= {};
+              state.commentDirectives[declaratorId][key.node.name] = commentDirectives;
+            }
+          });
+        }
+
+        if (resetFunctionKinds.includes(callee.node.name)) {
+          if (path.node.loc) {
+            state.callExpressionLocations ??= {};
+            state.callExpressionLocations[declaratorId] = {
+              ...path.node.loc,
+            };
+          }
+
+          state.resetLocations ??= {};
+          const resetStyles = path.get('arguments')[0];
+          if (!resetStyles.isObjectExpression()) {
+            return;
+          }
+
+          if (!resetStyles.node.loc) {
+            return;
+          }
+
+          state.resetLocations[declaratorId] = resetStyles.node.loc;
+
+          // For reset styles we only care about the comment directives on the variable declaration
+          // The leading commment can either be attached to a variable declaration of an export declaration (i.e. export const useResetStyles = ...)
+          const parentDeclaration =
+            path.findParent(p => p.isExportNamedDeclaration()) ?? path.findParent(p => p.isVariableDeclaration());
+          if (parentDeclaration) {
+            const commentDirectives = parseCommentDirectives(parentDeclaration.node.leadingComments);
+            if (commentDirectives) {
+              state.resetCommentDirectives ??= {};
+              state.resetCommentDirectives[declaratorId] = commentDirectives;
+            }
+          }
+        }
+      },
+    },
+  };
+});
+
+function parseCommentDirectives(leadingComments: t.Comment[] | null | undefined): CommentDirective[] | null {
+  if (!leadingComments) {
+    return null;
+  }
+
+  const entries = leadingComments
+    // We don't support comment blocks
+    .filter(comment => comment.type === 'CommentLine')
+    .map(comment => {
+      const commentValue = comment.value.trim();
+      if (!commentValue.startsWith('griffel-')) {
+        return;
+      }
+
+      const tokens = commentValue.split(' ');
+      return [tokens[0], tokens[1]];
+    })
+    .filter(Boolean) as [string, string][];
+
+  return entries;
+}
+
+export default (babel: ConfigAPI, options: LocationPluginOptions) => {
+  return {
+    plugins: [[plugin, options]],
+  };
+};