@newlogic-digital/core 0.9.2 → 0.9.6

package/index.js

@@ -15,7 +15,7 @@ import {
     root
 } from "./modules/Core.js";
 
-import { tailwindColors, tailwindColorsRgba, tailwindVariables } from './modules/tailwind/index.js'
+import { tailwindColors, tailwindColorsRgba, tailwindVariables, tailwindColorsAccent, tailwindColorsCurrent, tailwindAnimations } from './modules/tailwind/index.js'
 
 const defineConfig = (config) => new Core().init(config);
 
@@ -24,6 +24,9 @@ export {
     tailwindColors,
     tailwindVariables,
     tailwindColorsRgba,
+    tailwindColorsAccent,
+    tailwindColorsCurrent,
+    tailwindAnimations,
     Core,
     Utils,
     Styles,

package/modules/Serve.js

@@ -67,9 +67,6 @@ export const Serve = new class {
                     fsServe: {
                         strict: false
                     },
-                    hmr: {
-                        host: 'localhost'
-                    },
                     watch: {
                         ignored: ['**/node_modules/**', '**/.git/**', '**/src/templates/**', '**/src/main.json', `**/${Config.paths.output.root}/*.html`]
                     }
@@ -83,6 +80,9 @@ export const Serve = new class {
                         https: {
                             key: fs.readFileSync(path.join(os.homedir(),'.ssh/localhost-key.pem')),
                             cert: fs.readFileSync(path.join(os.homedir(),'.ssh/localhost.pem')),
+                        },
+                        hmr: {
+                            host: 'localhost'
                         }
                     }
                 })

package/modules/Styles.js

@@ -10,6 +10,32 @@ import glob from "glob";
 import through from "through2";
 import {Config, Exists, Functions, Modules, Utils, root} from "./Core.js";
 
+const aspectRatio = () => {
+    return {
+        postcssPlugin: 'aspect-ratio',
+        Declaration: {
+            'aspect-ratio': (decl, {Rule, Declaration}) => {
+                const rule = decl.parent
+                const selector = rule.selector
+                const beforeRule = new Rule({selector: `${selector}:before`, raws: {after: rule.raws.after, semicolon: rule.raws.semicolon}})
+                const ratio = decl.value.replace(/['"]?((?:\d*\.?\d*)?)(?:\s*[:|\/]\s*)(\d*\.?\d*)['"]?/g, (match, width, height) => {
+                    return (height / width) * 100 + '%'
+                })
+
+                beforeRule.append([
+                    new Declaration({prop: 'padding-bottom', value: ratio}),
+                ])
+
+                rule.after(beforeRule)
+
+                rule.nodes.length === 1 ? rule.remove() : decl.remove()
+            },
+        }
+    }
+}
+
+aspectRatio.postcss = true;
+
 export class Styles {
     get purge() {
         return {
@@ -160,7 +186,7 @@ export class Styles {
             }
 
             gulp.src(`${root + Config.paths.input.styles}/${Config.styles.tailwind.basename}`)
-                .pipe(postcss(new Utils().postcssPlugins(Config.styles.tailwind.postcss, [tailwindcss(tailwindcssConfig), autoprefixer])))
+                .pipe(postcss(new Utils().postcssPlugins(Config.styles.tailwind.postcss, [tailwindcss(tailwindcssConfig), aspectRatio, autoprefixer])))
                 .pipe(gulpif(Config.styles.optimizations, clean()))
                 .pipe(gulp.dest(root + Config.paths.temp))
                 .on("end", resolve)
@@ -245,32 +271,6 @@ export class Styles {
             });
         }
 
-        const aspectRatio = () => {
-            return {
-                postcssPlugin: 'aspect-ratio',
-                Declaration: {
-                    'aspect-ratio': (decl, {Rule, Declaration}) => {
-                        const rule = decl.parent
-                        const selector = rule.selector
-                        const beforeRule = new Rule({selector: `${selector}:before`, raws: {after: rule.raws.after, semicolon: rule.raws.semicolon}})
-                        const ratio = decl.value.replace(/['"]?((?:\d*\.?\d*)?)(?:\s*[:|\/]\s*)(\d*\.?\d*)['"]?/g, (match, width, height) => {
-                            return (height / width) * 100 + '%'
-                        })
-
-                        beforeRule.append([
-                            new Declaration({prop: 'padding-bottom', value: ratio}),
-                        ])
-
-                        rule.after(beforeRule)
-
-                        rule.nodes.length === 1 ? rule.remove() : decl.remove()
-                    },
-                }
-            }
-        }
-
-        aspectRatio.postcss = true;
-
         const build = lazypipe().pipe(() => gulpif("*.css", postcss(new Utils().postcssPlugins(Config.styles.postcss, [autoprefixer, aspectRatio, inset])))
         ).pipe(() => gulpif("*.less", Modules.less.module()));
 

package/modules/Templates.js

@@ -8,6 +8,9 @@ import gulp from "gulp";
 import plumber from "gulp-plumber";
 import minifier from "html-minifier";
 import through from "through2";
+import Prism from 'prismjs'
+import loadLanguages from 'prismjs/components/index.js'
+import NormalizeWhitespace from 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js'
 import {Config, Exists, Functions, Modules, root} from "./Core.js";
 
 export class Templates {
@@ -236,16 +239,54 @@ export class Templates {
                             type = type.replace(":mirror", "")
                         }
 
+                        loadLanguages(['markup', 'css', 'javascript'])
+
+                        const Normalize = new NormalizeWhitespace({
+                            'remove-trailing': true,
+                            'remove-indent': true,
+                            'left-trim': true,
+                            'right-trim': true,
+                        });
+
+                        const wrap = (code, lang) => {
+                            return `<pre class="language-${lang}"><code>${code}</code></pre>`
+                        }
+
+                        const highlight = (str, lang) => {
+                            if (!lang) {
+                                return wrap(str, 'text')
+                            }
+                            lang = lang.toLowerCase()
+                            const rawLang = lang
+                            if (lang === 'vue' || lang === 'html') {
+                                lang = 'markup'
+                            }
+                            if (lang === 'md') {
+                                lang = 'markdown'
+                            }
+                            if (lang === 'ts') {
+                                lang = 'typescript'
+                            }
+                            if (lang === 'py') {
+                                lang = 'python'
+                            }
+                            if (!Prism.languages[lang]) {
+                                try {
+                                    loadLanguages([lang])
+                                } catch (e) {
+                                    console.warn(`Syntax highlight for language "${lang}" is not supported.`)
+                                }
+                            }
+                            if (Prism.languages[lang]) {
+                                const code = Prism.highlight(Normalize.normalize(str), Prism.languages[lang], lang)
+                                return wrap(code, rawLang)
+                            }
+                            return wrap(str, 'text')
+                        }
+
                         return {
                             chain: chain,
-                            output: `${mirror ? output : ""}
-                            <pre style="width: 100%">
-                                <code class="language-${type}">
-                                    <xmp>
-                                        ${output}
-                                    </xmp>
-                                </code>
-                            </pre>`
+                            output: `${mirror ? output : ""}${highlight(output, type)}`
                         };
                     }
                 });

package/modules/tailwind/index.cjs

@@ -31,6 +31,31 @@ const tailwindColorsRgba = (colors = []) => {
   return colors
 };
 
+const tailwindColorsAccent = (colors = []) => {
+  const result = {};
+
+  colors.forEach(color => {
+    result[`.accent-${color}`] = {
+      '--color-accent': `var(--color-${color})`,
+      'accent-color': 'rgb(var(--color-accent))'
+    };
+  });
+
+  return result
+};
+
+const tailwindColorsCurrent = (colors = []) => {
+  const result = {};
+
+  colors.forEach(color => {
+    result[`.text-${color}`] = {
+      '--color-current': `var(--color-${color})`
+    };
+  });
+
+  return result
+};
+
 const tailwindVariables = (type, variables = [], values = {}) => {
   variables.forEach(name => {
     values[name] = `var(--${type}-${name})`;
@@ -39,6 +64,21 @@ const tailwindVariables = (type, variables = [], values = {}) => {
   return values
 };
 
+const tailwindAnimations = (values) => {
+  const result = {};
+
+  values.forEach(value => {
+    result[`.animation-${value}`] = {
+      'animation-name': value
+    };
+  });
+
+  return result
+};
+
+exports.tailwindAnimations = tailwindAnimations;
 exports.tailwindColors = tailwindColors;
+exports.tailwindColorsAccent = tailwindColorsAccent;
+exports.tailwindColorsCurrent = tailwindColorsCurrent;
 exports.tailwindColorsRgba = tailwindColorsRgba;
 exports.tailwindVariables = tailwindVariables;

package/modules/tailwind/index.js

@@ -27,6 +27,31 @@ const tailwindColorsRgba = (colors = []) => {
   return colors
 }
 
+const tailwindColorsAccent = (colors = []) => {
+  const result = {}
+
+  colors.forEach(color => {
+    result[`.accent-${color}`] = {
+      '--color-accent': `var(--color-${color})`,
+      'accent-color': 'rgb(var(--color-accent))'
+    }
+  })
+
+  return result
+}
+
+const tailwindColorsCurrent = (colors = []) => {
+  const result = {};
+
+  colors.forEach(color => {
+    result[`.text-${color}`] = {
+      '--color-current': `var(--color-${color})`
+    };
+  });
+
+  return result
+};
+
 const tailwindVariables = (type, variables = [], values = {}) => {
   variables.forEach(name => {
     values[name] = `var(--${type}-${name})`
@@ -35,4 +60,16 @@ const tailwindVariables = (type, variables = [], values = {}) => {
   return values
 }
 
-export { tailwindColors, tailwindVariables, tailwindColorsRgba }
+const tailwindAnimations = (values) => {
+  const result = {};
+
+  values.forEach(value => {
+    result[`.animation-${value}`] = {
+      'animation-name': value
+    };
+  });
+
+  return result
+}
+
+export { tailwindColors, tailwindVariables, tailwindColorsRgba, tailwindColorsAccent, tailwindColorsCurrent, tailwindAnimations }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newlogic-digital/core",
   "type": "module",
-  "version": "0.9.2",
+  "version": "0.9.6",
   "main": "index.js",
   "author": "New Logic Studio s.r.o.",
   "description": "Set of tools that can be used to create modern web applications",
@@ -40,19 +40,20 @@
     "lazypipe": "^1.0.2",
     "lodash": "^4.17.21",
     "postcss-custom-media": "^8.0.0",
-    "postcss-custom-properties": "^12.1.3",
+    "postcss-custom-properties": "^12.1.4",
     "postcss-custom-selectors": "^6.0.0",
     "postcss-import": "^14.0.2",
     "postcss-nesting": "^10.1.2",
     "rollup": "^2.66.1",
     "rollup-plugin-import-map": "^2.2.2",
     "rollup-plugin-terser": "^7.0.2",
-    "vite": "~2.7.13"
+    "vite": "~2.7.13",
+    "prismjs": "^1.26.0"
   },
   "peerDependencies": {
     "autoprefixer": "^10.4.2",
     "postcss": "^8.4.5",
-    "tailwindcss": "^3.0.16"
+    "tailwindcss": "^3.0.18"
   },
   "devDependencies": {
     "vitepress": "^0.21.6"