feat: support custom global style (#92)

* feat: support custom global style

* chore: optimize runtime code import

* chore: add global style doc

Author: sanyuan0704

docs/.island/config.ts

@@ -126,6 +126,10 @@ function getSidebar(lang: 'zh' | 'en') {
           {
             text: getText('静态资源', 'Static Assets'),
             link: getLink('/guide/static-assets')
+          },
+          {
+            text: getText('添加全局样式', 'Add Global Styles'),
+            link: getLink('/guide/custom-global-style')
           }
         ]
       },

docs/.island/styles/index.css

@@ -0,0 +1,7 @@
+/* Test for custom global style */
+/* :root {
+  --island-c-brand: #5c6ac4;
+  --island-c-brand-light: #7c87cf;
+  --island-c-brand-dark: #4b5abf;
+  --island-c-brand-darker: #3a49ba;
+} */

docs/en/guide/custom-global-style.md

@@ -0,0 +1,25 @@
+# Add Global Styles
+
+In some cases, you may need to add some global styles based on the theme UI. Island.js provides a convention directory that allows you to add global styles without modifying the theme.
+
+## Usage
+
+You can create a `styles` folder in the `.island` directory, for example:
+
+```bash
+.island
+├── config.ts
+└── styles
+    └── index.css
+```
+
+Then add the following code:
+
+```css
+/* styles/index.css */
+:root {
+  --island-c-brand: #f00;
+}
+```
+
+Island.js will automatically collect the global styles you defined in `styles/index.css`.

docs/zh/guide/custom-global-style.md

@@ -0,0 +1,25 @@
+# 自定义全局样式
+
+某些场景下，你可能需要在主题 UI 的基础上添加一些全局样式，Island.js 提供了一个约定式目录让你能够在不修改主题的情况下添加全局样式。
+
+## 使用方法
+
+你可以在 `.island` 目录中创建一个 `styles` 文件夹，比如：
+
+```bash
+.island
+├── config.ts
+└── styles
+    └── index.css
+```
+
+然后可以添加以下代码：
+
+```css
+/* styles/index.css */
+:root {
+  --island-c-brand: #f00;
+}
+```
+
+这样 Island.js 会自动收集你在 `styles/index.css` 中定义的全局样式。

src/node/constants/index.ts

@@ -57,3 +57,5 @@ export const ISLAND_CLI_PATH = join(CLI_BUNDLE_OUTDIR, 'cli.js');
 export const VENDOR_PATH = join(PACKAGE_ROOT_PATH, 'vendors');
 
 export const DIRECTIVE_TYPES: string[] = ['tip', 'warning', 'danger', 'info'];
+
+export const CUSTOM_GLOBAL_STYLE = 'virtual:custom-styles';

src/node/plugin-island/custom-style.ts

@@ -0,0 +1,24 @@
+import { CUSTOM_GLOBAL_STYLE } from '../../node/constants';
+import { Plugin } from 'vite';
+import { join } from 'path';
+import { pathExists } from 'fs-extra';
+import { SiteConfig } from 'shared/types';
+
+export function pluginCustomStyle(config: SiteConfig): Plugin {
+  return {
+    name: 'island:custom-style',
+    resolveId(id) {
+      if (id === CUSTOM_GLOBAL_STYLE) {
+        return `\0${CUSTOM_GLOBAL_STYLE}`;
+      }
+    },
+    async load(id) {
+      const stylePath = join(config.root!, '.island', 'styles', 'index.css');
+      const styleExists = await pathExists(stylePath);
+
+      if (id === `\0${CUSTOM_GLOBAL_STYLE}`) {
+        return styleExists ? `import '${stylePath}';` : '';
+      }
+    }
+  };
+}

src/node/plugin-island/index.ts

@@ -1,6 +1,7 @@
 import { SiteConfig } from 'shared/types';
 import type { Plugin } from 'vite';
 import { pluginConfig } from './config';
+import { pluginCustomStyle } from './custom-style';
 import { pluginIndexHtml } from './indexHtml';
 import { pluginIslandTransform } from './islandTransform';
 import { pluginSiteData } from './siteDataPlugin';
@@ -14,6 +15,7 @@ export function pluginIsland(
     pluginSiteData(config),
     pluginConfig(config, restartServer),
     pluginIndexHtml(config),
-    pluginIslandTransform(config, isServer)
+    pluginIslandTransform(config, isServer),
+    pluginCustomStyle(config)
   ];
 }

src/runtime/client-entry.tsx

@@ -1,15 +1,5 @@
-import { ComponentType } from 'react';
 import { setupEffects } from 'island/theme';
-
-// Type shim for window.ISLANDS
-declare global {
-  interface Window {
-    ISLANDS: Record<string, ComponentType<unknown>>;
-    // The state for island.
-    ISLAND_PROPS: Record<string, unknown[]>;
-    ISLAND_PAGE_DATA: unknown;
-  }
-}
+import { ComponentType } from 'react';
 
 async function renderInBrowser() {
   const containerEl = document.getElementById('root');

src/runtime/hooks.ts

@@ -1,9 +1,19 @@
-import { createContext, useContext } from 'react';
+import { ComponentType, createContext, useContext } from 'react';
 import { PageData } from '../shared/types';
 import { inBrowser } from '../shared/utils';
 import { routes } from 'virtual:routes';
 import { Route } from 'node/plugin-routes';
 
+// Type shim for window.ISLANDS
+declare global {
+  interface Window {
+    ISLANDS: Record<string, ComponentType<unknown>>;
+    // The state for island.
+    ISLAND_PROPS: Record<string, unknown[]>;
+    ISLAND_PAGE_DATA: unknown;
+  }
+}
+
 export const DataContext = createContext({
   data: inBrowser() ? window?.ISLAND_PAGE_DATA : null,
   // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars

src/shared/types/type.d.ts

@@ -59,4 +59,4 @@ declare module '*.svg' {
     React.SVGProps<SVGSVGElement> & AttributifyAttributes
   >;
   export = ReactComponent;
-}
+}

src/theme-default/index.ts

@@ -2,6 +2,7 @@ import './styles/base.css';
 import './styles/vars.css';
 import './styles/doc.css';
 import 'uno.css';
+import 'virtual:custom-styles';
 import { NotFoundLayout } from './layout/NotFountLayout/index';
 import { Layout } from './layout/Layout';
 import { HomeLayout } from './layout/HomeLayout/index';

src/theme-default/logic/useActive.ts

@@ -1,6 +1,6 @@
 import { DefaultTheme } from 'shared/types';
 import { addLeadingSlash, removeTrailingSlash } from './index';
-import { usePageData } from '../../runtime';
+import { usePageData } from 'island/client';
 import { useLocation } from 'react-router-dom';
 
 export function useLocaleSiteData(): DefaultTheme.LocaleConfig {