uikit 3.11.2-dev.f2970ffaa → 3.11.2-dev.f3ade19c4

package/build/publishDev.js

@@ -1,11 +1,10 @@
 import semver from 'semver';
-import {args, getVersion, run} from './util.js';
+import { args, getVersion, run } from './util.js';
 
-const {inc} = semver;
+const { inc } = semver;
 
 // default exec options
-if (args.f || args.force || await isDevCommit()) {
-
+if (args.f || args.force || (await isDevCommit())) {
     // increase version patch number
     const version = inc(await getVersion(), 'patch');
 
@@ -20,17 +19,16 @@ if (args.f || args.force || await isDevCommit()) {
 
     // publish to dev tag
     await run('npm publish --tag dev');
-
 }
 
 async function isDevCommit() {
-
     // check for changes to publish (%B: raw body (unwrapped subject and body)
     const message = await run('git log -1 --pretty=%B');
 
     // 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}/);
+    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]);
-
 }

package/build/release.js

@@ -1,23 +1,26 @@
 import archiver from 'archiver';
 import inquirer from 'inquirer';
 import dateFormat from 'dateformat/lib/dateformat.js';
-import {createWriteStream} from 'fs';
+import { createWriteStream } from 'fs';
 import semver from 'semver';
-import {args, getVersion, glob, logFile, replaceInFile, run} from './util.js';
+import { args, getVersion, glob, logFile, replaceInFile, run } from './util.js';
 
-const {coerce, inc, prerelease, valid} = semver;
+const { coerce, inc, prerelease, valid } = semver;
 
 const prevVersion = await getVersion();
 const version = await inquireVersion(args.v || args.version);
 
 await Promise.all([
     run(`npm version ${version} --git-tag-version false`),
-    replaceInFile('CHANGELOG.md', data =>
-        data.replace(/^##\s*WIP/m, `## ${versionFormat(version)} (${dateFormat(Date.now(), 'mmmm d, yyyy')})`)
+    replaceInFile('CHANGELOG.md', (data) =>
+        data.replace(
+            /^##\s*WIP/m,
+            `## ${versionFormat(version)} (${dateFormat(Date.now(), 'mmmm d, yyyy')})`
+        )
     ),
-    replaceInFile('.github/ISSUE_TEMPLATE/bug-report.md', data =>
+    replaceInFile('.github/ISSUE_TEMPLATE/bug-report.md', (data) =>
         data.replace(prevVersion, version)
-    )
+    ),
 ]);
 
 await run('yarn compile');
@@ -27,20 +30,20 @@ await run('yarn build-scss');
 await createPackage(version);
 
 async function inquireVersion(v) {
-
     if (valid(v)) {
         return v;
     }
 
     const prompt = inquirer.createPromptModule();
 
-    return (await prompt({
-        name: 'version',
-        message: 'Enter a version',
-        default: () => inc(prevVersion, prerelease(prevVersion) ? 'prerelease' : 'patch'),
-        validate: val => !!val.length || 'Invalid version'
-    })).version;
-
+    return (
+        await prompt({
+            name: 'version',
+            message: 'Enter a version',
+            default: () => inc(prevVersion, prerelease(prevVersion) ? 'prerelease' : 'patch'),
+            validate: (val) => !!val.length || 'Invalid version',
+        })
+    ).version;
 }
 
 async function createPackage(version) {
@@ -49,8 +52,8 @@ async function createPackage(version) {
 
     archive.pipe(createWriteStream(file));
 
-    (await glob('dist/{js,css}/uikit?(-icons|-rtl)?(.min).{js,css}')).forEach(file =>
-        archive.file(file, {name: file.substring(5)})
+    (await glob('dist/{js,css}/uikit?(-icons|-rtl)?(.min).{js,css}')).forEach((file) =>
+        archive.file(file, { name: file.substring(5) })
     );
 
     await archive.finalize();

package/build/scope.js

@@ -1,4 +1,4 @@
-import {args, glob, minify, read, renderLess, replaceInFile, validClassName} from './util.js';
+import { args, glob, minify, read, renderLess, replaceInFile, validClassName } from './util.js';
 
 if (args.h || args.help) {
     console.log(`
@@ -33,7 +33,6 @@ if (args.cleanup && prevScope) {
 
     await cleanup(files, prevScope);
     await scope(files, newScope);
-
 } else {
     await scope(files, getNewScope());
 }
@@ -41,7 +40,7 @@ if (args.cleanup && prevScope) {
 async function getScope(files) {
     for (const file of files) {
         const data = await read(file);
-        const [, scope] = (data.match(currentScopeRe) || data.match(currentScopeLegacyRe) || []);
+        const [, scope] = data.match(currentScopeRe) || data.match(currentScopeLegacyRe) || [];
         if (scope) {
             return scope;
         }
@@ -50,7 +49,6 @@ async function getScope(files) {
 }
 
 function getNewScope() {
-
     const scopeFromInput = args.scope || args.s || 'uk-scope';
 
     if (validClassName.test(scopeFromInput)) {
@@ -62,10 +60,16 @@ function getNewScope() {
 
 async function scope(files, scope) {
     for (const file of files) {
-        await replaceInFile(file, async data => {
+        await replaceInFile(file, async (data) => {
             const output = await renderLess(`.${scope} {\n${stripComments(data)}\n}`);
             return `/* scoped: ${scope} */\n${
-                output.replace(new RegExp(`.${scope}\\s((\\.(uk-(drag|modal-page|offcanvas-page|offcanvas-flip)))|html|:root)`, 'g'), '$1') // unescape
+                output.replace(
+                    new RegExp(
+                        `.${scope}\\s((\\.(uk-(drag|modal-page|offcanvas-page|offcanvas-flip)))|html|:root)`,
+                        'g'
+                    ),
+                    '$1'
+                ) // unescape
             }`;
         });
         await minify(file);
@@ -73,11 +77,17 @@ async function scope(files, scope) {
 }
 
 async function cleanup(files, scope) {
-    const string = scope.split(' ').map(scope => `.${scope}`).join(' ');
+    const string = scope
+        .split(' ')
+        .map((scope) => `.${scope}`)
+        .join(' ');
     for (const file of files) {
-        await replaceInFile(file, data => data
-            .replace(currentScopeRe, '') // remove scope comment
-            .replace(new RegExp(` *${string} ({[\\s\\S]*?})?`, 'g'), '') // replace classes
+        await replaceInFile(
+            file,
+            (data) =>
+                data
+                    .replace(currentScopeRe, '') // remove scope comment
+                    .replace(new RegExp(` *${string} ({[\\s\\S]*?})?`, 'g'), '') // replace classes
         );
     }
 }
@@ -86,6 +96,6 @@ function stripComments(input) {
     return input
         .replace(/\/\*(.|\n)*?\*\//gm, '')
         .split('\n')
-        .filter(line => line.trim().substr(0, 2) !== '//')
+        .filter((line) => line.trim().substr(0, 2) !== '//')
         .join('\n');
 }

package/build/scss.js

@@ -1,5 +1,5 @@
 import NP from 'number-precision';
-import {glob, read, write} from './util.js';
+import { glob, read, write } from './util.js';
 
 NP.enableBoundaryChecking(false);
 
@@ -74,14 +74,17 @@ const inverseTemplate = `    @include hook-inverse-component-base();
 
 /* First Step: Go through all files */
 for (const file of await glob('src/less/**/*.less')) {
-
     const data = await read(file);
 
     /* replace all Less stuff with SCSS */
-    let scssData = data.replace(/\/less\//g, '/scss/') // change less/ dir to scss/ on imports
+    let scssData = data
+        .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
-        .replace(/(:[^'"]*?\([^'"]+?)\s*\/\s*([0-9.-]+)\)/g, (exp, m1, m2) => `${m1} * ${NP.round(1 / parseFloat(m2), 5)})`)
+        .replace(
+            /(:[^'"]*?\([^'"]+?)\s*\/\s*([0-9.-]+)\)/g,
+            (exp, m1, m2) => `${m1} * ${NP.round(1 / parseFloat(m2), 5)})`
+        )
         .replace(/--uk-[^\s]+: (\$[^\s]+);/g, (exp, name) => exp.replace(name, `#{${name}}`))
         .replace(/\\\$/g, '\\@') // revert classes using the @ symbol
         .replace(/ e\(/g, ' unquote(') // convert escape function
@@ -89,14 +92,30 @@ for (const file of await glob('src/less/**/*.less')) {
         .replace(/(\$[\w-]*)\s*:(.*);/g, '$1: $2 !default;') // make variables optional
         .replace(/@mixin ([\w-]*)\s*\((.*)\)\s*{\s*}/g, '// @mixin $1($2){}') // comment empty mixins
         .replace(/\.(hook[a-zA-Z\-\d]+)(\(\))?;/g, '@if(mixin-exists($1)) {@include $1();}') // hook calls surrounded by a mixin-exists
-        .replace(/\$(import|supports|media|font-face|page|-ms-viewport|keyframes|-webkit-keyframes|-moz-document)/g, '@$1') // replace valid '@' statements
+        .replace(
+            /\$(import|supports|media|font-face|page|-ms-viewport|keyframes|-webkit-keyframes|-moz-document)/g,
+            '@$1'
+        ) // replace valid '@' statements
         .replace(/tint\((\$[\w-]+),\s([^)]*)\)/g, 'mix(white, $1, $2)') // replace Less function tint with mix
-        .replace(/fade\((\$[\w-]*), ([0-9]+)%\)/g, (match, p1, p2) => { return `rgba(${p1}, ${p2 / 100})`;}) // replace Less function fade with rgba
-        .replace(/fadeout\((\$[\w-]*), ([0-9]+)%\)/g, (match, p1, p2) => { return `fade-out(${p1}, ${p2 / 100})`;}) // replace Less function fadeout with fade-out
+        .replace(/fade\((\$[\w-]*), ([0-9]+)%\)/g, (match, p1, p2) => {
+            return `rgba(${p1}, ${p2 / 100})`;
+        }) // replace Less function fade with rgba
+        .replace(/fade(in|out)\((\$[\w-]*), ([0-9]+)%\)/g, (match, p1, p2, p3) => {
+            return `fade-${p1}(${p2}, ${p3 / 100})`;
+        }) // replace Less function fadeout with fade-out
         .replace(/\.svg-fill/g, '@include svg-fill') // include svg-fill mixin
-        .replace(/(.*):extend\((\.[\w-\\@]*) all\) when \((\$[\w-]*) = ([\w]+)\) {}/g, '@if ( $3 == $4 ) { $1 { @extend $2 !optional;} }') // update conditional extend and add !optional to ignore warnings
-        .replace(/(\.[\w-\\@]+)\s*when\s*\((\$[\w-]*)\s*=\s*(\w+)\)\s*{\s*@if\(mixin-exists\(([\w-]*)\)\) {@include\s([\w-]*)\(\);\s*}\s*}/g, '@if ($2 == $3) { $1 { @if (mixin-exists($4)) {@include $4();}}}') // update conditional hook
-        .replace(/(\.[\w-\\@]+)\s*when\s*\((\$[\w-]*)\s*=\s*(\w+)\)\s*({\s*.*?\s*})/gs, '@if ($2 == $3) {\n$1 $4\n}') // replace conditionals
+        .replace(
+            /(.*):extend\((\.[\w-\\@]*) all\) when \((\$[\w-]*) = ([\w]+)\) {}/g,
+            '@if ( $3 == $4 ) { $1 { @extend $2 !optional;} }'
+        ) // update conditional extend and add !optional to ignore warnings
+        .replace(
+            /(\.[\w-\\@]+)\s*when\s*\((\$[\w-]*)\s*=\s*(\w+)\)\s*{\s*@if\(mixin-exists\(([\w-]*)\)\) {@include\s([\w-]*)\(\);\s*}\s*}/g,
+            '@if ($2 == $3) { $1 { @if (mixin-exists($4)) {@include $4();}}}'
+        ) // update conditional hook
+        .replace(
+            /(\.[\w-\\@]+)\s*when\s*\((\$[\w-]*)\s*=\s*(\w+)\)\s*({\s*.*?\s*})/gs,
+            '@if ($2 == $3) {\n$1 $4\n}'
+        ) // replace conditionals
         .replace(/\${/g, '#{$') // string literals: from: /~"(.*)"/g, to: '#{"$1"}'
         .replace(/[^(](-\$[\w-]*)/g, ' ($1)') // surround negative variables with brackets
         .replace(/(--[\w-]+:\s*)~'([^']+)'/g, '$1$2') // string literals in custom properties
@@ -124,7 +143,10 @@ for (const file of await glob('src/less/**/*.less')) {
         /* remove the theme import first place */
         scssData = scssData.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(/\/\/ Core\n\/\//g, '// Theme\n//\n\n@import "theme/_import.scss";');
+        scssData = scssData.replace(
+            /\/\/ Core\n\/\//g,
+            '// Theme\n//\n\n@import "theme/_import.scss";'
+        );
     }
 
     /* mixin.less needs to be fully replaced by the new mixin file*/
@@ -133,27 +155,34 @@ for (const file of await glob('src/less/**/*.less')) {
     }
 
     await write(file.replace(/less/g, 'scss').replace('.theme.', '-theme.'), scssData);
-
 }
 
 /* Second Step write all new needed files for SASS */
 
 /* write mixins into new file */
-const mixins_theme = Object.keys(themeMixins).map(function (key) { return themeMixins[key]; });
+const mixins_theme = Object.keys(themeMixins).map(function (key) {
+    return themeMixins[key];
+});
 await write('src/scss/mixins-theme.scss', mixins_theme.join('\n'));
 
-const mixins_core = Object.keys(coreMixins).map(function (key) { return coreMixins[key]; });
+const mixins_core = Object.keys(coreMixins).map(function (key) {
+    return coreMixins[key];
+});
 await write('src/scss/mixins.scss', mixins_core.join('\n'));
 
 /* write core variables */
 const compactCoreVar = new Set();
-Object.keys(coreVar).map(key => getAllDependencies(coreVar, key).forEach(dependency => compactCoreVar.add(dependency)));
+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)));
+Object.keys(themeVar).map((key) =>
+    getAllDependencies(themeVar, key).forEach((dependency) => compactThemeVar.add(dependency))
+);
 
 await write('src/scss/variables-theme.scss', Array.from(compactThemeVar).join('\n'));
 
@@ -162,15 +191,14 @@ await write('src/scss/variables-theme.scss', Array.from(compactThemeVar).join('\
  * @return Set with all the dependencies.
  */
 function getAllDependencies(allVariables, currentKey, dependencies = new Set()) {
-
     if (!allVariables[currentKey].dependencies.length) {
-
         dependencies.add(`${currentKey}: ${allVariables[currentKey].value}`);
         return Array.from(dependencies);
     } else {
-
-        allVariables[currentKey].dependencies.forEach(dependecy => {
-            getAllDependencies(allVariables, dependecy, dependencies).forEach(newDependency => dependencies.add(newDependency));
+        allVariables[currentKey].dependencies.forEach((dependecy) => {
+            getAllDependencies(allVariables, dependecy, dependencies).forEach((newDependency) =>
+                dependencies.add(newDependency)
+            );
         });
 
         dependencies.add(`${currentKey}: ${allVariables[currentKey].value}`);
@@ -183,14 +211,17 @@ function getAllDependencies(allVariables, currentKey, dependencies = new Set())
  * @return an updated data where the mixins have been removed.
  */
 function getMixinsFromFile(file, data) {
-
     /* 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]}(){}`; }
-        if (!(match[1] in coreMixins)) { coreMixins[match[1]] = `@mixin ${match[1]}(){}`; }
+        if (!(match[1] in themeMixins)) {
+            themeMixins[match[1]] = `@mixin ${match[1]}(){}`;
+        }
+        if (!(match[1] in coreMixins)) {
+            coreMixins[match[1]] = `@mixin ${match[1]}(){}`;
+        }
 
         match = regex.exec(data);
     }
@@ -201,7 +232,7 @@ function getMixinsFromFile(file, data) {
 
     while (match) {
         [themeMixins[match[1]]] = match;
-        if (file.indexOf('theme/') < 0) {
+        if (!file.includes('theme/')) {
             [coreMixins[match[1]]] = match;
         }
         match = regex.exec(data);
@@ -213,7 +244,7 @@ function getMixinsFromFile(file, data) {
 
     while (match) {
         [themeMixins[match[1]]] = match;
-        if (file.indexOf('theme/') < 0) {
+        if (!file.includes('theme/')) {
             [coreMixins[match[1]]] = match;
         }
 
@@ -235,15 +266,15 @@ async function getVariablesFromFile(file, data) {
     let match = regex.exec(data);
 
     while (match) {
-
         /* check if variable is a background icon, if so replace it directly by the SVG */
-        if (match[0].indexOf('../../images/backgrounds') >= 0) {
-
-            const iconregex = /(\$[\w-]+)\s*:\s*"\.\.\/\.\.\/images\/backgrounds\/([\w./-]+)" !default;/g;
+        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.replace(/\r?\n|\r/g, '%0A')
-                .replace(/"/g, '\'')
+            svg = `"${svg
+                .replace(/\r?\n|\r/g, '%0A')
+                .replace(/"/g, "'")
                 .replace(/\s/g, '%20')
                 .replace(/</g, '%3C')
                 .replace(/=/g, '%3D')
@@ -254,11 +285,11 @@ async function getVariablesFromFile(file, data) {
                 .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.indexOf('theme/') < 0) {
-                coreVar[iconmatch[1]] = {value: `${svg} !default;`, dependencies: []};
+            if (!file.includes('theme/')) {
+                coreVar[iconmatch[1]] = { value: `${svg} !default;`, dependencies: [] };
             }
 
-            themeVar[iconmatch[1]] = {value: `${svg} !default;`, dependencies: []};
+            themeVar[iconmatch[1]] = { value: `${svg} !default;`, dependencies: [] };
 
             /* add SVG to the variable within the file itself as well */
             const inlineSVG = `${iconmatch[1]}: ${svg} !default;`;
@@ -266,7 +297,6 @@ async function getVariablesFromFile(file, data) {
 
             /* when it is not an SVG add the variable and search for its dependencies */
         } else {
-
             const variablesRegex = /(\$[\w-]+)/g;
             let variablesMatch = variablesRegex.exec(match[2]);
             const dependencies = [];
@@ -277,11 +307,14 @@ async function getVariablesFromFile(file, data) {
             }
 
             /* add variables only to the core Variables if it is not a theme file */
-            if (file.indexOf('theme/') < 0) {
-                coreVar[match[1]] = {value: `${match[2]};`, dependencies: Array.from(dependencies)};
+            if (!file.includes('theme/')) {
+                coreVar[match[1]] = {
+                    value: `${match[2]};`,
+                    dependencies: Array.from(dependencies),
+                };
             }
 
-            themeVar[match[1]] = {value: `${match[2]};`, dependencies: Array.from(dependencies)};
+            themeVar[match[1]] = { value: `${match[2]};`, dependencies: Array.from(dependencies) };
         }
 
         match = regex.exec(data);