uikit 3.16.21 → 3.16.22-dev.8dfedb1d6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## WIP
+
+### Fixed
+
+- Fix existing notification container has to be visible before appending notification 
+
 ## 3.16.21 (June 13, 2023)
 
 ### Fixed

package/build/build.js

@@ -1,7 +1,7 @@
+import path from 'path';
 import { glob } from 'glob';
 import pLimit from 'p-limit';
 import camelize from 'camelcase';
-import { basename, resolve } from 'path';
 import { args, compile, icons } from './util.js';
 
 const limit = pLimit(Number(process.env.cpus || 2));
@@ -72,14 +72,14 @@ async function getComponentTasks() {
     const components = await glob('src/js/components/!(index).js');
 
     return components.reduce((components, file) => {
-        const name = basename(file, '.js');
+        const name = path.basename(file, '.js');
 
         components[name] = () =>
             compile('build/wrapper/component.js', `dist/js/components/${name}`, {
                 name,
                 external: ['uikit', 'uikit-util'],
                 globals: { uikit: 'UIkit', 'uikit-util': 'UIkit.util' },
-                aliases: { component: resolve('src/js/components', name) },
+                aliases: { component: path.resolve('src/js/components', name) },
                 replaces: { NAME: `'${camelize(name)}'` },
             });
 
@@ -89,5 +89,5 @@ async function getComponentTasks() {
 
 async function getTestFiles() {
     const files = await glob('tests/!(index).html');
-    return JSON.stringify(files.sort().map((file) => basename(file, '.html')));
+    return JSON.stringify(files.sort().map((file) => path.basename(file, '.html')));
 }

package/build/less.js

@@ -1,6 +1,6 @@
+import path from 'path';
 import { glob } from 'glob';
 import rtlcss from 'rtlcss';
-import { basename } from 'path';
 import { args, banner, minify, pathExists, read, readJson, renderLess, write } from './util.js';
 
 const { rtl } = args;
@@ -13,7 +13,7 @@ const sources = [
 const themes = (await pathExists('themes.json')) ? await readJson('themes.json') : {};
 
 for (const src of await glob('custom/*.less')) {
-    const theme = basename(src, '.less');
+    const theme = path.basename(src, '.less');
     const dist = `dist/css/uikit.${theme}${rtl ? '-rtl' : ''}.css`;
 
     themes[theme] = { css: `../${dist}` };

package/build/publishDev.js

@@ -1,34 +1,33 @@
+import { $ } from 'execa';
 import semver from 'semver';
-import { args, getVersion, run } from './util.js';
+import { args, getVersion } from './util.js';
 
-const { inc } = semver;
+const $$ = $({ stdio: 'inherit' });
 
 // default exec options
 if (args.f || args.force || (await isDevCommit())) {
     // increase version patch number
-    const version = inc(await getVersion(), 'patch');
+    const version = semver.inc(await getVersion(), 'patch');
 
     // get current git hash
-    const hash = (await run('git rev-parse --short HEAD')).trim();
+    const hash = (await $`git rev-parse --short HEAD`).stdout.trim();
 
     // set version of package.json
-    await run(`pnpm version ${version}-dev.${hash} --no-git-tag-version`);
+    await $$`pnpm version ${version}-dev.${hash} --no-git-tag-version`;
 
     // create dist files
-    await run('pnpm compile && pnpm compile-rtl && pnpm build-scss');
+    await $$`pnpm compile`;
+    await $$`pnpm compile-rtl`;
+    await $$`pnpm build-scss`;
 
     // publish to dev tag
-    await run('pnpm publish --tag dev --no-git-checks');
+    await $$`pnpm publish --tag dev --no-git-checks`;
 }
 
 async function isDevCommit() {
     // check for changes to publish (%B: raw body (unwrapped subject and body)
-    const message = await run('git log -1 --pretty=%B');
+    const message = (await $`git log -1 --pretty=%B`).stdout.trim();
 
     // https://www.conventionalcommits.org/en/v1.0.0/
-    const type = message.match(
-        /^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50}/
-    );
-
-    return type && ['feat', 'fix', 'refactor', 'perf'].includes(type[2]);
+    return Boolean(message.match(/^(revert: )?(feat|fix|refactor|perf)(\(.+\))?: .{1,50}/));
 }

package/build/release.js

@@ -1,14 +1,16 @@
+import fs from 'fs';
+import { $ } from 'execa';
 import { glob } from 'glob';
+import semver from 'semver';
 import archiver from 'archiver';
 import inquirer from 'inquirer';
-import { createWriteStream } from 'fs';
 import dateFormat from 'dateformat/lib/dateformat.js';
-import { coerce, gt, inc, prerelease, valid } from 'semver';
-import { args, getVersion, logFile, read, replaceInFile, run } from './util.js';
+import { args, getVersion, logFile, read, replaceInFile } from './util.js';
 
+const $$ = $({ stdio: 'inherit' });
 const prompt = inquirer.createPromptModule();
 
-if (await run('git status --porcelain')) {
+if ((await $`git status --porcelain`).stdout.trim()) {
     throw 'Repository contains uncommitted changes.';
 }
 
@@ -17,9 +19,9 @@ const version = await inquireVersion(args.v || args.version);
 
 await raiseVersion(version);
 
-await run('pnpm compile');
-await run('pnpm compile-rtl');
-await run('pnpm build-scss');
+await $$`pnpm compile`;
+await $$`pnpm compile-rtl`;
+await $$`pnpm build-scss`;
 
 await createPackage(version);
 
@@ -28,7 +30,7 @@ if (args.d || args.deploy || (await inquireDeploy())) {
 }
 
 function isValidVersion(version) {
-    return valid(version) && gt(version, prevVersion);
+    return semver.valid(version) && semver.gt(version, prevVersion);
 }
 
 async function inquireVersion(version) {
@@ -40,7 +42,8 @@ async function inquireVersion(version) {
         await prompt({
             name: 'version',
             message: 'Enter a version',
-            default: () => inc(prevVersion, prerelease(prevVersion) ? 'prerelease' : 'patch'),
+            default: () =>
+                semver.inc(prevVersion, semver.prerelease(prevVersion) ? 'prerelease' : 'patch'),
             validate: (val) => isValidVersion(val) || 'Invalid version',
         })
     ).version;
@@ -48,7 +51,7 @@ async function inquireVersion(version) {
 
 function raiseVersion(version) {
     return Promise.all([
-        run(`npm version ${version} --git-tag-version false`),
+        $$`npm version ${version} --git-tag-version false`,
         replaceInFile('CHANGELOG.md', (data) =>
             data.replace(
                 /^##\s*WIP/m,
@@ -65,7 +68,7 @@ async function createPackage(version) {
     const dest = `dist/uikit-${version}.zip`;
     const archive = archiver('zip');
 
-    archive.pipe(createWriteStream(dest));
+    archive.pipe(fs.createWriteStream(dest));
 
     for (const file of await glob('dist/{js,css}/uikit?(-icons|-rtl)?(.min).{js,css}')) {
         archive.file(file, { name: file.substring(5) });
@@ -76,7 +79,7 @@ async function createPackage(version) {
 }
 
 function versionFormat(version) {
-    return [coerce(version).version].concat(prerelease(version) || []).join(' ');
+    return [semver.coerce(version).version].concat(semver.prerelease(version) || []).join(' ');
 }
 
 async function inquireDeploy() {
@@ -91,26 +94,29 @@ async function inquireDeploy() {
 }
 
 async function deploy(version) {
-    await run(`git checkout -b release/v${version}`);
-    await run('git stage --all');
-    await run(`git commit -am "v${version}"`);
-    await run('git checkout main');
-    await run(
-        `git merge release/v${version} --commit --no-ff -m "Merge branch 'release/v${version}'"`
-    );
+    const tag = `v${version}`;
+    const branch = `release/v${version}`;
 
-    await run(`git tag v${version}`);
-    await run('git checkout develop');
-    await run(`git merge v${version} --commit --no-ff -m "Merge tag 'v${version}' into develop"`);
-    await run(`git branch --delete release/v${version}`);
+    await $$`git checkout -b ${branch}`;
+    await $$`git stage --all`;
+    await $$`git commit -am v${version}`;
 
-    await run('git push origin develop');
-    await run('git push origin main --tags');
+    await $$`git checkout main`;
+    await $$`git merge ${branch} --commit --no-ff -m ${`Merge branch '${branch}'`}`;
+    await $$`git tag ${tag}`;
 
-    await run('pnpm publish --no-git-checks');
+    await $$`git checkout develop`;
+    await $$`git merge ${tag} --commit --no-ff -m ${`Merge tag '${tag}' into develop`}`;
+
+    await $$`git branch --delete ${branch}`;
+
+    await $$`git push origin develop`;
+    await $$`git push origin main --tags`;
+
+    await $$`pnpm publish --no-git-checks`;
 
     const notes = (await read('./Changelog.md'))
         .match(/## \d.*?$\s*(.*?)\s*(?=## \d)/ms)[1]
         .replace(/(["`])/g, '\\$1');
-    await run(`gh release create v${version} --notes "${notes}" ./dist/uikit-${version}.zip`);
+    await $$`gh release create v${version} --notes ${notes} ./dist/uikit-${version}.zip`;
 }

package/build/scss/inverse.scss

@@ -0,0 +1,30 @@
+@mixin hook-inverse() {
+    @include hook-inverse-component-base();
+    @include hook-inverse-component-link();
+    @include hook-inverse-component-heading();
+    @include hook-inverse-component-divider();
+    @include hook-inverse-component-list();
+    @include hook-inverse-component-icon();
+    @include hook-inverse-component-form();
+    @include hook-inverse-component-button();
+    @include hook-inverse-component-grid();
+    @include hook-inverse-component-close();
+    @include hook-inverse-component-totop();
+    @include hook-inverse-component-badge();
+    @include hook-inverse-component-label();
+    @include hook-inverse-component-article();
+    @include hook-inverse-component-search();
+    @include hook-inverse-component-nav();
+    @include hook-inverse-component-navbar();
+    @include hook-inverse-component-subnav();
+    @include hook-inverse-component-breadcrumb();
+    @include hook-inverse-component-pagination();
+    @include hook-inverse-component-tab();
+    @include hook-inverse-component-slidenav();
+    @include hook-inverse-component-dotnav();
+    @include hook-inverse-component-accordion();
+    @include hook-inverse-component-iconnav();
+    @include hook-inverse-component-text();
+    @include hook-inverse-component-column();
+    @include hook-inverse-component-utility();
+}

package/build/scss/mixin.scss

@@ -0,0 +1,32 @@
+//
+// Component:       Mixin
+// Description:     Defines mixins which are used across all components
+//
+// ========================================================================
+
+// SVG
+// ========================================================================
+
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+    $index: str-index($string, $search);
+
+    @if $index {
+        @return str-slice($string, 1, $index - 1) + $replace +
+            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+
+    @return $string;
+}
+
+@mixin svg-fill($src, $color-default, $color-new) {
+    $replace-src: str-replace($src, $color-default, $color-new) !default;
+    $replace-src: str-replace($replace-src, '#', '%23');
+    $replace-src: quote($replace-src);
+    background-image: url($replace-src);
+}

package/build/scss.js

@@ -1,84 +1,21 @@
 import { glob } from 'glob';
 import NP from 'number-precision';
 import { read, write } from './util.js';
+import path from 'path';
 
 NP.enableBoundaryChecking(false);
 
-const themeMixins = {};
 const coreMixins = {};
-const themeVar = {};
-const coreVar = {};
-
-/* template for the new components/mixins.scss file*/
-const mixinTemplate = `//
-// Component:       Mixin
-// Description:     Defines mixins which are used across all components
-//
-// ========================================================================
-
-
-// SVG
-// ========================================================================
-
-/// Replace \`$search\` with \`$replace\` in \`$string\`
-/// @author Hugo Giraudel
-/// @param {String} $string - Initial string
-/// @param {String} $search - Substring to replace
-/// @param {String} $replace ('') - New value
-/// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
-
-@mixin svg-fill($src, $color-default, $color-new){
-
-    $replace-src: str-replace($src, $color-default, $color-new) !default;
-    $replace-src: str-replace($replace-src, "#", "%23");
-    background-image: url(quote($replace-src));
-}`;
-
-/* template for the inverse components */
-const inverseTemplate = `    @include hook-inverse-component-base();
-    @include hook-inverse-component-link();
-    @include hook-inverse-component-heading();
-    @include hook-inverse-component-divider();
-    @include hook-inverse-component-list();
-    @include hook-inverse-component-icon();
-    @include hook-inverse-component-form();
-    @include hook-inverse-component-button();
-    @include hook-inverse-component-grid();
-    @include hook-inverse-component-close();
-    @include hook-inverse-component-totop();
-    @include hook-inverse-component-badge();
-    @include hook-inverse-component-label();
-    @include hook-inverse-component-article();
-    @include hook-inverse-component-search();
-    @include hook-inverse-component-nav();
-    @include hook-inverse-component-navbar();
-    @include hook-inverse-component-subnav();
-    @include hook-inverse-component-breadcrumb();
-    @include hook-inverse-component-pagination();
-    @include hook-inverse-component-tab();
-    @include hook-inverse-component-slidenav();
-    @include hook-inverse-component-dotnav();
-    @include hook-inverse-component-accordion();
-    @include hook-inverse-component-iconnav();
-    @include hook-inverse-component-text();
-    @include hook-inverse-component-column();
-    @include hook-inverse-component-utility();`;
+const themeMixins = {};
+const coreVariables = {};
+const themeVariables = {};
 
 /* First Step: Go through all files */
 for (const file of (await glob('src/less/**/*.less')).sort()) {
-    const data = await read(file);
+    let source = await read(file);
 
     /* replace all Less stuff with SCSS */
-    let scssData = data
+    source = (await read(file))
         .replace(/\/less\//g, '/scss/') // change less/ dir to scss/ on imports
         .replace(/\.less/g, '.scss') // change .less extensions to .scss on imports
         .replace(/@/g, '$') // convert variables
@@ -124,26 +61,24 @@ for (const file of (await glob('src/less/**/*.less')).sort()) {
         .replace(/~('[^']+')/g, 'unquote($1)'); // string literals: for real
 
     /* File name of the current file */
-    const [filename] = file.split('/').pop().split('.less');
+    const filename = path.basename(file, '.less');
 
-    if (filename !== 'inverse') {
-        scssData = scssData.replace(/hook-inverse(?!-)/g, `hook-inverse-component-${filename}`);
-    } else {
-        const joinedHook = `@mixin hook-inverse(){\n${inverseTemplate}\n}\n`;
-        scssData = scssData.replace(/\*\//, '*/\n' + joinedHook);
-    }
+    source =
+        filename === 'inverse'
+            ? source.replace(/\*\//, `*/\n${await read('build/scss/inverse.scss')}`)
+            : source.replace(/hook-inverse(?!-)/g, `hook-inverse-component-${filename}`);
 
     /* get all the mixins and remove them from the file */
-    scssData = getMixinsFromFile(file, scssData);
+    source = getMixinsFromFile(file, source);
 
     /* get all Variables and remove them */
-    scssData = await getVariablesFromFile(file, scssData);
+    source = await getVariablesFromFile(file, source);
 
     if (filename === 'uikit.theme') {
         /* remove the theme import first place */
-        scssData = scssData.replace(/\/\/\n\/\/ Theme\n\/\/\n\n@import "theme\/_import.scss";/, '');
+        source = source.replace(/\/\/\n\/\/ Theme\n\/\/\n\n@import "theme\/_import.scss";/, '');
         /* add uikit-mixins and uikit-variables include to the uikit.scss file and change order, to load theme files first */
-        scssData = scssData.replace(
+        source = source.replace(
             /\/\/ Core\n\/\//g,
             '// Theme\n//\n\n@import "theme/_import.scss";'
         );
@@ -151,125 +86,90 @@ for (const file of (await glob('src/less/**/*.less')).sort()) {
 
     /* mixin.less needs to be fully replaced by the new mixin file*/
     if (filename === 'mixin') {
-        scssData = mixinTemplate;
+        source = await read('build/scss/mixin.scss');
     }
 
-    await write(file.replace(/less/g, 'scss').replace('.theme.', '-theme.'), scssData);
+    await write(file.replace(/less/g, 'scss').replace('.theme.', '-theme.'), source);
 }
 
-/* Second Step write all new needed files for SASS */
-
-/* write mixins into new file */
-delete themeMixins['svg-fill'];
-const mixins_theme = Object.keys(themeMixins).map(function (key) {
-    return themeMixins[key];
-});
-await write('src/scss/mixins-theme.scss', mixins_theme.join('\n'));
-
-delete coreMixins['svg-fill'];
-const mixins_core = Object.keys(coreMixins).map(function (key) {
-    return coreMixins[key];
-});
-await write('src/scss/mixins.scss', mixins_core.join('\n'));
+/* Second Step: write all new needed files for Sass */
 
-/* write core variables */
-const compactCoreVar = new Set();
-Object.keys(coreVar).map((key) =>
-    getAllDependencies(coreVar, key).forEach((dependency) => compactCoreVar.add(dependency))
-);
-
-await write('src/scss/variables.scss', Array.from(compactCoreVar).join('\n'));
-
-/* write theme variables */
-const compactThemeVar = new Set();
-Object.keys(themeVar).map((key) =>
-    getAllDependencies(themeVar, key).forEach((dependency) => compactThemeVar.add(dependency))
-);
+/* write mixins files */
+for (const [vars, file] of [
+    [coreMixins, 'mixins'],
+    [themeMixins, 'mixins-theme'],
+]) {
+    delete vars['svg-fill'];
+    await write(`src/scss/${file}.scss`, Object.values(vars).join('\n'));
+}
 
-await write('src/scss/variables-theme.scss', Array.from(compactThemeVar).join('\n'));
+/* write variables files */
+for (const [vars, file] of [
+    [coreVariables, 'variables'],
+    [themeVariables, 'variables-theme'],
+]) {
+    const variables = Object.keys(vars).reduce(
+        (dependencies, key) => resolveDependencies(vars, key, dependencies),
+        new Set()
+    );
+    await write(`src/scss/${file}.scss`, Array.from(variables).join('\n'));
+}
 
 /*
- * recursive function to get a dependencie Set which is ordered so that no depencies exist to a later on entry
+ * recursive function to get a dependencies Set which is ordered so that no dependencies exist to a later on entry
  * @return Set with all the dependencies.
  */
-function getAllDependencies(allVariables, currentKey, dependencies = new Set()) {
-    allVariables[currentKey].dependencies?.forEach((dependency) =>
-        getAllDependencies(allVariables, dependency, dependencies).forEach((newDependency) =>
-            dependencies.add(newDependency)
-        )
-    );
+function resolveDependencies(allVariables, currentKey, dependencies = new Set()) {
+    for (const dependency of allVariables[currentKey].dependencies) {
+        for (const newDependency of resolveDependencies(allVariables, dependency, dependencies)) {
+            dependencies.add(newDependency);
+        }
+    }
 
     dependencies.add(`${currentKey}: ${allVariables[currentKey].value}`);
-    return Array.from(dependencies);
+    return dependencies;
 }
 
 /*
- * function to extract all the mixins from a given file with its data.
+ * Extract all the mixins from a given file with its data.
  * @return an updated data where the mixins have been removed.
  */
-function getMixinsFromFile(file, data) {
+function getMixinsFromFile(file, source) {
     /* Step 1: get all includes and insert them, so that at least empty mixins exist. */
-    let regex = /@include ([a-z0-9-]+)/g;
-    let match = regex.exec(data);
-
-    while (match) {
-        if (!(match[1] in themeMixins)) {
-            themeMixins[match[1]] = `@mixin ${match[1]}(){}`;
+    for (const [, include] of source.matchAll(/@include ([a-z0-9-]+)/g)) {
+        if (!(include in themeMixins)) {
+            themeMixins[include] = `@mixin ${include}(){}`;
         }
-        if (!(match[1] in coreMixins)) {
-            coreMixins[match[1]] = `@mixin ${match[1]}(){}`;
+        if (!(include in coreMixins)) {
+            coreMixins[include] = `@mixin ${include}(){}`;
         }
-
-        match = regex.exec(data);
     }
 
-    /* Step 2: get all multiline mixins */
-    regex = /@mixin ([\w-]*)\s*\((.*)\)\s*{\n(\s+[\w\W]+?)(?=\n})\n}/g;
-    match = regex.exec(data);
-
-    while (match) {
-        [themeMixins[match[1]]] = match;
+    /* Step 2: get all mixins */
+    for (const [match, mixin] of source.matchAll(
+        /@mixin ([\w-]*)\s*\(.*\)\s*{(\n\s+[\w\W]+?(?=\n})\n| [^\n]+)}/g
+    )) {
+        themeMixins[mixin] = match;
         if (!file.includes('theme/')) {
-            [coreMixins[match[1]]] = match;
+            coreMixins[mixin] = match;
         }
-        match = regex.exec(data);
     }
 
-    /* Step 3: get all single line mixins */
-    regex = /@mixin ([\w-]*)\s*\((.*)\)\s*{( [^\n]+)}/g;
-    match = regex.exec(data);
-
-    while (match) {
-        [themeMixins[match[1]]] = match;
-        if (!file.includes('theme/')) {
-            [coreMixins[match[1]]] = match;
-        }
-
-        match = regex.exec(data);
-    }
-
-    /* Step 4: remove the mixins from the file, so that users can overwrite them in their custom code. */
-    return data
-        .replace(/@mixin ([\w-]*)\s*\((.*)\)\s*{\n(\s+[\w\W]+?)(?=\n})\n}/g, '')
-        .replace(/@mixin ([\w-]*)\s*\((.*)\)\s*{( [^\n]+)}/g, '');
+    /* Step 3: remove the mixins from the file, so that users can overwrite them in their custom code. */
+    return source.replace(/@mixin ([\w-]*)\s*\((.*)\)\s*{(\n(\s+[\w\W]+?)(?=\n})\n| [^\n]+)}/g, '');
 }
 
 /*
- * function to extract all the variables from a given file with its data.
+ * Extract all variables from a given file with its data.
  * @return an updated data where the icons have been replaced by the actual SVG data.
  */
-async function getVariablesFromFile(file, data) {
-    const regex = /(\$[\w-]*)\s*:\s*(.*);/g;
-    let match = regex.exec(data);
+async function getVariablesFromFile(file, source) {
+    for (let [, name, value] of source.matchAll(/(\$[\w-]*)\s*:\s*(.*);/g)) {
+        let dependencies = [];
 
-    while (match) {
         /* check if variable is a background icon, if so replace it directly by the SVG */
-        if (match[0].includes('../../images/backgrounds')) {
-            const iconregex =
-                /(\$[\w-]+)\s*:\s*"\.\.\/\.\.\/images\/backgrounds\/([\w./-]+)" !default;/g;
-            const iconmatch = iconregex.exec(match[0]);
-            let svg = (await read(`src/images/backgrounds/${iconmatch[2]}`)).toString();
-            svg = `"${svg
+        if (value.includes('../../images/backgrounds')) {
+            const svg = (await read(`src/${value.match(/images\/backgrounds\/[\w./-]+/)}`))
                 .replace(/\r?\n|\r/g, '%0A')
                 .replace(/"/g, "'")
                 .replace(/\s/g, '%20')
@@ -279,43 +179,23 @@ async function getVariablesFromFile(file, data) {
                 .replace(/:/g, '%3A')
                 .replace(/\//g, '%2F')
                 .replace(/>/g, '%3E')
-                .replace(/%3Csvg/, 'data:image/svg+xml;charset=UTF-8,%3Csvg')}"`;
-
-            /* add SVG to the coreVar and themeVar only if it is a theme file and make it optional */
-            if (!file.includes('theme/')) {
-                coreVar[iconmatch[1]] = { value: `${svg} !default;`, dependencies: [] };
-            }
-
-            themeVar[iconmatch[1]] = { value: `${svg} !default;`, dependencies: [] };
+                .replace(/%3Csvg/, 'data:image/svg+xml;charset=UTF-8,%3Csvg');
 
-            /* add SVG to the variable within the file itself as well */
-            const inlineSVG = `${iconmatch[1]}: ${svg} !default;`;
-            data = data.replace(match[0], inlineSVG);
+            value = `"${svg}" !default`;
 
-            /* when it is not an SVG add the variable and search for its dependencies */
+            /* if it's not an SVG add the variable and search for its dependencies */
         } else {
-            const variablesRegex = /(\$[\w-]+)/g;
-            let variablesMatch = variablesRegex.exec(match[2]);
-            const dependencies = [];
-
-            while (variablesMatch) {
-                dependencies.push(variablesMatch[1]);
-                variablesMatch = variablesRegex.exec(match[2]);
-            }
+            dependencies = Array.from(value.matchAll(/\$[\w-]+/g)).map(([value]) => value);
+        }
 
-            /* add variables only to the core Variables if it is not a theme file */
-            if (!file.includes('theme/')) {
-                coreVar[match[1]] = {
-                    value: `${match[2]};`,
-                    dependencies: Array.from(dependencies),
-                };
-            }
+        themeVariables[name] = { value: `${value};`, dependencies };
 
-            themeVar[match[1]] = { value: `${match[2]};`, dependencies: Array.from(dependencies) };
+        /* add variables only to the core Variables if it is not a theme file */
+        if (!file.includes('theme/')) {
+            coreVariables[name] = themeVariables[name];
         }
-
-        match = regex.exec(data);
     }
 
-    return data.replace(/(\$[\w-]*)\s*:(.*);\r?\n/g, '');
+    // Remove variables from source
+    return source.replace(/(\$[\w-]*)\s*:(.*);\r?\n/g, '');
 }