From 2b030dda125439742cef84dcb7cbc5464deb6ba6 Mon Sep 17 00:00:00 2001
From: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
Date: Tue, 14 Nov 2023 11:50:03 +0100
Subject: [PATCH] feat: move css to different package for size reduction
 (#2168)

PR based on https://github.com/software-mansion/react-native-svg/pull/1452 extracting `css` related components to different package to reduce the size of the package.

***THIS IS A BREAKING CHANGE***. From now on, you should import
```
  SvgCss,
  SvgCssUri,
  SvgWithCss,
  SvgWithCssUri,
  inlineStyles,
  LocalSvg,
  WithLocalSvg,
  loadLocalRawResource,
  ```
 from `react-native-svg/css` package instead.
---
 .eslintrc.js                  |  4 ++
 Example/metro.config.js       |  1 -
 FabricExample/metro.config.js |  1 -
 TestsExample/metro.config.js  |  1 -
 TestsExample/src/Test1813.tsx | 69 ++++++++++++++---------------------
 USAGE.md                      |  4 +-
 __tests__/css.test.tsx        |  3 +-
 css/package.json              |  6 +++
 package.json                  |  1 +
 src/ReactNativeSVG.ts         | 61 ++++++++++++++++++++++---------
 src/{ => css}/LocalSvg.tsx    |  7 ++--
 src/{ => css}/css.tsx         |  4 +-
 src/css/index.tsx             | 20 ++++++++++
 src/deprecated.tsx            | 37 +++++++++++++++++++
 tsconfig.json                 |  4 ++
 15 files changed, 152 insertions(+), 71 deletions(-)
 create mode 100644 css/package.json
 rename src/{ => css}/LocalSvg.tsx (93%)
 rename src/{ => css}/css.tsx (99%)
 create mode 100644 src/css/index.tsx
 create mode 100644 src/deprecated.tsx

diff --git a/.eslintrc.js b/.eslintrc.js
index 8886877a..c7c32195 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,6 +12,10 @@ module.exports = {
     'react-native/react-native': true,
   },
   settings: {
+    'import/core-modules': [
+      'react-native-svg',
+      'react-native-svg/css',
+    ],
     'import/resolver': {
       'babel-module': {
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
diff --git a/Example/metro.config.js b/Example/metro.config.js
index 7efd0fe1..9b8b551b 100644
--- a/Example/metro.config.js
+++ b/Example/metro.config.js
@@ -57,7 +57,6 @@ const config = {
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
-        inlineRequires: true,
       },
     }),
   },
diff --git a/FabricExample/metro.config.js b/FabricExample/metro.config.js
index 6bb48e13..74235f11 100644
--- a/FabricExample/metro.config.js
+++ b/FabricExample/metro.config.js
@@ -44,7 +44,6 @@ const config = {
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
-        inlineRequires: true,
       },
     }),
   },
diff --git a/TestsExample/metro.config.js b/TestsExample/metro.config.js
index 2b936d1c..8891b995 100644
--- a/TestsExample/metro.config.js
+++ b/TestsExample/metro.config.js
@@ -40,7 +40,6 @@ const config = {
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
-        inlineRequires: true,
       },
     }),
   },
diff --git a/TestsExample/src/Test1813.tsx b/TestsExample/src/Test1813.tsx
index 0b7907d9..b70e4474 100644
--- a/TestsExample/src/Test1813.tsx
+++ b/TestsExample/src/Test1813.tsx
@@ -1,9 +1,18 @@
 import React from 'react';
-import { SvgFromUri, SvgFromXml, SvgUri, SvgXml, SvgCss, SvgCssUri, SvgWithCss, SvgWithCssUri, WithLocalSvg, LocalSvg } from 'react-native-svg';
+import {SvgFromUri, SvgFromXml, SvgUri, SvgXml} from 'react-native-svg';
+import {
+  SvgCss,
+  SvgCssUri,
+  SvgWithCss,
+  SvgWithCssUri,
+  WithLocalSvg,
+  LocalSvg,
+} from 'react-native-svg/css';
 
 const asset = require('../assets/ruby.svg');
-const normalUri = "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg";
-const uriWithCss = "http://thenewcode.com/assets/svg/accessibility.svg";
+const normalUri =
+  'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg';
+const uriWithCss = 'http://thenewcode.com/assets/svg/accessibility.svg';
 const xml = `
   <svg width="32" height="32" viewBox="0 0 32 32">
     <path
@@ -39,7 +48,9 @@ const css = `
 `;
 
 export default () => {
-  const [uri, setUri] = React.useState('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/not_existing.svg')
+  const [uri, setUri] = React.useState(
+    'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/not_existing.svg',
+  );
 
   return (
     <>
@@ -49,54 +60,30 @@ export default () => {
         height="100"
         uri={uri}
       />
-    <SvgFromUri
-        onError={(error) => console.log(error)}
+      <SvgFromUri
+        onError={error => console.log(error)}
         width="100"
         height="100"
         uri={normalUri}
       />
-    <SvgFromXml
-        width="100"
-        height="100"
-        xml={xml}
-      />
-    <SvgXml
-        width="100"
-        height="100"
-        xml={xml}
-      />
-    <SvgCss
-        width="100"
-        height="100"
-        xml={css}
-      />
-    <SvgCssUri
-        onError={(error) => console.log(error)}
+      <SvgFromXml width="100" height="100" xml={xml} />
+      <SvgXml width="100" height="100" xml={xml} />
+      <SvgCss width="100" height="100" xml={css} />
+      <SvgCssUri
+        onError={error => console.log(error)}
         width="100"
         height="100"
         uri={uriWithCss}
       />
-    <SvgWithCss
-        width="100"
-        height="100"
-        xml={css}
-      />
-    <SvgWithCssUri
-        onError={(error) => console.log(error)}
+      <SvgWithCss width="100" height="100" xml={css} />
+      <SvgWithCssUri
+        onError={error => console.log(error)}
         width="100"
         height="100"
         uri={uriWithCss}
       />
-    <WithLocalSvg
-        width="100"
-        height="100"
-        asset={asset}
-      />
-    <LocalSvg
-        width="100"
-        height="100"
-        asset={asset}
-      />
+      <WithLocalSvg width="100" height="100" asset={asset} />
+      <LocalSvg width="100" height="100" asset={asset} />
     </>
   );
-}
+};
diff --git a/USAGE.md b/USAGE.md
index 074b18d6..fe244a27 100644
--- a/USAGE.md
+++ b/USAGE.md
@@ -91,7 +91,7 @@ If remote SVG file contains CSS in `<style>` element, use `SvgCssUri`:
 ```jsx
 import * as React from 'react';
 import { ActivityIndicator, View, StyleSheet } from 'react-native';
-import { SvgCssUri } from 'react-native-svg';
+import { SvgCssUri } from 'react-native-svg/css';
 export default function TestComponent() {
   const [loading, setLoading] = React.useState(true);
   const onError = (e: Error) => {
@@ -125,7 +125,7 @@ existing in a different way and `fallback` if you want to render another compone
 
 ```jsx
 import * as React from 'react';
-import { SvgUri } from 'react-native-svg';
+import { SvgUri } from 'react-native-svg/css';
 import { SvgFallback } from './components/SvgFallback';
 
 export default () => {
diff --git a/__tests__/css.test.tsx b/__tests__/css.test.tsx
index fc18662e..a2fd4a5b 100644
--- a/__tests__/css.test.tsx
+++ b/__tests__/css.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import renderer from 'react-test-renderer';
-import { SvgCss, parse, inlineStyles } from '../src/ReactNativeSVG';
+import { parse } from '../src/ReactNativeSVG';
+import { SvgCss, inlineStyles } from '../css';
 
 const xml = `<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
diff --git a/css/package.json b/css/package.json
new file mode 100644
index 00000000..f801298a
--- /dev/null
+++ b/css/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "../lib/commonjs/css/index",
+    "module": "../lib/module/css/index",
+    "react-native": "../src/css/index",
+    "types": "../lib/typescript/css/index"
+  }
\ No newline at end of file
diff --git a/package.json b/package.json
index 4fb60b8e..e85bf179 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "common",
     "lib",
     "src",
+    "css",
     "RNSVG.podspec",
     "!android/build",
     "windows",
diff --git a/src/ReactNativeSVG.ts b/src/ReactNativeSVG.ts
index 6b3dcbdd..00d67c9a 100644
--- a/src/ReactNativeSVG.ts
+++ b/src/ReactNativeSVG.ts
@@ -24,15 +24,27 @@ import Mask from './elements/Mask';
 import Marker from './elements/Marker';
 import ForeignObject from './elements/ForeignObject';
 
-import { parse, SvgAst, SvgFromUri, SvgFromXml, SvgUri, SvgXml } from './xml';
 import {
-  SvgCss,
-  SvgCssUri,
-  SvgWithCss,
-  SvgWithCssUri,
-  inlineStyles,
-} from './css';
-import { LocalSvg, WithLocalSvg, loadLocalRawResource } from './LocalSvg';
+  parse,
+  SvgAst,
+  SvgFromUri,
+  SvgFromXml,
+  SvgUri,
+  SvgXml,
+  camelCase,
+  err,
+  fetchText,
+  JsxAST,
+  Middleware,
+  Styles,
+  UriProps,
+  UriState,
+  XmlAST,
+  XmlProps,
+  XmlState,
+  AstProps,
+} from './xml';
+
 import {
   RNSVGCircle,
   RNSVGClipPath,
@@ -58,6 +70,17 @@ import {
   RNSVGUse,
 } from './fabric';
 
+export {
+  SvgCss,
+  SvgCssUri,
+  SvgWithCss,
+  SvgWithCssUri,
+  inlineStyles,
+  LocalSvg,
+  WithLocalSvg,
+  loadLocalRawResource,
+} from './deprecated';
+
 export type { RectProps } from './elements/Rect';
 export type { CircleProps } from './elements/Circle';
 export type { EllipseProps } from './elements/Ellipse';
@@ -81,8 +104,6 @@ export type { PatternProps } from './elements/Pattern';
 export type { MaskProps } from './elements/Mask';
 export type { MarkerProps } from './elements/Marker';
 export type { ForeignObjectProps } from './elements/ForeignObject';
-export type { LocalProps } from './LocalSvg';
-export type { UriProps, XmlProps, AstProps } from './xml';
 
 export * from './lib/extract/types';
 
@@ -117,14 +138,18 @@ export {
   SvgFromXml,
   SvgUri,
   SvgXml,
-  SvgCss,
-  SvgCssUri,
-  SvgWithCss,
-  SvgWithCssUri,
-  inlineStyles,
-  LocalSvg,
-  WithLocalSvg,
-  loadLocalRawResource,
+  camelCase,
+  err,
+  fetchText,
+  JsxAST,
+  Middleware,
+  Styles,
+  UriProps,
+  UriState,
+  XmlAST,
+  XmlProps,
+  XmlState,
+  AstProps,
   Shape,
   RNSVGMarker,
   RNSVGMask,
diff --git a/src/LocalSvg.tsx b/src/css/LocalSvg.tsx
similarity index 93%
rename from src/LocalSvg.tsx
rename to src/css/LocalSvg.tsx
index cee717f6..f5ba5631 100644
--- a/src/LocalSvg.tsx
+++ b/src/css/LocalSvg.tsx
@@ -3,10 +3,9 @@ import { useState, useEffect, Component } from 'react';
 import type { ImageSourcePropType } from 'react-native';
 import { Platform, Image } from 'react-native';
 
-import { fetchText } from './xml';
+import { fetchText } from 'react-native-svg';
 import { SvgCss, SvgWithCss } from './css';
-import type { SvgProps } from './elements/Svg';
-import type { Spec } from './fabric/NativeSvgRenderableModule';
+import type { SvgProps } from 'react-native-svg';
 
 export function getUriFromSource(source: ImageSourcePropType) {
   const resolvedAssetSource = Image.resolveAssetSource(source);
@@ -24,7 +23,7 @@ export function isUriAnAndroidResourceIdentifier(uri?: string) {
 
 export async function loadAndroidRawResource(uri: string) {
   try {
-    const RNSVGRenderableModule: Spec =
+    const RNSVGRenderableModule: any =
       // neeeded for new arch
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       require('./fabric/NativeSvgRenderableModule').default;
diff --git a/src/css.tsx b/src/css/css.tsx
similarity index 99%
rename from src/css.tsx
rename to src/css/css.tsx
index aa6eb2e9..6ed5717b 100644
--- a/src/css.tsx
+++ b/src/css/css.tsx
@@ -9,8 +9,8 @@ import type {
   XmlAST,
   XmlProps,
   XmlState,
-} from './xml';
-import { camelCase, err, fetchText, parse, SvgAst } from './xml';
+} from 'react-native-svg';
+import { camelCase, err, fetchText, parse, SvgAst } from 'react-native-svg';
 import type {
   Atrule,
   AtrulePrelude,
diff --git a/src/css/index.tsx b/src/css/index.tsx
new file mode 100644
index 00000000..3b3bef88
--- /dev/null
+++ b/src/css/index.tsx
@@ -0,0 +1,20 @@
+import {
+  SvgCss,
+  SvgCssUri,
+  SvgWithCss,
+  SvgWithCssUri,
+  inlineStyles,
+} from './css';
+
+import { LocalSvg, WithLocalSvg, loadLocalRawResource } from './LocalSvg';
+
+export {
+  SvgCss,
+  SvgCssUri,
+  SvgWithCss,
+  SvgWithCssUri,
+  inlineStyles,
+  LocalSvg,
+  WithLocalSvg,
+  loadLocalRawResource,
+};
diff --git a/src/deprecated.tsx b/src/deprecated.tsx
new file mode 100644
index 00000000..ba2b91cc
--- /dev/null
+++ b/src/deprecated.tsx
@@ -0,0 +1,37 @@
+export function showErrorCSS(name: string, type: string): never {
+  throw Error(
+    `[react-native-svg] You are trying to import a ${type} \`${name}\` that has been moved to a sub-package. Change your import from \`react-native-svg\` to \`react-native-svg/css\`.`
+  );
+}
+
+export function SvgCss(): never {
+  showErrorCSS('SvgCss', 'component');
+}
+
+export function SvgCssUri(): never {
+  showErrorCSS('SvgCssUri', 'component');
+}
+
+export function SvgWithCss(): never {
+  showErrorCSS('SvgWithCss', 'component');
+}
+
+export function SvgWithCssUri(): never {
+  showErrorCSS('SvgWithCssUri', 'component');
+}
+
+export function inlineStyles(): never {
+  showErrorCSS('inlineStyles', 'function');
+}
+
+export function LocalSvg(): never {
+  showErrorCSS('LocalSvg', 'component');
+}
+
+export function WithLocalSvg(): never {
+  showErrorCSS('WithLocalSvg', 'component');
+}
+
+export function loadLocalRawResource(): never {
+  showErrorCSS('loadLocalRawResource', 'function');
+}
diff --git a/tsconfig.json b/tsconfig.json
index 82263334..ec7a29f6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,10 @@
   "compilerOptions": {
     "baseUrl": ".",
     "declaration": true,
+    "paths": {
+      "react-native-svg": ["./src"],
+      "react-native-svg/css": ["./src/css/index.tsx"],
+    },
     "preserveSymlinks": true,
     "target": "es6",
     "module": "ESNext",