@griffel/postcss-syntax 1.3.10 → 1.3.11

package/src/transform-sync.test.ts

@@ -0,0 +1,300 @@
+import { describe, expect, it } from 'vitest';
+
+import transformSync, { type TransformOptions } from './transform-sync';
+
+describe('transformSync', () => {
+  it('should parse TS and return metadata that contains css location', () => {
+    const sourceCode = `
+    import type { GriffelStyle } from '@griffel/react'
+    import { makeStyles } from '@griffel/react';
+
+    const mixin = (): GriffelStyle => ({
+      marginTop: '4px',
+    })
+
+    export const useStyles = makeStyles({
+      root: {
+        color: 'red',
+        backgroundColor: 'green',
+        ...mixin()
+      }
+    })
+    `;
+    const options: TransformOptions = {
+      filename: 'test.styles.ts',
+      pluginOptions: {
+        babelOptions: {
+          presets: ['@babel/preset-typescript'],
+        },
+        generateMetadata: true,
+      },
+    };
+
+    const result = transformSync(sourceCode, options);
+
+    expect(result.metadata.cssEntries).toMatchInlineSnapshot(`
+      {
+        "useStyles": {
+          "root": [
+            ".fe3e8s9{color:red;}",
+            ".fcnqdeg{background-color:green;}",
+            ".fvjh0tl{margin-top:4px;}",
+          ],
+        },
+      }
+    `);
+    expect(result.metadata.locations).toMatchInlineSnapshot(`
+      {
+        "useStyles": {
+          "root": {
+            "end": Position {
+              "column": 7,
+              "index": 317,
+              "line": 14,
+            },
+            "filename": undefined,
+            "identifierName": undefined,
+            "start": Position {
+              "column": 6,
+              "index": 227,
+              "line": 10,
+            },
+          },
+        },
+      }
+    `);
+  });
+
+  it('should parse TS and return comment directives prefixed with griffel-', () => {
+    const sourceCode = `
+    import type { GriffelStyle } from '@griffel/react'
+    import { makeStyles, makeResetStyles } from '@griffel/react';
+
+    export const useStyles = makeStyles({
+      // griffel-csslint-disable foo
+      // griffel-csslint-disable bar
+      root: {
+        color: 'red',
+        backgroundColor: 'green',
+      },
+
+      // griffel-csslint-disable foo
+      foo: {
+        color: 'blue'
+      }
+    })
+
+    // griffel-csslint-disable foo
+    export const useResetStyles = makeResetStyles({
+      color: 'red',
+    })
+
+    // griffel-csslint-disable foo
+    // griffel-csslint-disable bar
+    const useResetStylesExportedLater = makeResetStyles({
+      color: 'red',
+    })
+
+    export { useResetStylesExportedLater };
+    `;
+
+    const options: TransformOptions = {
+      filename: 'test.styles.ts',
+      pluginOptions: {
+        babelOptions: {
+          presets: ['@babel/preset-typescript'],
+        },
+        generateMetadata: true,
+      },
+    };
+
+    const result = transformSync(sourceCode, options);
+
+    expect(result.metadata.commentDirectives).toMatchInlineSnapshot(`
+      {
+        "useStyles": {
+          "foo": [
+            [
+              "griffel-csslint-disable",
+              "foo",
+            ],
+          ],
+          "root": [
+            [
+              "griffel-csslint-disable",
+              "foo",
+            ],
+            [
+              "griffel-csslint-disable",
+              "bar",
+            ],
+          ],
+        },
+      }
+    `);
+
+    expect(result.metadata.resetCommentDirectives).toMatchInlineSnapshot(`
+      {
+        "useResetStyles": [
+          [
+            "griffel-csslint-disable",
+            "foo",
+          ],
+        ],
+        "useResetStylesExportedLater": [
+          [
+            "griffel-csslint-disable",
+            "foo",
+          ],
+          [
+            "griffel-csslint-disable",
+            "bar",
+          ],
+        ],
+      }
+    `);
+  });
+
+  it('should return location of makeStyles call expression', () => {
+    const sourceCode = `
+      import type { GriffelStyle } from "@griffel/react";
+      import { makeStyles } from "@griffel/react";
+
+      const mixin = (): GriffelStyle => ({
+        marginTop: "4px",
+      });
+
+      const styles = {
+        root: {
+          color: "red",
+          backgroundColor: "green",
+          ...mixin(),
+        },
+      };
+
+      export const useStyles1 = makeStyles(styles);
+      export const useStyles2 = makeStyles(styles);
+      `;
+    const options: TransformOptions = {
+      filename: 'test.styles.ts',
+      pluginOptions: {
+        babelOptions: {
+          presets: ['@babel/preset-typescript'],
+        },
+        generateMetadata: true,
+      },
+    };
+
+    const result = transformSync(sourceCode, options);
+
+    expect(result.metadata.cssEntries).toMatchInlineSnapshot(`
+      {
+        "useStyles1": {
+          "root": [
+            ".fe3e8s9{color:red;}",
+            ".fcnqdeg{background-color:green;}",
+            ".fvjh0tl{margin-top:4px;}",
+          ],
+        },
+        "useStyles2": {
+          "root": [
+            ".fe3e8s9{color:red;}",
+            ".fcnqdeg{background-color:green;}",
+            ".fvjh0tl{margin-top:4px;}",
+          ],
+        },
+      }
+    `);
+    expect(result.metadata.callExpressionLocations).toEqual({
+      useStyles1: {
+        end: {
+          column: 50,
+          index: 383,
+          line: 17,
+        },
+        start: {
+          column: 32,
+          index: 365,
+          line: 17,
+        },
+      },
+      useStyles2: {
+        end: {
+          column: 50,
+          index: 435,
+          line: 18,
+        },
+        start: {
+          column: 32,
+          index: 417,
+          line: 18,
+        },
+      },
+    });
+  });
+
+  it('should return location of makeResetStyles call expression', () => {
+    const sourceCode = `
+      import type { GriffelStyle } from "@griffel/react";
+      import { makeResetStyles } from "@griffel/react";
+      const mixin = (): GriffelStyle => ({
+        marginTop: "4px",
+      });
+      const styles = {
+        color: "red",
+        backgroundColor: "green",
+        ...mixin(),
+      };
+      export const useResetStyles1 = makeResetStyles(styles);
+      export const useResetStyles2 = makeResetStyles(styles);
+      `;
+    const options: TransformOptions = {
+      filename: 'test.styles.ts',
+      pluginOptions: {
+        babelOptions: {
+          presets: ['@babel/preset-typescript'],
+        },
+        generateMetadata: true,
+      },
+    };
+
+    const result = transformSync(sourceCode, options);
+
+    expect(result.metadata.cssResetEntries).toMatchInlineSnapshot(`
+      {
+        "useResetStyles1": [
+          ".rv6h41g{color:red;background-color:green;margin-top:4px;}",
+        ],
+        "useResetStyles2": [
+          ".rv6h41g{color:red;background-color:green;margin-top:4px;}",
+        ],
+      }
+    `);
+    expect(result.metadata.callExpressionLocations).toEqual({
+      useResetStyles1: {
+        end: {
+          column: 60,
+          index: 362,
+          line: 12,
+        },
+        start: {
+          column: 37,
+          index: 339,
+          line: 12,
+        },
+      },
+      useResetStyles2: {
+        end: {
+          column: 60,
+          index: 424,
+          line: 13,
+        },
+        start: {
+          column: 37,
+          index: 401,
+          line: 13,
+        },
+      },
+    });
+  });
+});

package/src/transform-sync.ts

@@ -0,0 +1,36 @@
+import * as Babel from '@babel/core';
+import type { BabelPluginMetadata, BabelPluginOptions } from '@griffel/babel-preset';
+import griffelPreset from '@griffel/babel-preset';
+import type { LocationPluginMetadata } from './location-preset';
+import locationPreset from './location-preset';
+
+export type TransformOptions = {
+  filename: string;
+  pluginOptions: BabelPluginOptions;
+};
+
+/**
+ * Transforms passed source code with Babel, uses user's config for parsing, but ignores it for transforms.
+ */
+export default function transformSync(sourceCode: string, options: TransformOptions) {
+  const { plugins, presets } = options.pluginOptions.babelOptions ?? { plugins: [], presets: [] };
+  const babelFileResult = Babel.transformSync(sourceCode, {
+    // Ignore all user's configs and apply only our plugin
+    babelrc: false,
+    configFile: false,
+    plugins,
+    presets: [...(presets ?? []), [griffelPreset, options.pluginOptions], [locationPreset, options.pluginOptions]],
+
+    filename: options.filename,
+    sourceFileName: options.filename,
+  });
+
+  if (babelFileResult === null) {
+    throw new Error(`Failed to transform "${options.filename}" due unknown Babel error...`);
+  }
+
+  return {
+    metadata: babelFileResult.metadata as unknown as BabelPluginMetadata & LocationPluginMetadata,
+    code: babelFileResult.code,
+  };
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node", "environment"]
+  },
+  "exclude": ["**/*.spec.ts", "**/*.test.ts", "jest.config.ts"],
+  "include": ["**/*.ts"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "typeRoots": ["../../node_modules", "../../node_modules/@types", "../../typings"],
+    "types": ["vitest/importMeta", "vite/client", "node", "vitest", "environment"]
+  },
+  "include": [
+    "vitest.config.mts",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

package/vitest.config.mts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vitest/config';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/postcss-syntax',
+  plugins: [nxViteTsPaths()],
+  test: {
+    watch: false,
+    environment: 'node',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/packages/postcss-syntax',
+      provider: 'v8',
+    },
+  },
+});

package/LICENSE.md

@@ -1,21 +0,0 @@
-    MIT License
-
-    Copyright (c) Microsoft Corporation.
-
-    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

package/src/constants.d.ts

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

package/src/constants.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GRIFFEL_DECLARATOR_LOCATION_RAW = exports.GRIFFEL_SLOT_LOCATION_RAW = exports.GRIFFEL_DECLARATOR_RAW = exports.GRIFFEL_SRC_RAW = exports.GRIFFEL_SLOT_RAW = void 0;
-exports.GRIFFEL_SLOT_RAW = 'griffel-slot';
-exports.GRIFFEL_SRC_RAW = 'griffel-src';
-exports.GRIFFEL_DECLARATOR_RAW = 'griffel-declarator';
-exports.GRIFFEL_SLOT_LOCATION_RAW = 'griffel-slot-location';
-exports.GRIFFEL_DECLARATOR_LOCATION_RAW = 'griffel-declarator-location';
-//# sourceMappingURL=constants.js.map

package/src/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../packages/postcss-syntax/src/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,gBAAgB,GAAG,cAAc,CAAC;AAClC,QAAA,eAAe,GAAG,aAAa,CAAC;AAChC,QAAA,sBAAsB,GAAG,oBAAoB,CAAC;AAC9C,QAAA,yBAAyB,GAAG,uBAAuB,CAAC;AACpD,QAAA,+BAA+B,GAAG,6BAA6B,CAAC"}

package/src/createSyntax.d.ts

@@ -1,8 +0,0 @@
-import type { BabelPluginOptions } from '@griffel/babel-preset';
-import type * as postcss from 'postcss';
-/**
- * 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 declare function createSyntax(options: BabelPluginOptions): postcss.Syntax;

package/src/createSyntax.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSyntax = createSyntax;
-const parse_1 = require("./parse");
-const stringify_1 = require("./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
- */
-function createSyntax(options) {
-    const extendedParse = (css, opts) => (0, parse_1.parse)(css, { ...opts, ...options });
-    return {
-        stringify: stringify_1.stringify,
-        parse: extendedParse,
-    };
-}
-//# sourceMappingURL=createSyntax.js.map

package/src/createSyntax.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createSyntax.js","sourceRoot":"","sources":["../../../../packages/postcss-syntax/src/createSyntax.ts"],"names":[],"mappings":";;AAWA,oCAOC;AAfD,mCAAgC;AAChC,2CAAwC;AAExC;;;;GAIG;AACH,SAAgB,YAAY,CAAC,OAA2B;IACtD,MAAM,aAAa,GAAmB,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,IAAA,aAAK,EAAC,GAAG,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;IAEzF,OAAO;QACL,SAAS,EAAT,qBAAS;QACT,KAAK,EAAE,aAAa;KACrB,CAAC;AACJ,CAAC"}

package/src/index.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GRIFFEL_SLOT_LOCATION_RAW = exports.GRIFFEL_DECLARATOR_LOCATION_RAW = exports.createSyntax = exports.stringify = exports.parse = void 0;
-const parse_1 = require("./parse");
-Object.defineProperty(exports, "parse", { enumerable: true, get: function () { return parse_1.parse; } });
-const stringify_1 = require("./stringify");
-Object.defineProperty(exports, "stringify", { enumerable: true, get: function () { return stringify_1.stringify; } });
-var createSyntax_1 = require("./createSyntax");
-Object.defineProperty(exports, "createSyntax", { enumerable: true, get: function () { return createSyntax_1.createSyntax; } });
-exports.default = {
-    parse: parse_1.parse,
-    stringify: stringify_1.stringify,
-};
-var constants_1 = require("./constants");
-Object.defineProperty(exports, "GRIFFEL_DECLARATOR_LOCATION_RAW", { enumerable: true, get: function () { return constants_1.GRIFFEL_DECLARATOR_LOCATION_RAW; } });
-Object.defineProperty(exports, "GRIFFEL_SLOT_LOCATION_RAW", { enumerable: true, get: function () { return constants_1.GRIFFEL_SLOT_LOCATION_RAW; } });
-//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/postcss-syntax/src/index.ts"],"names":[],"mappings":";;;AAAA,mCAAgC;AAGvB,sFAHA,aAAK,OAGA;AAFd,2CAAwC;AAExB,0FAFP,qBAAS,OAEO;AACzB,+CAA8C;AAArC,4GAAA,YAAY,OAAA;AAErB,kBAAe;IACb,KAAK,EAAL,aAAK;IACL,SAAS,EAAT,qBAAS;CACV,CAAC;AAEF,yCAAyF;AAAhF,4HAAA,+BAA+B,OAAA;AAAE,sHAAA,yBAAyB,OAAA"}

package/src/location-preset.d.ts

@@ -1,28 +0,0 @@
-import type { PluginObj, PluginPass, types as t, ConfigAPI } from '@babel/core';
-import type { BabelPluginOptions } from '@griffel/babel-preset';
-export type CommentDirective = [ /** directive *//** 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'>;
-declare const _default: (babel: ConfigAPI, options: LocationPluginOptions) => {
-    plugins: (LocationPluginOptions | ((api: object, options: LocationPluginOptions | null | undefined, dirname: string) => PluginObj<LocationPluginState>))[][];
-};
-export default _default;