fix: asset url handling in CSS format

amzn · Apr 11, 2024 · e761db1 · e761db1
1 parent 47face0
commit e761db1
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 9 deletions.
diff --git a/.changeset/tender-tips-breathe.md b/.changeset/tender-tips-breathe.md
@@ -0,0 +1,5 @@
+---
+'style-dictionary': major
+---
+
+BREAKING: no longer wraps tokens of type asset in double quotes. Rather, we added a transform `asset/url` that will wrap such tokens inside `url("")` statements, this transform is applied to transformGroups scss, css and less.
diff --git a/__tests__/common/transforms.test.js b/__tests__/common/transforms.test.js
@@ -995,6 +995,33 @@ describe('common', () => {
       });
     });
 
+    describe('asset/url', () => {
+      it('should work', () => {
+        const value = transforms['asset/url'].transformer(
+          {
+            value: 'https://example.com',
+          },
+          {},
+          {},
+        );
+        expect(value).to.equal('url("https://example.com")');
+      });
+
+      it('should escape double quotes', () => {
+        const value = transforms['asset/url'].transformer(
+          {
+            value:
+              'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="90" height="45"%3E%3Cpath d="M10 10h60" stroke="%2300F" stroke-width="5"/%3E%3Cpath d="M10 20h60" stroke="%230F0" stroke-width="5"/%3E%3Cpath d="M10 30h60" stroke="red" stroke-width="5"/%3E%3C/svg%3E"',
+          },
+          {},
+          {},
+        );
+        expect(value).to.equal(
+          'url("data:image/svg+xml,%3Csvg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"90\\" height=\\"45\\"%3E%3Cpath d=\\"M10 10h60\\" stroke=\\"%2300F\\" stroke-width=\\"5\\"/%3E%3Cpath d=\\"M10 20h60\\" stroke=\\"%230F0\\" stroke-width=\\"5\\"/%3E%3Cpath d=\\"M10 30h60\\" stroke=\\"red\\" stroke-width=\\"5\\"/%3E%3C/svg%3E\\"")',
+        );
+      });
+    });
+
     describe('asset/objC/literal', () => {
       it('should work', () => {
         const value = transforms['asset/objC/literal'].transformer(

diff --git a/__tests__/formats/__snapshots__/scssMaps.test.snap.js b/__tests__/formats/__snapshots__/scssMaps.test.snap.js
@@ -14,7 +14,7 @@ $tokens: (
   // comment
   'color-base-red': #ff0000,
   'color-white': #ffffff,
-  'asset-icon-book': "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItYm9vayI+PHBhdGggZD0iTTQgMTkuNUEyLjUgMi41IDAgMCAxIDYuNSAxN0gyMCI+PC9wYXRoPjxwYXRoIGQ9Ik02LjUgMkgyMHYyMEg2LjVBMi41IDIuNSAwIDAgMSA0IDE5LjV2LTE1QTIuNSAyLjUgMCAwIDEgNi41IDJ6Ij48L3BhdGg+PC9zdmc+"
+  'asset-icon-book': url("data:image/png;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItYm9vayI+PHBhdGggZD0iTTQgMTkuNUEyLjUgMi41IDAgMCAxIDYuNSAxN0gyMCI+PC9wYXRoPjxwYXRoIGQ9Ik02LjUgMkgyMHYyMEg2LjVBMi41IDIuNSAwIDAgMSA0IDE5LjV2LTE1QTIuNSAyLjUgMCAwIDEgNi41IDJ6Ij48L3BhdGg+PC9zdmc+")
 );`;
 /* end snapshot scss/map-flat snapshot */
 
@@ -29,7 +29,7 @@ $size-font-small: 12rem !default;
 $size-font-large: 18rem !default;
 $color-base-red: #ff0000 !default; // comment
 $color-white: #ffffff !default;
-$asset-icon-book: "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItYm9vayI+PHBhdGggZD0iTTQgMTkuNUEyLjUgMi41IDAgMCAxIDYuNSAxN0gyMCI+PC9wYXRoPjxwYXRoIGQ9Ik02LjUgMkgyMHYyMEg2LjVBMi41IDIuNSAwIDAgMSA0IDE5LjV2LTE1QTIuNSAyLjUgMCAwIDEgNi41IDJ6Ij48L3BhdGg+PC9zdmc+" !default;
+$asset-icon-book: url("data:image/png;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItYm9vayI+PHBhdGggZD0iTTQgMTkuNUEyLjUgMi41IDAgMCAxIDYuNSAxN0gyMCI+PC9wYXRoPjxwYXRoIGQ9Ik02LjUgMkgyMHYyMEg2LjVBMi41IDIuNSAwIDAgMSA0IDE5LjV2LTE1QTIuNSAyLjUgMCAwIDEgNi41IDJ6Ij48L3BhdGg+PC9zdmc+") !default;
 
 $tokens: (
   'size': (

diff --git a/__tests__/formats/scssMaps.test.js b/__tests__/formats/scssMaps.test.js
@@ -63,7 +63,7 @@ const tokens = {
     icon: {
       book: {
         value:
-          'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItYm9vayI+PHBhdGggZD0iTTQgMTkuNUEyLjUgMi41IDAgMCAxIDYuNSAxN0gyMCI+PC9wYXRoPjxwYXRoIGQ9Ik02LjUgMkgyMHYyMEg2LjVBMi41IDIuNSAwIDAgMSA0IDE5LjV2LTE1QTIuNSAyLjUgMCAwIDEgNi41IDJ6Ij48L3BhdGg+PC9zdmc+',
+          'url("data:image/png;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItYm9vayI+PHBhdGggZD0iTTQgMTkuNUEyLjUgMi41IDAgMCAxIDYuNSAxN0gyMCI+PC9wYXRoPjxwYXRoIGQ9Ik02LjUgMkgyMHYyMEg2LjVBMi41IDIuNSAwIDAgMSA0IDE5LjV2LTE1QTIuNSAyLjUgMCAwIDEgNi41IDJ6Ij48L3BhdGg+PC9zdmc+")',
         type: 'asset',
         original: {
           value: '__tests__/__assets/icons/book.svg',

diff --git a/docs/src/content/docs/reference/Hooks/Transform Groups/predefined.md b/docs/src/content/docs/reference/Hooks/Transform Groups/predefined.md
@@ -39,6 +39,7 @@ Transforms:
 [html/icon](/reference/hooks/transforms/predefined#htmlicon)
 [size/rem](/reference/hooks/transforms/predefined#sizerem)
 [color/css](/reference/hooks/transforms/predefined#colorcss)
+[asset/url](/reference/hooks/transforms/predefined#asseturl)
 
 ---
 
@@ -52,6 +53,7 @@ Transforms:
 [html/icon](/reference/hooks/transforms/predefined#htmlicon)
 [size/rem](/reference/hooks/transforms/predefined#sizerem)
 [color/css](/reference/hooks/transforms/predefined#colorcss)
+[asset/url](/reference/hooks/transforms/predefined#asseturl)
 
 ---
 
@@ -65,6 +67,7 @@ Transforms:
 [html/icon](/reference/hooks/transforms/predefined#htmlicon)
 [size/rem](/reference/hooks/transforms/predefined#sizerem)
 [color/hex](/reference/hooks/transforms/predefined#colorhex)
+[asset/url](/reference/hooks/transforms/predefined#asseturl)
 
 ---
 

diff --git a/docs/src/content/docs/reference/Hooks/Transforms/predefined.md b/docs/src/content/docs/reference/Hooks/Transforms/predefined.md
@@ -516,6 +516,18 @@ Assumes a time in miliseconds and transforms it into a decimal
 
 ---
 
+### asset/url
+
+Wraps the value in a [CSS `url()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/url)
+
+```js
+// Matches: token.type === 'asset'
+// Returns:
+url('https://www.example.com/style.css');
+```
+
+---
+
 ### asset/base64
 
 Wraps the value in a double-quoted string and prepends an '@' to make a string literal.

diff --git a/docs/src/content/docs/reference/Utils/references.md b/docs/src/content/docs/reference/Utils/references.md
@@ -100,7 +100,7 @@ getReferences('solid {spacing.2} {colors.black}', sd.tokens, { usesDtcg: true })
 :::note
 You can pass a third `options` argument where you can pass some configuration options for how references are resolved
 Most notable option for public usage is `usesDtcg`, if set to true, the `resolveReferences` utility will assume DTCG syntax (`$value` props)
-:::)
+:::
 
 ### Complicated example
 

diff --git a/docs/src/content/docs/version-4/migration.md b/docs/src/content/docs/version-4/migration.md
@@ -319,6 +319,13 @@ you can now also customize the verbosity of the logs and silence warnings and su
 }
 ```
 
+## Assets in CSS
+
+We no longer wrap tokens of type `asset` in double quotes.
+Rather, we added a transform `asset/url` that will wrap such tokens inside `url("")` statements, this transform is applied to transformGroups `scss`, `css` and `less`.
+
+You may need to update your custom transforms if you were doing this transformation on your end, since it's now being done by default in those transformGroups.
+
 ## Removed Deprecated features
 
 - `templates` and `registerTemplate`, use `formats` and `registerFormat` instead

diff --git a/lib/common/formatHelpers/createPropertyFormatter.js b/lib/common/formatHelpers/createPropertyFormatter.js
@@ -228,7 +228,7 @@ export default function createPropertyFormatter({
       });
     }
 
-    to_ret_token += token.type === 'asset' ? `"${value}"` : value;
+    to_ret_token += value;
 
     const themeable_token = typeof token.themeable === 'boolean' ? token.themeable : themeable;
     if (format === 'sass' && themeable_token) {

diff --git a/lib/common/templates/scss/map-flat.template.js b/lib/common/templates/scss/map-flat.template.js
@@ -23,7 +23,7 @@ export default `<%
             line += '  // ' + token.comment + '\\n';
         }
         const value = options.usesDtcg ? token.$value : token.value;
-        line += '  \\'' + token.name + '\\': ' + (token.type === 'asset' ? '"' + value + '"' : value)
+        line += '  \\'' + token.name + '\\': ' + value;
         return line;
     }).join(',\\n');
     output += '\\n);';

diff --git a/lib/common/transformGroups.js b/lib/common/transformGroups.js
@@ -52,10 +52,19 @@ export default {
    * [html/icon](transforms.md#htmlicon)
    * [size/rem](transforms.md#sizerem)
    * [color/css](transforms.md#colorcss)
+   * [asset/url](transforms.md#asset/url)
    *
    * @memberof TransformGroups
    */
-  scss: ['attribute/cti', 'name/kebab', 'time/seconds', 'html/icon', 'size/rem', 'color/css'],
+  scss: [
+    'attribute/cti',
+    'name/kebab',
+    'time/seconds',
+    'html/icon',
+    'size/rem',
+    'color/css',
+    'asset/url',
+  ],
 
   /**
    * Transforms:
@@ -66,10 +75,19 @@ export default {
    * [html/icon](transforms.md#htmlicon)
    * [size/rem](transforms.md#sizerem)
    * [color/css](transforms.md#colorcss)
+   * [asset/url](transforms.md#asset/url)
    *
    * @memberof TransformGroups
    */
-  css: ['attribute/cti', 'name/kebab', 'time/seconds', 'html/icon', 'size/rem', 'color/css'],
+  css: [
+    'attribute/cti',
+    'name/kebab',
+    'time/seconds',
+    'html/icon',
+    'size/rem',
+    'color/css',
+    'asset/url',
+  ],
 
   /**
    * Transforms:
@@ -80,10 +98,19 @@ export default {
    * [html/icon](transforms.md#htmlicon)
    * [size/rem](transforms.md#sizerem)
    * [color/hex](transforms.md#colorhex)
+   * [asset/url](transforms.md#asset/url)
    *
    * @memberof TransformGroups
    */
-  less: ['attribute/cti', 'name/kebab', 'time/seconds', 'html/icon', 'size/rem', 'color/hex'],
+  less: [
+    'attribute/cti',
+    'name/kebab',
+    'time/seconds',
+    'html/icon',
+    'size/rem',
+    'color/hex',
+    'asset/url',
+  ],
 
   /**
    * Transforms:

diff --git a/lib/common/transforms.js b/lib/common/transforms.js
@@ -1015,6 +1015,25 @@ export default {
     },
   },
 
+  /**
+   * Wraps the value in a CSS url() function https://developer.mozilla.org/en-US/docs/Web/CSS/url
+   *
+   * ```js
+   * // Matches: token.type === 'asset'
+   * // Returns:
+   * url("https://www.example.com/style.css")
+   * ```
+   *
+   * @memberof Transforms
+   */
+  'asset/url': {
+    type: 'value',
+    matcher: isAsset,
+    transformer: function (token, _, options) {
+      return `url("${(options.usesDtcg ? token.$value : token.value).replace(/"/g, `\\"`)}")`;
+    },
+  },
+
   /**
    * Wraps the value in a double-quoted string and prepends an '@' to make a string literal.
    *