uikit 3.8.1 → 3.9.2-dev.836238c9b

package/build/release.js

@@ -1,22 +1,30 @@
-const fs = require('fs');
-const {promisify} = require('util');
-const archiver = require('archiver');
-const inquirer = require('inquirer');
-const pkg = require('../package.json');
-const dateFormat = require('dateformat');
-const args = require('minimist')(process.argv);
-const {glob, logFile, read, write} = require('./util');
-const {coerce, inc, prerelease, valid} = require('semver');
-const exec = promisify(require('child_process').exec);
-
-inquireVersion(args.v || args.version)
-    .then(updateVersion)
-    .then(compile)
-    .then(createPackage)
-    .catch(({message}) => {
-        console.error(message);
-        process.exitCode = 1;
-    });
+import archiver from 'archiver';
+import inquirer from 'inquirer';
+import dateFormat from 'dateformat/lib/dateformat.js';
+import {createWriteStream} from 'fs';
+import semver from 'semver';
+import {args, getVersion, glob, logFile, replaceInFile, run} from './util.js';
+
+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('.github/ISSUE_TEMPLATE/bug-report.md', data =>
+        data.replace(prevVersion, version)
+    )
+]);
+
+await run('yarn compile');
+await run('yarn compile-rtl');
+await run('yarn build-scss');
+
+await createPackage(version);
 
 async function inquireVersion(v) {
 
@@ -26,42 +34,20 @@ async function inquireVersion(v) {
 
     const prompt = inquirer.createPromptModule();
 
-    const {version} = await prompt({
+    return (await prompt({
         name: 'version',
         message: 'Enter a version',
-        default: () => inc(pkg.version, prerelease(pkg.version) ? 'prerelease' : 'patch'),
+        default: () => inc(prevVersion, prerelease(prevVersion) ? 'prerelease' : 'patch'),
         validate: val => !!val.length || 'Invalid version'
-    });
-
-    return version;
-
-}
-
-async function updateVersion(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('.github/ISSUE_TEMPLATE/bug-report.md', data => data.replace(pkg.version, version))
-    ]);
-
-    return version;
-}
-
-async function compile(version) {
-    await sequential([
-        () => run('yarn compile'),
-        () => run('yarn compile-rtl'),
-        () => run('yarn build-scss')
-    ]);
+    })).version;
 
-    return version;
 }
 
 async function createPackage(version) {
     const file = `dist/uikit-${version}.zip`;
     const archive = archiver('zip');
 
-    archive.pipe(fs.createWriteStream(file));
+    archive.pipe(createWriteStream(file));
 
     (await glob('dist/{js,css}/uikit?(-icons|-rtl)?(.min).{js,css}')).forEach(file =>
         archive.file(file, {name: file.substring(5)})
@@ -74,18 +60,3 @@ async function createPackage(version) {
 function versionFormat(version) {
     return [coerce(version).version].concat(prerelease(version) || []).join(' ');
 }
-
-async function replaceInFile(file, fn) {
-    await write(file, fn(await read(file)));
-}
-
-async function sequential(tasks) {
-    await tasks.reduce((promise, task) => promise.then(task), Promise.resolve());
-}
-
-async function run(cmd) {
-    const {stdout, stderr} = await exec(cmd);
-
-    stdout && console.log(stdout.trim());
-    stderr && console.log(stderr.trim());
-}

package/build/scope.js

@@ -1,12 +1,6 @@
-const {glob, minify, read, renderLess, write, validClassName} = require('./util');
-const argv = require('minimist')(process.argv.slice(2));
+import {args, glob, minify, read, renderLess, replaceInFile, validClassName} from './util.js';
 
-argv._.forEach(arg => {
-    const tokens = arg.split('=');
-    argv[tokens[0]] = tokens[1] || true;
-});
-
-if (argv.h || argv.help) {
+if (args.h || args.help) {
     console.log(`
         usage:
 
@@ -19,58 +13,45 @@ if (argv.h || argv.help) {
         scope.js cleanup // will remove current scope
 
     `);
-} else {
-    run().catch(({message}) => {
-        console.error(message);
-        process.exitCode = 1;
-    });
+    process.exit(0);
 }
+const currentScopeRe = /\/\* scoped: ([^*]*) \*\//;
+const currentScopeLegacyRe = /\.(uk-scope)/;
 
-async function run() {
-
-    const files = await readFiles();
-    const oldScope = getScope(files);
-
-    if (argv.cleanup && oldScope) {
-        cleanup(files, oldScope);
-    } else if (oldScope) {
-        const newScope = getNewScope();
-
-        if (oldScope === newScope) {
-            console.warn(`Already scoped with: ${oldScope}`);
-            return;
-        }
+const files = await glob('dist/**/!(*.min).css');
+const prevScope = await getScope(files);
 
-        cleanup(files, oldScope);
-        await scope(files, newScope);
+if (args.cleanup && prevScope) {
+    await cleanup(files, prevScope);
+} else if (prevScope) {
+    const newScope = getNewScope();
 
-    } else {
-        await scope(files, getNewScope());
+    if (prevScope === newScope) {
+        console.warn(`Already scoped with: ${prevScope}`);
+        process.exit(0);
     }
 
-    await store(files);
+    await cleanup(files, prevScope);
+    await scope(files, newScope);
 
+} else {
+    await scope(files, getNewScope());
 }
 
-async function readFiles() {
-
-    const files = await glob('dist/**/!(*.min).css');
-    return Promise.all(files.map(async file => {
-
+async function getScope(files) {
+    for (const file of files) {
         const data = await read(file);
-        return {file, data};
-
-    }));
-
-}
-
-function getScope(files) {
-    return files.reduce((scope, {data}) => scope || isScoped(data), '');
+        const [, scope] = (data.match(currentScopeRe) || data.match(currentScopeLegacyRe) || []);
+        if (scope) {
+            return scope;
+        }
+    }
+    return '';
 }
 
 function getNewScope() {
 
-    const scopeFromInput = argv.scope || argv.s || 'uk-scope';
+    const scopeFromInput = args.scope || args.s || 'uk-scope';
 
     if (validClassName.test(scopeFromInput)) {
         return scopeFromInput;
@@ -80,49 +61,33 @@ function getNewScope() {
 }
 
 async function scope(files, scope) {
-    await Promise.all(
-        files.map(async store => {
-            try {
-
-                const output = await renderLess(`.${scope} {\n${stripComments(store.data)}\n}`);
-                store.data = `/* scoped: ${scope} */\n${
-                    output
-                        .replace(new RegExp(`.${scope} ${/{(.|[\r\n])*?}/.source}`), '')
-                        .replace(new RegExp(`.${scope}${/\s((\.(uk-(drag|modal-page|offcanvas-page|offcanvas-flip)))|html)/.source}`, 'g'), '$1')
-                }`;
-
-            } catch (e) {
-                console.error(store.file, e);
-            }
-        })
-    );
-}
-
-async function store(files) {
-    return Promise.all(
-        files.map(async ({file, data}) => {
-            await write(file, data);
-            await minify(file);
-        })
-    );
+    for (const file of files) {
+        await replaceInFile(file, async data => {
+            const output = await renderLess(`.${scope} {\n${stripComments(data)}\n}`);
+            return `/* scoped: ${scope} */\n${
+                output
+                    .replace(new RegExp(`.${scope} ${/{(.|[\r\n])*?}/.source}`), '')
+                    .replace(new RegExp(`.${scope}${/\s((\.(uk-(drag|modal-page|offcanvas-page|offcanvas-flip)))|html)/.source}`, 'g'), '$1')
+            }`;
+        });
+        await minify(file);
+    }
 }
 
-const currentScopeRe = /\/\* scoped: ([^*]*) \*\//;
-const currentScopeLegacyRe = /\.(uk-scope)/;
-
-function cleanup(files, scope) {
+async function cleanup(files, scope) {
     const string = scope.split(' ').map(scope => `.${scope}`).join(' ');
-    files.forEach(store => {
-        store.data = store.data
+    for (const file of files) {
+        await replaceInFile(file, data => data
             .replace(new RegExp(/ */.source + string + / ({[\s\S]*?})?/.source, 'g'), '') // replace classes
-            .replace(new RegExp(currentScopeRe.source, 'g'), ''); // remove scope comment
-    });
-}
-
-function isScoped(data) {
-    return (data.match(currentScopeRe) || data.match(currentScopeLegacyRe) || [])[1];
+            .replace(new RegExp(currentScopeRe.source, 'g'), '') // remove scope comment
+        );
+    }
 }
 
 function stripComments(input) {
-    return input.replace(/\/\*(.|\n)*?\*\//gm, '').split('\n').filter(line => line.trim().substr(0, 2) !== '//').join('\n');
+    return input
+        .replace(/\/\*(.|\n)*?\*\//gm, '')
+        .split('\n')
+        .filter(line => line.trim().substr(0, 2) !== '//')
+        .join('\n');
 }

package/build/scss.js

@@ -1,8 +1,4 @@
-const fs = require('fs');
-const util = require('./util');
-const glob = require('glob');
-
-const {write} = util;
+import {glob, read, write} from './util.js';
 
 const themeMixins = {};
 const coreMixins = {};
@@ -74,9 +70,10 @@ const inverseTemplate = `    @include hook-inverse-component-base();
     @include hook-inverse-component-utility();`;
 
 /* First Step: Go through all files */
-glob.sync('src/less/**/*.less').forEach(file => {
+for (const file of await glob('src/less/**/*.less')) {
+
+    const data = await read(file);
 
-    const data = fs.readFileSync(file, 'utf8');
     /* replace all LESS stuff with SCSS */
     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
@@ -87,7 +84,7 @@ glob.sync('src/less/**/*.less').forEach(file => {
         .replace(/\.([\w-]*)\s*\((.*)\)\s*{/g, '@mixin $1($2){') // hook -> mixins
         .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(/\.(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(/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
@@ -98,6 +95,7 @@ glob.sync('src/less/**/*.less').forEach(file => {
         .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
         .replace(/~('[^']+')/g, 'unquote($1)'); // string literals: for real
 
     /* File name of the current file */
@@ -115,7 +113,7 @@ glob.sync('src/less/**/*.less').forEach(file => {
 
     /* get all Variables but not from the mixin.less file */
     if (filename !== 'mixin') {
-        scssData = getVariablesFromFile(file, scssData);
+        scssData = await getVariablesFromFile(file, scssData);
     }
 
     if (filename === 'uikit.theme') {
@@ -130,30 +128,30 @@ glob.sync('src/less/**/*.less').forEach(file => {
         scssData = mixinTemplate;
     }
 
-    return write(file.replace(/less/g, 'scss').replace('.theme.', '-theme.'), scssData);
+    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]; });
-write('src/scss/mixins-theme.scss', mixins_theme.join('\n'));
+await write('src/scss/mixins-theme.scss', mixins_theme.join('\n'));
 
 const mixins_core = Object.keys(coreMixins).map(function (key) { return coreMixins[key]; });
-write('src/scss/mixins.scss', mixins_core.join('\n'));
+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)));
 
-write('src/scss/variables.scss', Array.from(compactCoreVar).join('\n'));
+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('src/scss/variables-theme.scss', Array.from(compactThemeVar).join('\n'));
+await write('src/scss/variables-theme.scss', Array.from(compactThemeVar).join('\n'));
 
 /*
  * recursive function to get a dependencie Set which is ordered so that no depencies exist to a later on entry
@@ -198,9 +196,9 @@ function getMixinsFromFile(file, data) {
     match = regex.exec(data);
 
     while (match) {
-        themeMixins[match[1]] = match[0];
+        [themeMixins[match[1]]] = match;
         if (file.indexOf('theme/') < 0) {
-            coreMixins[match[1]] = match[0];
+            [coreMixins[match[1]]] = match;
         }
         match = regex.exec(data);
     }
@@ -210,9 +208,9 @@ function getMixinsFromFile(file, data) {
     match = regex.exec(data);
 
     while (match) {
-        themeMixins[match[1]] = match[0];
+        [themeMixins[match[1]]] = match;
         if (file.indexOf('theme/') < 0) {
-            coreMixins[match[1]] = match[0];
+            [coreMixins[match[1]]] = match;
         }
 
         match = regex.exec(data);
@@ -228,7 +226,7 @@ function getMixinsFromFile(file, data) {
  * function to extract all the variables from a given file with its data.
  * @return an updated data where the icons have been replaced by the actual SVG data.
  */
-function getVariablesFromFile(file, data) {
+async function getVariablesFromFile(file, data) {
     const regex = /(\$[\w-]*)\s*:\s*(.*);/g;
     let match = regex.exec(data);
 
@@ -239,7 +237,7 @@ function getVariablesFromFile(file, data) {
 
             const iconregex = /(\$[\w-]+)\s*:\s*"\.\.\/\.\.\/images\/backgrounds\/([\w./-]+)" !default;/g;
             const iconmatch = iconregex.exec(match[0]);
-            let svg = fs.readFileSync(`src/images/backgrounds/${iconmatch[2]}`).toString();
+            let svg = (await read(`src/images/backgrounds/${iconmatch[2]}`)).toString();
             svg = `"${svg.replace(/\r?\n|\r/g, '%0A')
                 .replace(/"/g, '\'')
                 .replace(/\s/g, '%20')