fix: APP-2614 - Correctly bundle SVGs, fix external dependencies (#42)

CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   Introduce `@svgr/rollup` to correctly bundle SVGs
+
+### Removed
+
+-   Remove redundant `postcss` step and dependency
+-   Do not include `tailwindcss` configuration utilities into bundle
+
+### Changed
+
+-   Bundle `tslib` utilities into library by removing `importHelpers` TypeScript configuration
+
 ## [1.0.4] - 2023-11-09
 
 ### Fixed

package.json

@@ -42,6 +42,7 @@
   "author": "Aragon Association",
   "dependencies": {
     "@radix-ui/react-progress": "^1.0.3",
+    "@svgr/rollup": "^8.1.0",
     "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -91,7 +92,6 @@
     "prettier-plugin-organize-imports": "^3.2.3",
     "prettier-plugin-tailwindcss": "^0.5.4",
     "rollup": "^4.0.2",
-    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.9.2",
     "storybook": "^7.4.6",
     "ts-jest": "^29.1.1",

rollup.config.js

@@ -3,12 +3,13 @@ const images = require('@rollup/plugin-image');
 const { nodeResolve } = require('@rollup/plugin-node-resolve');
 const terser = require('@rollup/plugin-terser');
 const typescript = require('@rollup/plugin-typescript');
-const postcss = require('rollup-plugin-postcss');
 const { visualizer } = require('rollup-plugin-visualizer');
+const svgr = require('@svgr/rollup');
 
 const tsConfig = require('./tsconfig.json');
 const { outDir } = tsConfig.compilerOptions;
 
+const package = require('./package.json');
 const analyze = process.env.ANALYZE === 'true';
 
 module.exports = [
@@ -34,32 +35,32 @@ module.exports = [
                 plugins: [analyze ? visualizer({ filename: 'stats.cjs.html', open: true }) : undefined],
             },
         ],
-        external: [/node_modules/, 'tslib'],
+        external: Object.keys(package.dependencies),
         plugins: [
+            // Locate and resolve node modules
             nodeResolve(),
+
+            // Convert CommonJs modules to ES6
             commonjs(),
+
+            // Compile ts files and generate type declarations
             typescript({
                 compilerOptions: {
                     noEmit: false,
                     declaration: true,
-                    emitDeclarationOnly: true,
                     declarationDir: `${outDir}/types`,
                     outDir,
                 },
                 exclude: ['**/*.spec.tsx', '**/*.spec.ts', '**/*.test.tsx', '**/*.test.ts', '**/*.stories.tsx'],
             }),
 
-            postcss({
-                config: {
-                    path: './postcss.config.js',
-                },
-                extensions: ['.css'],
-                minimize: true,
-                inject: {
-                    insertAt: 'top',
-                },
-            }),
-            images({ include: ['**/*.png', '**/*.jpg', '**/*.svg'] }),
+            // Bundle png and jpg images
+            images({ include: ['**/*.png', '**/*.jpg'] }),
+
+            // Bundle svg files
+            svgr(),
+
+            // Generate a minified bundle
             terser(),
         ],
     },

src/styles/primitives/colors.mdx

@@ -2,15 +2,24 @@ import { Meta } from '@storybook/blocks';
 import { Figma } from '@storybook/addon-designs/blocks';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
-import { docsUtils } from '../../utils';
 
 <Meta title="Design Tokens/Primitive/Colors" />
 
+export const getColorConfig = (colorGroupName) => {
+    const shades = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+    const rootStyles = getComputedStyle(document.documentElement);
+
+    return shades
+        .map((shade) => ({ shade, value: rootStyles.getPropertyValue(`--ods-color-${colorGroupName}-${shade}`) }))
+        .filter((shade) => shade.value.trim() !== '');
+
+}
+
 export const ColorSwatch = ({ colorGroupName }) => {
     const [availableColors, setAvailableColors] = useState([]);
 
     useEffect(() => {
-        const colors = docsUtils.getColorConfig(colorGroupName);
+        const colors = getColorConfig(colorGroupName);
         setAvailableColors(colors);
     }, [colorGroupName]);
 

src/styles/primitives/spacing.mdx

@@ -1,19 +1,33 @@
 import { Meta } from '@storybook/blocks';
 import { Figma } from '@storybook/addon-designs/blocks';
+import resolveConfig from 'tailwindcss/resolveConfig';
 import classNames from 'classnames';
-
-import { docsUtils } from '../../utils';
+import tailwindConfig from '../../../tailwind.config';
 
 <Meta title="Design Tokens/Primitive/Spacing" />
 
+export const getSpacingConfig = () => {
+    const spacers = Object.entries(resolveConfig(tailwindConfig).theme?.spacing ?? {});
+    const spacerItems = spacers.map(([key, value]) => {
+        const parsedKey = parseFloat(key);
+        const pxSize = Number.isNaN(parsedKey) ? 1 : 4 * parsedKey;
+        const remSize = Number.isNaN(parsedKey) ? 1 : pxSize / 16;
+
+        return { key, px: pxSize, rem: remSize, value };
+    });
+
+    return spacerItems.sort((a, b) => a.px - b.px);
+
+};
+
 export const DisplayComponent = ({ name, value, sizePx, sizeRem }) => {
     return (
         <tr>
             <td className="border-b px-4 py-2">{name}</td>
             <td className="border-b px-4 py-2">{`${sizeRem}${sizeRem === 1 || sizeRem === 0 ? 'px' : 'rem'}`}</td>
             <td className="border-b px-4 py-2">{`${sizePx}px`}</td>
             <td className="border-b px-4 py-2">
-                <div style={{ width: value }} className="bg-cyan-300 h-6" />
+                <div style={{ width: value }} className="h-6 bg-primary-300" />
             </td>
         </tr>
     );
@@ -32,7 +46,7 @@ export const DisplayComponent = ({ name, value, sizePx, sizeRem }) => {
             </tr>
         </thead>
         <tbody>
-            {docsUtils.getSpacingConfig().map(({ key, px, rem, value }) => (
+            {getSpacingConfig().map(({ key, px, rem, value }) => (
                 <DisplayComponent key={key} name={key} sizePx={px} sizeRem={rem} value={value} />
             ))}
         </tbody>

src/utils/index.ts

@@ -1,3 +1,2 @@
-export * from './docsUtils';
 export * from './formatterUtils';
 export * from './responsiveUtils';

tsconfig.json

@@ -1,9 +1,8 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES5",
     "module": "esnext",
     "lib": ["dom", "esnext"],
-    "importHelpers": true,
     "outDir": "dist",
     "allowJs": true,
     "sourceMap": true,