fix: handle multiple url()

change/@griffel-babel-preset-5de7c49e-a1be-495c-8b54-2f1c16242a46.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: handle multiple url()",
+  "packageName": "@griffel/babel-preset",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@griffel-webpack-extraction-plugin-f1a08e5b-bed7-4fdf-b12a-d35efc27cd36.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: handle multiple url()",
+  "packageName": "@griffel/webpack-extraction-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/babel-preset/__fixtures__/assets-multiple-declarations/code.ts

@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+
+import blank from './blank.jpg';
+import empty from './empty.jpg';
+
+export const useStyles = makeStyles({
+  root: { backgroundImage: `url(${blank}), url(${empty})` },
+});

packages/babel-preset/__fixtures__/assets-multiple-declarations/output.ts

@@ -0,0 +1,15 @@
+import _asset2 from './empty.jpg';
+import _asset from './blank.jpg';
+import { __styles } from '@griffel/react';
+import blank from './blank.jpg';
+import empty from './empty.jpg';
+export const useStyles = __styles(
+  {
+    root: {
+      Bcmaq0h: 'fp00rh9',
+    },
+  },
+  {
+    d: [`.fp00rh9{background-image:url(${_asset}),url(${_asset2});}`],
+  },
+);

packages/babel-preset/__fixtures__/assets-urls/code.ts

@@ -0,0 +1,5 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  data: { backgroundImage: 'url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2Q==)' },
+});

packages/babel-preset/__fixtures__/assets-urls/output.ts

@@ -0,0 +1,11 @@
+import { __styles } from '@griffel/react';
+export const useStyles = __styles(
+  {
+    data: {
+      Bcmaq0h: 'fclgv40',
+    },
+  },
+  {
+    d: [`.fclgv40{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2Q==);}`],
+  },
+);

packages/babel-preset/package.json

@@ -16,6 +16,7 @@
     "@linaria/babel-preset": "^3.0.0-beta.23",
     "@linaria/shaker": "^3.0.0-beta.22",
     "ajv": "^8.4.0",
+    "stylis": "^4.0.13",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

packages/babel-preset/src/assets/isAssetUrl.ts

@@ -0,0 +1,3 @@
+export function isAssetUrl(value: string): boolean {
+  return !value.startsWith('data:');
+}

packages/babel-preset/src/assets/normalizeStyleRules.test.ts

@@ -99,4 +99,33 @@ describe('normalizeStyleRules', () => {
       },
     });
   });
+
+  it('handles multiple URLs', () => {
+    expect(
+      normalizeStyleRules(
+        path.posix,
+        '/home/projects/foo',
+        '/home/projects/foo/src/styles/Component.styles.ts',
+
+        {
+          root: {
+            // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+            backgroundImage: [
+              'url(../../assets/firefox.png),',
+              'url(../../assets/bubbles.png),',
+              'linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0))',
+            ].join(' '),
+          },
+        },
+      ),
+    ).toEqual({
+      root: {
+        backgroundImage: [
+          'url(assets/firefox.png),',
+          'url(assets/bubbles.png),',
+          'linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0))',
+        ].join(' '),
+      },
+    });
+  });
 });

packages/babel-preset/src/assets/normalizeStyleRules.ts

@@ -1,5 +1,7 @@
 import { GriffelStyle } from '@griffel/core';
-import { parseStringWithUrl } from './parseStringWithUrl';
+import { tokenize } from 'stylis';
+
+import { isAssetUrl } from './isAssetUrl';
 
 /**
  * Linaria v3 emits relative paths for assets, we normalize these paths to be relative from the project root to be the
@@ -22,16 +24,19 @@ export function normalizeStyleRule(
     return ruleValue;
   }
 
-  const result = parseStringWithUrl(ruleValue);
-  // Quotes in URL are optional, so we can also normalize them
-  // https://www.w3.org/TR/CSS2/syndata.html#value-def-uri
-  const url = result.url.replace(/['|"](.+)['|"]/, '$1');
+  return tokenize(ruleValue).reduce((result, token, index, array) => {
+    if (token === 'url') {
+      // Quotes in URL are optional, so we can also normalize them
+      // https://www.w3.org/TR/CSS2/syndata.html#value-def-uri
+      const url = array[index + 1].replace(/['|"](.+)['|"]/, '$1').slice(1, -1);
 
-  if (url.startsWith('data:')) {
-    return `${result.prefix}${url}${result.suffix}`;
-  }
+      if (isAssetUrl(url)) {
+        array[index + 1] = `(${normalizeAssetPath(path, projectRoot, filename, url)})`;
+      }
+    }
 
-  return `${result.prefix}${normalizeAssetPath(path, projectRoot, filename, url)}${result.suffix}`;
+    return result + token;
+  }, '');
 }
 
 export function normalizeStyleRules(

packages/babel-preset/src/assets/replaceAssetsWithImports.ts

@@ -1,8 +1,9 @@
 import { NodePath, traverse, types as t } from '@babel/core';
 import * as path from 'path';
+import { tokenize } from 'stylis';
 
 import { absolutePathToRelative } from './absolutePathToRelative';
-import { parseStringWithUrl } from './parseStringWithUrl';
+import { isAssetUrl } from './isAssetUrl';
 
 /**
  * Replaces assets used in styles with imports and template literals.
@@ -29,6 +30,39 @@ export function replaceAssetsWithImports(
     return assetIdentifiers.get(assetPath) as t.Identifier;
   }
 
+  function buildTemplateLiteralFromValue(value: string): t.TemplateLiteral {
+    const tokens = tokenize(value);
+
+    const quasis: t.TemplateElement[] = [];
+    const expressions: t.Identifier[] = [];
+
+    let acc = '';
+
+    for (let i = 0, l = tokens.length; i < l; i++) {
+      for (; i < l; i++) {
+        acc += tokens[i];
+
+        if (tokens[i] === 'url') {
+          const url = tokens[i + 1].slice(1, -1);
+
+          if (isAssetUrl(url)) {
+            quasis.push(t.templateElement({ raw: acc + '(' }, false));
+            expressions.push(getAssetIdentifier(url));
+
+            acc = ')';
+            i++;
+
+            break;
+          }
+        }
+      }
+    }
+
+    quasis.push(t.templateElement({ raw: acc }, true));
+
+    return t.templateLiteral(quasis, expressions);
+  }
+
   traverse(
     pathToUpdate.node,
     {
@@ -39,15 +73,7 @@ export function replaceAssetsWithImports(
           return;
         }
 
-        const result = parseStringWithUrl(value);
-        const assetIdentifier = getAssetIdentifier(result.url);
-
-        const templateLiteral = t.templateLiteral(
-          [t.templateElement({ raw: result.prefix }, false), t.templateElement({ raw: result.suffix }, true)],
-          [assetIdentifier],
-        );
-
-        literalPath.replaceWith(templateLiteral);
+        literalPath.replaceWith(buildTemplateLiteralFromValue(value));
       },
     },
     programPath.scope,

packages/babel-preset/src/transformPlugin.test.ts

@@ -35,11 +35,6 @@ pluginTester({
     // Fixtures
     //
     //
-    {
-      title: 'assets import handling',
-      fixture: path.resolve(fixturesDir, 'assets', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'assets', 'output.ts'),
-    },
     {
       title: 'duplicated imports',
       fixture: path.resolve(fixturesDir, 'duplicated-imports', 'code.ts'),
@@ -59,6 +54,25 @@ pluginTester({
       outputFixture: path.resolve(fixturesDir, 'non-existing-module-call', 'output.ts'),
     },
 
+    // Assets
+    //
+    //
+    {
+      title: 'assets: import handling',
+      fixture: path.resolve(fixturesDir, 'assets', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'assets', 'output.ts'),
+    },
+    {
+      title: 'assets: multiple url()',
+      fixture: path.resolve(fixturesDir, 'assets-multiple-declarations', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'assets-multiple-declarations', 'output.ts'),
+    },
+    {
+      title: 'assets: url() without imports',
+      fixture: path.resolve(fixturesDir, 'assets-urls', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'assets-urls', 'output.ts'),
+    },
+
     // Evaluation
     //
     //

packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/code.ts

@@ -0,0 +1,14 @@
+import { __styles } from '@griffel/react';
+import _asset from './blank.jpg';
+import _asset2 from './empty.jpg';
+
+export const useStyles = __styles(
+  {
+    root: {
+      Bcmaq0h: 'fp00rh9',
+    },
+  },
+  {
+    d: [`.fp00rh9{background-image:url(${_asset}),url(${_asset2});}`],
+  },
+);

packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/fs.json

@@ -0,0 +1 @@
+["blank.jpg", "bundle.js", "empty.jpg", "griffel.css"]

packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.css

@@ -0,0 +1,3 @@
+.fp00rh9 {
+  background-image: url(blank.jpg), url(empty.jpg);
+}

packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts

@@ -0,0 +1,8 @@
+import { __styles, __css } from '@griffel/react';
+export const useStyles = __css({
+  root: {
+    Bcmaq0h: 'fp00rh9',
+  },
+});
+
+import 'griffel.css!=!../../../virtual-loader/index.js!../../../virtual-loader/griffel.css?style=.fp00rh9%7Bbackground-image%3Aurl(..%2F__fixtures__%2Fwebpack%2Fassets-multiple%2Fblank.jpg)%2Curl(..%2F__fixtures__%2Fwebpack%2Fassets-multiple%2Fempty.jpg)%3B%7D';

packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts

@@ -224,6 +224,7 @@ describe('webpackLoader', () => {
 
   // Assets
   testFixture('assets');
+  testFixture('assets-multiple');
   testFixture('reset-assets');
 
   // Custom filenames in mini-css-extract-plugin