uikit 3.9.0 → 3.9.2-dev.de0c5f523

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Changelog
 
-### WIP
+## WIP
+
+### Fixed
+
+- Fix build scripts for windows users
+- Fix css in Leader component
+- Fix division deprecation warnings in Sass source
+
+## 3.9.1 (November 10, 2021)
+
+### Changed
+
+- Update Less mixin calls to use parentheses
+
+## 3.9.0 (November 10, 2021)
 
 ### Changed
 

package/build/.eslintrc.json

@@ -1,13 +1,15 @@
 {
     "root": true,
     "env": {
-        "es6": true,
-        "node": true
+        "es2021": true,
+        "node": true,
+        "browser": false,
+        "commonjs": false
     },
     "extends": [
-        "../.eslintrc.js"
+        "../.eslintrc.json"
     ],
     "parserOptions": {
-        "ecmaVersion": 2020
+        "ecmaVersion": 2022
     }
 }

package/build/build.js

@@ -1,13 +1,15 @@
-import path from 'path';
 import camelize from 'camelcase';
-import {__dirname, args, compile, glob, icons} from './util.js';
+import {basename, resolve} from 'path';
+import {args, compile, glob, icons} from './util.js';
 
-if (args.h || args.help) {
+const bundles = getBundleTasks();
+const components = await getComponentTasks();
 
+if (args.h || args.help) {
     console.log(`
         usage:
 
-        build.js [componentA, componentB, ...] [-d|debug|nominify|development]
+        build.js [componentA, componentB, ...] [-d|debug|nominify|watch]
 
         examples:
 
@@ -17,19 +19,15 @@ if (args.h || args.help) {
 
         available components:
 
-        bundles: ${Object.keys(steps).join(', ')}
+        bundles: ${Object.keys(bundles).join(', ')}
         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};
+const allTasks = {...bundles, ...components};
 if (args.all || Object.keys(args).length <= 1) {
     tasks = allTasks;
 } else if (args.components) {
@@ -37,50 +35,45 @@ if (args.all || Object.keys(args).length <= 1) {
 } else {
     tasks = Object.keys(args)
         .map(step => allTasks[step])
-        .filter(t => t)
+        .filter(t => t);
 }
 
 await Promise.all(Object.values(tasks).map(task => task()));
 
-function getUIkitTasks(minify) {
+function getBundleTasks() {
     return {
 
-        core: () => compile('src/js/uikit-core.js', 'dist/js/uikit-core', {minify}),
+        core: () => compile('src/js/uikit-core.js', 'dist/js/uikit-core'),
 
-        uikit: () => compile('src/js/uikit.js', 'dist/js/uikit', {minify}),
+        uikit: () => compile('src/js/uikit.js', 'dist/js/uikit'),
 
         icons: async () => compile('build/wrapper/icons.js', 'dist/js/uikit-icons', {
-                minify,
-                name: 'icons',
-                replaces: {ICONS: await icons('{src/images,custom}/icons/*.svg')}
-            }
-        ),
+            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()}
-            }
-        ),
+            name: 'test',
+            replaces: {TESTS: await getTestFiles()}
+        })
 
     };
 }
 
-async function getComponentTasks(minify) {
+async function getComponentTasks() {
 
     const components = await glob('src/js/components/!(index).js');
 
     return components.reduce((components, file) => {
 
-        const name = path.basename(file, '.js');
+        const name = basename(file, '.js');
 
         components[name] = () =>
-            compile(`${__dirname}/wrapper/component.js`, `dist/js/components/${name}`, {
+            compile('build/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)},
+                aliases: {component: resolve('src/js/components', name)},
                 replaces: {NAME: `'${camelize(name)}'`}
             });
 
@@ -91,5 +84,5 @@ async function getComponentTasks(minify) {
 
 async function getTestFiles() {
     const files = await glob('tests/!(index).html', {nosort: true});
-    return JSON.stringify(files.map(file => path.basename(file, '.html')));
+    return JSON.stringify(files.map(file => basename(file, '.html')));
 }

package/build/icons.js

@@ -1,5 +1,23 @@
 import {args, compile, glob, icons} from './util.js';
 
+if (args.h || args.help) {
+    console.log(`
+    
+        Builds additional custom uikit icons found in './custom/*/icons'
+    
+        usage:
+
+        icons.js [custom|name]
+
+        -c|--custom 
+            Specify custom folder to look for icons (default: './custom/*/icons')
+        -n|--name 
+            Specify name regex to match against folder (default: '([a-z]+)/icons$')
+
+    `);
+    process.exit(0);
+}
+
 const path = args.c || args.custom || 'custom/*/icons';
 const match = args.n || args.name || '([a-z]+)/icons$';
 
@@ -7,6 +25,14 @@ await Promise.all((await glob(path)).map(compileIcons));
 
 async function compileIcons(folder) {
     const [, name] = folder.toString().match(new RegExp(match, 'i'));
-    const ICONS = await icons(`{src/images/icons,${folder}}/*.svg`);
-    return compile('build/wrapper/icons.js', `dist/js/uikit-icons-${name}`, {name, replaces: {ICONS}});
+    return compile(
+        'build/wrapper/icons.js',
+        `dist/js/uikit-icons-${name}`,
+        {
+            name,
+            replaces: {
+                ICONS: await icons(`{src/images/icons,${folder}}/*.svg`)
+            }
+        }
+    );
 }

package/build/less.js

@@ -1,9 +1,9 @@
-import {basename} from 'path';
 import rtlcss from 'rtlcss';
 import postcss from 'postcss';
+import {basename} from 'path';
 import {args, banner, glob, minify, pathExists, read, readJson, renderLess, write} from './util.js';
 
-const rtl = args.rtl;
+const {rtl} = args;
 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`},
@@ -25,7 +25,7 @@ for (const src of await glob('custom/*.less')) {
     sources.push({src, dist});
 }
 
-await Promise.all(sources.map(({src, dist}) => compile(src, dist, develop, rtl)))
+await Promise.all(sources.map(({src, dist}) => compile(src, dist, develop, rtl)));
 
 if (!rtl && (Object.keys(themes).length || !await pathExists('themes.json'))) {
     await write('themes.json', JSON.stringify(themes));

package/build/prefix.js

@@ -63,7 +63,7 @@ async function replacePrefix(from, to) {
 
     for (const file of await glob('dist/**/*.js')) {
         await replaceInFile(file, data => data
-            .replace(new RegExp(`${from}-`, 'g'),`${to}-`)
+            .replace(new RegExp(`${from}-`, 'g'), `${to}-`)
             .replace(new RegExp(`(${from})?UIkit`, 'g'), `${to === 'uk' ? '' : to}UIkit`)
         );
     }

package/build/publishDev.js

@@ -1,9 +1,10 @@
-import {inc} from 'semver';
-import {resolve} from 'path';
+import semver from 'semver';
 import {args, getVersion, run} from './util.js';
 
+const {inc} = semver;
+
 // default exec options
-const options = {cwd: resolve(`${__dirname}/..`), encoding: 'utf8'};
+const options = {encoding: 'utf8'};
 if (args.f || args.force || await isDevCommit()) {
 
     // increase version patch number

package/build/release.js

@@ -8,9 +8,6 @@ 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([

package/build/scope.js

@@ -41,7 +41,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) || [])[1];
+        const [, scope] = (data.match(currentScopeRe) || data.match(currentScopeLegacyRe) || []);
         if (scope) {
             return scope;
         }

package/build/scss.js

@@ -1,5 +1,8 @@
+import NP from 'number-precision';
 import {glob, read, write} from './util.js';
 
+NP.enableBoundaryChecking(false);
+
 const themeMixins = {};
 const coreMixins = {};
 const themeVar = {};
@@ -78,13 +81,14 @@ for (const file of await glob('src/less/**/*.less')) {
     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(/--uk-[^\s]+: (\$[^\s]+);/g, (exp, name) => exp.replace(name, `#{${name}}`))
         .replace(/\\\$/g, '\\@') // revert classes using the @ symbol
         .replace(/ e\(/g, ' unquote(') // convert escape function
         .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
@@ -196,9 +200,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);
     }
@@ -208,9 +212,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);

package/build/util.js

@@ -1,26 +1,24 @@
-import fs from 'fs-extra';
 import less from 'less';
-import { URL } from 'url';
+import fs from 'fs-extra';
 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 modify from 'rollup-plugin-modify';
+import {uglify} from 'rollup-plugin-uglify';
 import replace from '@rollup/plugin-replace';
-import {basename, dirname, resolve} from 'path';
+import {basename, dirname, join} from 'path';
 import {exec as execImport} from 'child_process';
+import {rollup, watch as rollupWatch} from 'rollup';
 
 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 {pathExists, readJson} = fs;
 
 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]*/;
@@ -55,7 +53,7 @@ export async function write(dest, data) {
 
 export async function logFile(file) {
     const data = await read(file);
-    console.log(`${cyan(resolve(file))} ${getSize(data)}`);
+    console.log(`${cyan(file)} ${getSize(data)}`);
 }
 
 export async function minify(file) {
@@ -67,7 +65,7 @@ export async function minify(file) {
         returnPromise: true
     }).minify([file]);
 
-    await write(`${resolve(dirname(file), basename(file, '.css'))}.min.css`, styles);
+    await write(`${join(dirname(file), basename(file, '.css'))}.min.css`, styles);
 
     return styles;
 
@@ -94,24 +92,30 @@ export async function renderLess(data, options) {
         .css;
 }
 
-export async function compile(file, dest, {external, globals, name, aliases, replaces, minify = true}) {
+export async function compile(file, dest, {external, globals, name, aliases, replaces} = {}) {
+
+    const minify = !args.nominify;
+    const debug = args.d || args.debug;
+    const watch = args.w || args.watch;
 
     name = (name || '').replace(/[^\w]/g, '_');
 
-    const bundle = await rollup({
+    const inputOptions = {
         external,
-        input: resolve(file),
+        input: file,
         plugins: [
             replace({
                 preventAssignment: true,
-                values: Object.assign({
-                    VERSION: `'${await getVersion()}'`
-                }, replaces)}
-            ),
+                values: {
+                    VERSION: `'${await getVersion()}'`,
+                    ...replaces
+                }
+            }),
             alias({
-                entries: Object.assign({
-                    'uikit-util': './src/js/util/index.js'
-                }, aliases)
+                entries: {
+                    'uikit-util': './src/js/util/index.js',
+                    ...aliases
+                }
             }),
             html({
                 include: '**/*.svg',
@@ -119,25 +123,63 @@ export async function compile(file, dest, {external, globals, name, aliases, rep
                     collapseWhitespace: true
                 }
             }),
-            buble({namedFunctionExpressions: false})
+            buble({namedFunctionExpressions: false}),
+            modify({
+                find: /(>)\\n\s+|\\n\s+(<)/,
+                replace: (m, m1, m2) => `${m1 || ''} ${m2 || ''}`
+            })
         ]
-    });
+    };
 
-    let {output: [{code, map}]} = await bundle.generate({
+    const outputOptions = {
         globals,
         banner,
         format: 'umd',
         amd: {id: `UIkit${name}`.toLowerCase()},
         name: `UIkit${ucfirst(name)}`,
-        sourcemap: !minify ? 'inline' : false
-    });
+        sourcemap: debug ? 'inline' : false
+    };
+
+    const output = [{
+        ...outputOptions,
+        file: `${dest}.js`
+    }];
+
+    if (minify) {
+        output.push({
+            ...outputOptions,
+            file: `${dest}.min.js`,
+            plugins: [minify ? uglify({output: {preamble: banner}}) : undefined]
+        });
+    }
+
+    if (!watch) {
+        const bundle = await rollup(inputOptions);
+
+        for (const options of output) {
+            await bundle.write(options);
+            logFile(options.file);
+        }
 
-    code = code.replace(/(>)\\n\s+|\\n\s+(<)/g, '$1 $2');
+        await bundle.close();
+    } else {
+        const watcher = rollupWatch({
+            ...inputOptions,
+            output
+        });
 
-    return Promise.all([
-        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];
+        watcher.on('event', ({code, result, output}) => {
+            if (result) {
+                result.close();
+
+            }
+            if (code === 'BUNDLE_END' && output) {
+                output.map(logFile);
+            }
+        });
+
+        watcher.close();
+    }
 
 }
 
@@ -182,8 +224,9 @@ export async function icons(src) {
 export async function run(cmd) {
     const {stdout, stderr} = await exec(cmd);
 
-    stdout && console.log(stdout.trim());
-    stderr && console.log(stderr.trim());
+    stderr && console.error(stderr.trim());
+
+    return stdout;
 }
 
 export function ucfirst(str) {
@@ -191,7 +234,7 @@ export function ucfirst(str) {
 }
 
 export async function getVersion() {
-    return JSON.parse(await read(resolve(__dirname, '../package.json'))).version;
+    return (await readJson('package.json')).version;
 }
 
 export async function replaceInFile(file, fn) {

package/dist/css/uikit-core-rtl.css

@@ -1,4 +1,4 @@
-/*! UIkit 3.9.0 | https://www.getuikit.com | (c) 2014 - 2021 YOOtheme | MIT License */
+/*! UIkit 3.9.2-dev.de0c5f523 | https://www.getuikit.com | (c) 2014 - 2021 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -396,7 +396,7 @@ pre code {
 /* Focus
  ========================================================================== */
 /*
- * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor. 
+ * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor.
  * 1. Fallback: Remove `:focus` for a negative tabindexes.
  * 2. Fallback: Set `:focus` style but not for negative tabindexes.
  * 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
@@ -4068,7 +4068,7 @@ select.uk-form-width-xsmall {
   content: '.';
 }
 :root {
-  --uk-leader-fill-content: .;
+  --uk-leader-fill-content: '.';
 }
 /* ========================================================================
    Component: Notification
@@ -5260,7 +5260,7 @@ ul.uk-nav-sub {
 /* Divider modifier
  ========================================================================== */
 /*
- * Set gutter 
+ * Set gutter
  */
 .uk-subnav-divider {
   margin-right: -41px;