[Next] Allow customisation of the styled system import

packages/cli/src/utils/park-ui-config.ts

@@ -7,6 +7,11 @@ import { FileError, ParkUIConfigInvalid, ParkUIConfigNotFound } from './errors'
 
 const ConfigSchema = Schema.Struct({
   framework: Schema.Literal('react', 'solid', 'svelte', 'vue'),
+  imports: Schema.optional(
+    Schema.Struct({
+      'styled-system-base': Schema.optional(Schema.String),
+    }),
+  ),
   paths: Schema.Struct({
     components: Schema.String,
     theme: Schema.String,

packages/cli/src/utils/registry-item.ts

@@ -23,8 +23,17 @@ const saveFiles = (files: RegistryFile[] = []) =>
       Effect.forEach(files, (file) =>
         Effect.all([
           Effect.tryPromise({
-            try: () =>
-              outputFile(
+            try: () => {
+              // Replace styled-system imports if configured
+              let content = file.content
+              if (config.imports?.['styled-system-base']) {
+                content = content.replace(
+                  /from ['"]styled-system\//g,
+                  `from '${config.imports['styled-system-base']}/`,
+                )
+              }
+
+              return outputFile(
                 Match.value(file).pipe(
                   Match.when({ type: 'component' }, ({ fileName }) =>
                     join(config.paths.components, fileName),
@@ -37,8 +46,9 @@ const saveFiles = (files: RegistryFile[] = []) =>
                   ),
                   Match.orElse(() => file.fileName),
                 ),
-                file.content,
-              ),
+                content,
+              )
+            },
             catch: () => FileError(file.fileName),
           }),
 

website/public/schema/park-ui-config.json

@@ -13,6 +13,14 @@
       "type": "string",
       "enum": ["react", "solid", "vue", "svelte"]
     },
+    "imports": {
+      "type": "object",
+      "properties": {
+        "styled-system-base": {
+          "type": "string"
+        }
+      }
+    },
     "paths": {
       "type": "object",
       "required": ["components", "theme"],

website/src/content/docs/installation.mdx

@@ -66,4 +66,21 @@ export default function Home() {
 
 That's it! Happy hacking! ✌️
 </Step>
-</Steps>
+</Steps>
+
+## Additional configuration
+
+If you need to customise the import path for styled-system because of TypeScript configuration, you can do so by updating the `park-ui.config.json` file.
+
+```json
+{
+  "framework": "react",
+  "paths": {
+    "components": "./src/components/ui",
+    "theme": "./src/theme"
+  },
+  "imports": {
+    "styled-system-base": "./app/styled-system"
+  }
+}
+```