@newlogic-digital/core 0.8.1 → 0.9.2

package/index.js

@@ -15,27 +15,15 @@ import {
     root
 } from "./modules/Core.js";
 
-const defineConfig = (config) => new Core().init(config);
-
-const tailwindColors = (colors = []) => {
-    colors.forEach(name => {
-        colors[name] = ({opacityVariable, opacityValue}) => {
-            if (opacityValue !== undefined) {
-                return `rgba(var(--color-${name}), ${opacityValue})`
-            }
-            if (opacityVariable !== undefined) {
-                return `rgba(var(--color-${name}), var(${opacityVariable}, 1))`
-            }
-            return `rgb(var(--color-${name}))`
-        }
-    })
+import { tailwindColors, tailwindColorsRgba, tailwindVariables } from './modules/tailwind/index.js'
 
-    return colors
-}
+const defineConfig = (config) => new Core().init(config);
 
 export {
     defineConfig,
     tailwindColors,
+    tailwindVariables,
+    tailwindColorsRgba,
     Core,
     Utils,
     Styles,

package/modules/Core.js

@@ -109,10 +109,7 @@ let Config = {
             clean: {},
             options: {},
             nodeResolve: true,
-            nodeResolveIgnore: [],
-            tailwind: {
-                keyframes: true
-            }
+            nodeResolveIgnore: []
         },
         vendor: {
             cache: false,
@@ -126,6 +123,7 @@ let Config = {
         import: ['all'],
         themePath: "",
         ratio: {
+            enabled: false,
             content: [],
             files: ["main.css"]
         },
@@ -357,7 +355,7 @@ class Core {
             }
         }
 
-        if (Config.styles.ratio.content.length === 0 && Exists.templates) {
+        if (Config.styles.ratio.enabled && Config.styles.ratio.content.length === 0 && Exists.templates) {
             Config.styles.ratio.content.push(`${root + Config.paths.input.templates}/**/*.{hbs,html,twig}`);
         }
 

package/modules/Serve.js

@@ -51,8 +51,15 @@ export const Serve = new class {
                 }
             }
 
+            const reloadTailwind = {
+                name: 'reload-tailwind',
+                transformIndexHtml(html) {
+                    return html.replace('tailwind.css', 'tailwind.css?v=' + new Date().getTime())
+                }
+            }
+
             let config = {
-                plugins: Config.serve.mode === "dev" ? [middleware, ratio, reload] : [middleware, reload],
+                plugins: (Config.serve.mode === "dev" && Config.styles.ratio.enabled) ? [middleware, ratio, reload, reloadTailwind] : [middleware, reload, reloadTailwind],
                 publicDir: `${Config.paths.output.root}`,
                 server: {
                     open: Config.serve.index,
@@ -106,7 +113,10 @@ export const Serve = new class {
             await this.server.listen()
 
             console.log(chalk.cyan(`\n  vite v${require('vite/package.json').version}`) + chalk.green(` dev server running at:\n`))
-            console.log(typeof this.server.printUrls() !== "undefined" ? this.server.printUrls() : "");
+
+            this.server.printUrls()
+
+            console.log(" ");
 
             resolve();
         })

package/modules/Styles.js

@@ -122,7 +122,9 @@ export class Styles {
                 findPaths(items, `${root + Config.paths.input.styles}/${directory}`);
             });
 
-            fs.writeFileSync(`${root + Config.paths.temp}/ratio.css`, new Styles().ratio(Config.styles.ratio.content))
+            if (Config.styles.ratio.enabled) {
+                fs.writeFileSync(`${root + Config.paths.temp}/ratio.css`, new Styles().ratio(Config.styles.ratio.content))
+            }
 
             resolve();
         })
@@ -151,16 +153,6 @@ export class Styles {
                 }
             });
 
-            const purge = lazypipe().pipe(purgeCSS, Object.assign({
-                content: Config.styles.purge.content,
-                extractors: [
-                    {
-                        extractor: content => content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [],
-                        extensions: ['html', 'js', 'hbs', 'tpl', 'latte', 'twig']
-                    }
-                ]
-            }, Config.styles.purge.tailwind));
-
             let tailwindcssConfig = {};
 
             if (!Exists.tailwindConfig) {
@@ -169,7 +161,6 @@ 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(gulpif(Config.styles.purge.enabled, purge()))
                 .pipe(gulpif(Config.styles.optimizations, clean()))
                 .pipe(gulp.dest(root + Config.paths.temp))
                 .on("end", resolve)
@@ -286,7 +277,7 @@ export class Styles {
         return new Promise(resolve => {
             gulp.src([`${root + Config.paths.input.styles}/*.{css,less}`, `!${root + Config.paths.input.styles}/${Config.styles.tailwind.basename}`, `!${root + Config.paths.input.styles}/*-modifiers.less`])
                 .pipe(plumber(Functions.plumber))
-                .pipe(ratio(Config.styles.ratio.content))
+                .pipe(gulpif(Config.styles.ratio.enabled, ratio(Config.styles.ratio.content)))
                 .pipe(vendor())
                 .pipe(build())
                 .pipe(Functions.revRewriteOutput())

package/modules/Utils.js

@@ -6,6 +6,7 @@ import postcssImport from "postcss-import";
 import postcssNesting from "postcss-nesting";
 import postcssCustomMedia from "postcss-custom-media";
 import postcssCustomSelectors from "postcss-custom-selectors";
+import tailwindcssNesting from "tailwindcss/nesting/index.js";
 import {Config, Exists, Functions, root} from "./Core.js";
 
 export class Utils {
@@ -266,9 +267,9 @@ export class Utils {
         }
     }
     postcssPlugins(config, after) {
-        let plugins = [postcssImport, postcssNesting({
+        let plugins = [postcssImport, tailwindcssNesting(postcssNesting({
             noIsPseudoSelector: true
-        }), postcssCustomMedia, postcssCustomSelectors];
+        })), postcssCustomMedia, postcssCustomSelectors];
 
         if (Exists.postcssConfig) {
             return {config: root}

package/modules/tailwind/index.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const tailwindColors = (colors = []) => {
+  colors.forEach(name => {
+    colors[name] = ({ opacityValue }) => {
+      if (opacityValue === undefined) {
+        return `rgb(var(--color-${name}))`
+      }
+      return `rgb(var(--color-${name}) / ${opacityValue})`
+    };
+  });
+
+  return colors
+};
+
+const tailwindColorsRgba = (colors = []) => {
+  colors.forEach(name => {
+    colors[name] = ({opacityVariable, opacityValue}) => {
+      if (opacityValue !== undefined) {
+        return `rgba(var(--color-${name}), ${opacityValue})`
+      }
+      if (opacityVariable !== undefined) {
+        return `rgba(var(--color-${name}), var(${opacityVariable}, 1))`
+      }
+      return `rgb(var(--color-${name}))`
+    };
+  });
+
+  return colors
+};
+
+const tailwindVariables = (type, variables = [], values = {}) => {
+  variables.forEach(name => {
+    values[name] = `var(--${type}-${name})`;
+  });
+
+  return values
+};
+
+exports.tailwindColors = tailwindColors;
+exports.tailwindColorsRgba = tailwindColorsRgba;
+exports.tailwindVariables = tailwindVariables;

package/modules/tailwind/index.js

@@ -0,0 +1,38 @@
+const tailwindColors = (colors = []) => {
+  colors.forEach(name => {
+    colors[name] = ({ opacityValue }) => {
+      if (opacityValue === undefined) {
+        return `rgb(var(--color-${name}))`
+      }
+      return `rgb(var(--color-${name}) / ${opacityValue})`
+    }
+  })
+
+  return colors
+}
+
+const tailwindColorsRgba = (colors = []) => {
+  colors.forEach(name => {
+    colors[name] = ({opacityVariable, opacityValue}) => {
+      if (opacityValue !== undefined) {
+        return `rgba(var(--color-${name}), ${opacityValue})`
+      }
+      if (opacityVariable !== undefined) {
+        return `rgba(var(--color-${name}), var(${opacityVariable}, 1))`
+      }
+      return `rgb(var(--color-${name}))`
+    }
+  })
+
+  return colors
+}
+
+const tailwindVariables = (type, variables = [], values = {}) => {
+  variables.forEach(name => {
+    values[name] = `var(--${type}-${name})`
+  })
+
+  return values
+}
+
+export { tailwindColors, tailwindVariables, tailwindColorsRgba }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newlogic-digital/core",
   "type": "module",
-  "version": "0.8.1",
+  "version": "0.9.2",
   "main": "index.js",
   "author": "New Logic Studio s.r.o.",
   "description": "Set of tools that can be used to create modern web applications",
@@ -9,11 +9,12 @@
   "scripts": {
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs"
+    "docs:serve": "vitepress serve docs",
+    "tailwind": "rollup modules/tailwind/index.js --file modules/tailwind/index.cjs --format cjs"
   },
   "dependencies": {
-    "@babel/core": "^7.16.7",
-    "@babel/preset-env": "^7.16.7",
+    "@babel/core": "^7.16.12",
+    "@babel/preset-env": "^7.16.11",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
@@ -39,22 +40,22 @@
     "lazypipe": "^1.0.2",
     "lodash": "^4.17.21",
     "postcss-custom-media": "^8.0.0",
-    "postcss-custom-properties": "^12.0.4",
+    "postcss-custom-properties": "^12.1.3",
     "postcss-custom-selectors": "^6.0.0",
     "postcss-import": "^14.0.2",
     "postcss-nesting": "^10.1.2",
-    "rollup": "^2.63.0",
+    "rollup": "^2.66.1",
     "rollup-plugin-import-map": "^2.2.2",
     "rollup-plugin-terser": "^7.0.2",
-    "vite": "~2.7.10"
+    "vite": "~2.7.13"
   },
   "peerDependencies": {
     "autoprefixer": "^10.4.2",
     "postcss": "^8.4.5",
-    "tailwindcss": "^2.2.19"
+    "tailwindcss": "^3.0.16"
   },
   "devDependencies": {
-    "vitepress": "^0.13.2"
+    "vitepress": "^0.21.6"
   },
   "files": [
     "index.js",