bullframe.css 5.0.0 → 5.1.0

package/vite.config.js

@@ -1,69 +1,100 @@
+// Vite config tools and dependencies
 import { defineConfig } from "vite";
 import autoprefixer from "autoprefixer";
 import cssnano from "cssnano";
 import path from "path";
 import fs from "fs";
 import { glob } from "glob";
-import * as sass from "sass"; // Needed for compileAsync
+import * as sass from "sass";
 import postcss from "postcss";
 
+// Custom PostCSS plugin: adds license header as a comment at the top of each CSS file
+const addHeader = () => {
+  return {
+    postcssPlugin: "add-header",
+    Once(root) {
+      root.prepend({
+        type: "comment",
+        text: "! Bullframe CSS v5.1.0 | MIT License | https://github.com/marcop135/bullframe.css ",
+      });
+    },
+  };
+};
+addHeader.postcss = true;
+
+// Custom Vite plugin: compiles all SCSS files (except partials) to CSS and minified CSS
 function buildAllScss() {
   return {
     name: "build-all-scss",
     async closeBundle() {
+      // Find all SCSS files in src/scss (excluding partials that start with _)
       const files = await glob("src/scss/**/*.scss");
-
       const scssFiles = files.filter(
         (file) => !path.basename(file).startsWith("_")
       );
 
+      // Output directory for generated CSS
+      const outDir = path.resolve("dist/css");
+      fs.mkdirSync(outDir, { recursive: true });
+
+      // Compile and process each SCSS file
       for (const file of scssFiles) {
         const name = path.basename(file, ".scss");
-        const outDir = "dist/css";
         const outFile = path.join(outDir, `${name}.css`);
         const minFile = path.join(outDir, `${name}.min.css`);
 
+        // Step 1: Compile SCSS to CSS with source maps
         const result = await sass.compileAsync(file, {
           style: "expanded",
           sourceMap: true,
+          sourceMapIncludeSources: true,
         });
 
-        const cssWithHeader =
-          `/*! Bullframe CSS v5.0.0 | MIT License | https://github.com/marcop135/bullframe.css */\n` +
-          result.css;
-
-        const postcssResult = await postcss([autoprefixer()]).process(
-          cssWithHeader,
-          {
-            from: file,
-            to: outFile,
-            map: {
-              prev: result.sourceMap,
-              inline: false,
-            },
-          }
-        );
+        // Step 2: Run PostCSS with header + autoprefixer
+        const postcssResult = await postcss([
+          addHeader(),
+          autoprefixer(),
+        ]).process(result.css, {
+          from: path.resolve(file),
+          to: outFile,
+          map: {
+            prev: result.sourceMap ? JSON.stringify(result.sourceMap) : false,
+            inline: false,
+            annotation: true,
+          },
+        });
 
-        fs.mkdirSync(outDir, { recursive: true });
+        // Write normal CSS and source map
         fs.writeFileSync(outFile, postcssResult.css);
-        fs.writeFileSync(`${outFile}.map`, postcssResult.map.toString());
+        if (postcssResult.map) {
+          fs.writeFileSync(`${outFile}.map`, postcssResult.map.toString());
+        }
 
+        // Step 3: Minify with cssnano + autoprefixer (again) + source maps
         const minified = await postcss([autoprefixer(), cssnano()]).process(
-          cssWithHeader,
+          postcssResult.css,
           {
-            from: file,
+            from: outFile,
             to: minFile,
-            map: { inline: false },
+            map: {
+              prev: postcssResult.map ? postcssResult.map.toString() : false,
+              inline: false,
+              annotation: true,
+            },
           }
         );
 
+        // Write minified CSS and source map
         fs.writeFileSync(minFile, minified.css);
-        fs.writeFileSync(`${minFile}.map`, minified.map.toString());
+        if (minified.map) {
+          fs.writeFileSync(`${minFile}.map`, minified.map.toString());
+        }
       }
     },
   };
 }
 
+// Copy static files from src/docs to dist/docs (e.g. demo HTML, images, etc.)
 function copyDocsFiles() {
   return {
     name: "copy-docs-files",
@@ -93,24 +124,25 @@ function copyDocsFiles() {
   };
 }
 
+// Main Vite config
 export default defineConfig({
-  root: "src",
+  root: "src", // Vite project root
   build: {
-    outDir: "../dist",
-    emptyOutDir: true,
+    outDir: "../dist", // Output directory
+    emptyOutDir: true, // Clean before build
     rollupOptions: {
-      input: path.resolve(__dirname, "src/docs/demo/index.html"),
+      input: path.resolve(__dirname, "src/docs/demo/index.html"), // Entry point for HTML
       output: {
         entryFileNames: `[name].js`,
         chunkFileNames: `[name].js`,
-        assetFileNames: `[name][extname]`,
+        assetFileNames: `[name][extname]`, // Keep asset file names flat
       },
     },
-    assetsDir: "", // Avoid dist/assets
-    sourcemap: true,
+    assetsDir: "", // No subdir for assets
+    sourcemap: true, // Enable source maps
   },
-  plugins: [buildAllScss(), copyDocsFiles()],
+  plugins: [buildAllScss()], // Use the custom SCSS build plugin
   server: {
-    open: "/docs/demo/index.html",
+    open: "/docs/demo/index.html", // Dev server opens demo page
   },
 });

package/.gitattributes

@@ -1 +0,0 @@
-* text=auto

package/dist/docs/demo/css/style.css

@@ -1,131 +0,0 @@
-.demo {
-  .bf-row {
-    margin-bottom: 2rem;
-  }
-
-  [class^="bf-col"] {
-    margin-bottom: 1rem;
-  }
-
-  header {
-    margin-bottom: 1rem;
-
-    h1 {
-      margin-top: 1rem;
-      margin-bottom: 0;
-      font-weight: 700;
-
-      span {
-        color: #f95c1f;
-      }
-
-      @media (min-width: 600px) {
-        font-size: 5.5rem;
-      }
-
-      @media (min-width: 1000px) {
-        font-size: 7rem;
-      }
-    }
-
-    a {
-      margin-right: 1rem;
-    }
-  }
-
-  @media (min-width: 600px) {
-    .btn-github {
-      font-size: 115%;
-    }
-  }
-
-  .description {
-    max-width: 80rem;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .h2--section {
-    padding-bottom: 2rem;
-    text-transform: uppercase;
-
-    @media (min-width: 600px) {
-      font-size: 4rem;
-    }
-  }
-
-  legend {
-    padding-bottom: 1rem;
-  }
-
-  button,
-  .bf-btn,
-  .input-image,
-  input,
-  select,
-  textarea {
-    margin-bottom: 2rem;
-  }
-
-  dialog {
-    .bf-btn {
-      margin-bottom: 0;
-    }
-  }
-
-  [type="image"],
-  [type="checkbox"],
-  [type="radio"] {
-    margin-bottom: 0;
-  }
-
-  .grid {
-    .col-wrapper {
-      background-color: #888;
-      height: 6rem;
-      line-height: 6rem;
-      overflow-y: hidden;
-      color: #fff;
-      font-size: 80%;
-      text-align: center;
-      border-radius: 3px;
-      font-weight: 700;
-    }
-
-    .bf-row:nth-child(odd) {
-      .col-wrapper {
-        background-color: #ccc;
-        color: #000;
-      }
-    }
-
-    @media (max-width: 767px) {
-      .bf-row {
-        margin-bottom: 0;
-      }
-
-      [class*="bf-col-"] {
-        margin-bottom: 2rem;
-      }
-    }
-  }
-
-  .back-to-top {
-    text-align: center;
-    display: block;
-    margin: 6rem 0 12rem;
-
-    a {
-      i {
-        vertical-align: middle;
-        font-style: normal;
-      }
-    }
-  }
-
-  @media (max-width: 575px) {
-    header {
-      margin-bottom: 1rem;
-    }
-  }
-}

package/dist/docs/demo/icons/safari-pinned-tab.svg

@@ -1,28 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg1.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="467.000000pt" height="467.000000pt" viewBox="0 0 467.000000 467.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(.000000,467.000000) scale(.100000,-.100000)"
-fill="#000000" stroke="none">
-<path d="M2065 4659 c-790 -95 -1472 -577 -1826 -1289 -100 -203 -168 -411
--211 -647 -20 -112 -23 -161 -23 -388 0 -228 3 -276 24 -390 162 -906 804
--1617 1684 -1864 219 -61 335 -76 622 -76 227 0 276 3 388 23 903 162 1610
-796 1862 1670 65 227 80 345 80 637 0 228 -3 276 -24 390 -177 991 -927 1741
--1916 1916 -138 24 -520 35 -660 18z m-360 -1289 c257 -24 449 -96 577 -218
-91 -86 131 -169 148 -308 18 -142 -18 -249 -131 -383 l-57 -68 50 -38 c140
--107 228 -283 228 -455 -1 -350 -222 -543 -692 -605 -84 -11 -221 -15 -545
--15 l-433 0 0 1050 0 1050 373 0 c204 0 422 -5 482 -10z m2354 -182 c13 -101
-25 -198 28 -215 l5 -33 -426 0 -426 0 0 -215 0 -215 319 0 319 0 6 -27 c5 -25
-25 -188 43 -345 l6 -58 -347 0 -346 0 0 -400 0 -400 -280 0 -280 0 0 1045 0
-1045 678 0 679 0 22 -182z"/>
-<path d="M1400 2761 l0 -181 93 0 c235 0 367 60 367 168 0 72 -40 125 -125
-164 -42 19 -72 23 -192 26 l-143 4 0 -181z"/>
-<path d="M1400 1931 l0 -211 158 0 c233 0 327 31 372 124 47 97 3 207 -103
-264 -50 26 -58 27 -239 30 l-188 4 0 -211z"/>
-</g>
-</svg>

package/src/docs/demo/css/style.css

@@ -1,131 +0,0 @@
-.demo {
-  .bf-row {
-    margin-bottom: 2rem;
-  }
-
-  [class^="bf-col"] {
-    margin-bottom: 1rem;
-  }
-
-  header {
-    margin-bottom: 1rem;
-
-    h1 {
-      margin-top: 1rem;
-      margin-bottom: 0;
-      font-weight: 700;
-
-      span {
-        color: #f95c1f;
-      }
-
-      @media (min-width: 600px) {
-        font-size: 5.5rem;
-      }
-
-      @media (min-width: 1000px) {
-        font-size: 7rem;
-      }
-    }
-
-    a {
-      margin-right: 1rem;
-    }
-  }
-
-  @media (min-width: 600px) {
-    .btn-github {
-      font-size: 115%;
-    }
-  }
-
-  .description {
-    max-width: 80rem;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .h2--section {
-    padding-bottom: 2rem;
-    text-transform: uppercase;
-
-    @media (min-width: 600px) {
-      font-size: 4rem;
-    }
-  }
-
-  legend {
-    padding-bottom: 1rem;
-  }
-
-  button,
-  .bf-btn,
-  .input-image,
-  input,
-  select,
-  textarea {
-    margin-bottom: 2rem;
-  }
-
-  dialog {
-    .bf-btn {
-      margin-bottom: 0;
-    }
-  }
-
-  [type="image"],
-  [type="checkbox"],
-  [type="radio"] {
-    margin-bottom: 0;
-  }
-
-  .grid {
-    .col-wrapper {
-      background-color: #888;
-      height: 6rem;
-      line-height: 6rem;
-      overflow-y: hidden;
-      color: #fff;
-      font-size: 80%;
-      text-align: center;
-      border-radius: 3px;
-      font-weight: 700;
-    }
-
-    .bf-row:nth-child(odd) {
-      .col-wrapper {
-        background-color: #ccc;
-        color: #000;
-      }
-    }
-
-    @media (max-width: 767px) {
-      .bf-row {
-        margin-bottom: 0;
-      }
-
-      [class*="bf-col-"] {
-        margin-bottom: 2rem;
-      }
-    }
-  }
-
-  .back-to-top {
-    text-align: center;
-    display: block;
-    margin: 6rem 0 12rem;
-
-    a {
-      i {
-        vertical-align: middle;
-        font-style: normal;
-      }
-    }
-  }
-
-  @media (max-width: 575px) {
-    header {
-      margin-bottom: 1rem;
-    }
-  }
-}

package/src/docs/demo/icons/safari-pinned-tab.svg

@@ -1,28 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg1.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="467.000000pt" height="467.000000pt" viewBox="0 0 467.000000 467.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(.000000,467.000000) scale(.100000,-.100000)"
-fill="#000000" stroke="none">
-<path d="M2065 4659 c-790 -95 -1472 -577 -1826 -1289 -100 -203 -168 -411
--211 -647 -20 -112 -23 -161 -23 -388 0 -228 3 -276 24 -390 162 -906 804
--1617 1684 -1864 219 -61 335 -76 622 -76 227 0 276 3 388 23 903 162 1610
-796 1862 1670 65 227 80 345 80 637 0 228 -3 276 -24 390 -177 991 -927 1741
--1916 1916 -138 24 -520 35 -660 18z m-360 -1289 c257 -24 449 -96 577 -218
-91 -86 131 -169 148 -308 18 -142 -18 -249 -131 -383 l-57 -68 50 -38 c140
--107 228 -283 228 -455 -1 -350 -222 -543 -692 -605 -84 -11 -221 -15 -545
--15 l-433 0 0 1050 0 1050 373 0 c204 0 422 -5 482 -10z m2354 -182 c13 -101
-25 -198 28 -215 l5 -33 -426 0 -426 0 0 -215 0 -215 319 0 319 0 6 -27 c5 -25
-25 -188 43 -345 l6 -58 -347 0 -346 0 0 -400 0 -400 -280 0 -280 0 0 1045 0
-1045 678 0 679 0 22 -182z"/>
-<path d="M1400 2761 l0 -181 93 0 c235 0 367 60 367 168 0 72 -40 125 -125
-164 -42 19 -72 23 -192 26 l-143 4 0 -181z"/>
-<path d="M1400 1931 l0 -211 158 0 c233 0 327 31 372 124 47 97 3 207 -103
-264 -50 26 -58 27 -239 30 l-188 4 0 -211z"/>
-</g>
-</svg>