Quick start: run the web/ce-lms starter to see ce-ui-scss applied to real login/register forms alongside CE web components. npm install && npm run dev inside that folder for a production-like baseline.

Step-by-Step: Make ce-ui-scss Publishable 🗂 1. Move main.scss and related SCSS into a dedicated folder

Create:

packages/ └── ce-ui-scss/ ├── src/ │ ├── abstracts/ # _variables.scss, _mixins.scss, etc. │ ├── base/ # _reset.scss, _typography.scss, etc. │ ├── components/ # _button.scss, _card.scss, etc. │ ├── themes/ # _dark.scss, _light.scss, etc. │ ├── utilities/ # _spacing.scss, _grid.scss, etc. │ ├── main.scss # The main entrypoint that @use everything │ └── package.scss # (Optional if needed separately) ├── dist/ │ ├── ce-ui.css # Full compiled output (via build) │ └── ce-ui-min.css # Minimal baseline bundle ├── package.json # NPM module metadata ├── README.md └── LICENSE

📦 2. packages/ce-ui-scss/package.json

{ "name": "@clusterenvision/ui-scss", "version": "1.0.0", "description": "Modular, scalable, reusable SCSS design system for Angular, React, Vue, Blazor, and HTML.", "main": "dist/ce-ui.css", "style": "dist/ce-ui.css", "files": [ "src/", "dist/", "main.scss" ], "scripts": { "build": "sass src/main.scss dist/ce-ui.css && sass src/minimal.scss dist/ce-ui-min.css" }, "keywords": [ "scss", "design-system", "component-library", "responsive", "enterprise" ], "author": "Cluster Envision", "license": "MIT", "devDependencies": { "sass": "^1.89.0" } }

⚙️ 3. src/main.scss — Your Entrypoint

Make sure main.scss uses @forward or @use like:

// src/main.scss @use 'abstracts/variables'; @use 'abstracts/functions'; @use 'abstracts/mixins'; @use 'base/reset'; @use 'base/typography'; @use 'components/button'; @use 'themes/light'; @use 'themes/dark'; @use 'utilities/spacing'; @use 'utilities/flex'; // ... all others

🛠 4. Build command

From the root of your monorepo or inside packages/ce-ui-scss:

npm run build

This compiles into: dist/ce-ui.css and dist/ce-ui-min.css

🚀 5. Publish to NPM

First, make sure you're logged in:

npm login

Then from inside packages/ce-ui-scss/:

npm publish --access public

You’ll now be able to install via:

npm install @clusterenvision/ui-scss

📦 6. Using in Projects

In Angular / React / Vue / HTML:

@use '@clusterenvision/ui-scss/src/main' as *;

Or just link the CSS:

Minimal baseline bundle (lighter for early dev):

✅ Next Steps

Would you like me to:

📦 Prepare the publishable ce-ui-scss/ folder as a zip?

🧪 Set up a sample Angular or React project to consume this package?

🧾 Help you automate versioning + changelog + CI/CD for publishing?

Let me know and I’ll take the next step!

ce-ui-scss release readiness (current focus)

1. Token version locking

• Source of truth: keep src/abstracts/_variables.scss pinned per release tag; add a CHANGELOG entry whenever tokens change; avoid silent drift from dist/ce-ui.css.
• SemVer policy: only add new tokens in minors/patches; rename/remove tokens only in majors after deprecation warnings.
• Build guard: during CI, run sass src/main.scss dist/ce-ui.css and diff against committed dist/ce-ui.css; fail if output changes without package.json version bump.

2. CDN/self-host strategy

• CDN: publish dist/ce-ui.css to npm; consumers can pull via https://unpkg.com/@clusterenvision/ui-scss@<version>/dist/ce-ui.css (or jsDelivr). Document exact URL patterns and recommend SRI hashes in release notes.
• Self-host: ship SCSS entry at @clusterenvision/ui-scss/src/main; allow teams to consume tokens via @use, then compile into their own bundles. Keep files list minimal to avoid shipping node_modules or docs.
• Cache policy: recommend immutable caching with versioned URLs; discourage latest without pinning.

3. Visual regression coverage

• Tooling: start with Playwright screenshots (headless chromium) for zero-SaaS dependency; keep config in tests/visual/.
• Scope: cover base themes, buttons, form controls, layout primitives, alerts, modal/tooltip/toast states, focus/hover/disabled states, and dark/default/light themes.
• Workflow: npm run vrt:baseline to record (runs Sass build into tests/public), npm run vrt:test in CI to compare. Optionally wire Percy/Chromatic later by reusing the same stories/pages.

What’s implemented now

• Playwright VRT scaffold in tests/visual/ with theme-default, theme-dark, and theme-high-contrast snapshots driven by tests/web-test-html/ce-scss-components-showcase.html.
• CI-ready drift guard: npm run check:dist rebuilds dist/ce-ui.css and fails if it changes without a package.json version update (uses git when present; otherwise require CHECK_DIST_ASSUME_VERSION_BUMP=1 after you bump the version).
• README now documents CDN URLs and self-host guidance; VRT commands are ready for baseline + CI runs.

CDN / self-host details

• CDN: version-pinned URL https://unpkg.com/@clusterenvision/ui-scss@<version>/dist/ce-ui.css (jsDelivr works too). Add SRI from curl ... | openssl dgst -sha384 -binary | openssl base64 -A.
• Self-host: consume SCSS via @use '@clusterenvision/ui-scss/src/main' as *; and compile into your app bundle; avoid unpinned latest.
• Cache policy: serve with immutable caching when using versioned URLs; keep hash in release notes for SRI copy/paste.

Visual regression quickstart

• Install deps: npm install
• Capture/update baselines: npm run vrt:baseline
• Compare in CI: npm run vrt:test
• Baselines live in tests/visual/__screenshots__/; artifacts/diffs go to tests/visual/.artifacts/.