@medyll/cssfabric 0.1.12 → 0.2.2

package/gulpfile.js

@@ -1,24 +1,21 @@
 // ## WIP
 
-const gulp = require("gulp"),
-    jsonTransform = require("gulp-json-transform"),
-    cache = require("gulp-cached"),
-    gulpSass = require("gulp-sass"),
-    gulFileList = require("gulp-filelist"),
-    minifyCss = require("gulp-minify-css"),
-    fs = require("fs"),
-    gulpRename = require("gulp-rename"),
-    gulpDownload = require("gulp-download-stream"),
-    gulpConcat = require("gulp-concat-util"),
-    gulpJsBeautifier = require('gulp-jsbeautifier'),
-    modifyFile = require("gulp-modify-file"),
-    json2md = require("json2md"),
-    gulpIgnore = require("gulp-ignore");
-
-
-gulpSass.compiler = require("sass");
-
-const fabricConfig = require("./cssfabric.json");
+import gulp from "gulp";
+import jsonTransform from "gulp-json-transform"
+import cache from "gulp-cached"
+import gulFileList from "gulp-filelist"
+import gulpConcat from "gulp-concat-util"
+import gulpRename from "gulp-rename"
+import json2md from "json2md"
+import gulpIgnore from "gulp-ignore"
+import {cssFabricSassConf} from "./cssfabric.sass.js";
+import {Transform} from "stream";
+import util from "util";
+
+import dartSass from 'sass';
+import gulpSass from 'gulp-sass';
+import through2 from "through2";
+const sass = gulpSass(dartSass);
 
 const {
     fabricRootDir,
@@ -26,7 +23,25 @@ const {
     fabricConfDir,
     fabricModuleDir,
     fabricGeneratedDir,
-} = fabricConfig;
+} = cssFabricSassConf;
+
+
+const tr = new Transform({writableObjectMode: true, readableObjectMode: true});
+
+
+function TransformStream(transformFunction) {
+    // Set the objectMode flag here if you're planning to iterate through a set of objects rather than bytes
+    Transform.call(this, { objectMode: true });
+    this.transformFunction = transformFunction;
+}
+
+util.inherits(TransformStream, Transform);
+
+TransformStream.prototype._transform = function(obj, enc, done) {
+    return this.transformFunction(this, obj, done);
+};
+
+
 
 const doFabric = {
     /**
@@ -104,7 +119,7 @@ const doFabric = {
                         }
                         // si keys
                         if (attributeValue?.keys) {
-                            console.log(title,'keys isArrayOfType ', isArrayOfType(attributeValue.keys))
+                            console.log(title, 'keys isArrayOfType ', isArrayOfType(attributeValue.keys))
                             switch (isArrayOfType(attributeValue.keys)) {
                                 case "strings":
                                 case "numbers":
@@ -122,7 +137,7 @@ const doFabric = {
                             // si typeof level array => array of string or of arrays
                             if (Array.isArray(attributeValue.levels)) {
                                 // if [][]
-                                console.log(title,'levels isArrayOfType ', isArrayOfType(attributeValue.levels))
+                                console.log(title, 'levels isArrayOfType ', isArrayOfType(attributeValue.levels))
                                 switch (isArrayOfType(attributeValue.levels)) {
                                     case "strings":
                                     case "numbers":
@@ -178,8 +193,8 @@ const doFabric = {
         function isArrayOfType(arr) {
             let ret = '';
 
-            if(!Array.isArray(arr)){
-                console.log(Array.isArray(arr),{arr})
+            if (!Array.isArray(arr)) {
+                console.log(Array.isArray(arr), {arr})
             }
             if (arr.every(x => Array.isArray(x))) ret = 'arrays'
             if (arr.every(x => typeof x === 'string')) ret = 'strings'
@@ -189,8 +204,6 @@ const doFabric = {
             return ret;
         }
 
-        console.log({docContent});
-
 
         table.rows = rows;
 
@@ -300,54 +313,6 @@ function fabricVarExportFile(filePath) {
 }
 
 
-// exports sass maps to json
-function task_cssVarsExport(cb) {
-    let sourceFiles = fabricModuleDir + "/**/_*-vars.scss";
-    gulp
-        .src(sourceFiles)
-        .pipe(
-            gulFileList("cssfabric-vars.css", {
-                destRowTemplate: doFabric.fabricCssVarExportFile,
-                removeExtensions: false,
-            })
-        )
-        .pipe(
-            modifyFile((content, path, file) => {
-                let exp = content.split("|"); // JSON.parse()
-                let header = '';
-                let footer = "";
-
-                let utils = `@use '${fabricRootDir}/utils' as utils;` + "\r\n";
-                const openVarTag = ":root{";
-                const closeVarTag = "}";
-
-                Object.values(exp).forEach((v, k, a) => {
-                    if (v) {
-                        moduleConf = JSON.parse(v);
-
-                        if (moduleConf) {
-                            header +=
-                                `@use '${fabricModuleDir}/${moduleConf.module_path}' as ${moduleConf.module_name};` +
-                                "\r\n";
-                            footer +=
-                                `@include utils.scssVarsToCssVars(${moduleConf.module_name},${moduleConf.module_name}.$${moduleConf.module_name}-config);` +
-                                "\r\n";
-                        }
-                    }
-                });
-
-                const out = utils + header + openVarTag + footer + closeVarTag;
-
-                return out;
-            })
-        )
-        .pipe(gulpSass({outputStyle: "expanded", includePaths: [fabricModuleDir]}).on("error", gulpSass.logError))
-        .pipe(gulp.dest(fabricStylesDir))
-        .on("end", () => {
-            return cb();
-        });
-}
-
 // exports sass maps to json
 function task_varsExport(cb) {
     let sourceFiles = fabricModuleDir + "/**/_*-vars.scss";
@@ -356,24 +321,31 @@ function task_varsExport(cb) {
         .src(sourceFiles)
         //.pipe(cache(task_varsExport))
         .pipe(
-            gulFileList("ghost", {
+            gulFileList("cssFabric-vars", {
                 destRowTemplate: fabricVarExportFile,
                 removeExtensions: false,
             })
         )
-        .pipe(gulpConcat("export-variables.try"))
-        .pipe(gulpConcat.header('{"obj":"'))
-        .pipe(gulpConcat.footer('"}'))
+        .pipe(through2.obj(function(file, _, cb) {
+            if (file.isBuffer()) {
+                const content = file.contents.toString();
+                const start = '{"obj":"';
+                const end = "\"}";
+
+                file.contents = Buffer.from(`${start}${content}${end}`)
+            }
+            cb(null, file);
+        }))
         .pipe(
             jsonTransform(function (file_content, file_info) {
                 return doFabric.fabricSassToJson({file_content: file_content, file_info});
             })
         )
         .pipe(cache(task_varsExport))
-        // .pipe(sass().on('error', sass.logError))
-        .pipe(gulpSass({outputStyle: "expanded"}).on("error", gulpSass.logError))
-        .pipe(
-            modifyFile((content, path, file) => {
+        .pipe(sass({outputStyle: "expanded"}).on("error", sass.logError))
+        .pipe(through2.obj(function(file, _, cb) {
+            if (file.isBuffer()) {
+                const content = file.contents.toString();
                 const start = '{"cssfabric":{"modules":{';
                 const end = " }}}";
 
@@ -385,10 +357,10 @@ function task_varsExport(cb) {
                     .replace(regexOut, ",")
                     .replace(/,\s*$/, "");
 
-                return `${start}${exp}${end}`;
-            })
-        )
-        .pipe(gulpJsBeautifier())
+                file.contents = Buffer.from(`${start}${exp}${end}`)
+            }
+            cb(null, file);
+        }))
         .pipe(
             gulpRename(function (path) {
                 path.dirname = path.dirname;
@@ -404,7 +376,7 @@ function task_varsExport(cb) {
     return cb();
 }
 
-function task_readme(cb) {
+export function task_readme(cb) {
     gulp
         .src(fabricGeneratedDir + "/*.json")
         .pipe(
@@ -434,7 +406,8 @@ function task_readme(cb) {
 function task_mergeInclude(cb) {
     //
     const dest = fabricStylesDir;
-    const dir = fabricStylesDir + "/core";
+    // const dir = fabricStylesDir + "/core";
+    const dir = fabricStylesDir ;
 
     const steps = [];
     // normal stylesheets
@@ -446,7 +419,14 @@ function task_mergeInclude(cb) {
                 `!${dir}/**/*min*.css`,
             ])
             .pipe(gulpConcat("cssfabric.css"))
-            .pipe(gulpConcat.header("/** Merged by Mydde */"))
+            .pipe(through2.obj(function(file, _, cb) {
+                if (file.isBuffer()) {
+                    const content = file.contents.toString();
+                    const start = '/** Merged by Mydde */';
+                    file.contents = Buffer.from(`${start}${content}`)
+                }
+                cb(null, file);
+            }))
             .pipe(cache(task_mergeInclude))
             .pipe(gulp.dest(dest))
             .on("end", () => {
@@ -510,47 +490,31 @@ function task_sass2css(cb) {
             .pipe(gulpIgnore.exclude("**/*css-fabric*"))
             .pipe(
                 gulpRename(function (path) {
-                    /*path.dirname = path.dirname;
-                    path.extname = path.extname;*/
                     path.basename = path.basename.replace("-", ".");
                 })
             )
             // to css and to /core
             .pipe(
-                gulpSass({outputStyle: "expanded"}).on("error", gulpSass.logError)
+                sass({outputStyle: "expanded"}).on("error", sass.logError)
             )
-            .pipe(gulp.dest(`${fabricStylesDir}/core`))
+            .pipe(gulp.dest(`${fabricStylesDir}`))
             // to css and minify and to /core
-            .pipe(
-                minifyCss({
-                    keepSpecialComments: 0,
-                })
-            )
+            .pipe(sass({outputStyle:'compressed'}))
             .pipe(
                 gulpRename(function (path) {
-                    /*path.dirname = path.dirname;*/
                     path.extname = ".min.css";
-                    path.basename = path.basename.replace("-", ".");
+                    path.basename = path.basename.replace("-", "."); 
                 })
             )
-            .pipe(gulp.dest(`${fabricStylesDir}/core`))
+            .pipe(gulp.dest(`${fabricStylesDir}`))
             .on("end", () => {
                 return cb();
             })
     );
 }
 
-function taskDownload(cb) {
-    return gulpDownload(
-        "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
-    )
-        .pipe(gulp.dest("./src/vendor/normalize/"))
-        .on("end", () => {
-            return cb();
-        });
-}
 
-function watchSassTask(cb) {
+export function watchSass(cb) {
     gulp.watch(
         fabricModuleDir + "/**/*.scss",
         gulp.series(task_sass2css, task_mergeInclude, task_varsExport)
@@ -558,41 +522,11 @@ function watchSassTask(cb) {
     cb();
 }
 
-// todo change to styleDir
-function watchInclude(cb) {
-
-    cb();
-}
-
-function watchReadme(cb) {
+export function watchReadme(cb) {
     gulp.watch(
         [fabricModuleDir, "!" + fabricModuleDir + "/**/_*.scss"],
         task_readme
     );
 
     cb();
-}
-
-function watchExportVars(cb) {
-    gulp.watch(fabricRootDir, gulp.series(task_varsExport));
-
-    cb();
-}
-
-function watchCssExportVars(cb) {
-    gulp.watch(fabricModuleDir, gulp.series(task_cssVarsExport));
-
-    cb();
-}
-
-// only one called by npm
-exports.watchSass = watchSassTask;
-
-exports.watchInclude = watchInclude;
-exports.watchReadme = watchReadme;
-exports.watchExportVars = watchExportVars;
-
-exports.watchCssExport = watchCssExportVars;
-
-exports.taskDownload = taskDownload;
-exports.task_readme = task_readme;
+}

package/package.json

@@ -1,69 +1,69 @@
-{
-  "name": "@medyll/cssfabric",
-  "version": "0.1.12",
-  "private": false,
-  "bin": {
-    "@medyll/cssfabric": "./bin/index.js"
-  },
-  "repository": {
-    "type" : "git",
-    "url": "https://github.com/medyll/cssfabric.git"
-  },
-  "scripts": {
-    "dev": "tsc -w || exit 1",
-    "build": "",
-    "watch-all": "npm-run-all -p -r watch-sass",
-    "watch-sass": "gulp watchSass",
-    "watch-json": "gulp watchJson",
-    "watch-include": "gulp watchInclude",
-    "watch-readme": "gulp watchReadme",
-    "task-download": "gulp taskDownload",
-    "css-build": "sass   src/cssfabric/modules/vars.scss css/mystyles.css"
-  },
-  "dependencies": {
-    "chokidar": "^3.5.1",
-    "fs-extra": "^10.0.1",
-    "gulp-filelist": "^2.0.5",
-    "gulp-jsbeautifier": "^3.0.1",
-    "gulp-sort": "^2.0.0",
-    "JSON": "^1.0.0",
-    "node-sass": "^6.0.0",
-    "sass": "^1.32.12"
-  },
-  "devDependencies": {
-    "clean-css": "^5.1.2",
-    "cross-spawn": "^7.0.3",
-    "css-loader": "^5.2.4",
-    "documentjs": "^0.5.5",
-    "gulp": "^4.0.2",
-    "gulp-cached": "^1.1.1",
-    "gulp-cli": "^2.3.0",
-    "gulp-concat-util": "^0.5.5",
-    "gulp-data": "^1.3.1",
-    "gulp-debug": "^4.0.0",
-    "gulp-download": "0.0.1",
-    "gulp-download-stream": "^0.0.6",
-    "gulp-ignore": "^3.0.0",
-    "gulp-json-modify": "^1.0.2",
-    "gulp-json-transform": "^0.4.7",
-    "gulp-minify-css": "^1.2.4",
-    "gulp-modify-file": "^1.0.1",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^4.1.0",
-    "gulp-sass-export": "0.0.3",
-    "gulp-util": "^3.0.8",
-    "json-to-scss": "^1.6.2",
-    "json2md": "^1.10.0",
-    "mini-css-extract-plugin": "^1.6.0",
-    "npm-run-all": "^4.1.5",
-    "sass-json-export": "^2.0.1",
-    "sass-loader": "^11.0.1",
-    "sassdoc": "^2.7.3",
-    "scss-to-json": "^2.0.0",
-    "style-loader": "^2.0.0",
-    "terminal": "^0.1.4",
-    "through2": "^4.0.2",
-    "tsconfig-paths": "^3.9.0",
-    "webpack": "^5.36.2"
-  }
-}
+{
+  "name": "@medyll/cssfabric",
+  "version": "0.2.2",
+  "private": false,
+  "bin": {
+    "@medyll/cssfabric": "./bin/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/medyll/cssfabric.git"
+  },
+  "scripts": {
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "package": "svelte-kit package",
+    "preview": "svelte-kit preview",
+    "prepare": "svelte-kit sync",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "watch-all": "npm-run-all -p -r watch-sass",
+    "watch-sass": "gulp watchSass",
+    "watch-json": "gulp watchJson",
+    "watch-readme": "gulp watchReadme",
+    "css-build": "sass   src/cssfabric/modules/vars.scss css/mystyles.css"
+  },
+  "dependencies": {
+    "@lukeed/uuid": "^2.0.0",
+    "cookie": "^0.4.1",
+    "gulp-concat-util": "^0.5.5",
+    "gulp-filelist": "^2.0.5",
+    "JSON": "^1.0.0",
+    "sass": "^1.32.12",
+    "svelte2tsx": "^0.5.9"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "@types/cookie": "^0.4.1",
+    "chokidar": "^3.5.3",
+    "cross-spawn": "^7.0.3",
+    "css-loader": "^5.2.4",
+    "gulp": "^4.0.2",
+    "gulp-cached": "^1.1.1",
+    "gulp-cli": "^2.3.0",
+    "gulp-data": "^1.3.1",
+    "gulp-download-stream": "^0.0.6",
+    "gulp-ignore": "^3.0.0",
+    "gulp-json-transform": "^0.4.7",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^5.1.0",
+    "gulp-util": "^3.0.8",
+    "json-to-scss": "^1.6.2",
+    "json2md": "^1.10.0",
+    "mini-css-extract-plugin": "^1.6.0",
+    "npm-run-all": "^4.1.5",
+    "sass-json-export": "^2.0.1",
+    "style-loader": "^2.0.0",
+    "svelte": "^3.46.0",
+    "svelte-check": "^2.2.6",
+    "svelte-highlight": "^6.0.1",
+    "svelte-preprocess": "^4.10.1",
+    "through2": "^4.0.2",
+    "tsconfig-paths": "^3.9.0",
+    "tslib": "^2.3.1",
+    "typescript": "~4.6.2",
+    "webpack": "^5.36.2"
+  },
+  "type": "module"
+}

package/src/app.css

@@ -0,0 +1,107 @@
+
+:root {
+	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: 'Fira Mono', monospace;
+	--pure-white: #ffffff;
+	--primary-color: #b9c6d2;
+	--secondary-color: #d0dde9;
+	--tertiary-color: #edf0f8;
+	--accent-color: #ff3e00;
+	--heading-color: rgba(0, 0, 0, 0.7);
+	--text-color: #444444;
+	--background-without-opacity: rgba(255, 255, 255, 0.7);
+	--column-width: 42rem;
+	--column-margin-top: 4rem;
+}
+
+body {
+	min-height: 100vh;
+	font-size: 12px;
+	margin: 0;
+	background-color: var(--theme-color-background);
+	color: var(--theme-color-foreground);
+}
+
+body::before {
+	content: '';
+	width: 80vw;
+	height: 100vh;
+	position: absolute;
+	top: 0;
+	left: 10vw;
+	z-index: -1;
+	background: radial-gradient(
+		50% 50% at 50% 50%,
+		var(--pure-white) 0%,
+		rgba(255, 255, 255, 0) 100%
+	);
+	opacity: 0.05;
+}
+
+#svelte {
+	min-height: 100vh;
+}
+
+h1,
+h2,
+p {
+	font-weight: 400;
+	color: var(--heading-color);
+}
+
+p {
+	line-height: 1.5;
+}
+
+a {
+	color: var(--accent-color);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+h1 {
+	font-size: 2rem;
+	text-align: center;
+}
+
+h2 {
+	font-size: 1rem;
+}
+
+pre {
+	font-size: 16px;
+	font-family: var(--font-mono);
+	background-color: rgba(255, 255, 255, 0.45);
+	border-radius: 3px;
+	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+	padding: 0.5em;
+	overflow-x: auto;
+	color: var(--text-color);
+}
+
+input,
+button {
+	font-size: inherit;
+	font-family: inherit;
+}
+
+button:focus:not(:focus-visible) {
+	outline: none;
+}
+
+code {
+	color: var(--theme-color-foreground);
+	background-color: var(--theme-color-background-alpha-high);
+	padding: var(--box-density-1);
+	border-radius: var(--radius-small)
+}
+
+@media (min-width: 720px) {
+	h1 {
+		font-size: 2.4rem;
+	}
+}

package/src/app.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#the-app-namespace
+// for information about these interfaces
+declare namespace App {
+	interface Locals {
+		userid: string;
+	}
+
+	// interface Platform {}
+
+	// interface Session {}
+
+	// interface Stuff {}
+}

package/src/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="description" content="Svelte demo app" />
+		<link rel="icon" href="%svelte.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%svelte.head%
+	</head>
+	<body data-theme="dark">
+		<div>%svelte.body%</div>
+	</body>
+</html>

package/src/components/Header.svelte

@@ -0,0 +1,17 @@
+
+
+<script lang="ts">
+    export let title;
+    export let tag;
+    export let description;
+</script>
+
+<div class={"pad  flex-h flex-wrap flex-align-middle"}>
+    <div class={"flex-h items-center pad-l-2 flex-main"}>
+        <h2 class={"pad-all border-b "}>{title}</h2>
+        <h5 class={"pad-all text-gray-500  text-h4"}>
+            {tag}
+        </h5>
+    </div>
+    <p class={"pad   text-center marg-l border-l color-grey-400"}>{description}</p>
+</div>

package/src/components/HeaderSiteTitle.svelte

@@ -0,0 +1,12 @@
+
+<script lang="ts">
+    export let title: string;
+    export let title_tag: string;
+    export let description: string;
+</script>
+<div class={"flex-v items-center pad-lg  pad border-b pos-sticky"}>
+    <header class={"flex-h just-center items-center"}>
+        <h4 class={"pad-all text-shad"}><a href={"/"}>{title}</a></h4>
+        <h6 class={"pad-all self-start dsp-sm-none"}>{title_tag}</h6>
+    </header>
+</div>