@griffel/postcss-syntax 1.3.11 → 1.3.12

package/src/parse.test.ts

@@ -1,501 +0,0 @@
-import type postcss from 'postcss';
-import { describe, expect, it } from 'vitest';
-
-import {
-  GRIFFEL_DECLARATOR_LOCATION_RAW,
-  GRIFFEL_DECLARATOR_RAW,
-  GRIFFEL_SLOT_LOCATION_RAW,
-  GRIFFEL_SLOT_RAW,
-  GRIFFEL_SRC_RAW,
-} from './constants';
-import { parse } from './parse';
-import { stringify } from './stringify';
-
-describe('parse', () => {
-  describe('makeStyles', () => {
-    it('should return postcss AST of valid CSS', () => {
-      const fixture = `
-import { makeStyles } from '@griffel/react';
-
-const mixin = () => ({
-  marginTop: '4px',
-})
-
-export const useStyles = makeStyles({
-  root: {
-    color: 'red',
-    backgroundColor: 'green',
-    ...mixin()
-  }
-})
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-      expect(root.toString()).toMatchInlineSnapshot(
-        `".fe3e8s9{color:red;}.fcnqdeg{background-color:green;}.fvjh0tl{margin-top:4px;}"`,
-      );
-      root.walk(node => {
-        expect(node.raw(GRIFFEL_DECLARATOR_RAW)).toEqual('useStyles');
-        expect(node.raw(GRIFFEL_SLOT_RAW)).toEqual('root');
-        expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({
-          start: { line: 9, column: 2, index: 134 },
-          end: { line: 13, column: 3, index: 208 },
-        });
-      });
-
-      expect(root.source?.input.file?.endsWith('fixture.styles.ts')).toBe(true);
-    });
-
-    it('should handle different module source', () => {
-      const fixture = `
-import { foo} from '@foo/foo';
-
-const mixin = () => ({
-  marginTop: '4px',
-})
-
-export const useStyles = foo({
-  root: {
-    color: 'red',
-    backgroundColor: 'green',
-    ...mixin()
-  }
-})
-`;
-      const root = parse(fixture, {
-        from: 'fixture.styles.ts',
-        modules: [{ moduleSource: '@foo/foo', importName: 'foo' }],
-      });
-      expect(root.toString()).toMatchInlineSnapshot(
-        `".fe3e8s9{color:red;}.fcnqdeg{background-color:green;}.fvjh0tl{margin-top:4px;}"`,
-      );
-
-      root.walk(node => {
-        expect(node.raw(GRIFFEL_DECLARATOR_RAW)).toEqual('useStyles');
-        expect(node.raw(GRIFFEL_SLOT_RAW)).toEqual('root');
-        expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({
-          start: { line: 9, column: 2, index: 113 },
-          end: { line: 13, column: 3, index: 187 },
-        });
-      });
-    });
-
-    it('should map style locations to slots', () => {
-      const fixture = `
-import { makeStyles } from '@griffel/react';
-
-export const useStyles = makeStyles({
-  slot1: {
-    color: 'red',
-  },
-
-  slot2: {
-    color: 'blue',
-  }
-})
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-
-      expect(root.toString()).toMatchInlineSnapshot(`
-        ".fe3e8s9{color:red;}
-        .f163i14w{color:blue;}"
-      `);
-
-      root.walk(node => {
-        const slot = node.raw(GRIFFEL_SLOT_RAW);
-        expect(['slot1', 'slot2']).toContain(slot);
-
-        if (slot === 'slot1') {
-          expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({
-            start: { line: 5, column: 2, index: 87 },
-            end: { line: 7, column: 3, index: 117 },
-          });
-        }
-        if (slot === 'slot2') {
-          expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({
-            start: { line: 9, column: 2, index: 122 },
-            end: { line: 11, column: 3, index: 153 },
-          });
-        }
-      });
-    });
-
-    it('should map style locations to slots when styles contains new lines', () => {
-      const fixture = `
-import { makeStyles } from "@griffel/react";
-
-export const useStyles = makeStyles({
-  slot1: {
-    background: \`linear-gradient(#e66465, 
-      #9198e5)\`,
-  },
-
-  slot2: {
-    color: "blue",
-  },
-});
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-
-      expect(root.toString()).toMatchInlineSnapshot(`
-        ".f1qmhkic{background:linear-gradient(#e66465,        #9198e5);}
-        .f163i14w{color:blue;}"
-      `);
-
-      root.walk(node => {
-        const slot = node.raw(GRIFFEL_SLOT_RAW);
-        expect(['slot1', 'slot2']).toContain(slot);
-
-        if (slot === 'slot1') {
-          expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({
-            start: { line: 5, column: 2, index: 87 },
-            end: { line: 8, column: 3, index: 159 },
-          });
-        }
-        if (slot === 'slot2') {
-          expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({
-            start: { line: 10, column: 2, index: 164 },
-            end: { line: 12, column: 3, index: 195 },
-          });
-        }
-      });
-    });
-
-    it('should map style locations to makeStyles call when it is not called with object expressions', () => {
-      const fixture = `
-import { makeStyles } from "@griffel/react";
-
-const styles = {
-  slot1: {
-    color: "red",
-  },
-  slot2: {
-    backgroundColor: "green",
-  },
-};
-
-export const useStyles = makeStyles(styles);
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-
-      expect(root.toString()).toMatchInlineSnapshot(`
-        ".fe3e8s9{color:red;}
-        .fcnqdeg{background-color:green;}"
-      `);
-
-      root.walk(node => {
-        const slot = node.raw(GRIFFEL_SLOT_RAW);
-        expect(['slot1', 'slot2']).toContain(slot);
-        expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({
-          start: { line: 13, column: 25, index: 173 },
-          end: { line: 13, column: 43, index: 191 },
-        });
-      });
-    });
-
-    it('should hold original source in document raw field', () => {
-      const fixture = `
-import { makeStyles } from '@griffel/react';
-
-export const useStyles = makeStyles({
-  slot1: {
-    color: 'red',
-  },
-
-  slot2: {
-    color: 'blue',
-  }
-})
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-      expect(root.raw(GRIFFEL_SRC_RAW)).toEqual(fixture);
-    });
-
-    it('should handle multiple declarators', () => {
-      const fixture = `
-import { makeStyles } from '@griffel/react';
-
-export const useStyles1 = makeStyles({
-  slot: {
-    color: 'red',
-  },
-})
-
-export const useStyles2 = makeStyles({
-  slot: {
-    color: 'red',
-  },
-})
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-
-      expect(root.toString()).toMatchInlineSnapshot(`
-        ".fe3e8s9{color:red;}
-        .fe3e8s9{color:red;}"
-      `);
-
-      root.walk(node => {
-        const declarator = node.raw(GRIFFEL_DECLARATOR_RAW);
-        expect(['useStyles1', 'useStyles2']).toContain(declarator);
-
-        if (declarator === 'useStyles1') {
-          expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({
-            start: { line: 5, column: 2, index: 88 },
-            end: { line: 7, column: 3, index: 117 },
-          });
-        }
-
-        if (declarator === 'useStyles2') {
-          expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({
-            start: { line: 11, column: 2, index: 164 },
-            end: { line: 13, column: 3, index: 193 },
-          });
-        }
-      });
-    });
-
-    it('should transform disable comment directive to stylelint disable', () => {
-      const fixture = `
-import { makeStyles } from '@griffel/react';
-
-export const useStyles = makeStyles({
-  root: {
-    color: 'red',
-    backgroundColor: 'green',
-  },
-
-  // griffel-csslint-disable foo
-  // griffel-csslint-disable bar
-  slot: {
-      color: 'blue',
-      backgroundColor: 'red',
-  }
-})
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-      expect(root.toString()).toMatchInlineSnapshot(`
-        ".fe3e8s9{color:red;}.fcnqdeg{background-color:green;}
-        .f163i14w{color:blue;}.f3xbvq9{background-color:red;} /* stylelint-disable-line foo,bar */"
-      `);
-    });
-
-    it('should not throw on failure to parse JS code when `silenceOnParseErrors` is set', () => {
-      const fixture = `
-import { makeStyles } from '@griffel/react';
-
-export const useStyles = makeStyles({
-  slot: {
-      // simulate user WIP code
-      color: 'bl,
-  }
-})
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts', silenceParseErrors: true });
-      expect(root.toString()).toMatchInlineSnapshot(`"/* Failed to parse griffel styles: fixture.styles.ts */"`);
-      expect(() => stringify(root, {} as postcss.Builder)).not.toThrow();
-    });
-
-    it('should throw on failure to parse JS code', () => {
-      const fixture = `
-import { makeStyles } from '@griffel/react';
-
-export const useStyles = makeStyles({
-  slot: {
-      // simulate user WIP code
-      color: 'bl,
-  }
-})
-`;
-      expect(() => parse(fixture, { from: 'fixture.styles.ts' })).toThrow('Unterminated string constant');
-    });
-  });
-
-  describe('makeResetStyles', () => {
-    it('should return postcss AST of valid CSS', () => {
-      const fixture = `
-import { makeResetStyles } from '@griffel/react';
-
-export const useResetStyles = makeResetStyles({
-  color: 'red',
-  backgroundColor: 'green',
-})
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-      expect(root.toString()).toMatchInlineSnapshot(`".rbe9p1m{color:red;background-color:green;}"`);
-    });
-
-    it('should handle different module source', () => {
-      const fixture = `
-import { foo } from '@foo/foo';
-
-export const useResetStyles = foo({
-  color: 'red',
-  backgroundColor: 'green',
-})
-`;
-      const root = parse(fixture, {
-        from: 'fixture.styles.ts',
-        modules: [{ moduleSource: '@foo/foo', importName: 'makeStyles', resetImportName: 'foo' }],
-      });
-      expect(root.toString()).toMatchInlineSnapshot(`".rbe9p1m{color:red;background-color:green;}"`);
-      root.walk(node => {
-        expect(node.raw(GRIFFEL_DECLARATOR_RAW)).toEqual('useResetStyles');
-
-        expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({
-          start: { line: 4, column: 34, index: 68 },
-          end: { line: 7, column: 1, index: 115 },
-        });
-      });
-    });
-
-    it('should map style locations to reset styles', () => {
-      const fixture = `
-import { makeResetStyles } from '@griffel/react';
-
-export const useResetStyles = makeResetStyles({
-  color: 'red',
-  backgroundColor: 'green',
-})
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-
-      root.walk(node => {
-        const declarator = node.raw(GRIFFEL_DECLARATOR_RAW);
-        expect(declarator).toEqual('useResetStyles');
-
-        expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({
-          start: { line: 4, column: 46, index: 98 },
-          end: { line: 7, column: 1, index: 145 },
-        });
-      });
-    });
-
-    it('should map style locations to reset styles when styles contains new lines', () => {
-      const fixture = `
-import { makeResetStyles } from "@griffel/react";
-
-export const useResetStyles1 = makeResetStyles({
-  color: "red",
-  background: \`linear-gradient(#e66465, 
-    #9198e5)\`,
-});
-export const useResetStyles2 = makeResetStyles({
-  color: "red",
-});
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-
-      root.walk(node => {
-        const declarator = node.raw(GRIFFEL_DECLARATOR_RAW);
-        if (declarator === 'useResetStyles1') {
-          expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({
-            start: { line: 4, column: 47, index: 99 },
-            end: { line: 8, column: 1, index: 174 },
-          });
-        }
-
-        if (declarator === 'useResetStyles2') {
-          expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({
-            start: { line: 9, column: 47, index: 224 },
-            end: { line: 11, column: 1, index: 243 },
-          });
-        }
-      });
-    });
-
-    it('should map style locations to makeResetStyles call when it is not called with object expressions', () => {
-      const fixture = `
-import { makeResetStyles } from "@griffel/react";
-
-const styles = {
-  color: "red",
-  backgroundColor: "green",
-};
-
-export const useResetStyles = makeResetStyles(styles);
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-
-      expect(root.toString()).toMatchInlineSnapshot(`".rbe9p1m{color:red;background-color:green;}"`);
-
-      root.walk(node => {
-        const declarator = node.raw(GRIFFEL_DECLARATOR_RAW);
-        expect(declarator).toEqual('useResetStyles');
-        expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({
-          start: { line: 9, column: 30, index: 147 },
-          end: { line: 9, column: 53, index: 170 },
-        });
-      });
-    });
-
-    it('should hold original source in document raw field', () => {
-      const fixture = `
-import { makeResetStyles } from '@griffel/react';
-
-export const useResetStyles = makeResetStyles({
-  color: 'red',
-  backgroundColor: 'green',
-})
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-      expect(root.raw(GRIFFEL_SRC_RAW)).toEqual(fixture);
-    });
-
-    it('should handle multiple declarators', () => {
-      const fixture = `
-import { makeResetStyles } from '@griffel/react';
-
-export const useResetStyles1 = makeResetStyles({
-  color: 'red',
-  backgroundColor: 'green',
-})
-
-export const useResetStyles2 = makeResetStyles({
-  color: 'blue',
-  backgroundColor: 'yellow',
-})
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-
-      expect(root.toString()).toMatchInlineSnapshot(`
-        ".rbe9p1m{color:red;background-color:green;}
-        .r1j8igii{color:blue;background-color:yellow;}"
-      `);
-
-      root.walk(node => {
-        const declarator = node.raw(GRIFFEL_DECLARATOR_RAW);
-        expect(['useResetStyles1', 'useResetStyles2']).toContain(declarator);
-
-        if (declarator === 'useResetStyles1') {
-          expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({
-            start: { line: 4, column: 47, index: 99 },
-            end: { line: 7, column: 1, index: 146 },
-          });
-        }
-
-        if (declarator === 'useResetStyles2') {
-          expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({
-            start: { line: 9, column: 47, index: 196 },
-            end: { line: 12, column: 1, index: 245 },
-          });
-        }
-      });
-    });
-
-    it('should transform disable comment directive to stylelint disable', () => {
-      const fixture = `
-import { makeResetStyles } from '@griffel/react';
-
-// griffel-csslint-disable foo
-// griffel-csslint-disable bar
-export const useResetStyles = makeResetStyles({
-  color: 'pink',
-  backgroundColor: 'magenta',
-})
-`;
-      const root = parse(fixture, { from: 'fixture.styles.ts' });
-      expect(root.toString()).toMatchInlineSnapshot(
-        `".r70kha3{color:pink;background-color:magenta;} /* stylelint-disable-line foo,bar */"`,
-      );
-    });
-  });
-});

package/src/parse.ts

@@ -1,155 +0,0 @@
-import * as postcss from 'postcss';
-import transformSync from './transform-sync';
-import {
-  GRIFFEL_DECLARATOR_LOCATION_RAW,
-  GRIFFEL_DECLARATOR_RAW,
-  GRIFFEL_SLOT_LOCATION_RAW,
-  GRIFFEL_SLOT_RAW,
-  GRIFFEL_SRC_RAW,
-} from './constants';
-import type { BabelPluginOptions } from '@griffel/babel-preset';
-import type { CommentDirective } from './location-preset';
-import * as os from 'os';
-
-export type PostCSSParserOptions = Pick<postcss.ProcessOptions<postcss.Document | postcss.Root>, 'from' | 'map'>;
-
-export interface ParserOptions extends Pick<PostCSSParserOptions, 'from'>, BabelPluginOptions {
-  /**
-   * Throws error when griffel parsing fails
-   * @default false
-   */
-  silenceParseErrors?: boolean;
-}
-
-/**
- * Generates CSS rules from a JavaScript file. Each slot in `makeStyles` and each `makeResetStyles` will be one line in the output.
- * It returns a PostCSS AST that parses the generated CSS rules. For each node in AST, attaches information about its related slot location from the original js file.
- */
-export const parse = (css: string | { toString(): string }, opts?: ParserOptions) => {
-  const { from: filename = 'postcss-syntax.styles.ts', silenceParseErrors = false } = opts ?? {};
-  const griffelPluginOptions = extractGriffelBabelPluginOptions(opts);
-  const code = css.toString();
-
-  const cssRuleSlotNames: string[] = [];
-  const cssRules: string[] = [];
-
-  const parseResult = parseGriffelStyles(code, filename, griffelPluginOptions, silenceParseErrors);
-  if (!parseResult) {
-    const root = postcss.parse(`/* Failed to parse griffel styles: ${filename} */`, { from: filename });
-    root.raws[GRIFFEL_SRC_RAW] = code;
-    return root;
-  }
-
-  const {
-    cssEntries,
-    cssResetEntries,
-    callExpressionLocations,
-    resetLocations,
-    locations,
-    commentDirectives,
-    resetCommentDirectives,
-  } = parseResult;
-
-  Object.entries(cssEntries).forEach(([declarator, slots]) => {
-    Object.entries(slots).forEach(([slot, rules]) => {
-      cssRuleSlotNames.push(`${declarator} ${slot}`);
-      let cssRule = rules.join('').replace(new RegExp(os.EOL, 'g'), ' ');
-
-      const ignoredRules = getIgnoredRulesFromDirectives(commentDirectives[declarator]?.[slot] ?? []);
-      if (ignoredRules.length) {
-        const stylelintIgnore = `/* stylelint-disable-line ${ignoredRules.join(',')} */`;
-        cssRule = `${cssRule} ${stylelintIgnore}`;
-      }
-
-      cssRules.push(cssRule);
-    });
-  });
-
-  Object.entries(cssResetEntries).forEach(([declarator, resetRules]) => {
-    cssRuleSlotNames.push(`${declarator}`);
-    const ignoredRules = getIgnoredRulesFromDirectives(resetCommentDirectives[declarator] ?? []);
-    let cssRule = resetRules.join('').replace(new RegExp(os.EOL, 'g'), ' ');
-
-    if (ignoredRules.length) {
-      const stylelintIgnore = `/* stylelint-disable-line ${ignoredRules.join(',')} */`;
-      cssRule = `${cssRule} ${stylelintIgnore}`;
-    }
-
-    cssRules.push(cssRule);
-  });
-
-  const root = postcss.parse(cssRules.join('\n'), { from: filename });
-  root.walk(node => {
-    if (!node.source || node.source.start === undefined) {
-      return;
-    }
-    const [declarator, slot] = cssRuleSlotNames[node.source.start.line - 1].split(' ');
-    node.raws[GRIFFEL_DECLARATOR_RAW] = declarator;
-    if (slot) {
-      node.raws[GRIFFEL_SLOT_RAW] = slot;
-      node.raws[GRIFFEL_SLOT_LOCATION_RAW] = locations[declarator]?.[slot] ?? callExpressionLocations[declarator];
-    } else {
-      node.raws[GRIFFEL_DECLARATOR_LOCATION_RAW] = resetLocations[declarator] ?? callExpressionLocations[declarator];
-    }
-  });
-
-  root.raws[GRIFFEL_SRC_RAW] = css;
-  return root;
-};
-
-function parseGriffelStyles(
-  code: string,
-  filename: string,
-  pluginOpts: BabelPluginOptions,
-  silenceParseErrors: boolean,
-) {
-  try {
-    const { metadata } = transformSync(code, {
-      filename,
-      pluginOptions: {
-        ...pluginOpts,
-        generateMetadata: true,
-      },
-    });
-
-    return metadata;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.warn('Failed to parse Griffel styles');
-    // eslint-disable-next-line no-console
-    console.warn(error);
-    if (silenceParseErrors) {
-      return null;
-    }
-
-    throw error;
-  }
-}
-
-function getIgnoredRulesFromDirectives(commentDirectives: CommentDirective[]) {
-  return commentDirectives
-    .filter(([directive]) => directive === 'griffel-csslint-disable')
-    .map(([_, rulename]) => rulename);
-}
-
-const extractGriffelBabelPluginOptions = (opts: ParserOptions = {}) => {
-  const { babelOptions, evaluationRules, generateMetadata, modules } = opts;
-  const babelPluginOptions: BabelPluginOptions = {};
-  if (babelOptions) {
-    babelPluginOptions.babelOptions = babelOptions;
-  }
-
-  if (evaluationRules) {
-    babelPluginOptions.evaluationRules = evaluationRules;
-  }
-
-  if (generateMetadata) {
-    babelPluginOptions.generateMetadata = generateMetadata;
-  }
-
-  if (modules) {
-    babelPluginOptions.modules = modules;
-  }
-
-  return babelPluginOptions;
-};

package/src/stringify.ts

@@ -1,12 +0,0 @@
-import type * as postcss from 'postcss';
-import { GRIFFEL_SRC_RAW } from './constants';
-
-export const stringify: postcss.Stringifier = root => {
-  const originalSource = root.raw(GRIFFEL_SRC_RAW);
-  if (originalSource) {
-    return originalSource;
-  }
-
-  // TODO maybe we could generate some default Griffel file with all styles in one slot
-  throw new Error('Griffel syntax stringifier can only stringify AST parsed with the custom syntax');
-};