uikit 3.8.1 → 3.9.2-dev.836238c9b

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 less from 'less';
+import {URL} from 'url';
+import fs from 'fs-extra';
+import postcss from 'postcss';
+import globImport from 'glob';
+import {rollup, watch as rollupWatch} from 'rollup';
+import {optimize} from 'svgo';
+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 {exec as execImport} from 'child_process';
+
+export const exec = promisify(execImport);
+export const glob = promisify(globImport);
+export const {pathExists, readJson} = fs;
+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,29 +89,35 @@ exports.renderLess = async function (data, options) {
                     }
                 });
             }
-        ))
+        })
         .process((await less.render(data, options)).css)
         .css;
-};
+}
+
+export async function compile(file, dest, {external, globals, name, aliases, replaces} = {}) {
 
-exports.compile = async function (file, dest, {external, globals, name, aliases, replaces, minify = true}) {
+    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.rollup({
+    const inputOptions = {
         external,
-        input: resolve(file),
+        input: file,
         plugins: [
             replace({
                 preventAssignment: true,
-                values: Object.assign({
-                    VERSION: `'${version}'`
-                }, 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',
@@ -110,67 +125,123 @@ exports.compile = async function (file, dest, {external, globals, name, aliases,
                     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',
-        banner: exports.banner,
         amd: {id: `UIkit${name}`.toLowerCase()},
-        name: `UIkit${exports.ucfirst(name)}`,
-        sourcemap: !minify ? 'inline' : false
-    });
+        name: `UIkit${ucfirst(name)}`,
+        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]
+        });
+    }
 
-    code = code.replace(/(>)\\n\s+|\\n\s+(<)/g, '$1 $2');
+    if (!watch) {
+        const bundle = await rollup(inputOptions);
 
-    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
-    ])[0];
+        for (const options of output) {
+            await bundle.write(options);
+            logFile(options.file);
+        }
 
-};
+        await bundle.close();
+    } else {
+        const watcher = rollupWatch({
+            ...inputOptions,
+            output
+        });
 
-exports.icons = async function (src) {
+        watcher.on('event', ({code, result, output}) => {
+            if (result) {
+                result.close();
 
-    const svgo = new SVGO({
+            }
+            if (code === 'BUNDLE_END' && output) {
+                output.map(logFile);
+            }
+        });
 
+        watcher.close();
+    }
+
+}
+
+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);
 
-exports.ucfirst = function (str) {
+    stderr && console.error(stderr.trim());
+
+    return stdout;
+}
+
+export function ucfirst(str) {
     return str.length ? str.charAt(0).toUpperCase() + str.slice(1) : '';
-};
+}
+
+export async function getVersion() {
+    return (await readJson(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`;

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

@@ -1,4 +1,4 @@
-/*! UIkit 3.8.1 | https://www.getuikit.com | (c) 2014 - 2021 YOOtheme | MIT License */
+/*! UIkit 3.9.2-dev.836238c9b | 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`.
@@ -5260,7 +5260,7 @@ ul.uk-nav-sub {
 /* Divider modifier
  ========================================================================== */
 /*
- * Set gutter 
+ * Set gutter
  */
 .uk-subnav-divider {
   margin-right: -41px;
@@ -8674,25 +8674,25 @@ iframe.uk-cover {
   --uk-translate-x: 100%;
 }
 .uk-transition-slide-top-small {
-  --uk-translate-y: -10px;
+  --uk-translate-y: calc(-1 * 10px);
 }
 .uk-transition-slide-bottom-small {
   --uk-translate-y: 10px;
 }
 .uk-transition-slide-right-small {
-  --uk-translate-x: -10px;
+  --uk-translate-x: calc(-1 * 10px);
 }
 .uk-transition-slide-left-small {
   --uk-translate-x: 10px;
 }
 .uk-transition-slide-top-medium {
-  --uk-translate-y: -50px;
+  --uk-translate-y: calc(-1 * 50px);
 }
 .uk-transition-slide-bottom-medium {
   --uk-translate-y: 50px;
 }
 .uk-transition-slide-right-medium {
-  --uk-translate-x: -50px;
+  --uk-translate-x: calc(-1 * 50px);
 }
 .uk-transition-slide-left-medium {
   --uk-translate-x: 50px;