@public-ui/kolibri-cli 3.0.4-rc.1 → 3.0.4-rc.2

package/README.md

@@ -91,6 +91,53 @@ Actually the following migration tasks from version 1 to version 2 are available
 - Detection of `_iconOnly` in TSX is not stable ([#5404](https://github.com/public-ui/kolibri/issues/5404)) ⏰
 - Handle the remove `@public-ui/core` package ([#???](https://github.com/public-ui/kolibri/issues/????)) ⏰
 
+#### Theme Migration
+
+The CLI also supports migrating KoliBri themes alongside component updates to ensure theme packages remain synchronized with breaking changes in the component library.
+
+##### Goal
+
+Synchronies breaking changes in components with the styling of each theme package so that upgrades require minimal manual work.
+
+##### Requirements
+
+- Components and themes follow the BEM naming convention via `typed-bem`.
+- Each theme lives under `packages/themes` and keeps its SCSS sources in `src/`.
+- The CLI migration tool can read and modify `.scss` files.
+
+##### Concept
+
+1. **Central BEM schemas**
+   - Every component exports its BEM schema. These schemas are used by the CLI to generate SCSS files and by themes to reference selectors.
+   - When a selector changes, the same schema information allows the migration to update all theme packages consistently.
+
+2. **SCSS migration tasks**
+   The CLI runner is extended with task types operating on SCSS. They behave like the existing property tasks and are idempotent.
+   - `RenameBlockTask` – rename a block selector everywhere in a theme.
+   - `RenameElementTask` – rename an element within a block.
+   - `RenameModifierTask` – rename or replace a modifier.
+   - `AddSelectorTask` and `RemoveSelectorTask` – insert or remove entire rule sets.
+   - `UpdateTokenTask` – adjust variable names or values when tokens change.
+   - `MoveRulesTask` – move declarations from one selector to another if the DOM structure changes.
+
+   Tasks scan the SCSS with regular expressions or an AST parser. If a pattern is missing the task logs a warning instead of failing.
+
+3. **Safe execution**
+   - Migrations abort when uncommitted changes are detected unless `--ignore-uncommitted-changes` is specified.
+   - Each task logs the files it touched. After completion Prettier can format them automatically.
+   - Because tasks are idempotent, rerunning the migration produces no new changes. To undo a run, reset the Git state.
+
+##### Theme Migration Workflow Example
+
+```bash
+pnpm i -g @public-ui/kolibri-cli@2      # install the CLI matching the next version
+kolibri migrate path/to/project         # run all tasks for the upgrade
+pnpm format                             # format changed files
+git diff                                # review results and commit
+```
+
+Using these tasks, theme packages remain aligned with component updates. Future breaking changes can be scripted and applied via the CLI so that projects can upgrade in a controlled and reproducible way.
+
 #### How does it work?
 
 1. The migration command will check your project for clear `git history` and the `installed version` of `KoliBri`. Now it loads all available migration tasks.

package/dist/migrate/runner/tasks/common/ScssAddSelectorTask.js

@@ -0,0 +1,203 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScssAddSelectorTask = void 0;
+const fs_1 = __importDefault(require("fs"));
+const types_1 = require("../../../../types");
+const reuse_1 = require("../../../shares/reuse");
+const abstract_task_1 = require("../../abstract-task");
+/**
+ * Simple, fast hash function for string identifier generation.
+ * Based on djb2 algorithm - much faster than cryptographic hashes for non-security purposes.
+ * @param {string} str String to hash
+ * @returns {string} Hexadecimal hash string
+ */
+function simpleHash(str) {
+    let hash = 5381;
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) + hash + str.charCodeAt(i);
+    }
+    return (hash >>> 0).toString(16).substring(0, 8);
+}
+/**
+ * Escapes special characters for use in a regular expression.
+ * @param {string} str String to escape
+ * @returns {string} Escaped string
+ */
+function escapeRegExp(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+/**
+ * Analyzes the content to determine formatting preferences
+ * @param {string} content The CSS content to analyze
+ * @returns {object} Formatting preferences object
+ */
+function analyzeFormatting(content) {
+    const lines = content.split('\n');
+    // Detect indentation
+    let tabCount = 0;
+    let spaceCount = 0;
+    const indentSizes = [];
+    for (const line of lines) {
+        if (line.trim() === '')
+            continue;
+        const leadingWhitespace = line.match(/^(\s*)/)?.[1] || '';
+        if (leadingWhitespace.includes('\t')) {
+            tabCount++;
+        }
+        else if (leadingWhitespace.length > 0) {
+            spaceCount++;
+            indentSizes.push(leadingWhitespace.length);
+        }
+    }
+    const usesTabs = tabCount > spaceCount;
+    const averageSpaceIndent = indentSizes.length > 0 ? Math.round(indentSizes.reduce((sum, size) => sum + size, 0) / indentSizes.length) : 2;
+    // Detect brace formatting patterns
+    let newlineBeforeOpenBrace = false;
+    let newlineAfterOpenBrace = true; // Default to true for readability
+    let newlineBeforeCloseBrace = true; // Default to true for readability
+    let newlineAfterCloseBrace = true; // Default to true for separation
+    // Look for existing CSS rules to determine formatting style
+    const cssRulePattern = /[^{]*\{[^}]*\}/g;
+    const matches = content.match(cssRulePattern);
+    if (matches && matches.length > 0) {
+        let beforeOpenCount = 0;
+        let afterOpenCount = 0;
+        let beforeCloseCount = 0;
+        let afterCloseCount = 0;
+        for (const match of matches) {
+            // Check for newline before opening brace
+            if (/\n\s*\{/.test(match))
+                beforeOpenCount++;
+            // Check for newline after opening brace
+            if (/\{\s*\n/.test(match))
+                afterOpenCount++;
+            // Check for newline before closing brace
+            if (/\n\s*\}/.test(match))
+                beforeCloseCount++;
+            // Check for newline after closing brace (look at the context)
+            if (/\}\s*\n/.test(match))
+                afterCloseCount++;
+        }
+        // Use majority rule for formatting decisions
+        const totalMatches = matches.length;
+        newlineBeforeOpenBrace = beforeOpenCount > totalMatches / 2;
+        newlineAfterOpenBrace = afterOpenCount > totalMatches / 2;
+        newlineBeforeCloseBrace = beforeCloseCount > totalMatches / 2;
+        newlineAfterCloseBrace = afterCloseCount > totalMatches / 2;
+    }
+    return {
+        indentChar: usesTabs ? '\t' : ' ',
+        indentSize: usesTabs ? 1 : averageSpaceIndent,
+        newlineBeforeOpenBrace,
+        newlineAfterOpenBrace,
+        newlineBeforeCloseBrace,
+        newlineAfterCloseBrace,
+    };
+}
+/**
+ * Formats a CSS rule according to the detected formatting style
+ * @param {string} selector The CSS selector
+ * @param {string} rules The CSS rules
+ * @param {object} formatting The formatting preferences
+ * @param {string} formatting.indentChar The character used for indentation (tab or space)
+ * @param {number} formatting.indentSize The number of indent characters per level
+ * @param {boolean} formatting.newlineBeforeOpenBrace Whether to add newline before opening brace
+ * @param {boolean} formatting.newlineAfterOpenBrace Whether to add newline after opening brace
+ * @param {boolean} formatting.newlineBeforeCloseBrace Whether to add newline before closing brace
+ * @param {boolean} formatting.newlineAfterCloseBrace Whether to add newline after closing brace
+ * @returns {string} The formatted CSS rule
+ */
+function formatCssRule(selector, rules, formatting) {
+    const indent = formatting.indentChar.repeat(formatting.indentSize);
+    // Ensure rules are properly indented and trimmed
+    const formattedRules = rules
+        .split('\n')
+        .map((line) => line.trim())
+        .filter((line) => line.length > 0)
+        .map((line) => indent + line)
+        .join('\n');
+    let result = '';
+    // Add selector
+    result += selector;
+    // Add space or newline before opening brace
+    if (formatting.newlineBeforeOpenBrace) {
+        result += '\n';
+    }
+    else {
+        result += ' ';
+    }
+    // Add opening brace
+    result += '{';
+    // Add newline after opening brace if needed
+    if (formatting.newlineAfterOpenBrace) {
+        result += '\n';
+    }
+    // Add rules
+    if (formattedRules.trim()) {
+        if (!formatting.newlineAfterOpenBrace) {
+            result += ' ';
+        }
+        result += formattedRules;
+        if (!formatting.newlineBeforeCloseBrace) {
+            result += ' ';
+        }
+    }
+    // Add newline before closing brace if needed
+    if (formatting.newlineBeforeCloseBrace && formattedRules.trim()) {
+        result += '\n';
+    }
+    // Add closing brace
+    result += '}';
+    // Add newline after closing brace if needed
+    if (formatting.newlineAfterCloseBrace) {
+        result += '\n';
+    }
+    return result;
+}
+class ScssAddSelectorTask extends abstract_task_1.AbstractTask {
+    selector;
+    rules;
+    regExp;
+    constructor(identifier, selector, rules, versionRange, dependentTasks = [], options = {}) {
+        super(identifier, `Add selector "${selector}"`, types_1.SCSS_FILE_EXTENSIONS, versionRange, dependentTasks, options);
+        this.selector = selector;
+        this.rules = rules;
+        if (!selector.startsWith('.')) {
+            throw (0, reuse_1.logAndCreateError)(`Selector "${selector}" must start with a dot.`);
+        }
+        this.regExp = new RegExp(escapeRegExp(selector) + '\\s*{');
+    }
+    static getInstance(selector, rules, versionRange, dependentTasks = [], options = {}) {
+        // Include rules in identifier to ensure unique instances for different rule sets
+        // Use simple hash to create shorter, more predictable identifiers
+        const rulesHash = simpleHash(rules);
+        const identifier = `add-selector-${selector}-${rulesHash}`;
+        if (!this.instances.has(identifier)) {
+            this.instances.set(identifier, new ScssAddSelectorTask(identifier, selector, rules, versionRange, dependentTasks, options));
+        }
+        return this.instances.get(identifier);
+    }
+    run(baseDir) {
+        (0, reuse_1.filterFilesByExt)(baseDir, types_1.SCSS_FILE_EXTENSIONS).forEach((file) => {
+            let content = fs_1.default.readFileSync(file, 'utf8');
+            if (!this.regExp.test(content)) {
+                const formatting = analyzeFormatting(content);
+                const newRule = formatCssRule(this.selector, this.rules, formatting);
+                // Add appropriate spacing before the new rule
+                if (content.trim() && !content.endsWith('\n')) {
+                    content += '\n';
+                }
+                if (content.trim()) {
+                    content += '\n';
+                }
+                content += newRule;
+                reuse_1.MODIFIED_FILES.add(file);
+                fs_1.default.writeFileSync(file, content);
+            }
+        });
+    }
+}
+exports.ScssAddSelectorTask = ScssAddSelectorTask;

package/dist/migrate/runner/tasks/common/ScssRemoveSelectorTask.js

@@ -0,0 +1,275 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScssRemoveSelectorTask = void 0;
+const fs_1 = __importDefault(require("fs"));
+const types_1 = require("../../../../types");
+const reuse_1 = require("../../../shares/reuse");
+const abstract_task_1 = require("../../abstract-task");
+/**
+ * Finds and removes a CSS selector and its complete rule block, handling nested braces correctly.
+ * Also handles comma-separated selector lists.
+ * @param {string} content The CSS content to process
+ * @param {string} selector The selector to remove (must start with a dot)
+ * @returns {string} The content with the selector removed
+ */
+function removeSelectorWithNestedBraces(content, selector) {
+    let result = content;
+    let offset = 0;
+    let currentIndex = 0;
+    while (currentIndex < content.length) {
+        // Find the next opening brace while properly handling strings and comments
+        const ruleStart = findNextRuleBlock(content, currentIndex);
+        if (ruleStart === -1)
+            break;
+        const openBraceIndex = ruleStart.openBraceIndex;
+        const selectorGroup = content.substring(ruleStart.selectorStart, openBraceIndex).trim();
+        // Check if this selector group contains our target selector
+        const selectors = selectorGroup.split(',').map((s) => s.trim());
+        let targetSelectorIndex = -1;
+        // First try exact match (for comma-separated lists)
+        targetSelectorIndex = selectors.findIndex((s) => s === selector);
+        // If no exact match, check if any selector contains our target as a class
+        if (targetSelectorIndex === -1) {
+            targetSelectorIndex = selectors.findIndex((s) => {
+                // Split by spaces to get individual parts of compound selectors
+                const parts = s.split(/\s+/);
+                return parts.includes(selector);
+            });
+        }
+        if (targetSelectorIndex === -1) {
+            // Target selector not found in this group, advance past this rule
+            currentIndex = findMatchingCloseBrace(content, openBraceIndex);
+            if (currentIndex === -1)
+                break;
+            currentIndex++;
+            continue;
+        }
+        // Find the matching closing brace using the existing brace counting logic
+        const closeBraceIndex = findMatchingCloseBrace(content, openBraceIndex);
+        if (closeBraceIndex === -1) {
+            // Malformed CSS, skip this rule
+            break;
+        }
+        let replacement;
+        if (selectors.length === 1) {
+            // Only one selector in the list, remove the entire rule block
+            replacement = `/* removed ${selector} */`;
+        }
+        else {
+            // Multiple selectors, remove only the target selector
+            const remainingSelectors = selectors.filter((_, index) => index !== targetSelectorIndex);
+            const ruleContent = content.substring(openBraceIndex, closeBraceIndex + 1);
+            replacement = `${remainingSelectors.join(', ')} ${ruleContent}`;
+        }
+        // Adjust for previous replacements
+        const adjustedStart = ruleStart.selectorStart - offset;
+        const adjustedEnd = closeBraceIndex + 1 - offset;
+        result = result.substring(0, adjustedStart) + replacement + result.substring(adjustedEnd);
+        const originalLength = closeBraceIndex + 1 - ruleStart.selectorStart;
+        offset += originalLength - replacement.length;
+        // Continue searching after this rule
+        currentIndex = closeBraceIndex + 1;
+    }
+    return result;
+}
+/**
+ * Finds the next CSS rule block while properly handling strings and comments.
+ * @param {string} content The CSS content to search
+ * @param {number} startIndex The index to start searching from
+ * @returns {object|number} Object with selectorStart and openBraceIndex, or -1 if no rule found
+ */
+function findNextRuleBlock(content, startIndex) {
+    let currentIndex = startIndex;
+    let inString = false;
+    let stringChar = '';
+    let inComment = false;
+    let inSingleLineComment = false;
+    let potentialSelectorStart = -1;
+    while (currentIndex < content.length) {
+        const char = content[currentIndex];
+        const nextChar = content[currentIndex + 1];
+        // Handle single-line comments
+        if (!inString && !inComment && char === '/' && nextChar === '/') {
+            inSingleLineComment = true;
+            currentIndex += 2;
+            continue;
+        }
+        if (inSingleLineComment) {
+            if (char === '\n' || char === '\r') {
+                inSingleLineComment = false;
+            }
+            currentIndex++;
+            continue;
+        }
+        // Handle multi-line comments
+        if (!inString && !inSingleLineComment && char === '/' && nextChar === '*') {
+            inComment = true;
+            currentIndex += 2;
+            continue;
+        }
+        if (inComment) {
+            if (char === '*' && nextChar === '/') {
+                inComment = false;
+                currentIndex += 2;
+                continue;
+            }
+            currentIndex++;
+            continue;
+        }
+        // Handle strings
+        if (!inComment && !inSingleLineComment && (char === '"' || char === "'")) {
+            if (!inString) {
+                inString = true;
+                stringChar = char;
+            }
+            else if (char === stringChar && content[currentIndex - 1] !== '\\') {
+                inString = false;
+                stringChar = '';
+            }
+        }
+        // Look for rule blocks only when not in strings or comments
+        if (!inString && !inComment && !inSingleLineComment) {
+            if (char === '{') {
+                // Found opening brace, find the start of this selector
+                if (potentialSelectorStart === -1) {
+                    // Find the start of the selector by looking backwards for the previous rule end or start of content
+                    potentialSelectorStart = findSelectorStart(content, currentIndex);
+                }
+                return {
+                    selectorStart: potentialSelectorStart,
+                    openBraceIndex: currentIndex,
+                };
+            }
+            else if (char === '}') {
+                // End of a rule, reset potential selector start
+                potentialSelectorStart = -1;
+            }
+            else if (potentialSelectorStart === -1 && /\S/.test(char)) {
+                // First non-whitespace character, potential start of a selector
+                potentialSelectorStart = currentIndex;
+            }
+        }
+        currentIndex++;
+    }
+    return -1;
+}
+/**
+ * Finds the start of a selector by looking backwards from an opening brace.
+ * @param {string} content The CSS content
+ * @param {number} openBraceIndex The index of the opening brace
+ * @returns {number} The index where the selector starts
+ */
+function findSelectorStart(content, openBraceIndex) {
+    let index = openBraceIndex - 1;
+    // Skip whitespace before the opening brace
+    while (index >= 0 && /\s/.test(content[index])) {
+        index--;
+    }
+    // Find the start of the selector (after previous '}' or at beginning)
+    while (index >= 0) {
+        if (content[index] === '}') {
+            return index + 1;
+        }
+        index--;
+    }
+    return 0; // Start of content
+}
+/**
+ * Finds the matching closing brace for an opening brace, handling nested braces correctly.
+ * @param {string} content The CSS content
+ * @param {number} openBraceIndex The index of the opening brace
+ * @returns {number} The index of the matching closing brace, or -1 if not found
+ */
+function findMatchingCloseBrace(content, openBraceIndex) {
+    let braceCount = 1;
+    let currentIndex = openBraceIndex + 1;
+    let inString = false;
+    let stringChar = '';
+    let inComment = false;
+    let inSingleLineComment = false;
+    while (currentIndex < content.length && braceCount > 0) {
+        const char = content[currentIndex];
+        const nextChar = content[currentIndex + 1];
+        // Handle single-line comments
+        if (!inString && !inComment && char === '/' && nextChar === '/') {
+            inSingleLineComment = true;
+            currentIndex += 2;
+            continue;
+        }
+        if (inSingleLineComment) {
+            if (char === '\n' || char === '\r') {
+                inSingleLineComment = false;
+            }
+            currentIndex++;
+            continue;
+        }
+        // Handle multi-line comments
+        if (!inString && !inSingleLineComment && char === '/' && nextChar === '*') {
+            inComment = true;
+            currentIndex += 2;
+            continue;
+        }
+        if (inComment) {
+            if (char === '*' && nextChar === '/') {
+                inComment = false;
+                currentIndex += 2;
+                continue;
+            }
+            currentIndex++;
+            continue;
+        }
+        // Handle strings
+        if (!inComment && !inSingleLineComment && (char === '"' || char === "'")) {
+            if (!inString) {
+                inString = true;
+                stringChar = char;
+            }
+            else if (char === stringChar && content[currentIndex - 1] !== '\\') {
+                inString = false;
+                stringChar = '';
+            }
+        }
+        // Count braces only when not in strings or comments
+        if (!inString && !inComment && !inSingleLineComment) {
+            if (char === '{') {
+                braceCount++;
+            }
+            else if (char === '}') {
+                braceCount--;
+            }
+        }
+        currentIndex++;
+    }
+    return braceCount === 0 ? currentIndex - 1 : -1;
+}
+class ScssRemoveSelectorTask extends abstract_task_1.AbstractTask {
+    selector;
+    constructor(identifier, selector, versionRange, dependentTasks = [], options = {}) {
+        super(identifier, `Remove selector "${selector}"`, types_1.SCSS_FILE_EXTENSIONS, versionRange, dependentTasks, options);
+        this.selector = selector;
+        if (!selector.startsWith('.')) {
+            throw (0, reuse_1.logAndCreateError)(`Selector "${selector}" must start with a dot.`);
+        }
+    }
+    static getInstance(selector, versionRange, dependentTasks = [], options = {}) {
+        const identifier = `remove-selector-${selector}`;
+        if (!this.instances.has(identifier)) {
+            this.instances.set(identifier, new ScssRemoveSelectorTask(identifier, selector, versionRange, dependentTasks, options));
+        }
+        return this.instances.get(identifier);
+    }
+    run(baseDir) {
+        (0, reuse_1.filterFilesByExt)(baseDir, types_1.SCSS_FILE_EXTENSIONS).forEach((file) => {
+            const content = fs_1.default.readFileSync(file, 'utf8');
+            const newContent = removeSelectorWithNestedBraces(content, this.selector);
+            if (content !== newContent) {
+                reuse_1.MODIFIED_FILES.add(file);
+                fs_1.default.writeFileSync(file, newContent);
+            }
+        });
+    }
+}
+exports.ScssRemoveSelectorTask = ScssRemoveSelectorTask;

package/dist/migrate/runner/tasks/common/ScssRenameBlockTask.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScssRenameBlockTask = void 0;
+const fs_1 = __importDefault(require("fs"));
+const types_1 = require("../../../../types");
+const reuse_1 = require("../../../shares/reuse");
+const abstract_task_1 = require("../../abstract-task");
+class ScssRenameBlockTask extends abstract_task_1.AbstractTask {
+    newBlock;
+    regExp;
+    constructor(identifier, block, newBlock, versionRange, dependentTasks = [], options = {}) {
+        super(identifier, `Rename block selector "${block}" to "${newBlock}"`, types_1.SCSS_FILE_EXTENSIONS, versionRange, dependentTasks, options);
+        this.newBlock = newBlock;
+        if (!reuse_1.isKebabCaseRegExp.test(block)) {
+            throw (0, reuse_1.logAndCreateError)(`Block "${block}" is not in kebab case.`);
+        }
+        if (!reuse_1.isKebabCaseRegExp.test(newBlock)) {
+            throw (0, reuse_1.logAndCreateError)(`Block "${newBlock}" is not in kebab case.`);
+        }
+        this.regExp = new RegExp(`\\.${block}(?=(?:__|--|\\b))`, 'g');
+    }
+    static getInstance(block, newBlock, versionRange, dependentTasks = [], options = {}) {
+        const identifier = `${block}-rename-block-${newBlock}`;
+        if (!this.instances.has(identifier)) {
+            this.instances.set(identifier, new ScssRenameBlockTask(identifier, block, newBlock, versionRange, dependentTasks, options));
+        }
+        return this.instances.get(identifier);
+    }
+    run(baseDir) {
+        (0, reuse_1.filterFilesByExt)(baseDir, types_1.SCSS_FILE_EXTENSIONS).forEach((file) => {
+            const content = fs_1.default.readFileSync(file, 'utf8');
+            const newContent = content.replace(this.regExp, `.${this.newBlock}`);
+            if (content !== newContent) {
+                reuse_1.MODIFIED_FILES.add(file);
+                fs_1.default.writeFileSync(file, newContent);
+            }
+        });
+    }
+}
+exports.ScssRenameBlockTask = ScssRenameBlockTask;

package/dist/migrate/runner/tasks/common/ScssRenameElementTask.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScssRenameElementTask = void 0;
+const fs_1 = __importDefault(require("fs"));
+const types_1 = require("../../../../types");
+const reuse_1 = require("../../../shares/reuse");
+const abstract_task_1 = require("../../abstract-task");
+class ScssRenameElementTask extends abstract_task_1.AbstractTask {
+    block;
+    newElement;
+    regExp;
+    constructor(identifier, block, element, newElement, versionRange, dependentTasks = [], options = {}) {
+        super(identifier, `Rename element selector "${block}__${element}" to "${block}__${newElement}"`, types_1.SCSS_FILE_EXTENSIONS, versionRange, dependentTasks, options);
+        this.block = block;
+        this.newElement = newElement;
+        if (!reuse_1.isKebabCaseRegExp.test(block)) {
+            throw (0, reuse_1.logAndCreateError)(`Block "${block}" is not in kebab case.`);
+        }
+        if (!reuse_1.isKebabCaseRegExp.test(element)) {
+            throw (0, reuse_1.logAndCreateError)(`Element "${element}" is not in kebab case.`);
+        }
+        if (!reuse_1.isKebabCaseRegExp.test(newElement)) {
+            throw (0, reuse_1.logAndCreateError)(`Element "${newElement}" is not in kebab case.`);
+        }
+        this.regExp = new RegExp(`\\.${block}__${element}(?=(?:--|\\b))`, 'g');
+    }
+    static getInstance(block, element, newElement, versionRange, dependentTasks = [], options = {}) {
+        const identifier = `${block}-rename-element-${element}-to-${newElement}`;
+        if (!this.instances.has(identifier)) {
+            this.instances.set(identifier, new ScssRenameElementTask(identifier, block, element, newElement, versionRange, dependentTasks, options));
+        }
+        return this.instances.get(identifier);
+    }
+    run(baseDir) {
+        (0, reuse_1.filterFilesByExt)(baseDir, types_1.SCSS_FILE_EXTENSIONS).forEach((file) => {
+            const content = fs_1.default.readFileSync(file, 'utf8');
+            const newContent = content.replace(this.regExp, `.${this.block}__${this.newElement}`);
+            if (content !== newContent) {
+                reuse_1.MODIFIED_FILES.add(file);
+                fs_1.default.writeFileSync(file, newContent);
+            }
+        });
+    }
+}
+exports.ScssRenameElementTask = ScssRenameElementTask;

package/dist/migrate/runner/tasks/common/ScssRenameModifierTask.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScssRenameModifierTask = void 0;
+const fs_1 = __importDefault(require("fs"));
+const types_1 = require("../../../../types");
+const reuse_1 = require("../../../shares/reuse");
+const abstract_task_1 = require("../../abstract-task");
+class ScssRenameModifierTask extends abstract_task_1.AbstractTask {
+    base;
+    newModifier;
+    regExp;
+    constructor(identifier, base, modifier, newModifier, versionRange, dependentTasks = [], options = {}) {
+        super(identifier, `Rename modifier "${modifier}" of "${base}" selector`, types_1.SCSS_FILE_EXTENSIONS, versionRange, dependentTasks, options);
+        this.base = base;
+        this.newModifier = newModifier;
+        if (!reuse_1.isKebabCaseRegExp.test(base)) {
+            throw (0, reuse_1.logAndCreateError)(`Base selector "${base}" is not in kebab case.`);
+        }
+        if (!reuse_1.isKebabCaseRegExp.test(modifier)) {
+            throw (0, reuse_1.logAndCreateError)(`Modifier "${modifier}" is not in kebab case.`);
+        }
+        if (!reuse_1.isKebabCaseRegExp.test(newModifier)) {
+            throw (0, reuse_1.logAndCreateError)(`Modifier "${newModifier}" is not in kebab case.`);
+        }
+        this.regExp = new RegExp(`\\.${base}--${modifier}(?=\\b)`, 'g');
+    }
+    static getInstance(base, modifier, newModifier, versionRange, dependentTasks = [], options = {}) {
+        const identifier = `${base}-rename-modifier-${modifier}-to-${newModifier}`;
+        if (!this.instances.has(identifier)) {
+            this.instances.set(identifier, new ScssRenameModifierTask(identifier, base, modifier, newModifier, versionRange, dependentTasks, options));
+        }
+        return this.instances.get(identifier);
+    }
+    run(baseDir) {
+        (0, reuse_1.filterFilesByExt)(baseDir, types_1.SCSS_FILE_EXTENSIONS).forEach((file) => {
+            const content = fs_1.default.readFileSync(file, 'utf8');
+            const newContent = content.replace(this.regExp, `.${this.base}--${this.newModifier}`);
+            if (content !== newContent) {
+                reuse_1.MODIFIED_FILES.add(file);
+                fs_1.default.writeFileSync(file, newContent);
+            }
+        });
+    }
+}
+exports.ScssRenameModifierTask = ScssRenameModifierTask;

package/dist/migrate/runner/tasks/common/ScssUpdateTokenTask.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScssUpdateTokenTask = void 0;
+const fs_1 = __importDefault(require("fs"));
+const types_1 = require("../../../../types");
+const reuse_1 = require("../../../shares/reuse");
+const abstract_task_1 = require("../../abstract-task");
+/**
+ * Escapes special characters for use in a regular expression.
+ * @param {string} str String to escape
+ * @returns {string} Escaped string
+ */
+function escapeRegExp(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+class ScssUpdateTokenTask extends abstract_task_1.AbstractTask {
+    newToken;
+    regExp;
+    constructor(identifier, token, newToken, versionRange, dependentTasks = [], options = {}) {
+        super(identifier, `Update token "${token}" to "${newToken}"`, types_1.SCSS_FILE_EXTENSIONS, versionRange, dependentTasks, options);
+        this.newToken = newToken;
+        if (!token.startsWith('$')) {
+            throw (0, reuse_1.logAndCreateError)(`Token "${token}" must start with "$".`);
+        }
+        if (!newToken.startsWith('$')) {
+            throw (0, reuse_1.logAndCreateError)(`Token "${newToken}" must start with "$".`);
+        }
+        this.regExp = new RegExp(escapeRegExp(token) + '(?=\\s|:|;|,|\\)|\\}|$)', 'g');
+    }
+    static getInstance(token, newToken, versionRange, dependentTasks = [], options = {}) {
+        const identifier = `update-token-${token}-to-${newToken}`;
+        if (!this.instances.has(identifier)) {
+            this.instances.set(identifier, new ScssUpdateTokenTask(identifier, token, newToken, versionRange, dependentTasks, options));
+        }
+        return this.instances.get(identifier);
+    }
+    run(baseDir) {
+        (0, reuse_1.filterFilesByExt)(baseDir, types_1.SCSS_FILE_EXTENSIONS).forEach((file) => {
+            const content = fs_1.default.readFileSync(file, 'utf8');
+            const newContent = content.replace(this.regExp, this.newToken);
+            if (content !== newContent) {
+                reuse_1.MODIFIED_FILES.add(file);
+                fs_1.default.writeFileSync(file, newContent);
+            }
+        });
+    }
+}
+exports.ScssUpdateTokenTask = ScssUpdateTokenTask;

package/dist/migrate/runner/tasks/v3/index.js

@@ -6,6 +6,7 @@ const abbr_1 = require("./abbr");
 const modal_1 = require("./modal");
 const input_file_1 = require("./input-file");
 const all_input_1 = require("./all-input");
+const toaster_1 = require("./toaster");
 exports.v3Tasks = [];
 exports.v3Tasks.push(textarea_1.TextareaUpdatePropertyValue_Resize_Both);
 exports.v3Tasks.push(textarea_1.TextareaUpdatePropertyValue_Resize_Horizontal);
@@ -13,3 +14,4 @@ exports.v3Tasks.push(abbr_1.AbbrRemovePropertyTooltipAlign);
 exports.v3Tasks.push(modal_1.ModalRemovePropertyActiveElement);
 exports.v3Tasks.push(input_file_1.InputFileRemovePropertyValue);
 exports.v3Tasks.push(...all_input_1.AllInputTasks);
+exports.v3Tasks.push(toaster_1.ToasterRenameProperties);

package/dist/migrate/runner/tasks/v3/toaster.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToasterRenameProperties = void 0;
+const fs_1 = __importDefault(require("fs"));
+const types_1 = require("../../../../types");
+const fileExtensions = [...types_1.FILE_EXTENSIONS];
+const reuse_1 = require("../../../shares/reuse");
+const abstract_task_1 = require("../../abstract-task");
+class ToasterRenamePropertiesTask extends abstract_task_1.AbstractTask {
+    constructor() {
+        super('toaster-rename-properties', 'Rename Toaster properties `alertVariant` to `variant` and `defaultAlertType` to `defaultVariant`', fileExtensions, '>=2 <4');
+    }
+    static getInstance() {
+        const identifier = 'toaster-rename-properties';
+        if (!this.instances.has(identifier)) {
+            this.instances.set(identifier, new ToasterRenamePropertiesTask());
+        }
+        return this.instances.get(identifier);
+    }
+    run(baseDir) {
+        (0, reuse_1.filterFilesByExt)(baseDir, fileExtensions).forEach((file) => {
+            const content = fs_1.default.readFileSync(file, 'utf8');
+            const newContent = content.replace(/alertVariant(?=\s*:)/g, 'variant').replace(/defaultAlertType(?=\s*:)/g, 'defaultVariant');
+            if (content !== newContent) {
+                reuse_1.MODIFIED_FILES.add(file);
+                fs_1.default.writeFileSync(file, newContent);
+            }
+        });
+    }
+}
+exports.ToasterRenameProperties = ToasterRenamePropertiesTask.getInstance();

package/dist/types.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.REACT_TAG_REGEX = exports.WEB_TAG_REGEX = exports.MARKUP_EXTENSIONS = exports.CUSTOM_ELEMENT_FILE_EXTENSIONS = exports.COMPONENT_FILE_EXTENSIONS = exports.FILE_EXTENSIONS = void 0;
-exports.FILE_EXTENSIONS = ['html', 'xhtml', 'js', 'json', 'jsx', 'ts', 'tsx', 'vue'];
+exports.REACT_TAG_REGEX = exports.WEB_TAG_REGEX = exports.SCSS_FILE_EXTENSIONS = exports.MARKUP_EXTENSIONS = exports.CUSTOM_ELEMENT_FILE_EXTENSIONS = exports.COMPONENT_FILE_EXTENSIONS = exports.FILE_EXTENSIONS = void 0;
+exports.FILE_EXTENSIONS = ['html', 'xhtml', 'js', 'json', 'jsx', 'ts', 'tsx', 'vue', 'css', 'sass', 'scss'];
 exports.COMPONENT_FILE_EXTENSIONS = ['jsx', 'tsx', 'vue'];
 exports.CUSTOM_ELEMENT_FILE_EXTENSIONS = ['html', 'xhtml', 'jsx', 'tsx', 'vue'];
 exports.MARKUP_EXTENSIONS = exports.COMPONENT_FILE_EXTENSIONS.concat(exports.CUSTOM_ELEMENT_FILE_EXTENSIONS);
+exports.SCSS_FILE_EXTENSIONS = ['css', 'sass', 'scss'];
 exports.WEB_TAG_REGEX = /\b<kol-[a-z-]+/i;
 exports.REACT_TAG_REGEX = /\b<Kol[A-Z][A-Za-z]*/;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/kolibri-cli",
-  "version": "3.0.4-rc.1",
+  "version": "3.0.4-rc.2",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -21,35 +21,35 @@
   "description": "CLI for executing some helpful commands for KoliBri projects.",
   "type": "commonjs",
   "dependencies": {
-    "chalk": "5.4.1",
+    "chalk": "5.6.0",
     "commander": "14.0.0",
     "deepmerge": "4.3.1",
     "gradient-string": "3.0.0",
     "loglevel": "1.9.2",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
     "semver": "7.7.2",
     "typed-bem": "1.0.0-rc.7",
-    "@public-ui/components": "3.0.4-rc.1"
+    "@public-ui/components": "3.0.4-rc.2"
   },
   "devDependencies": {
-    "@types/node": "24.0.1",
+    "@types/node": "24.3.0",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
-    "cpy-cli": "5.0.0",
-    "cross-env": "7.0.3",
+    "cpy-cli": "6.0.0",
+    "cross-env": "10.0.0",
     "eslint": "8.57.1",
-    "eslint-config-prettier": "9.1.0",
+    "eslint-config-prettier": "9.1.2",
     "eslint-plugin-html": "8.1.3",
     "eslint-plugin-jsdoc": "50.8.0",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.5",
-    "knip": "5.61.0",
-    "mocha": "11.6.0",
+    "knip": "5.63.0",
+    "mocha": "11.7.1",
     "nodemon": "3.1.10",
     "rimraf": "6.0.1",
     "ts-node": "10.9.2",
-    "typescript": "5.8.3"
+    "typescript": "5.9.2"
   },
   "files": [
     "dist"