Skip to content

Commit

Permalink
improve comment handling
Browse files Browse the repository at this point in the history
  • Loading branch information
@jantimon
jantimon committed Jul 21, 2024
1 parent ebefecc commit 83aa4e6
Show file tree
Hide file tree
Showing 3 changed files with 158 additions and 147 deletions.
222 changes: 111 additions & 111 deletions packages/next-yak/loaders/__tests__/parseCss.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,32 +9,12 @@ test("parseCss inComplete css 1", () => {
color: blue;
`),
).toMatchInlineSnapshot(`
{
"declarations": [
{
"closed": true,
"property": "color",
"scope": [
{
"name": ".foo",
"type": "selector",
},
{
"name": ".fancy",
"type": "selector",
},
],
"value": "blue",
},
],
"state": {
"currentDeclaration": {
"closed": false,
"property": "",
"scope": [],
"value": "",
},
"currentScopes": [
{
"declarations": [
{
"closed": true,
"property": "color",
"scope": [
{
"name": ".foo",
"type": "selector",
Expand All @@ -44,13 +24,33 @@ test("parseCss inComplete css 1", () => {
"type": "selector",
},
],
"isInsideAtRule": false,
"isInsideComment": false,
"isInsidePropertyValue": false,
"isInsideString": false,
"value": "blue",
},
}
`);
],
"state": {
"currentCommentState": false,
"currentDeclaration": {
"closed": false,
"property": "",
"scope": [],
"value": "",
},
"currentScopes": [
{
"name": ".foo",
"type": "selector",
},
{
"name": ".fancy",
"type": "selector",
},
],
"isInsideAtRule": false,
"isInsidePropertyValue": false,
"isInsideString": false,
},
}
`);
});

test("parseCss inComplete css 1 ending inside a comment", () => {
Expand All @@ -64,6 +64,7 @@ test("parseCss inComplete css 1 ending inside a comment", () => {
{
"declarations": [],
"state": {
"currentCommentState": "/*",
"currentDeclaration": {
"closed": false,
"property": "",
Expand All @@ -90,7 +91,6 @@ test("parseCss inComplete css 1 ending inside a comment", () => {
},
],
"isInsideAtRule": false,
"isInsideComment": true,
"isInsidePropertyValue": false,
"isInsideString": false,
},
Expand Down Expand Up @@ -126,6 +126,7 @@ test("parseCss inComplete css 1 ending inside a string", () => {
},
],
"state": {
"currentCommentState": false,
"currentDeclaration": {
"closed": false,
"property": "background",
Expand Down Expand Up @@ -153,7 +154,6 @@ test("parseCss inComplete css 1 ending inside a string", () => {
},
],
"isInsideAtRule": false,
"isInsideComment": false,
"isInsidePropertyValue": true,
"isInsideString": "'",
},
Expand Down Expand Up @@ -189,6 +189,7 @@ test("parseCss inComplete css 1 ending inside a double quote string", () => {
},
],
"state": {
"currentCommentState": false,
"currentDeclaration": {
"closed": false,
"property": "background",
Expand Down Expand Up @@ -216,7 +217,6 @@ test("parseCss inComplete css 1 ending inside a double quote string", () => {
},
],
"isInsideAtRule": false,
"isInsideComment": false,
"isInsidePropertyValue": true,
"isInsideString": "\\"",
},
Expand Down Expand Up @@ -253,6 +253,7 @@ test("parseCss inComplete css 1 ending outside a comment", () => {
},
],
"state": {
"currentCommentState": false,
"currentDeclaration": {
"closed": false,
"property": "color",
Expand Down Expand Up @@ -280,7 +281,6 @@ test("parseCss inComplete css 1 ending outside a comment", () => {
},
],
"isInsideAtRule": false,
"isInsideComment": false,
"isInsidePropertyValue": true,
"isInsideString": false,
},
Expand All @@ -303,79 +303,79 @@ test("parseCss inComplete css 1 with @media rule", () => {
`),
).toMatchInlineSnapshot(`
{
"declarations": [
{
"closed": true,
"property": "background",
"scope": [
{
"name": ".foo",
"type": "selector",
},
{
"name": ".fancy",
"type": "selector",
},
],
"value": "url('https://example.com')",
},
{
"closed": true,
"property": "color",
"scope": [
{
"name": ".foo",
"type": "selector",
},
{
"name": ".fancy",
"type": "selector",
},
{
"name": "@media (max-width: 600px)",
"type": "at-rule",
},
{
"name": ".baz",
"type": "selector",
},
],
"value": "red",
},
],
"state": {
"currentDeclaration": {
"closed": false,
"property": "",
"scope": [],
"value": "",
},
"currentScopes": [
{
"name": ".foo",
"type": "selector",
},
{
"name": ".fancy",
"type": "selector",
},
{
"name": "@media (max-width: 600px)",
"type": "at-rule",
},
{
"name": ".baz",
"type": "selector",
},
],
"isInsideAtRule": false,
"isInsideComment": false,
"isInsidePropertyValue": false,
"isInsideString": false,
{
"declarations": [
{
"closed": true,
"property": "background",
"scope": [
{
"name": ".foo",
"type": "selector",
},
}
`);
{
"name": ".fancy",
"type": "selector",
},
],
"value": "url('https://example.com')",
},
{
"closed": true,
"property": "color",
"scope": [
{
"name": ".foo",
"type": "selector",
},
{
"name": ".fancy",
"type": "selector",
},
{
"name": "@media (max-width: 600px)",
"type": "at-rule",
},
{
"name": ".baz",
"type": "selector",
},
],
"value": "red",
},
],
"state": {
"currentCommentState": false,
"currentDeclaration": {
"closed": false,
"property": "",
"scope": [],
"value": "",
},
"currentScopes": [
{
"name": ".foo",
"type": "selector",
},
{
"name": ".fancy",
"type": "selector",
},
{
"name": "@media (max-width: 600px)",
"type": "at-rule",
},
{
"name": ".baz",
"type": "selector",
},
],
"isInsideAtRule": false,
"isInsidePropertyValue": false,
"isInsideString": false,
},
}
`);
});

test("parseCss complete css with @media rule", () => {
Expand Down Expand Up @@ -466,6 +466,7 @@ test("parseCss complete css with @media rule", () => {
},
],
"state": {
"currentCommentState": false,
"currentDeclaration": {
"closed": false,
"property": "",
Expand All @@ -474,7 +475,6 @@ test("parseCss complete css with @media rule", () => {
},
"currentScopes": [],
"isInsideAtRule": false,
"isInsideComment": false,
"isInsidePropertyValue": false,
"isInsideString": false,
},
Expand Down Expand Up @@ -550,6 +550,7 @@ test("parseCss inComplete css 1 with @keyframes rule", () => {
},
],
"state": {
"currentCommentState": false,
"currentDeclaration": {
"closed": false,
"property": "",
Expand All @@ -558,7 +559,6 @@ test("parseCss inComplete css 1 with @keyframes rule", () => {
},
"currentScopes": [],
"isInsideAtRule": false,
"isInsideComment": false,
"isInsidePropertyValue": false,
"isInsideString": false,
},
Expand Down Expand Up @@ -595,6 +595,7 @@ test("parseCss inComplete css 1 ending outside a // comment", () => {
},
],
"state": {
"currentCommentState": false,
"currentDeclaration": {
"closed": false,
"property": "color",
Expand Down Expand Up @@ -622,7 +623,6 @@ test("parseCss inComplete css 1 ending outside a // comment", () => {
},
],
"isInsideAtRule": false,
"isInsideComment": false,
"isInsidePropertyValue": true,
"isInsideString": false,
},
Expand Down
7 changes: 6 additions & 1 deletion packages/next-yak/loaders/babel-yak-plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -543,12 +543,13 @@ function transformYakExpressions(
for (let i = 0; i < expression.cssPartQuasis.length; i++) {
let cssChunk = expression.cssPartQuasis[i].replace(/\\\\/g, "\\");
const quasiExpression = expression.path.node.quasi.expressions[i];
const isInSideComment = currentCssParserState.currentCommentState !== false;

// Merge Component References directly into the css code before parsing
// e.g.:
// const Icon = styled.div``
// const Button = styled.button`&:${Icon} { color: red; }`
if (babelTypes.isIdentifier(quasiExpression)) {
if (babelTypes.isIdentifier(quasiExpression) && !isInSideComment) {
let replaceValue: string | null = null;
// Component References
if (componentTypeMapping[quasiExpression.name]) {
Expand Down Expand Up @@ -631,6 +632,10 @@ function transformYakExpressions(
const parsedCss = parseCss(cssChunk, currentCssParserState);
currentCssParserState = parsedCss.state;

if (parsedCss.state.currentCommentState) {
continue;
}

if (babelTypes.isTSType(quasiExpression)) {
throw new Error(
"Type annotations are not allowed in css template literals",
Expand Down
Loading

0 comments on commit 83aa4e6

Please sign in to comment.