Skip to content

feat: use jsDelivr CDN as default CSS source for Bricks #74

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackgranatowski merged 1 commit into from
May 23, 2026
Merged

feat: use jsDelivr CDN as default CSS source for Bricks #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 8 additions & 17 deletions integrations/bricks/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,23 +26,12 @@ Copy the `integrations/bricks/` folder to your WordPress plugins directory:
cp -r integrations/bricks /path/to/wp-content/plugins/slashed-bricks
```

When using this method, the plugin cannot automatically locate the SLASHED CSS bundle.
You have two options:
The plugin loads CSS from jsDelivr by default, so no local file setup is needed.
Optionally, you can copy the `dist/` folder into the plugin directory for local/offline use:

1. **Copy the `dist/` folder** into the plugin directory so the bundle is available at
`wp-content/plugins/slashed-bricks/dist/slashed.optimal.css`:

```bash
cp -r dist /path/to/wp-content/plugins/slashed-bricks/dist
```

2. **Use the filter** to point to a CDN or another location:

```php
add_filter( 'slashed_bricks/css_bundle_url', function() {
return 'https://cdn.example.com/slashed/slashed.optimal.css';
} );
```
```bash
cp -r dist /path/to/wp-content/plugins/slashed-bricks/dist
```

### Option B: Symlink (for development)

Expand Down Expand Up @@ -148,7 +137,9 @@ integrations/bricks/

## CSS Bundle

By default, the plugin loads `dist/slashed.optimal.css` from the SLASHED framework directory (resolved relative to the plugin location). This is the recommended bundle that includes core tokens, layout primitives, states, and optional palette tokens.
By default, the plugin loads `dist/slashed.optimal.css` from the jsDelivr CDN (`https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@main/dist/slashed.optimal.css`). This means the plugin works out of the box without copying any CSS files locally.

If a local copy of the bundle is detected (symlink/in-repo mode or a `dist/` folder inside the plugin directory), the local file takes precedence for faster loads and offline development.

To load a different bundle (e.g., the minimal `dist/slashed.essential.css` or the full `dist/slashed.full.css`), use the `slashed_bricks/css_bundle_url` filter.

Expand Down
22 changes: 7 additions & 15 deletions integrations/bricks/slashed-bricks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,20 @@
/**
* Get the URL for the SLASHED CSS bundle.
*
* Resolves the path to dist/slashed.optimal.css by checking:
* 1. Symlink/in-repo mode: ../../dist/slashed.optimal.css relative to the plugin
* 2. Copy-install mode: dist/slashed.optimal.css within the plugin directory
* Defaults to the jsDelivr CDN (main branch latest) so the plugin works
* without any local file setup. If a local copy is detected (symlink/in-repo
* mode or copy-install mode), the local file takes precedence for faster loads
* and offline development.
*
* Falls back to an empty string (with a PHP notice) if neither location exists.
* Use the 'slashed_bricks/css_bundle_url' filter to override.
*
* @return string URL to the CSS bundle.
*/
function slashed_bricks_get_css_url() {
$default_url = '';
// Default: jsDelivr CDN pointing to main branch latest.
$default_url = 'https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@main/dist/slashed.optimal.css';
Comment on lines +39 to +40

@coderabbitai coderabbitai Bot May 23, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

urls=(
  "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@main/dist/slashed.optimal.css"
  "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.css"
)

for u in "${urls[@]}"; do
  code="$(curl -s -o /dev/null -w "%{http_code}" "$u")"
  ctype="$(curl -sI "$u" | awk -F': ' 'tolower($1)=="content-type"{print $2}' | tr -d '\r')"
  echo "$code | $ctype | $u"
done

Repository: codeslash-dev/SLASHED

Length of output: 284

Default CDN URL should not track mutable @main.
Both @main/dist/slashed.optimal.css and @dist/slashed.optimal.css currently return 200 text/css, so this isn’t an immediate break—but defaulting to @main makes styling non-reproducible and subject to future changes. Point the default at the published dist artifact instead (or pin to a tag/commit).

Suggested fix 
-    $default_url = 'https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@main/dist/slashed.optimal.css';
+    $default_url = 'https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.css';
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Default: jsDelivr CDN pointing to main branch latest.
$default_url = 'https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@main/dist/slashed.optimal.css';
// Default: jsDelivr CDN pointing to main branch latest.
$default_url = 'https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.css';
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@integrations/bricks/slashed-bricks.php` around lines 39 - 40, The default CDN
URL in $default_url currently pins to the mutable `@main`; change it to point at
the published/dist artifact (or pin to a specific release tag/commit) so styles
are reproducible—update the $default_url value in slashed-bricks.php (the
$default_url variable) to use the stable dist path or a tagged/commit URL
instead of '`@main`'.


// Check symlink/in-repo mode first (../../dist/ relative to plugin).
// Prefer local file if available (symlink/in-repo mode).
$repo_path = SLASHED_BRICKS_PATH . '../../dist/slashed.optimal.css';
if ( file_exists( $repo_path ) ) {
$default_url = SLASHED_BRICKS_URL . '../../dist/slashed.optimal.css';
Expand All @@ -47,15 +48,6 @@ function slashed_bricks_get_css_url() {
elseif ( file_exists( SLASHED_BRICKS_PATH . 'dist/slashed.optimal.css' ) ) {
$default_url = SLASHED_BRICKS_URL . 'dist/slashed.optimal.css';
}
// Neither location found.
else {
trigger_error(
'SLASHED for Bricks: Could not locate slashed.optimal.css. '
. 'Copy the dist/ folder into the plugin directory, or use the '
. "'slashed_bricks/css_bundle_url' filter to specify the URL.",
E_USER_NOTICE
);
}

/**
* Filter the SLASHED CSS bundle URL.
Expand Down
Loading