uikit 3.8.0 → 3.9.0

package/{.eslintrc.js → .eslintrc.json}

@@ -1,12 +1,12 @@
-module.exports = {
+{
     "root":true,
     "env": {
         "es6": true,
         "browser": true,
-        "commonjs": true,
+        "commonjs": true
     },
     "extends": [
-        "eslint:recommended",
+        "eslint:recommended"
     ],
     "parserOptions": {
         "sourceType": "module"
@@ -59,6 +59,6 @@ module.exports = {
         "space-infix-ops": "error",
         "space-unary-ops": "error",
         "spaced-comment": "error",
-        "template-curly-spacing": "error",
+        "template-curly-spacing": "error"
     }
-};
+}

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+### WIP
+
+### Changed
+
+- Upgrade LESS to version 4
+
+## 3.8.1 (November 5, 2021)
+
+### Added
+
+- Add Less variables for outline style
+
+### Changed
+
+- Make padding large a little bigger on small devices
+- Change logo color to emphasis
+
+### Fixed
+
+- Fix scrollIntoView function with offset argument provided
+
 ## 3.8.0 (October 28, 2021)
 
 ### Changed

package/build/{.eslintrc.js → .eslintrc.json}

@@ -1,13 +1,13 @@
-module.exports = {
+{
     "root": true,
     "env": {
         "es6": true,
-        "node": true,
+        "node": true
     },
     "extends": [
-        "../.eslintrc.js",
+        "../.eslintrc.js"
     ],
     "parserOptions": {
-        "ecmaVersion": 2018
+        "ecmaVersion": 2020
     }
-};
+}

package/build/build.js

@@ -1,58 +1,8 @@
-const path = require('path');
-const glob = require('glob');
-const util = require('./util');
-const camelize = require('camelcase');
-const argv = require('minimist')(process.argv.slice(2));
+import path from 'path';
+import camelize from 'camelcase';
+import {__dirname, args, compile, glob, icons} from './util.js';
 
-argv._.forEach(arg => {
-    const tokens = arg.split('=');
-    argv[tokens[0]] = tokens[1] || true;
-});
-
-const numArgs = Object.keys(argv).length;
-argv.all = argv.all || numArgs <= 1; // no arguments passed, so compile all
-
-const minify = !(argv.debug || argv.nominify || argv.d);
-
-// -----
-
-// map component build jobs
-const components = glob.sync('src/js/components/!(index).js').reduce((components, file) => {
-
-    const name = path.basename(file, '.js');
-
-    components[name] = () =>
-        util.compile(`${__dirname}/wrapper/component.js`, `dist/js/components/${name}`, {
-            name,
-            minify,
-            external: ['uikit', 'uikit-util'],
-            globals: {uikit: 'UIkit', 'uikit-util': 'UIkit.util'},
-            aliases: {component: path.resolve(__dirname, '../src/js/components', name)},
-            replaces: {NAME: `'${camelize(name)}'`}
-        });
-
-    return components;
-
-}, {});
-
-const steps = {
-
-    core: () => util.compile('src/js/uikit-core.js', 'dist/js/uikit-core', {minify}),
-    uikit: () => util.compile('src/js/uikit.js', 'dist/js/uikit', {minify}),
-    icons: async () => util.compile('build/wrapper/icons.js', 'dist/js/uikit-icons', {
-        minify,
-        name: 'icons',
-        replaces: {ICONS: await util.icons('{src/images,custom}/icons/*.svg')}}
-    ),
-    tests: async () => util.compile('tests/js/index.js', 'tests/js/test', {
-        minify,
-        name: 'test',
-        replaces: {TESTS: await getTestFiles()}}
-    )
-
-};
-
-if (argv.h || argv.help) {
+if (args.h || args.help) {
 
     console.log(`
         usage:
@@ -71,46 +21,75 @@ if (argv.h || argv.help) {
         components: ${Object.keys(components).join(', ')}
 
     `);
+    process.exit(0);
+}
 
+const minify = !(args.d || args.debug || args.nominify);
+const uikit = getUIkitTasks(minify);
+const components = await getComponentTasks(minify);
+
+let tasks;
+const allTasks = {...uikit, ...components};
+if (args.all || Object.keys(args).length <= 1) {
+    tasks = allTasks;
+} else if (args.components) {
+    tasks = components;
 } else {
+    tasks = Object.keys(args)
+        .map(step => allTasks[step])
+        .filter(t => t)
+}
 
-    let jobs = collectJobs();
+await Promise.all(Object.values(tasks).map(task => task()));
 
-    if (jobs.length === 0) {
-        argv.all = true;
-        jobs = collectJobs();
-    }
+function getUIkitTasks(minify) {
+    return {
 
+        core: () => compile('src/js/uikit-core.js', 'dist/js/uikit-core', {minify}),
+
+        uikit: () => compile('src/js/uikit.js', 'dist/js/uikit', {minify}),
+
+        icons: async () => compile('build/wrapper/icons.js', 'dist/js/uikit-icons', {
+                minify,
+                name: 'icons',
+                replaces: {ICONS: await icons('{src/images,custom}/icons/*.svg')}
+            }
+        ),
+
+        tests: async () => compile('tests/js/index.js', 'tests/js/test', {
+                minify,
+                name: 'test',
+                replaces: {TESTS: await getTestFiles()}
+            }
+        ),
+
+    };
 }
 
-function collectJobs() {
+async function getComponentTasks(minify) {
+
+    const components = await glob('src/js/components/!(index).js');
 
-    // if parameter components is set or all or none(implicit all), add all components
-    if (argv.components || argv.all) {
-        Object.assign(argv, components);
-    }
+    return components.reduce((components, file) => {
 
-    // if parameter components is set or all or none(implicit all), add all steps
-    if (argv.all) {
-        Object.assign(argv, steps);
-    }
+        const name = path.basename(file, '.js');
 
-    Object.assign(steps, components);
+        components[name] = () =>
+            compile(`${__dirname}/wrapper/component.js`, `dist/js/components/${name}`, {
+                name,
+                minify,
+                external: ['uikit', 'uikit-util'],
+                globals: {uikit: 'UIkit', 'uikit-util': 'UIkit.util'},
+                aliases: {component: path.resolve(__dirname, '../src/js/components', name)},
+                replaces: {NAME: `'${camelize(name)}'`}
+            });
 
-    // Object.keys(argv).forEach(step => components[step] && componentJobs.push(components[step]()));
-    return Object.keys(argv)
-        .filter(step => steps[step])
-        .map(step =>
-            steps[step]()
-                .catch(({message}) => {
-                    console.error(message);
-                    process.exitCode = 1;
-                })
-    );
+        return components;
 
+    }, {});
 }
 
 async function getTestFiles() {
-    const files = await util.glob('tests/!(index).html', {nosort: true});
+    const files = await glob('tests/!(index).html', {nosort: true});
     return JSON.stringify(files.map(file => path.basename(file, '.html')));
 }

package/build/icons.js

@@ -1,18 +1,9 @@
-const {compile, glob, icons} = require('./util');
-const args = require('minimist')(process.argv);
+import {args, compile, glob, icons} from './util.js';
 
 const path = args.c || args.custom || 'custom/*/icons';
 const match = args.n || args.name || '([a-z]+)/icons$';
 
-run().catch(({message}) => {
-    console.error(message);
-    process.exitCode = 1;
-});
-
-async function run() {
-    const folders = await glob(path);
-    return Promise.all(folders.map(compileIcons));
-}
+await Promise.all((await glob(path)).map(compileIcons));
 
 async function compileIcons(folder) {
     const [, name] = folder.toString().match(new RegExp(match, 'i'));

package/build/less.js

@@ -1,56 +1,41 @@
-const fs = require('fs');
-const glob = require('glob');
-const path = require('path');
-const util = require('./util');
-const rtlcss = require('rtlcss');
-const postcss = require('postcss');
-const argv = require('minimist')(process.argv);
-const args = argv._;
-const rtl = ~args.indexOf('rtl');
-
-argv._.forEach(arg => {
-    const tokens = arg.split('=');
-    argv[tokens[0]] = tokens[1] || true;
-});
-
-const develop = argv.develop || argv.debug || argv.d || argv.nominify;
-
-[
+import {basename} from 'path';
+import rtlcss from 'rtlcss';
+import postcss from 'postcss';
+import {args, banner, glob, minify, pathExists, read, readJson, renderLess, write} from './util.js';
+
+const rtl = args.rtl;
+const develop = args.develop || args.debug || args.d || args.nominify;
+const sources = [
     {src: 'src/less/uikit.less', dist: `dist/css/uikit-core${rtl ? '-rtl' : ''}.css`},
     {src: 'src/less/uikit.theme.less', dist: `dist/css/uikit${rtl ? '-rtl' : ''}.css`}
+];
 
-].forEach(config => compile(config.src, config.dist));
+const themes = await pathExists('themes.json') ? await readJson('themes.json') : {};
 
-const themes = fs.existsSync('themes.json') ? JSON.parse(fs.readFileSync('themes.json')) : {};
-
-glob.sync('custom/*.less').forEach(file => {
-
-    const theme = path.basename(file, '.less');
+for (const src of await glob('custom/*.less')) {
+    const theme = basename(src, '.less');
     const dist = `dist/css/uikit.${theme}${rtl ? '-rtl' : ''}.css`;
 
     themes[theme] = {css: `../${dist}`};
 
-    if (fs.existsSync(`dist/js/uikit-icons-${theme}.js`)) {
+    if (await pathExists(`dist/js/uikit-icons-${theme}.js`)) {
         themes[theme].icons = `../dist/js/uikit-icons-${theme}.js`;
     }
 
-    compile(file, dist)
-        .catch(({message}) => {
-            console.error(message);
-            process.exitCode = 1;
-        });
+    sources.push({src, dist});
+}
 
-});
+await Promise.all(sources.map(({src, dist}) => compile(src, dist, develop, rtl)))
 
-if (!rtl && (Object.keys(themes).length || !fs.existsSync('themes.json'))) {
-    util.write('themes.json', JSON.stringify(themes));
+if (!rtl && (Object.keys(themes).length || !await pathExists('themes.json'))) {
+    await write('themes.json', JSON.stringify(themes));
 }
 
-async function compile(file, dist) {
+async function compile(file, dist, develop, rtl) {
 
-    const less = await util.read(file);
+    const less = await read(file);
 
-    let output = (await util.renderLess(less, {
+    let output = (await renderLess(less, {
         relativeUrls: true,
         rootpath: '../../',
         paths: ['src/less/', 'custom/']
@@ -79,10 +64,10 @@ async function compile(file, dist) {
         output = output.replace(/stroke-dashoffset: (\d+)px/g, 'stroke-dashoffset: -$1px');
     }
 
-    const res = await util.write(dist, util.banner + output);
+    await write(dist, banner + output);
 
     if (!develop) {
-        await util.minify(res);
+        await minify(dist);
     }
 
 }

package/build/package.json

@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "type": "module"
+}

package/build/prefix.js

@@ -1,17 +1,7 @@
-const fs = require('fs');
-const glob = require('glob');
-const util = require('./util');
-const argv = require('minimist')(process.argv.slice(2));
-const prompt = require('inquirer').createPromptModule();
+import inquirer from 'inquirer';
+import {args, glob, read, replaceInFile, validClassName} from './util.js';
 
-argv._.forEach(arg => {
-    const tokens = arg.split('=');
-    argv[tokens[0]] = tokens[1] || true;
-});
-
-const allFiles = [];
-
-if (argv.h || argv.help) {
+if (args.h || args.help) {
     console.log(`
         usage:
 
@@ -23,104 +13,58 @@ if (argv.h || argv.help) {
         prefix.js -p=xyz // will replace any existing prefix with xyz
 
     `);
-} else {
-    readAllFiles()
-        .then(startProcess)
-        .catch(({message}) => {
-            console.error(message);
-            process.exitCode = 1;
-        });
+    process.exit(0);
 }
 
-function startProcess() {
-
-    const currentPrefix = findExistingPrefix();
-    getPrefix().then(prefix => replacePrefix(currentPrefix, prefix));
+const currentPrefix = await findExistingPrefix();
+const prefix = await getPrefix();
 
+if (currentPrefix === prefix) {
+    throw new Error(`already prefixed with: ${prefix}`);
 }
 
-function findExistingPrefix() {
-
-    // find existing prefix
-    let currentPrefix;
+await replacePrefix(currentPrefix, prefix);
 
-    allFiles.filter(({file}) => ~file.indexOf('uikit.css')).some(({data}) => {
+async function findExistingPrefix() {
+    const data = await read('dist/css/uikit.css');
+    const res = data.match(new RegExp(`(${validClassName.source})(-[a-z]+)?-grid`));
+    return res && res[1];
+}
 
-        const res = data.match(new RegExp(`(${util.validClassName.source})(-[a-z]+)?-grid`));
-        currentPrefix = res && res[1];
-        return currentPrefix;
+async function getPrefix() {
 
-    });
-    return currentPrefix;
+    const prefixFromInput = args.p || args.prefix;
 
-}
+    if (!prefixFromInput) {
 
-function getPrefix() {
+        const prompt = inquirer.createPromptModule();
 
-    const prefixFromInput = argv.p || argv.prefix;
-    if (!prefixFromInput) {
-        return prompt({
+        return (await prompt({
             name: 'prefix',
             message: 'enter a prefix',
-            validate: (val, res) => val.length && val.match(util.validClassName) ? !!(res.prefix = val) : 'invalid prefix'
-        })
-        .then(res => res.prefix);
-    } else if (util.validClassName.test(prefixFromInput)) {
-        return Promise.resolve(prefixFromInput);
-    } else {
-        throw 'illegal prefix: ' + prefixFromInput;
+            validate: (val, res) => val.length && val.match(validClassName) ? !!(res.prefix = val) : 'invalid prefix'
+        })).prefix;
     }
-}
-
-function replacePrefix(from, to) {
 
-    if (from === to) {
-        console.log('already prefixed with: ' + from);
+    if (validClassName.test(prefixFromInput)) {
+        return prefixFromInput;
     } else {
-        allFiles.forEach(({file, data, replace}) => {
-            data = replace(data, from, to);
-            fs.writeFileSync(file, data);
-        });
+        throw `illegal prefix: ${prefixFromInput}`;
     }
 }
 
-function readAllFiles() {
-
-    const globs = [];
-
-    globs.push(new Promise(res =>
-        glob('dist/**/*.css', (err, files) => {
-            const reads = [];
-            files.forEach(file =>
-                reads.push(util.read(file, data =>
-                    allFiles.push({
-                        file,
-                        data,
-                        replace: (data, needle, replace) => data.replace(new RegExp(`${needle}-` + /([a-z\d-]+)/.source, 'g'), `${replace}-$1`)
-                    })
-                ))
-            );
-            Promise.all(reads).then(res);
-        }
-        )
-    ));
-
-    globs.push(new Promise(res =>
-        glob('dist/**/*.js', (err, files) => {
-            const reads = [];
-            files.forEach(file =>
-                reads.push(util.read(file, data =>
-                    allFiles.push({
-                        file,
-                        data,
-                        replace: (data, needle, replace) => data.replace(new RegExp(`${needle}-`, 'g'), `${replace}-`).replace(new RegExp(`(${needle})?UIkit`, 'g'), `${replace === 'uk' ? '' : replace}UIkit`)
-                    })
-                ))
-            );
-            Promise.all(reads).then(res);
-        }
-        )
-    ));
-
-    return Promise.all(globs);
+async function replacePrefix(from, to) {
+    for (const file of await glob('dist/**/*.css')) {
+        await replaceInFile(file, data => data.replace(
+            new RegExp(`${from}-${/([a-z\d-]+)/.source}`, 'g'),
+            `${to}-$1`
+        ));
+    }
+
+    for (const file of await glob('dist/**/*.js')) {
+        await replaceInFile(file, data => data
+            .replace(new RegExp(`${from}-`, 'g'),`${to}-`)
+            .replace(new RegExp(`(${from})?UIkit`, 'g'), `${to === 'uk' ? '' : to}UIkit`)
+        );
+    }
 }

package/build/publishDev.js

@@ -1,39 +1,32 @@
-const {inc} = require('semver');
-const {resolve} = require('path');
-const {execSync} = require('child_process');
-const argv = require('minimist')(process.argv.slice(2));
-
-argv._.forEach(arg => {
-    const tokens = arg.split('=');
-    argv[tokens[0]] = tokens[1] || true;
-});
+import {inc} from 'semver';
+import {resolve} from 'path';
+import {args, getVersion, run} from './util.js';
 
 // default exec options
 const options = {cwd: resolve(`${__dirname}/..`), encoding: 'utf8'};
-
-if (isDevCommit() || argv.f || argv.force) {
+if (args.f || args.force || await isDevCommit()) {
 
     // increase version patch number
-    const version = inc(require('../package.json').version, 'patch');
+    const version = inc(await getVersion(), 'patch');
 
     // get current git hash
-    const hash = execSync('git rev-parse --short HEAD', options).trim();
+    const hash = (await run('git rev-parse --short HEAD', options)).trim();
 
     // set version of package.json
-    execSync(`npm version ${version}-dev.${hash} --git-tag-version false`, {...options, stdio: 'inherit'});
+    await run(`npm version ${version}-dev.${hash} --git-tag-version false`, {...options, stdio: 'inherit'});
 
     // create dist files
-    execSync('yarn compile && yarn compile-rtl && yarn build-scss', {...options, stdio: 'inherit'});
+    await run('yarn compile && yarn compile-rtl && yarn build-scss', {...options, stdio: 'inherit'});
 
     // publish to dev tag
-    execSync('npm publish --tag dev', options);
+    await run('npm publish --tag dev', options);
 
 }
 
-function isDevCommit() {
+async function isDevCommit() {
 
     // check for changes to publish (%B: raw body (unwrapped subject and body)
-    const message = execSync('git log -1 --pretty=%B', options);
+    const message = await run('git log -1 --pretty=%B', options);
 
     const type = message.match(/^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types)(\(.+\))?: .{1,50}/);