diff --git a/.changeset/kind-olives-cross.md b/.changeset/kind-olives-cross.md new file mode 100644 index 0000000..0475a08 --- /dev/null +++ b/.changeset/kind-olives-cross.md @@ -0,0 +1,12 @@ +--- +"@studiocms/ui": patch +--- + +Add option to disable global CSS injection and allow users to import the global css themselves. + +Basic Example of how to import: +```astro +--- +import "studiocms:ui/global-css"; +--- +``` diff --git a/.vscode/settings.json b/.vscode/settings.json index 5d642ce..6c3dc03 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -28,6 +28,7 @@ "themetoggle", "Thum", "tsconfigs", + "twoslash", "vite", "withstudiocms" ] diff --git a/docs/.gitignore b/docs/.gitignore index a966f22..9b18495 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -22,7 +22,7 @@ pnpm-debug.log* .DS_Store # Changelog documentation -src/content/docs/docs/changelog.md +docs/changelog.md # Eleventy cache .cache/ \ No newline at end of file diff --git a/docs/package.json b/docs/package.json index e4a65ab..80d2b17 100644 --- a/docs/package.json +++ b/docs/package.json @@ -3,7 +3,7 @@ "type": "module", "version": "0.0.1", "scripts": { - "dev": "pnpm make-changelog && astro dev", + "dev": "astro dev", "start": "pnpm dev", "check": "astro check", "build": "pnpm make-changelog && astro build", @@ -28,7 +28,7 @@ "@types/mdast": "^4.0.4", "astro": "catalog:", "astro-embed": "^0.9.0", - "expressive-code-twoslash": "^0.3.0", + "expressive-code-twoslash": "^0.3.1", "hast": "1.0.0", "hast-util-select": "^6.0.3", "hast-util-to-string": "^3.0.1", diff --git a/docs/src/content/docs/docs/changelog.md b/docs/src/content/docs/docs/changelog.md index 7e0f1d2..eac37cf 100644 --- a/docs/src/content/docs/docs/changelog.md +++ b/docs/src/content/docs/docs/changelog.md @@ -8,6 +8,26 @@ editUrl: false This document contains release notes for the `@studiocms/ui` package. For more information, see the [CHANGELOG file](https://github.com/withstudiocms/ui/blob/main/packages/studiocms_ui/CHANGELOG.md) +## 0.4.6 + +- [#52](https://github.com/withstudiocms/ui/pull/52) [`65eea2c`](https://github.com/withstudiocms/ui/commit/65eea2cff78c2c38314de9b3fe4b65173c81ea90) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Update Input component to allow search type + +## 0.4.5 + +- [#50](https://github.com/withstudiocms/ui/pull/50) [`51d5565`](https://github.com/withstudiocms/ui/commit/51d556504790741ad3b6cd23092b9be0a92e8157) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - fix weird icon sizing during build + +## 0.4.4 + +- [#48](https://github.com/withstudiocms/ui/pull/48) [`4a43e03`](https://github.com/withstudiocms/ui/commit/4a43e031b2395ca1cf72c8343638f5836178944e) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Fix Icon component requiring functions from Iconify Utils lib during runtime as well as extend usage possibilities. + + NEW: + + - `IconBase` component exported from `studiocms:ui/components` which allows passing custom image collections from Iconify. + + Updated: + + - `Icon` component to use this new system. + ## 0.4.3 - [#46](https://github.com/withstudiocms/ui/pull/46) [`29ea967`](https://github.com/withstudiocms/ui/commit/29ea967c2cee935715de0f4787b603d69997e84b) Thanks [@louisescher](https://github.com/louisescher)! - Fixes icons getting cut off in certain circumstances and changes dropdown links to include icons diff --git a/docs/src/content/docs/docs/guides/customization.mdx b/docs/src/content/docs/docs/guides/customization.mdx index 0216c3d..63548d2 100644 --- a/docs/src/content/docs/docs/guides/customization.mdx +++ b/docs/src/content/docs/docs/guides/customization.mdx @@ -41,6 +41,35 @@ If you make significant changes to the colors, remember to also adjust the light Below, you will find all the CSS variables used in StudioCMS UI. Always make sure to provide them as HSL values without commas. You can use them in your CSS like this: `background-color: hsl(var(--background-base));`. +## Disabling CSS Injection + +If you want to disable the CSS injection, you can do so by setting the `noInjectCSS` option to `true`: + +```ts twoslash showLinenumbers title="astro.config.mjs" {7} +import { defineConfig } from 'astro/config'; +import ui from '@studiocms/ui'; + +export default defineConfig({ + integrations: [ + ui({ + noInjectCSS: true, + }) + ] +}); +``` + +You can then include the CSS in your project manually. This is useful if you want to mix StudioCMS UI with other CSS frameworks, or if you are using the UI styling only for a subset of your components. + +```astro showLinenumbers title="src/layouts/SUILayout.astro" +--- +// Using the virtual module to import the CSS file (recommended) +import "studiocms:ui/global-css"; + +// Alternatively, import the CSS file directly from the package +import "@studiocms/ui/css/global.css"; +--- +``` + ## Interactive Editing You can edit the colors in your own project during development using the dev toolbar. In the toolbar, you will find a diff --git a/packages/studiocms_ui/src/index.ts b/packages/studiocms_ui/src/index.ts index 65f722b..bf922db 100644 --- a/packages/studiocms_ui/src/index.ts +++ b/packages/studiocms_ui/src/index.ts @@ -13,6 +13,16 @@ type Options = { * @link https://ui.studiocms.dev/docs/guides/customization/ */ customCss?: string; + + /** + * Disable CSS Generation and require manual addition of the global CSS + * + * @example + * ```ts + * import 'studiocms:ui/global-css'; + * ``` + */ + noInjectCSS?: boolean; }; export default function integration(options: Options = {}): AstroIntegration { @@ -98,7 +108,9 @@ export default function integration(options: Options = {}): AstroIntegration { }, }); - injectScript('page-ssr', `import 'studiocms:ui/global-css';`); + if (!options.noInjectCSS) { + injectScript('page-ssr', `import 'studiocms:ui/global-css';`); + } if (options.customCss) { injectScript('page-ssr', `import 'studiocms:ui/custom-css';`); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 708d4d3..0b883d7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -133,8 +133,8 @@ importers: specifier: ^0.9.0 version: 0.9.0(astro@5.1.1(@types/node@20.17.10)(jiti@2.3.3)(rollup@4.28.1)(typescript@5.7.2)(yaml@2.6.1)) expressive-code-twoslash: - specifier: ^0.3.0 - version: 0.3.0(@expressive-code/core@0.38.3)(expressive-code@0.38.3)(typescript@5.7.2) + specifier: ^0.3.1 + version: 0.3.1(@expressive-code/core@0.38.3)(expressive-code@0.38.3)(typescript@5.7.2) hast: specifier: 1.0.0 version: 1.0.0 @@ -1979,8 +1979,8 @@ packages: resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==} engines: {node: '>=16.17'} - expressive-code-twoslash@0.3.0: - resolution: {integrity: sha512-adEOcFTRlNK3mnyi31cEWXEIP+anlZNHmMijTPdv4RVTqjs2qDlt591xntPvlH7YJSfypEw+c3teWOzelNxbvA==} + expressive-code-twoslash@0.3.1: + resolution: {integrity: sha512-soC622FPOekEvQoYGr2C5yTIazZfsVAEcz8wpVORt9erxEOxMTVg045g0Zqa2X15DgnprUZAzBp9w+T5FFEvWg==} peerDependencies: '@expressive-code/core': ^0.38.3 expressive-code: ^0.38.3 @@ -5528,7 +5528,7 @@ snapshots: signal-exit: 4.1.0 strip-final-newline: 3.0.0 - expressive-code-twoslash@0.3.0(@expressive-code/core@0.38.3)(expressive-code@0.38.3)(typescript@5.7.2): + expressive-code-twoslash@0.3.1(@expressive-code/core@0.38.3)(expressive-code@0.38.3)(typescript@5.7.2): dependencies: '@expressive-code/core': 0.38.3 expressive-code: 0.38.3