Skip to content

Commit

Permalink
feat(postcss-syntax): update parse function to generate css rules o…
Browse files Browse the repository at this point in the history 
…ne line per slot(makeStyles)/declaration(makeResetStyles) (#548)

* new parser

* export a post processor

* update parser

* ut

* wip

* cleanup

* return root instead of docs

* cleanup

* update comments

* Change files

* update changelog

* fix lint
  • Loading branch information
@YuanboXue-Amber
YuanboXue-Amber authored May 7, 2024
1 parent 5811aef commit 8f670a5
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 186 deletions.
7 changes: 7 additions & 0 deletions change/@griffel-postcss-syntax-3a9b3f4c-8147-4076-9876-a8e0a0624d98.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "Update `parse` to generate css rules one line per slot(makeStyles)/declaration(makeResetStyles)",
"packageName": "@griffel/postcss-syntax",
"email": "yuanboxue@microsoft.com",
"dependentChangeType": "patch"
}
2 changes: 2 additions & 0 deletions packages/postcss-syntax/src/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +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';
2 changes: 2 additions & 0 deletions packages/postcss-syntax/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,5 @@ export default {
parse,
stringify,
};

export { GRIFFEL_DECLARATOR_LOCATION_RAW, GRIFFEL_SLOT_LOCATION_RAW } from './constants';
3 changes: 0 additions & 3 deletions packages/postcss-syntax/src/location-preset.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,6 @@ const plugin = declare<LocationPluginOptions, PluginObj<LocationPluginState>>((a
state.locations[declaratorId][key.node.name] = {
...property.node.loc,
};
state.locations[declaratorId][key.node.name] = {
...property.node.loc,
};
});
}

Expand Down
173 changes: 85 additions & 88 deletions packages/postcss-syntax/src/parse.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { GRIFFEL_DECLARATOR_RAW, GRIFFEL_SLOT_RAW, GRIFFEL_SRC_RAW } from './constants';
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 * as prettier from 'prettier';

const format = (css: string) => {
return prettier.format(css, { parser: 'css' });
};

describe('parse', () => {
describe('makeStyles', () => {
Expand All @@ -25,18 +26,17 @@ export const useStyles = makeStyles({
})
`;
const root = parse(fixture, { from: 'fixture.styles.ts' });
expect(format(root.toString())).toMatchInlineSnapshot(`
".fe3e8s9 {
color: red;
}
.fcnqdeg {
background-color: green;
}
.fvjh0tl {
margin-top: 4px;
}
"
`);
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 },
});
});
});

it('should handle different module source', () => {
Expand All @@ -59,27 +59,17 @@ export const useStyles = foo({
from: 'fixture.styles.ts',
modules: [{ moduleSource: '@foo/foo', importName: 'foo' }],
});
expect(format(root.toString())).toMatchInlineSnapshot(`
".fe3e8s9 {
color: red;
}
.fcnqdeg {
background-color: green;
}
.fvjh0tl {
margin-top: 4px;
}
"
`);
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');

if (node.source) {
expect(node.source.start).toEqual({ offset: 0, column: 2, line: 9 });
expect(node.source.end).toEqual({ offset: 0, column: 3, line: 13 });
}
expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({
start: { line: 9, column: 2, index: 113 },
end: { line: 13, column: 3, index: 187 },
});
});
});

Expand All @@ -99,21 +89,26 @@ export const useStyles = makeStyles({
`;
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 (node.source) {
// This test will depend on the source fixture and its indentation
if (slot === 'slot1') {
expect(node.source.start).toEqual({ offset: 0, column: 2, line: 5 });
expect(node.source.end).toEqual({ offset: 0, column: 3, line: 7 });
}

if (slot === 'slot2') {
expect(node.source.start).toEqual({ offset: 0, column: 2, line: 9 });
expect(node.source.end).toEqual({ offset: 0, column: 3, line: 11 });
}
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 },
});
}
});
});
Expand Down Expand Up @@ -153,20 +148,28 @@ export const useStyles2 = makeStyles({
})
`;
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 (node.source) {
if (declarator === 'useStyles1') {
expect(node.source.start).toEqual({ offset: 0, column: 2, line: 5 });
expect(node.source.end).toEqual({ offset: 0, column: 3, line: 7 });
}
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.source.start).toEqual({ offset: 0, column: 2, line: 11 });
expect(node.source.end).toEqual({ offset: 0, column: 3, line: 13 });
}
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 },
});
}
});
});
Expand All @@ -183,13 +186,7 @@ export const useResetStyles = makeResetStyles({
})
`;
const root = parse(fixture, { from: 'fixture.styles.ts' });
expect(format(root.toString())).toMatchInlineSnapshot(`
".rbe9p1m {
color: red;
background-color: green;
}
"
`);
expect(root.toString()).toMatchInlineSnapshot(`".rbe9p1m{color:red;background-color:green;}"`);
});

it('should handle different module source', () => {
Expand All @@ -205,21 +202,14 @@ export const useResetStyles = foo({
from: 'fixture.styles.ts',
modules: [{ moduleSource: '@foo/foo', importName: 'makeStyles', resetImportName: 'foo' }],
});
expect(format(root.toString())).toMatchInlineSnapshot(`
".rbe9p1m {
color: red;
background-color: green;
}
"
`);

expect(root.toString()).toMatchInlineSnapshot(`".rbe9p1m{color:red;background-color:green;}"`);
root.walk(node => {
expect(node.raw(GRIFFEL_DECLARATOR_RAW)).toEqual('useResetStyles');

if (node.source) {
expect(node.source.start).toEqual({ offset: 0, column: 34, line: 4 });
expect(node.source.end).toEqual({ offset: 0, column: 1, line: 7 });
}
expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({
start: { line: 4, column: 34, index: 68 },
end: { line: 7, column: 1, index: 115 },
});
});
});

Expand All @@ -238,11 +228,10 @@ export const useResetStyles = makeResetStyles({
const declarator = node.raw(GRIFFEL_DECLARATOR_RAW);
expect(declarator).toEqual('useResetStyles');

if (node.source) {
// This test will depend on the source fixture and its indentation
expect(node.source.start).toEqual({ offset: 0, column: 46, line: 4 });
expect(node.source.end).toEqual({ offset: 0, column: 1, line: 7 });
}
expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({
start: { line: 4, column: 46, index: 98 },
end: { line: 7, column: 1, index: 145 },
});
});
});

Expand Down Expand Up @@ -274,20 +263,28 @@ export const useResetStyles2 = makeResetStyles({
})
`;
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 (node.source) {
if (declarator === 'useResetStyles1') {
expect(node.source.start).toEqual({ offset: 0, column: 47, line: 4 });
expect(node.source.end).toEqual({ offset: 0, column: 1, line: 7 });
}
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.source.start).toEqual({ offset: 0, column: 47, line: 9 });
expect(node.source.end).toEqual({ offset: 0, column: 1, line: 12 });
}
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 },
});
}
});
});
Expand Down
Loading

0 comments on commit 8f670a5

Please sign in to comment.