breezify - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

lib/src/breezify.js

@@ -16,3 +16,3 @@ import { getFilesInDirectory, loadConfigFromFile, updateFileAndCompareSize, } from "./file-functions.js";
     const fileLists = getFilesInDirectory(files);
-    const classMap = extractClassesAndGenerateMap(fileLists.css, css);
+    const classMap = await extractClassesAndGenerateMap([...fileLists.css, ...fileLists.html], css);
     const listsAndReplaceFunctions = [
@@ -19,0 +19,0 @@ [

lib/src/css-functions.d.ts

@@ -13,3 +13,3 @@ import { CSSOptions } from "./options.js";
  */
-export declare function extractClassNamesFromFiles(fileList: string[], cssOptions: CSSOptions): Set<string>;
+export declare function extractClassNamesFromFiles(fileList: string[], cssOptions: CSSOptions): Promise<Set<string>>;
 /**
@@ -32,3 +32,3 @@ * Check if a string is a valid CSS selector
  */
-export declare function extractClassesAndGenerateMap(fileList: string[], cssOptions: CSSOptions): Record<string, string>;
+export declare function extractClassesAndGenerateMap(fileList: string[], cssOptions: CSSOptions): Promise<Record<string, string>>;
 //# sourceMappingURL=css-functions.d.ts.map

lib/src/css-functions.js

@@ -6,2 +6,3 @@ import * as cssTree from "css-tree";
 import { generateClassMap } from "./class-map.js";
+import { getStylesFromHtmlStyleTags } from "./html-functions.js";
 /**
@@ -42,6 +43,9 @@ * Extract class names from CSS content
  */
-export function extractClassNamesFromFiles(fileList, cssOptions) {
+export async function extractClassNamesFromFiles(fileList, cssOptions) {
     const classNames = new Set();
-    fileList.forEach((filePath) => {
-        const content = fs.readFileSync(filePath, "utf8");
+    for (const filePath of fileList) {
+        let content = fs.readFileSync(filePath, "utf8");
+        if (filePath.endsWith(".html") && cssOptions.extractClassesFromHtml) {
+            content = await getStylesFromHtmlStyleTags(content, cssOptions);
+        }
         const fileClassNames = extractClassNames(content, cssOptions);
@@ -51,3 +55,3 @@ fileClassNames.forEach((className) => {
         });
-    });
+    }
     return classNames;
@@ -106,4 +110,4 @@ }
  */
-export function extractClassesAndGenerateMap(fileList, cssOptions) {
-    const classList = extractClassNamesFromFiles(fileList, cssOptions);
+export async function extractClassesAndGenerateMap(fileList, cssOptions) {
+    const classList = await extractClassNamesFromFiles(fileList, cssOptions);
     if (classList.size === 0) {
@@ -110,0 +114,0 @@ throw new Error("No class names found in the CSS files.");

lib/src/html-functions.d.ts

@@ -9,2 +9,8 @@ import { CSSOptions, HTMLOptions, JSOptions } from "./options.js";
 export declare function replaceClassNamesInHtml(content: string, classMap: Record<string, string>, htmlOptions: HTMLOptions, jsOptions: JSOptions, cssOptions: CSSOptions): Promise<string>;
+/**
+ * Get inline styles from HTML content
+ * @param content {string} - HTML content
+ * @param cssOptions {CSSOptions} - CSS options
+ */
+export declare function getStylesFromHtmlStyleTags(content: string, cssOptions: CSSOptions): Promise<string>;
 //# sourceMappingURL=html-functions.d.ts.map

lib/src/html-functions.js

@@ -78,1 +78,31 @@ import { serialize, parse } from "parse5";
 }
+/**
+ * Get inline styles from HTML content
+ * @param content {string} - HTML content
+ * @param cssOptions {CSSOptions} - CSS options
+ */
+export async function getStylesFromHtmlStyleTags(content, cssOptions) {
+    // Parse the HTML content into an AST
+    const document = parse(content);
+    let styles = "";
+    // Recursive function to walk through all nodes in the AST
+    async function traverseNode(node) {
+        // Update inline CSS
+        if (node.tagName === "style" && node.childNodes?.length) {
+            for (const child of node.childNodes) {
+                if (child.nodeName === "#text" && child.value) {
+                    styles += replaceClassNamesInCSS(child.value, {}, cssOptions);
+                }
+            }
+        }
+        if (node.childNodes) {
+            for (const child of node.childNodes) {
+                await traverseNode(child);
+            }
+        }
+    }
+    // Start traversing from the root
+    await traverseNode(document);
+    console.log(styles);
+    return styles;
+}

lib/src/options.d.ts

@@ -54,2 +54,3 @@ import { SkipRule } from "./js-functions.js";
     minify?: boolean;
+    extractClassesFromHtml?: boolean;
 };
@@ -56,0 +57,0 @@ /**

lib/src/options.js

@@ -16,2 +16,3 @@ import merge from "lodash.merge";
         minify: true,
+        extractClassesFromHtml: true,
     },
@@ -18,0 +19,0 @@ js: {

lib/src/program.js

@@ -12,3 +12,3 @@ import { Command, Option } from "commander";
 const booleanParser = (val) => val === "true";
-program.version("1.0.0").name("breezify");
+program.version("1.0.2").name("breezify");
 program
@@ -35,2 +35,5 @@ .command("do")
     .argParser(booleanParser))
+    .addOption(new Option("--css.extractClassesFromHtml <extractClassesFromHtml>", "whether to extract class names from style tags found in HTML files")
+    .choices(booleanChoices)
+    .argParser(booleanParser))
     .option("--js.ignoreStringPatterns <ignoreStringPatterns...>", "RegExp patterns to ignore when replacing class names in strings in JS files")
@@ -37,0 +40,0 @@ .addOption(new Option("--js.mode <mode>", "mode to replace class names in JS files").choices(["acorn", "simple"]))

package.json

 {
   "name": "breezify",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A tool for minifying CSS class names",
@@ -26,3 +26,3 @@ "author": "Gleb Gorokhov <[e-mail]>",
     "test": "vitest run",
-    "test-watch": "vitest",
+    "test:watch": "vitest",
     "cli-preview": "npm run build && node ./lib",
@@ -29,0 +29,0 @@ "prepack": "npm run lint && npm run test && npm run build"

README.md

@@ -6,2 +6,7 @@ <img src="./logo_light.svg#gh-light-mode-only" alt="logo" width="200" />
 
+![NPM Version](https://img.shields.io/npm/v/breezify?logo=npm)
+![GitHub License](https://img.shields.io/github/license/glebgorokhov/breezify)
+![GitHub Issues](https://img.shields.io/github/issues/glebgorokhov/breezify?logo=github)
+![GitHub Pull Requests](https://img.shields.io/github/issues-pr/glebgorokhov/breezify?logo=github)
+
 Give some fresh air to your production HTML, JS and CSS! Breezify is a library that replaces class names in your build files with shorter ones.
@@ -251,2 +256,3 @@
 - `minify` (boolean | undefined): Whether to minify the output CSS. Default: `true`.
+- `extractClassesFromHtml` (boolean | undefined): Whether to extract class names from <style> tags found in HTML files. Default: `true`.
 
@@ -253,0 +259,0 @@ ## JSOptions

No alert changes

Improved metrics

Total package byte prevSize

62331

increased by4.11%

Lines of code

1080

increased by4.35%

Number of lines in readme file

311

increased by1.97%

No dependency changes