@griffel/postcss-syntax 1.3.11 → 1.3.13

package/src/transform-sync.test.ts

@@ -1,300 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

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

package/tsconfig.lib.json

@@ -1,11 +0,0 @@
-{
-  "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

@@ -1,20 +0,0 @@
-{
-  "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

@@ -1,18 +0,0 @@
-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',
-    },
-  },
-});