Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 0 additions & 1 deletion .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -103,5 +103,4 @@ jobs:
dist/slashed.full.flat.css
dist/slashed.full.flat.min.css
dist/slashed.full.flat.min.css.map
dist/slashed.zip
fail_on_unmatched_files: true
82 changes: 7 additions & 75 deletions .github/workflows/version-sync.yml
Original file line number Diff line number Diff line change
@@ -1,24 +1,19 @@
name: Sync version artifacts

# Triggered whenever a GitHub release or pre-release is published.
# Checks out main, aligns all non-JS version references to the release tag,
# rebuilds CSS bundles, publishes them to the dist branch, captures the
# resulting commit SHA, stores it in SLASHED_DIST_SHA (slashed.php),
# SLASHED_BRICKS_DIST_SHA (slashed-bricks.php), and
# SLASHED_GUTENBERG_DIST_SHA (slashed-gutenberg.php), then commits
# everything back to main.
# Checks out main, aligns non-JS version references (docs/roadmap.md) and
# package.json to the release tag, then commits any changes back to main.
#
# CSS bundles are NOT committed to the main branch β€” they live only on the
# dedicated `dist` branch and in GitHub Release assets. The dist-branch
# commit SHA is stored in each integration entry point so the plugin can
# construct an immutable jsDelivr CDN URL that never changes between releases.
# dedicated `dist` branch (published by publish-dist.yml on every push to
# main) and in GitHub Release assets.
#
# Full release pipeline:
# 1. Developer runs `npm run release` locally β†’ bumps package.json, runs
# version-sync + build, commits chore(release): vX.Y.Z, pushes tag.
# 2. release.yml fires on the tag β†’ uploads dist assets to the GitHub release.
# 3. This workflow fires on the release.published event β†’ rebuilds CSS,
# publishes to dist branch, captures SHA, updates PHP, commits to main.
# 3. This workflow fires on the release.published event β†’ re-aligns version
# references on main in case the release was cut outside `npm run release`.

on:
release:
Expand Down Expand Up @@ -64,76 +59,13 @@ jobs:
- name: Sync non-JS version references
run: node scripts/version-sync.js

- name: Rebuild CSS bundles
run: npm run build

- name: Push CSS bundles to dist branch and capture SHA
id: dist
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
RELEASE_TAG: ${{ steps.ver.outputs.tag }}
GIT_AUTHOR_NAME: github-actions[bot]
GIT_AUTHOR_EMAIL: 41898282+github-actions[bot]@users.noreply.github.com
GIT_COMMITTER_NAME: github-actions[bot]
GIT_COMMITTER_EMAIL: 41898282+github-actions[bot]@users.noreply.github.com
run: |
set -euo pipefail

# Stage dist/ contents for the orphan dist branch.
mkdir -p /tmp/sf-dist
cp -R dist/. /tmp/sf-dist/
{
echo "source-commit: ${GITHUB_SHA}"
echo "source-ref: refs/heads/main"
echo "release-tag: ${RELEASE_TAG}"
echo "built-at: $(date -u +%Y-%m-%dT%H:%M:%SZ)"
echo "built-by: .github/workflows/version-sync.yml"
} > /tmp/sf-dist/SOURCE.txt
echo 'node_modules/' > /tmp/sf-dist/.gitignore

git checkout --orphan dist-release
git rm -rf . > /dev/null
shopt -s dotglob
cp -R /tmp/sf-dist/. .
git add -A
git commit -m "build: dist for ${RELEASE_TAG}"

DIST_SHA=$(git rev-parse HEAD)
echo "sha=${DIST_SHA}" >> "$GITHUB_OUTPUT"

git push --force \
"https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git" \
dist-release:dist

- name: Switch back to main working tree
run: git checkout main

- name: Update DIST_SHA constants in PHP
env:
DIST_SHA: ${{ steps.dist.outputs.sha }}
run: |
# Write the captured SHA into the canonical constant, then let
# version-sync.js propagate it to the two integration entry points.
sed -i \
"s|define( 'SLASHED_DIST_SHA', '[^']*' )|define( 'SLASHED_DIST_SHA', '${DIST_SHA}' )|" \
plugins/SLASHED-for-WP/slashed.php
# Hard-fail if the substitution did not land (sed exits 0 even on no-op,
# e.g. if the define format ever changes) so we never propagate a stale SHA.
if ! grep -Fq "define( 'SLASHED_DIST_SHA', '${DIST_SHA}' )" plugins/SLASHED-for-WP/slashed.php; then
echo "Failed to update SLASHED_DIST_SHA in plugins/SLASHED-for-WP/slashed.php" >&2
exit 1
fi
node scripts/version-sync.js

- name: Commit and push if anything changed
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
git config user.name "github-actions[bot]"
git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
# Stage only tracked files (dist/*.css are gitignored).
git add plugins/SLASHED-for-WP/slashed.php plugins/SLASHED-for-WP/integrations/bricks/slashed-bricks.php plugins/SLASHED-for-WP/integrations/gutenberg/slashed-gutenberg.php package.json package-lock.json
git add -u
git add package.json package-lock.json docs/roadmap.md
if git diff --cached --quiet; then
echo "Nothing to commit β€” all version artifacts already up to date."
else
Expand Down
2 changes: 1 addition & 1 deletion .stylelintrc.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"extends": ["stylelint-config-standard"],
"ignoreFiles": ["dist/**", "node_modules/**", "plugins/SLASHED-for-WP/integrations/bricks/assets/admin-app/**", "plugins/SLASHED-for-WP/integrations/bricks/assets/editor-app/**", "plugins/SLASHED-for-WP/integrations/bricks/editor-app/**", "plugins/SLASHED-for-WP/integrations/gutenberg/assets/admin-app/**"],
"ignoreFiles": ["dist/**", "node_modules/**"],
"rules": {
"color-function-notation": "modern",
"alpha-value-notation": "number",
Expand Down
32 changes: 5 additions & 27 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,31 +145,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
- **New tokens**: `--sf-header-height-mobile`, `--sf-header-height-desktop`,
`--sf-sticky-offset-mobile`, `--sf-sticky-offset-desktop` β€” paired
mobile/desktop source tokens for the header height and sticky-offset
computed tokens. The WordPress plugin admin (Layouts tab) exposes these
as number fields and generates a fluid `clamp()` for
`--sf-header-height` / `--sf-sticky-offset` when the two values differ.
computed tokens. `--sf-header-height` / `--sf-sticky-offset` fluidly
`clamp()` between the mobile and desktop endpoints when they differ.

- **Contextual color cascade** β€” `.sf-surface--*` variants now inherit a
full set of on-surface tokens (`--sf-color-text`, `--sf-color-heading`,
secondary/placeholder/disabled text, border/subtle/strong border) via
CSS relative-color syntax inside an `@supports` guard. Requires Chrome
123 / Safari 17.5 / Firefox 128 (the existing framework floor).

- **reBEMer** (`integrations/bricks/`) β€” Subtree-scoped BEM class manager
for the Bricks Builder structure panel. Adds a "BEM" badge to every
structure-panel item; clicking it opens a draggable modal that names a
block + every descendant element + an optional modifier and applies the
result as global classes in one transaction. Five operation modes
(Add / Rename / Replace / Add Modifier / Migrate ID styles), a
client-side reference-usage check (via `GET /rebemer/unused`) so destructive
ops surface cross-element class usage before they run, snapshot + rollback for
every apply, an in-panel undo ring buffer, and a reserved-name guard
against SLASHED's own utility classes. Full design at
[docs/rebemer.md](docs/rebemer.md). The editor app lives in
`integrations/bricks/editor-app/` (Svelte 5 runes + Vite); the PHP side
is `Slashed_Bricks_ReBEMer_{Policy,REST,Enqueue}` under
`integrations/bricks/includes/`.

### ⚠️ Breaking Changes (pre-freeze cleanup)

The framework is in pre-freeze cleanup. No published consumer is affected.
Expand Down Expand Up @@ -416,9 +400,8 @@ See `docs/migration.md` for details.
between their `-mobile` and `-desktop` companion tokens across the
framework viewport range, instead of statically equalling the desktop
value. This wires up the previously-orphaned `--sf-header-height-mobile`,
`--sf-sticky-offset-mobile`, and `--sf-sticky-offset-desktop` tokens and
matches the clamp the WP plugin's CSS generator already emitted. Default
endpoints (3.5rem mobile, 5rem desktop) are unchanged; the header is now
`--sf-sticky-offset-mobile`, and `--sf-sticky-offset-desktop` tokens.
Default endpoints (3.5rem mobile, 5rem desktop) are unchanged; the header is now
shorter on small viewports.

- **Shadows tint to the surface on `.sf-surface--*`** β€” `core/macros.css`
Expand Down Expand Up @@ -493,12 +476,7 @@ See `docs/migration.md` for details.

## [0.2.12] - 2026-05-23

Release infrastructure and Bricks Builder integration.

### Added

- **Bricks Builder integration** β€” WordPress plugin for one-click SLASHED
loading in Bricks Builder themes (PR #71)
Release infrastructure.

### Changed

Expand Down
10 changes: 5 additions & 5 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,12 @@ release pipeline reads the matching `## [x.y.z]` section, so keep it accurate:
`## [x.y.z] - YYYY-MM-DD` heading and leave a fresh empty `## [Unreleased]`.
2. Run `npm run release` (patch), `npm run release:minor`, or
`npm run release:major`. This bumps `package.json`, runs
`scripts/version-sync.js` (propagates the version to the PHP plugins,
`docs/roadmap.md`, the Bricks README CDN example, and `readme.txt`'s
`Stable tag`), rebuilds bundles, commits, tags, and pushes.
`scripts/version-sync.js` (propagates the version to `docs/roadmap.md`),
rebuilds bundles, commits, tags, and pushes.
3. The pushed tag triggers `release.yml` (GitHub Release + dist assets) and the
release event triggers `version-sync.yml` (publishes the `dist` branch and
writes the captured commit SHA into the `SLASHED_*_DIST_SHA` constants).
release event triggers `version-sync.yml` (re-aligns version references on
main). The `dist` branch is published by `publish-dist.yml` on every push to
main.

## Scope

Expand Down
49 changes: 2 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -195,55 +195,10 @@ versions above β€” colors will collapse to `initial` on older engines.
| [Browser support](docs/browser-support.md) | the support floor and why |
| [Performance](docs/performance.md) | modern-CSS footguns to avoid |
| [Migration](docs/migration.md) | upgrading SLASHED versions + migrating from other frameworks |
| [reBEMer](docs/rebemer.md) | BEM class manager for Bricks Builder |
| [Bricks plugin](plugins/SLASHED-for-WP/integrations/bricks/README.md) | full Bricks Builder integration docs |
| [Contributing](CONTRIBUTING.md) | setup, conventions, tests |

## WordPress plugin

SLASHED ships a companion WordPress plugin (`plugins/SLASHED-for-WP/`) with two independent integrations that can each be activated as a standalone plugin or loaded together from the main `slashed.php` bootstrap.

### Bricks Builder

Activate `integrations/bricks/slashed-bricks.php` (requires Bricks 1.9.2+, WordPress 6.4+, PHP 7.4+).

- **CSS loading** β€” enqueues the SLASHED bundle on the frontend and inside the Bricks editor iframe
- **Variable pickers** β€” registers all `--sf-*` tokens (572 in `essential`, 812 in `optimal`/`full`) in the Bricks Global Variable Manager, organised by category
- **Class autocomplete** β€” registers every `.sf-*` layout class and `.is-*` state class in the Bricks class input as locked entries
- **Color System panel** β€” a floating in-builder browser for every `--sf-color-*` token; each swatch previews its light and dark value at once, and picking one applies the `var(--sf-color-*)` reference (never a baked hex) to the selected element
- **Variable-picker swatches** β€” paints a colour square next to each `--sf-color-*` entry in the variable-picker dropdown, powered by server-resolved hex values so dark-mode stays framework-driven
- **Dynamic detection** β€” parses the active CSS bundle at runtime; no hand-curated list to drift out of date
- **reBEMer** β€” subtree-scoped BEM class manager inside the Bricks structure panel: rename, replace, or add modifiers across an element and its children in one transaction with reference-count checks (`GET /rebemer/unused`) and snapshot/rollback

See [`integrations/bricks/README.md`](plugins/SLASHED-for-WP/integrations/bricks/README.md) and [`docs/rebemer.md`](docs/rebemer.md).

### Gutenberg (block editor)

Activate `integrations/gutenberg/slashed-gutenberg.php` (requires WordPress 6.4+, PHP 7.4+).

- **CSS loading** β€” enqueues the SLASHED bundle in the block editor canvas and on the frontend
- **Color palette** β€” syncs 20 `--sf-color-*` tokens (brand, status, surface, text, border, link) with the WordPress editor color palette
- **Dark-mode bridge** β€” maps the `data-wp-dark-mode-active` attribute from the block editor's dark-mode toggle to SLASHED's `color-scheme` system

### Filters

Shared (fire in both integrations and standalone, when the unified `slashed.php` bootstrap is active):

- `slashed/css_bundle_url` β€” override the resolved CSS bundle URL for every integration
- `slashed/override_css` β€” replace/extend the generated token-override CSS

Per integration:

- `slashed_gutenberg/css_bundle_url` β€” override the bundle URL for the Gutenberg integration only
- Bricks exposes a larger hook set (variables, classes, inventory, colour panel/swatches) β€” see the [Bricks plugin README](plugins/SLASHED-for-WP/integrations/bricks/README.md) and the in-admin **Hooks** tab.

### Packaging

```sh
npm run build:plugin # packages the plugin as a ZIP in dist/
```

---
The WordPress plugin (Bricks Builder + Gutenberg integrations) lives in its own
repository: [slashed-for-wp](https://github.com/codeslash-dev/slashed-for-wp).

## Development

Expand Down
Loading