@frankenstyle/uikit 0.0.1

package/build/scope.js

@@ -0,0 +1,106 @@
+import { glob } from 'glob';
+import stripCssComments from 'strip-css-comments';
+import { args, minify, read, renderLess, replaceInFile } from './util.js';
+
+if (args.h || args.help) {
+    console.log(`
+        usage:
+
+        scope.js [-s{cope}=your_great_new_scope_name][cleanup]
+
+        example:
+
+        scope.js // will scope with uk-scope
+        scope.js -s "my-scope" // will replace any existing scope with my-scope
+        scope.js cleanup // will remove current scope
+
+    `);
+    process.exit(0);
+}
+const currentScopeRe = /\/\* scoped: ([^*]*) \*\/\n/;
+const currentScopeLegacyRe = /\.(uk-scope)/;
+
+const files = await glob('dist/**/!(*.min).css');
+const prevScope = await getScope(files);
+
+if (args.cleanup && prevScope) {
+    await cleanup(files, prevScope);
+} else if (prevScope) {
+    const newScope = getNewScope();
+
+    if (prevScope === newScope) {
+        console.warn(`Already scoped with: ${prevScope}`);
+        process.exit(0);
+    }
+
+    await cleanup(files, prevScope);
+    await scope(files, newScope);
+} else {
+    await scope(files, getNewScope());
+}
+
+async function getScope(files) {
+    for (const file of files) {
+        const data = await read(file);
+        const [, scope] = data.match(currentScopeRe) || data.match(currentScopeLegacyRe) || [];
+        if (scope) {
+            return scope;
+        }
+    }
+    return '';
+}
+
+function getNewScope() {
+    const scopeFromInput = args.scope || args.s || 'uk-scope';
+
+    if (scopeFromInput.match(/^[a-z_\x7f-\xff][-\w\x7f-\xff]*$/i)) {
+        return scopeFromInput;
+    } else {
+        throw `Illegal scope-name: ${scopeFromInput}`;
+    }
+}
+
+async function scope(files, scope) {
+    for (const file of files) {
+        await replaceInFile(file, async (data) => {
+            const output = await renderLess(
+                `.${scope} {\n${wrapAttrWithTypeNotation(stripCssComments(data, { preserve: false }))}\n}`,
+            );
+            return `/* scoped: ${scope} */\n${
+                output.replace(
+                    new RegExp(
+                        `.${scope}\\s((\\.(uk-(drag|modal-page|offcanvas-page|offcanvas-flip)))|html|:root)`,
+                        'g',
+                    ),
+                    '$1',
+                ) // unescape
+            }`;
+        });
+        await minify(file);
+    }
+}
+
+async function cleanup(files, scope) {
+    const string = scope
+        .split(' ')
+        .map((scope) => `.${scope}`)
+        .join(' ');
+    for (const file of files) {
+        await replaceInFile(
+            file,
+            (data) =>
+                data
+                    .replace(currentScopeRe, '') // remove scope comment
+                    .replace(new RegExp(` *${string} ({[\\s\\S]*?})?`, 'g'), ''), // replace classes
+        );
+    }
+}
+
+function wrapAttrWithTypeNotation(content) {
+    return content.replace(
+        /([a-zA-Z-]+)\s*:\s*([^;]*attr[^;]*type\(<[^;]+)(;|$)/g,
+        (m, prop, attr, end) => {
+            return `${prop}: ~'${attr}'${end}`;
+        },
+    );
+}

package/build/scss/mixin.scss

@@ -0,0 +1,32 @@
+//
+// Component:       Mixin
+// Description:     Defines mixins which are used across all components
+//
+// ========================================================================
+
+// SVG
+// ========================================================================
+
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+    $index: str-index($string, $search);
+
+    @if $index {
+        @return str-slice($string, 1, $index - 1) + $replace +
+            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+
+    @return $string;
+}
+
+@mixin svg-fill($src, $color-default, $color-new) {
+    $replace-src: str-replace($src, $color-default, $color-new) !default;
+    $replace-src: str-replace($replace-src, '#', '%23');
+    $replace-src: quote($replace-src);
+    background-image: url($replace-src);
+}

package/build/scss.js

@@ -0,0 +1,252 @@
+import { emptyDir } from 'fs-extra';
+import { glob } from 'glob';
+import NP from 'number-precision';
+import path from 'path';
+import { read, write } from './util.js';
+
+NP.enableBoundaryChecking(false);
+
+const coreMixins = {};
+const themeMixins = {};
+const coreVariables = {};
+const themeVariables = {};
+const inverseComponentMixins = [];
+
+await emptyDir('src/scss/');
+
+for (const file of (await glob('src/less/**/*.less'))
+    .sort()
+    .sort((a, b) => a.endsWith('/inverse.less') - b.endsWith('/inverse.less'))) {
+    let source = await read(file);
+
+    /* replace all Less stuff with SCSS */
+    source = (await read(file))
+        .replace(/\/less\//g, '/scss/') // change less/ dir to scss/ on imports
+        .replace(/\.less/g, '.scss') // change .less extensions to .scss on imports
+        .replace(/@(?!property)/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(/\$(import|supports|media|font-face|page|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
+        .replace(/spin\((\$[\w-]*), ([0-9]+)\)/g, (match, p1, p2) => {
+            return `adjust-hue(${p1}, ${p2})`;
+        }) // replace Less function spin with adjust-hue
+        .replace(/fade(in|out)\((\$[\w-]*), ([0-9]+)%\)/g, (match, p1, p2, p3) => {
+            return `fade-${p1}(${p2}, ${p3 / 100})`;
+        }) // replace Less function fadeout with fade-out
+        .replace(/\.svg-fill/g, '@include svg-fill') // include svg-fill mixin
+        .replace(
+            /(.*):extend\((\.[\w\\@-]*) all\) when \((\$[\w-]*) = (\w+)\) {}/g,
+            '@if ( $3 == $4 ) { $1 { @extend $2 !optional;} }',
+        ) // update conditional extend and add !optional to ignore warnings
+        .replace(
+            /(\.[\w\\@-]+)\s*when\s*\((\$[\w-]*)\s*=\s*(\w+)\)\s*{\s*@if\(mixin-exists\(([\w-]*)\)\) {@include\s([\w-]*)\(\);\s*}\s*}/g,
+            '@if ($2 == $3) { $1 { @if (mixin-exists($4)) {@include $4();}}}',
+        ) // update conditional hook
+        .replace(
+            /([.:][\w\\@-]+(?: ?[.:][\w\\@-]+)*)\s*when\s*\(([$@][\w-]*)\s*=\s*([$@]?[\w-]+)\)\s*({\s*.*?\s*})/gms,
+            '@if ($2 == $3) {\n$1 $4\n}',
+        )
+        .replace(
+            /([.:][\w\\@-]+(?: ?[.:][\w\\@-]+)*)\s*when\s+not\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
+        .replace(/(\w+)&/g, '&:is($1)'); // replace parent selector & when not at beginning of selector
+
+    /* File name of the current file */
+    const filename = path.basename(file, '.less');
+
+    if (filename === 'inverse') {
+        source = source.replace(
+            /\*\//,
+            `*/\n@mixin hook-inverse() {\n${inverseComponentMixins
+                .map((mixin) => `    @include ${mixin}();\n`)
+                .join('')}}`,
+        );
+    } else if (source.match(/hook-inverse(?!-)/)) {
+        source = source.replace(/hook-inverse(?!-)/, `hook-inverse-component-${filename}`);
+        if (!inverseComponentMixins.includes(`hook-inverse-component-${filename}`)) {
+            inverseComponentMixins.push(`hook-inverse-component-${filename}`);
+        }
+    }
+
+    /* get all the mixins and remove them from the file */
+    source = getMixinsFromFile(file, source);
+
+    /* get all Variables and remove them */
+    source = await getVariablesFromFile(file, source);
+
+    if (filename === 'uikit.theme') {
+        /* remove the theme import first place */
+        source = source.replace(/\/\/\n\/\/ Theme\n\/\/\n\n@import "theme\/_import.scss";/, '');
+        source = source.replace(/\/\/ Core\n\/\//g, '// Theme\n//\n');
+    }
+
+    /* mixin.less needs to be fully replaced by the new mixin file*/
+    if (filename === 'mixin') {
+        source = await read('build/scss/mixin.scss');
+    }
+
+    if (!file.includes('theme/')) {
+        await write(
+            file.replace(/less/g, 'scss').replace('.theme.', '-theme.'),
+            useSassModules(source),
+        );
+    }
+}
+
+/* write mixins files */
+for (const [vars, file] of [
+    [coreMixins, 'mixins'],
+    [themeMixins, 'mixins-theme'],
+]) {
+    delete vars['svg-fill'];
+
+    await write(`src/scss/${file}.scss`, useSassModules(Object.values(vars).join('\n')));
+}
+
+/* write variables files */
+for (const [vars, file] of [
+    [coreVariables, 'variables'],
+    [themeVariables, 'variables-theme'],
+]) {
+    const variables = Object.keys(vars).reduce(
+        (dependencies, key) => resolveDependencies(vars, key, dependencies),
+        new Set(),
+    );
+    await write(`src/scss/${file}.scss`, useSassModules(Array.from(variables).join('\n')));
+}
+
+/*
+ * add prefix of origin to methods
+ */
+function useSassModules(source) {
+    const modules = new Set();
+
+    for (const [module, search, replacement] of [
+        ['meta', /(?<=\W)mixin-exists\(/g, 'meta.$&'],
+        ['string', /(?<=\W)(un)?quote\(/g, 'string.$&'],
+        ['string', /(?<=\W)str-(index|slice|length)\(/g, 'string.$1('],
+        ['math', /(?<=\W)(floor|round)\(/g, 'math.$&'],
+        ['color', /(?<=\W)mix\(/g, 'color.$&'],
+        ['color', /(?<=\W)lighten\((.*),\s*(.*)\)/g, 'color.adjust($1, $lightness: $2)'],
+        ['color', /(?<=\W)darken\((.*),\s*(.*)\)/g, 'color.adjust($1, $lightness: -$2)'],
+        ['color', /(?<=\W)fade-in\(([^,]*),\s*(.*)\)/g, 'color.adjust($1, $alpha: $2)'],
+        ['color', /(?<=\W)fade-out\(([^,]*),\s*(.*)\)/g, 'color.adjust($1, $alpha: -$2)'],
+        ['color', /(?<=\W)adjust-hue\(([^,]*),\s*(.*)\)/g, 'color.adjust($1, $hue: $2)'],
+    ]) {
+        const prev = source;
+        source = source.replaceAll(search, replacement);
+
+        if (source !== prev) {
+            modules.add(module);
+        }
+    }
+
+    return modules.size
+        ? `${Array.from(modules)
+              .map((module) => `@use "sass:${module}";`)
+              .join('\n')}\n\n${source}`
+        : source;
+}
+
+/*
+ * recursive function to get a dependencies Set which is ordered so that no dependencies exist to a later on entry
+ * @return Set with all the dependencies.
+ */
+function resolveDependencies(allVariables, currentKey, dependencies = new Set()) {
+    for (const dependency of allVariables[currentKey].dependencies) {
+        for (const newDependency of resolveDependencies(allVariables, dependency, dependencies)) {
+            dependencies.add(newDependency);
+        }
+    }
+
+    dependencies.add(`${currentKey}: ${allVariables[currentKey].value}`);
+    return dependencies;
+}
+
+/*
+ * Extract all the mixins from a given file with its data.
+ * @return an updated data where the mixins have been removed.
+ */
+function getMixinsFromFile(file, source) {
+    /* Step 1: get all includes and insert them, so that at least empty mixins exist. */
+    for (const [, include] of source.matchAll(/@include ([a-z0-9-]+)/g)) {
+        if (!(include in themeMixins)) {
+            themeMixins[include] = `@mixin ${include}(){}`;
+        }
+        if (!(include in coreMixins)) {
+            coreMixins[include] = `@mixin ${include}(){}`;
+        }
+    }
+
+    /* Step 2: get all mixins */
+    for (const [match, mixin] of source.matchAll(
+        /@mixin ([\w-]*)\s*\(.*\)\s*{(\n\s+[\w\W]+?(?=\n})\n| [^\n]+)}/g,
+    )) {
+        themeMixins[mixin] = match;
+        if (!file.includes('theme/')) {
+            coreMixins[mixin] = match;
+        }
+    }
+
+    /* Step 3: remove the mixins from the file, so that users can overwrite them in their custom code. */
+    return source.replace(/@mixin ([\w-]*)\s*\((.*)\)\s*{(\n(\s+[\w\W]+?)(?=\n})\n| [^\n]+)}/g, '');
+}
+
+/*
+ * Extract all variables from a given file with its data.
+ * @return an updated data where the icons have been replaced by the actual SVG data.
+ */
+async function getVariablesFromFile(file, source) {
+    for (let [, name, value] of source.matchAll(/(\$[\w-]*)\s*:\s*(.*);/g)) {
+        let dependencies = [];
+
+        /* check if variable is a background icon, if so replace it directly by the SVG */
+        if (value.includes('../../images/backgrounds')) {
+            const svg = (await read(`src/${value.match(/images\/backgrounds\/[\w./-]+/)}`))
+                .replace(/\r?\n|\r/g, '%0A')
+                .replace(/"/g, "'")
+                .replace(/\s/g, '%20')
+                .replace(/</g, '%3C')
+                .replace(/=/g, '%3D')
+                .replace(/'/g, '%22')
+                .replace(/:/g, '%3A')
+                .replace(/\//g, '%2F')
+                .replace(/>/g, '%3E')
+                .replace(/%3Csvg/, 'data:image/svg+xml;charset=UTF-8,%3Csvg');
+
+            value = `"${svg}" !default`;
+
+            /* if it's not an SVG add the variable and search for its dependencies */
+        } else {
+            dependencies = Array.from(value.matchAll(/\$[\w-]+/g)).map(([value]) => value);
+        }
+
+        themeVariables[name] = { value: `${value};`, dependencies };
+
+        /* add variables only to the core Variables if it is not a theme file */
+        if (!file.includes('theme/')) {
+            coreVariables[name] = themeVariables[name];
+        }
+    }
+
+    // Remove variables from source
+    return source.replace(/(\$[\w-]*)\s*:(.*);\r?\n/g, '');
+}

package/build/util.js

@@ -0,0 +1,288 @@
+import alias from '@rollup/plugin-alias';
+import replace from '@rollup/plugin-replace';
+import CleanCSS from 'clean-css';
+import fs from 'fs-extra';
+import { glob } from 'glob';
+import less from 'less';
+import minimist from 'minimist';
+import pLimit from 'p-limit';
+import path from 'path';
+import { rollup, watch as rollupWatch } from 'rollup';
+import { default as esbuild, minify as esbuildMinify } from 'rollup-plugin-esbuild';
+import modify from 'rollup-plugin-modify';
+import { optimize } from 'svgo';
+
+const limit = pLimit(Number(process.env.cpus || 2));
+
+export const banner = `/*! UIkit ${await getVersion()} | https://www.getuikit.com | (c) 2014 - ${new Date().getFullYear()} YOOtheme | MIT License */\n`;
+
+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');
+}
+
+export async function write(dest, data) {
+    fs.ensureDir(path.dirname(dest));
+
+    await fs.writeFile(dest, data);
+    await logFile(dest);
+
+    return dest;
+}
+
+export async function logFile(file) {
+    const { size } = await fs.stat(file);
+    console.log(`${cyan(file)} ${formatSize(size)}`);
+}
+
+export async function minify(file) {
+    const { styles } = await limit(() =>
+        new CleanCSS({
+            advanced: false,
+            keepSpecialComments: 0,
+            rebase: false,
+            returnPromise: true,
+        }).minify([file]),
+    );
+
+    await write(`${path.join(path.dirname(file), path.basename(file, '.css'))}.min.css`, styles);
+
+    return styles;
+}
+
+export function renderLess(data, options) {
+    return limit(async () => (await less.render(data, options)).css);
+}
+
+export async function compile(file, dest, { external, globals, name, aliases, replaces } = {}) {
+    const minify = !args.nominify;
+    const debug = args.d || args.debug;
+    const log = args.l || args.log;
+    const watch = args.w || args.watch;
+
+    name = (name || '').replace(/\W/g, '_');
+
+    const inputOptions = {
+        external,
+        input: file,
+        plugins: [
+            replace({
+                preventAssignment: true,
+                values: {
+                    VERSION: `'${await getVersion()}'`,
+                    LOG: !!log,
+                    ...replaces,
+                },
+            }),
+            alias({
+                entries: {
+                    'uikit-util': path.resolve('./src/js/util/index.js'),
+                    ...aliases,
+                },
+            }),
+
+            svgPlugin(),
+
+            esbuild({
+                target: 'safari12',
+                sourceMap: !!debug,
+                minify: false,
+                supported: { 'template-literal': true },
+            }),
+
+            !debug &&
+                modify({
+                    find: /(?<=>)\n\s+|\n\s+(?=<)/,
+                    replace: ' ',
+                }),
+        ],
+    };
+
+    const outputOptions = {
+        globals,
+        banner,
+        format: 'umd',
+        amd: { id: `UIkit${name}`.toLowerCase() },
+        name: `UIkit${ucfirst(name)}`,
+        sourcemap: debug ? 'inline' : false,
+    };
+
+    const output = [
+        {
+            ...outputOptions,
+            file: `${dest}.js`,
+        },
+    ];
+
+    if (minify) {
+        output.push({
+            ...outputOptions,
+            file: `${dest}.min.js`,
+            plugins: [
+                debug
+                    ? undefined
+                    : esbuildMinify({
+                          target: 'safari12',
+                          supported: { 'template-literal': true },
+                      }),
+            ],
+        });
+    }
+
+    if (!watch) {
+        const bundle = await rollup(inputOptions);
+
+        for (const options of output) {
+            await limit(() => bundle.write(options));
+            logFile(options.file);
+        }
+
+        await bundle.close();
+    } else {
+        console.log('UIkit is watching the files...');
+
+        const watcher = rollupWatch({
+            ...inputOptions,
+            output,
+        });
+
+        watcher.on('event', ({ code, result, output, error }) => {
+            if (result) {
+                result.close();
+            }
+            if (code === 'BUNDLE_END' && output) {
+                output.map(logFile);
+            }
+            if (error) {
+                console.error(error);
+            }
+        });
+
+        await watcher.close();
+    }
+}
+
+export async function icons(...src) {
+    let files = {};
+    for (const pattern of src) {
+        for (const file of await glob(pattern)) {
+            files[path.basename(file, '.svg')] ??= limit(
+                async () => await optimizeSvg(await read(file)),
+            );
+        }
+    }
+
+    const sorted = {};
+    for (const key of Object.keys(files).sort()) {
+        sorted[key] = await files[key];
+    }
+
+    return JSON.stringify(sorted, null, '    ');
+}
+
+export function ucfirst(str) {
+    return str.length ? str.charAt(0).toUpperCase() + str.slice(1) : '';
+}
+
+export async function getVersion() {
+    return (await fs.readJson('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`;
+}
+
+function formatSize(bytes) {
+    return `${(bytes / 1024).toFixed(2)}kb`;
+}
+
+async function optimizeSvg(svg) {
+    const options = {
+        plugins: [
+            {
+                name: 'preset-default',
+                params: {
+                    overrides: {
+                        cleanupNumericValues: {
+                            floatPrecision: 3,
+                        },
+                        convertPathData: false,
+                        convertShapeToPath: false,
+                        mergePaths: false,
+                        minifyStyles: false,
+                        removeUnknownsAndDefaults: false,
+                        removeUselessStrokeAndFill: false,
+                        sortAttrs: {
+                            order: [
+                                'id',
+                                'width',
+                                'height',
+                                'fill',
+                                'stroke',
+                                'x',
+                                'y',
+                                'x1',
+                                'y1',
+                                'x2',
+                                'y2',
+                                'cx',
+                                'cy',
+                                'r',
+                                'marker',
+                                'd',
+                                'points',
+                            ],
+                        },
+                    },
+                },
+            },
+            'removeXMLNS',
+            'removeXlink',
+            {
+                name: 'removeAttributesBySelector',
+                params: {
+                    selector: 'svg',
+                    attributes: ['id', 'version'],
+                },
+            },
+            {
+                name: 'removeAttributesBySelector',
+                params: {
+                    selector: '*',
+                    attributes: ['data-name'],
+                },
+            },
+        ],
+    };
+
+    return (await optimize(svg, options)).data;
+}
+
+function svgPlugin() {
+    return {
+        name: 'svg-import',
+
+        transform: async (code, id) => {
+            if (!id.endsWith('.svg')) {
+                return;
+            }
+
+            return {
+                code: `export default ${JSON.stringify(await optimizeSvg(code))};`,
+                map: { mappings: '' },
+            };
+        },
+    };
+}

package/build/wrapper/component.js

@@ -0,0 +1,7 @@
+import Component from 'component';
+
+if (typeof window !== 'undefined' && window.UIkit) {
+    window.UIkit.component(NAME, Component);
+}
+
+export default Component;

package/build/wrapper/icons.js

@@ -0,0 +1,13 @@
+function plugin(UIkit) {
+    if (plugin.installed) {
+        return;
+    }
+
+    UIkit.icon.add(ICONS);
+}
+
+if (typeof window !== 'undefined' && window.UIkit) {
+    window.UIkit.use(plugin);
+}
+
+export default plugin;