fix: add 'icon' to components for versioning in make-versioning script

.changeset/fix-versioned-icon-in-styles.md

@@ -0,0 +1,5 @@
+---
+'@solid-design-system/styles': patch
+---
+
+Fixed `sd-icon` not being versioned when used as a descendant selector inside style components (e.g. `sd-status-badge`).

CONTRIBUTING.md

@@ -26,6 +26,7 @@
       - [Feature-Check-In Meeting to Prepare Pull Requests](#feature-check-in-meeting-to-prepare-pull-requests)
       - [Assignees and Reviewers](#assignees-and-reviewers)
       - [Review Comments](#review-comments)
+      - [Pull Request Status](#pull-request-status)
       - [Changesets](#changesets)
       - [Special commands/suffixes](#special-commandssuffixes)
       - [Squash and Merge Your Changes](#squash-and-merge-your-changes)
@@ -240,9 +241,80 @@ To create a changeset you should navigate to the root of the project and execute
 
 Once this is done, a temporary changeset file is created on the `.changeset` folder. You can edit this file to include more detailed information about the work done. Afterwards, this file should be committed together with the remaining changes. When the pull request is created, the changesets bot will analyse the files and inform if a changeset is included or not. If you forgot to include one, you can do it and the bot will pick it up.
 
-In case your changes are not meant to trigger a release or version bump, you can commit an empty changeset, created with the command `pnpm changeset --empty`.
+In case your changes are not meant to trigger a release or version bump, you can commit an empty changeset, created with the command `pnpm changeset --empty`. They are automatically created in `.changeset`, get a random name like `happy-trees-fall.md` and will be removed automatically after merging to `main`.
 
-Please make sure to always provide detailed information in the changeset since this will be present in the package changelog.
+Please make sure to always provide useful information in the changeset since this will be present in the package changelog.
+
+Changesets should always focus the value for consumers of the Design System, less how things were done. For example, instead of writing "Added a new function to handle the click event", you should write "Added a click event to the button component". This way, the changeset is more focused on the value for the consumer and less on the technical details of how it was implemented.
+
+When the changeset corresponds to a **dependency update** task, the entry should consist of a single line: "Dependencies updated. For further details, please refer to the associated Pull Request".
+
+**Don't:**
+
+```md
+---
+'@solid-design-system/styles': patch
+---
+
+Fixes and improvements for multi-theming:
+
+- `sd-container`: fixed the triangle variable by changing the selector to target the correct element for multi-theming
+- `sd-copyright`: fixed shadow styling by switching from `box-shadow` to `text-shadow` and adjusting the values
+- `sd-footnotes`: fixed text colors by removing an unnecessary selector and adjusting the color values
+```
+
+**Do:**
+
+```md
+---
+'@solid-design-system/styles': patch
+---
+
+Fixes and improvements for multi-theming:
+
+- `sd-container`: fixed the triangle variable for multi-theming
+- `sd-copyright`: fixed shadow styling
+- `sd-footnotes`: fixed text colors
+```
+
+Split changesets into multiple files if there are multiple changes that are not related to each other.
+
+**Don't:**
+
+```md
+---
+'@solid-design-system/components': minor
+'@solid-design-system/docs': minor
+---
+
+Extended `sd-brandshape` with new transparent variants to be used on image backgrounds:
+
+- `primary|80`
+- `white|80`
+
+Added new templates showcasing usage of transparent variant `primary|80` and variant `image` together with `sd-copyright`.
+```
+
+**Do:**
+
+```md
+---
+'@solid-design-system/components': minor
+---
+
+Extended `sd-brandshape` with new transparent variants to be used on image backgrounds:
+
+- `primary|80`
+- `white|80`
+```
+
+```md
+---
+'@solid-design-system/docs': minor
+---
+
+Added new templates showcasing usage new variants of `sd-brandshape` together with images and `sd-copyright`.
+```
 
 #### Special commands/suffixes
 

packages/styles/package.json

@@ -7,8 +7,9 @@
   "scripts": {
     "start": "pnpm build",
     "build": "node scripts/build.js",
-    "verify": "pnpm build",
+    "verify": "pnpm test",
     "plop": "plop --plopfile scripts/plop/plopfile.js",
+    "test": "pnpm build && node --test scripts/test.js",
     "postversion": "pnpm build"
   },
   "publishConfig": {

packages/styles/scripts/make-versioning.js

@@ -10,9 +10,16 @@ import { globbySync } from 'globby';
 
 import { versionComponents } from '@solid-design-system/versioning';
 
-const components = globbySync('./src/**/*.css')
+let components = globbySync('./src/**/*.css')
   .map(file => file.split('/').pop().replace('.css', ''))
   .filter(file => file !== 'index');
 
+// sd-icon is used as a descendant selector inside styles (e.g. sd-status-badge)
+// but has no dedicated CSS file in this package, so it must be added explicitly.
+//
+// If there are more elements needed in the future, we should make it dynamically
+// based on the components package.
+components = [...components, 'icon'];
+
 versionComponents({ source: './cdn', destination: './cdn-versioned', components });
 versionComponents({ source: './dist', destination: './dist-versioned', components });

packages/styles/scripts/test.js

@@ -0,0 +1,28 @@
+import { test } from 'node:test';
+import assert from 'node:assert';
+import fs from 'fs';
+import path from 'path';
+
+const distVersioned = path.resolve('./dist-versioned/solid-styles.css');
+
+test('dist-versioned should exist', () => {
+  assert.ok(fs.existsSync(distVersioned), 'dist-versioned/solid-styles.css does not exist — run pnpm build first');
+});
+
+test('sd-icon element selector should be versioned inside sd-status-badge rules', () => {
+  const css = fs.readFileSync(distVersioned, 'utf-8');
+
+  // Unversioned sd-icon must not appear as a descendant selector (only allowed in --docs URLs etc.)
+  const unversionedIconSelector = /\.sd-[\w-]+ sd-icon[\s{,]/;
+  assert.ok(
+    !unversionedIconSelector.test(css),
+    'Found unversioned "sd-icon" as a CSS descendant selector in dist-versioned output'
+  );
+
+  // Versioned sd-icon must appear (e.g. sd-6-15-1-icon)
+  const versionedIconSelector = /sd-\d+-\d+-\d+-icon/;
+  assert.ok(
+    versionedIconSelector.test(css),
+    'Expected to find a versioned "sd-<version>-icon" selector in dist-versioned output'
+  );
+});