@react-spectrum/parcel-transformer-s2-icon 1.0.1-nightly.5002 → 1.1.0

package/IconTransformer.js

@@ -38,30 +38,38 @@ module.exports = new Transformer({
                     onlyMatchedOnce: false,
                     removeMatchedSelectors: true
                   },
-                  cleanupIDs: {
-                    prefix
-                  },
                   convertPathData: {
                     makeArcs: false
                   }
                 }
-              },
-              removeAttrs: {
-                attrs: ['id', 'data.*'] // data attribute removal not working
+              }
+            },
+            {
+              name: 'prefixIds',
+              params: {
+                prefix
+              }
+            },
+            {
+              name: 'removeAttrs',
+              params: {
+                attrs: ['data.*']
               }
             }
           ]
         },
         replaceAttrValues: {
-          'var(--iconPrimary, #222)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`,
-          'var(--spectrum-global-color-gray-800, #292929)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`
+          'var(--iconPrimary, #222)': `var(--iconPrimary, light-dark(${tokens['gray-800'].sets.light.value}, ${tokens['gray-800'].sets.dark.value}))`,
+          'var(--iconPrimary, #222222)': `var(--iconPrimary, light-dark(${tokens['gray-800'].sets.light.value}, ${tokens['gray-800'].sets.dark.value}))`,
+          'var(--iconPrimary, #292929)': `var(--iconPrimary, light-dark(${tokens['gray-800'].sets.light.value}, ${tokens['gray-800'].sets.dark.value}))`,
+          'var(--spectrum-global-color-gray-800, #292929)': `var(--iconPrimary, light-dark(${tokens['gray-800'].sets.light.value}, ${tokens['gray-800'].sets.dark.value}))`
         },
         typescript: true,
+        ref: true,
         plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx']
       })
-    ).replace('export default SvgComponent;', '');
-    // will need to use svgr's templating to add ref support if we want that https://github.com/facebook/create-react-app/pull/5457
-    let newFile = template(asset, iconName, optimized);
+    ).replace('export default ForwardRef;', '');
+    let newFile = template(asset, optimized);
     return [{
       type: 'tsx',
       content: newFile,
@@ -72,61 +80,16 @@ module.exports = new Transformer({
   }
 });
 
-function template(asset, iconName, svg) {
-  let importName = iconName
-    .replace(/^S2_Icon_(.*?)_\d+(?:x\d+)?_N$/, '$1')
-    .replace(/^S2_(fill|lin)_(.+)_(.+_)?(\d+)$/, (m, name) => name[0].toUpperCase() + name.slice(1));
-  let iconRename = importName;
-  if (/^[0-9]/.test(importName)) {
-    iconRename = '_' + importName;
-  }
-  let context = asset.pipeline === 'illustration' ? 'IllustrationContext' : 'IconContext';
+function template(asset, svg) {
+  let normalizedPath = asset.filePath.replaceAll('\\', '/');
+  let fn = asset.pipeline === 'illustration' || normalizedPath.includes('@react-spectrum/s2/spectrum-illustrations') ? 'createIllustration' : 'createIcon';
   return (
-`
-import {IconProps, ${context}, IconContextValue} from '${asset.filePath.includes('@react-spectrum/s2') ? '~/src/Icon' : '@react-spectrum/s2'}';
-import {SVGProps, useRef} from 'react';
-import {useContextProps} from 'react-aria-components';
+`"use client";
+import {${fn}} from '${normalizedPath.includes('@react-spectrum/s2') ? '~/src/Icon' : '@react-spectrum/s2'}';
 
 ${svg.replace('import { SVGProps } from "react";', '')}
 
-export default function ${iconRename}(props: IconProps) {
-  let ref = useRef<SVGElement>(null);
-  let ctx;
-  // TODO: remove this default once we release RAC and use DEFAULT_SLOT.
-  [ctx, ref] = useContextProps({slot: props.slot || 'icon'} as IconContextValue, ref, ${context});
-  let {render, styles} = ctx;
-  let {
-    UNSAFE_className,
-    UNSAFE_style,
-    slot,
-    'aria-label': ariaLabel,
-    'aria-hidden': ariaHidden,
-    ...otherProps
-  } = props;
-
-  if (!ariaHidden) {
-    ariaHidden = undefined;
-  }
-
-  let svg = (
-    <SvgComponent
-      {...otherProps}
-      focusable={false}
-      aria-label={ariaLabel}
-      aria-hidden={ariaLabel ? (ariaHidden || undefined) : true}
-      role="img"
-      data-slot={slot}
-      className={(UNSAFE_className ?? '') + ' ' + (styles || '')}
-      style={UNSAFE_style} />
-  );
-
-  if (render) {
-    return render(svg);
-  }
-
-  return svg;
-}
-
+export default /*#__PURE__*/ ${fn}(ForwardRef);
 `
   );
 }

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "@react-spectrum/parcel-transformer-s2-icon",
-  "version": "1.0.1-nightly.5002+cfd890edf",
+  "version": "1.1.0",
   "main": "IconTransformer.js",
   "engines": {
-    "parcel": "2.0.0-dev.1599"
+    "parcel": "^2.0.0"
   },
   "dependencies": {
-    "@adobe/spectrum-tokens": "^13.0.0-beta.34",
-    "@parcel/plugin": "2.0.0-dev.1601"
+    "@adobe/spectrum-tokens": "14.0.0",
+    "@parcel/plugin": "^2.0.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "prettier": "^3.6.2"
+  },
+  "devDependencies": {
+    "prettier": "^3.3.3"
   },
   "rsp": {
     "type": "cli"
@@ -20,5 +27,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfd890edf73783cbea0b94316d69f4bdced5ed8a"
+  "gitHead": "a6999bdf494a2e9c0381a5881908328bdd22ddae"
 }