uikit 3.8.0 → 3.9.0

package/build/release.js

@@ -1,22 +1,33 @@
-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();
+
+console.log(prevVersion, inc(prevVersion, prerelease(prevVersion) ? 'prerelease' : 'patch'));
+
+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 +37,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))
-    ]);
+    })).version;
 
-    return version;
-}
-
-async function compile(version) {
-    await sequential([
-        () => run('yarn compile'),
-        () => run('yarn compile-rtl'),
-        () => run('yarn build-scss')
-    ]);
-
-    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 +63,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) || [])[1];
+        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
@@ -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
@@ -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')

package/build/util.js

@@ -1,55 +1,64 @@
-const fs = require('fs');
-const less = require('less');
-const SVGO = require('svgo');
-const rollup = require('rollup');
-const postcss = require('postcss');
-const uglify = require('uglify-js');
-const {promisify} = require('util');
-const CleanCSS = require('clean-css');
-const html = require('rollup-plugin-html');
-const buble = require('@rollup/plugin-buble');
-const replace = require('@rollup/plugin-replace');
-const alias = require('@rollup/plugin-alias');
-const {basename, dirname, resolve} = require('path');
-const {version} = require('../package.json');
-const banner = `/*! UIkit ${version} | https://www.getuikit.com | (c) 2014 - ${new Date().getFullYear()} YOOtheme | MIT License */\n`;
-
-exports.banner = banner;
-exports.validClassName = /[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/;
-
-exports.glob = promisify(require('glob'));
-
-const readFile = promisify(fs.readFile);
-exports.read = async function (file, cb) {
-
-    const data = await readFile(file, 'utf8');
-    cb && cb(data);
-    return data;
-
-};
+import fs from 'fs-extra';
+import less from 'less';
+import { URL } from 'url';
+import postcss from 'postcss';
+import globImport from 'glob';
+import {rollup} from 'rollup';
+import {optimize} from 'svgo';
+import uglify from 'uglify-js';
+import {promisify} from 'util';
+import minimist from 'minimist';
+import CleanCSS from 'clean-css';
+import html from 'rollup-plugin-html';
+import buble from '@rollup/plugin-buble';
+import alias from '@rollup/plugin-alias';
+import replace from '@rollup/plugin-replace';
+import {basename, dirname, resolve} from 'path';
+import {exec as execImport} from 'child_process';
+
+export const exec = promisify(execImport);
+export const glob = promisify(globImport);
+export const readJson = fs.readJson;
+export const pathExists = fs.pathExists;
+export const __dirname = new URL('.', import.meta.url).pathname;
+
+export const banner = `/*! UIkit ${await getVersion()} | https://www.getuikit.com | (c) 2014 - ${new Date().getFullYear()} YOOtheme | MIT License */\n`;
+export const validClassName = /[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/;
+
+const argv = minimist(process.argv.slice(2));
+
+argv._.forEach(arg => {
+    const tokens = arg.split('=');
+    argv[tokens[0]] = tokens[1] || true;
+});
+
+export const args = argv;
+
+export function read(file) {
+    return fs.readFile(file, 'utf8');
+}
 
-const writeFile = promisify(fs.writeFile);
-exports.write = async function (dest, data) {
+export async function write(dest, data) {
 
-    const err = await writeFile(dest, data);
+    const err = await fs.writeFile(dest, data);
 
     if (err) {
         console.log(err);
         throw err;
     }
 
-    await exports.logFile(dest);
+    await logFile(dest);
 
     return dest;
 
-};
+}
 
-exports.logFile = async function (file) {
-    const data = await exports.read(file);
-    console.log(`${cyan(file)} ${getSize(data)}`);
-};
+export async function logFile(file) {
+    const data = await read(file);
+    console.log(`${cyan(resolve(file))} ${getSize(data)}`);
+}
 
-exports.minify = async function (file) {
+export async function minify(file) {
 
     const {styles} = await new CleanCSS({
         advanced: false,
@@ -58,19 +67,19 @@ exports.minify = async function (file) {
         returnPromise: true
     }).minify([file]);
 
-    await exports.write(`${resolve(dirname(file), basename(file, '.css'))}.min.css`, styles);
+    await write(`${resolve(dirname(file), basename(file, '.css'))}.min.css`, styles);
 
     return styles;
 
-};
+}
 
-exports.renderLess = async function (data, options) {
+export async function renderLess(data, options) {
     return postcss()
-        .use(postcss.plugin('calc', () =>
-            css => {
-                css.walk(node => {
+        .use({
+            postcssPlugin: 'calc',
+            Once(root) {
+                root.walk(node => {
                     const {type} = node;
-
                     if (type === 'decl') {
                         node.value = postcss.list.space(node.value).map(value =>
                             value.startsWith('calc(')
@@ -80,23 +89,23 @@ exports.renderLess = async function (data, options) {
                     }
                 });
             }
-        ))
+        })
         .process((await less.render(data, options)).css)
         .css;
-};
+}
 
-exports.compile = async function (file, dest, {external, globals, name, aliases, replaces, minify = true}) {
+export async function compile(file, dest, {external, globals, name, aliases, replaces, minify = true}) {
 
     name = (name || '').replace(/[^\w]/g, '_');
 
-    const bundle = await rollup.rollup({
+    const bundle = await rollup({
         external,
         input: resolve(file),
         plugins: [
             replace({
                 preventAssignment: true,
                 values: Object.assign({
-                    VERSION: `'${version}'`
+                    VERSION: `'${await getVersion()}'`
                 }, replaces)}
             ),
             alias({
@@ -116,61 +125,78 @@ exports.compile = async function (file, dest, {external, globals, name, aliases,
 
     let {output: [{code, map}]} = await bundle.generate({
         globals,
+        banner,
         format: 'umd',
-        banner: exports.banner,
         amd: {id: `UIkit${name}`.toLowerCase()},
-        name: `UIkit${exports.ucfirst(name)}`,
+        name: `UIkit${ucfirst(name)}`,
         sourcemap: !minify ? 'inline' : false
     });
 
     code = code.replace(/(>)\\n\s+|\\n\s+(<)/g, '$1 $2');
 
     return Promise.all([
-        exports.write(`${dest}.js`, code + (!minify ? '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' + Buffer.from(map.toString()).toString('base64') : '')),
-        minify ? exports.write(`${dest}.min.js`, uglify.minify(code, {output: {preamble: exports.banner}}).code) : null
+        write(`${dest}.js`, code + (!minify ? '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' + Buffer.from(map.toString()).toString('base64') : '')),
+        minify ? write(`${dest}.min.js`, uglify.minify(code, {output: {preamble: banner}}).code) : null
     ])[0];
 
-};
-
-exports.icons = async function (src) {
+}
 
-    const svgo = new SVGO({
+export async function icons(src) {
 
+    const options = {
         plugins: [
-            {removeViewBox: false},
             {
-                cleanupNumericValues: {
-                    floatPrecision: 3
+                name: 'preset-default',
+                params: {
+                    overrides: {
+                        removeViewBox: false,
+                        cleanupNumericValues: {
+                            floatPrecision: 3
+                        },
+                        convertPathData: false,
+                        convertShapeToPath: false,
+                        mergePaths: false,
+                        removeDimensions: false,
+                        removeStyleElement: false,
+                        removeScriptElement: false,
+                        removeUnknownsAndDefaults: false,
+                        removeUselessStrokeAndFill: false
+                    }
                 }
-            },
-            {convertPathData: false},
-            {convertShapeToPath: false},
-            {mergePaths: false},
-            {removeDimensions: false},
-            {removeStyleElement: false},
-            {removeScriptElement: false},
-            {removeUnknownsAndDefaults: false},
-            {removeUselessStrokeAndFill: false}
+            }
         ]
+    };
 
-    });
-    const files = await exports.glob(src, {nosort: true});
-    const icons = await Promise.all(files.map(async file => {
-        const data = await exports.read(file);
-        const {data: svg} = await svgo.optimize(data);
-        return svg;
-    }));
+    const files = await glob(src, {nosort: true});
+    const icons = await Promise.all(files.map(async file =>
+        (await optimize(await read(file), options)).data
+    ));
 
     return JSON.stringify(files.reduce((result, file, i) => {
         result[basename(file, '.svg')] = icons[i];
         return result;
     }, {}), null, '    ');
 
-};
+}
+
+export async function run(cmd) {
+    const {stdout, stderr} = await exec(cmd);
+
+    stdout && console.log(stdout.trim());
+    stderr && console.log(stderr.trim());
+}
 
-exports.ucfirst = function (str) {
+export function ucfirst(str) {
     return str.length ? str.charAt(0).toUpperCase() + str.slice(1) : '';
-};
+}
+
+export async function getVersion() {
+    return JSON.parse(await read(resolve(__dirname, '../package.json'))).version;
+}
+
+export async function replaceInFile(file, fn) {
+    await write(file, await fn(await read(file)));
+}
 
 function cyan(str) {
     return `\x1b[1m\x1b[36m${str}\x1b[39m\x1b[22m`;