playform / compress Goto Github PK

View Code? Open in Web Editor NEW

426.0 4.0 12.0 48.34 MB

🗜️ — Compress —

Home Page: https://NPMJS.Org/@playform/compress

License: Other

TypeScript 95.21% JavaScript 4.79%

astro compress csso html-minifier-terser terser javascript css minify sharp image

compress's People

Contributors

Stargazers

Watchers

Forkers

fossabot advanced-astro ken0x0a ansidev jpvan amdlemos kamranahmedse gitgoap vasfvitor rdwz najeebaskar blackpeppper

compress's Issues

Fix: Error using astro-compress with astro-icon: Unknown builtin plugin "cleanupIDs" specified

There is an error when using "astro-compress" in versions higher than "1.1.23". This error occurs along with another Astro component called "astro-icon". Apparently, it removes "cleanupIDs" where the specified icon to be used is indicated.

The error only occurs when building in development mode; everything works correctly otherwise.

▶ src/pages/index.astro
i18next: languageChanged en
 error   [astro-icon] Unable to load icon "mdi:rss"!
  Error: Unknown builtin plugin "cleanupIDs" specified.
Error: [astro-icon] Unable to load icon "mdi:rss"!
Error: Unknown builtin plugin "cleanupIDs" specified.
    at file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/pages/all.ca28674c.mjs:621:13
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async AstroComponentInstance.render (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1586:7)
    at async renderChild (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1643:5)
    at async [Symbol.asyncIterator] (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1310:7)
    at async renderAstroTemplateResult (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1318:20)
    at async renderChild (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1641:5)
    at async AstroComponentInstance.render (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1595:7)
    at async renderChild (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1643:5)
    at async [Symbol.asyncIterator] (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1310:7)
 ELIFECYCLE  Command failed with exit code 1.
Error: Process completed with exit code 1.

How to use cssnano instead of csso?

I noticed that css has bug when forceMediaMerge: true it sort media queries in wrong order
How I can use cssnano for compressing css?

HTML minifier too aggressive with whitespaces

Hey,

so it appears like this minifier removes all kinds of whitespaces, even those in front of an astro component.

Compared to what it looks like with html: false.

I think it is sensible to preserve these whitespaces.

Removes a space which should not be removed

https://github.com/one-suedwest/onesw-website/blob/main/src/pages/index.astro

If you look at that file at line 73, astro-compress will remove the space between the "<HiddenField />" and "an"

You can just clone that project and run "npm run build" and then open the generated index.html and you will see the issue.

I did not investigate this further, so i am sorry for the bad bug description.

I made sure that the problem does not exist when removing compress() from the vite config, so i am pretty sure that the issue is with astro-compress.

CSS Class Reorder Issue

Hi,

We're having an issue on a build where astro-compress is reordering the CSS class declarations for a few DIVs where the order is critical to the responsive nature of the element. The site is using Bootstrap where class ordering for showing/hiding an DOM element on mobile matters. Compress is reordering all classes to be alphabetical (from what we're noticing which breaks our logic). Is there a way to disable this type of cleanup process?

Thanks!

Transforms `<!DOCTYPE html>` into `<!doctypehtml>`

This plugin converts <!DOCTYPE html> into <!doctypehtml>. The result should be <!doctype html>.

You can change it here:
https://github.com/nhristov/astro-compress/blob/b2d09e3b03bd7900434fbe8c4c3805d8239a0909/src/index.ts#L81

Compress animated webp

Currently compressing animated webp result in a still image instead of the animation.

Any way to supply an regexp to match animated webp files would be brilliant.

Error: Cannot compress file ./dist/index.html!

Is there a setting that can show me a bit more debug info on why it can not compress the file?
working on Astro rc 7 / Windows

Error: Cannot compress file ./dist/index.html!
Error: Cannot compress file ./dist/admin/index.html!
Error: Cannot compress file ./dist/contact/index.html!
Error: Cannot compress file ./dist/about/index.html!
Error: Cannot compress file ./dist/es/index.html!
Error: Cannot compress file ./dist/events/index.html!
Error: Cannot compress file ./dist/menu/index.html!
Error: Cannot compress file ./dist/es/about/index.html!
....
Successfully compressed a total of 0 HTML files for 0 Bytes.

Map files

Any plans to support map files for things that support them (i.e. JavaScript)?

Build were failed using v1.1.37

> [email protected] dev /Users/mac/projects/astro-basic-template
> astro dev

09:00:00 AM [astro] Unable to load /Users/mac/projects/astro-basic-template/astro.config.mjs

 error   Failed to resolve entry for package "astro-compress". The package may have incorrect main/module/exports specified in its package.json.
  File:
    /Users/mac/projects/astro-basic-template/astro.config.mjs
  Stacktrace:
Error: Failed to resolve entry for package "astro-compress". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:23266:11)
    at resolvePackageEntry (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:23263:5)
    at tryNodeResolve (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:23000:20)
    at Context.resolveId (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:22762:28)
    at Object.resolveId (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:43314:46)
    at async TransformContext.resolve (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:43043:23)
    at async normalizeUrl (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:41370:34)
    at async TransformContext.transform (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:41512:47)
    at async Object.transform (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:43387:30)
    at async loadAndTransform (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:41105:29)

PR: ansidev/astro-basic-template#133

Generate short name (assets)

Convert all assets from page-name-slug.css to hash.css

How can we configure a utility?

Using compress({js: {comments: false}}) I am getting the following error when executing astro build:

Error: Cannot compress file <filepath>!

Using compress() (or compress({js: true})) works, but there are some comments (as expected since some is the default setting).

HTML not getting minified when using parameterless arrow functions

Hey! :) Maybe this is an error with the html minimizer, but I dont get any errors / logs, that's why im posting this here.

Im using a minimal project with "astro": "^1.6.5" and "astro-compress": "^1.1.1"

I noticed that html files are ignored while compressing if any script contains arrow functions used like this:

<script>
    const sayHello = () => {
        console.log("Hello World");
    }
    sayHello();
</script>

However it's getting compressed with this script, which I thought was kinda weird:

<script>
    (() => {
        console.log("Hello World");
    })()

    function initializeTheme() {
        console.log("Hello World");
    }

    initializeTheme();
</script>

Whats even funnier is, that the following script (arrow function with parameters) is working too:

<script>
    const sayHello = (name) => {
        console.log(`Hello ${name}`);
    }
    sayHello("World");
</script>

To be more clear, the compressor doesn't work if any script contains arrow functions without parameters :D

HTML comments not being removed. NaN undefined for file count.

Since I upgraded from 1.1.7 to 1.1.12 the comments from the HTML are not being removed.

I get NaN undefined and comments from the html are not removed. Spacing is removed but not comments.

Astro version: "astro": "^1.6.11"

07:18:03 AM [build] Waiting for the astro-compress integration...
Successfully compressed a total of 7968 HTML files for NaN undefined.
Successfully compressed a total of 8 JS files for NaN undefined.
Successfully compressed a total of 20 SVG files for NaN undefined.

Here my astro.config:

import { defineConfig } from "astro/config";
import sitemap from "@astrojs/sitemap";
import compress from "astro-compress";
import prefetch from '@astrojs/prefetch';

import { SITE_URL, SERVER_PORT } from "./src/config";

export default defineConfig({
  site: SITE_URL,
  vite: {
    server: {
      watch: {
        ignored: ["/dist/**", "/db/**", "/src/pages/days/*.md"],
      },
    },
    logLevel: 'silent'
  },
  publicDir: "./assets",
  server: {
    port: SERVER_PORT,
    // host: true
  },
  integrations: [
    prefetch(),
    sitemap(),
    compress({
      css: false,
      html: {
        removeComments: true,
        maxLineLength: 1000,
        quoteCharacter: '"',
        removeAttributeQuotes: true
      },
      img: false,
      js: true,
      svg: true,
      logger: 1,
    }),
  ],
});

Here a gist of the html I am trying to compress: https://gist.github.com/fabriziogiordano/83f68463ad32c9f9361cb642041a9cbb

I tried different versions and it seems it is starting from astro version 1.1.8

HTML // Comments in JS Scripts Problematic

Am finding that HTML .astro pages that have embedded JS in the body via <script> tags are very problematic, especially if there are comments inside starting with //, which can cause the script contents to get dropped. Workaround is to have html:false in the config file. Everything else seems good if all other settings set to true.

Use Astro `config.outDir` as default instead of `files-pipeline` default

I noticed the following in the docs.

If your path is different than dist be sure to update it accordingly:

// astro.config.ts

import compress from "astro-compress";

export default {
	outDir: "./build",
	integrations: [
		compress({
			path: "./build",
		}),
	],
};

While I agree that allowing users to manually override the path option is necessary, other Astro integrations + adapters may change the output directory using the outDir config property. Without digging into third-party integration/adapter code, it isn't obvious that that value has changed.

An example of this is the official @astrojs/vercel adapter that modifies the outDir property.

https://github.com/withastro/astro/blob/main/packages/integrations/vercel/src/static/adapter.ts#L19

Looking through the code of this integration it looks like it sets the default value of path to ./dist, which comes from the files-pipeline defaults.

I propose using the value of config.outDir from Astro as the default instead. This allows seamless integration with other third-party integrations/adapters and, if Astro ever changes its default value, keeps this integration working without needing a code change.

I'm happy to open a PR with this change if ya'll are accepting them.

OPTION: Compress only a specified subset of img formats

Is there a way to compress only certain images? Like, only ["jpg", "webp"]

Error [ERR_UNSUPPORTED_DIR_IMPORT]

Just ran into this issue after updating to 1.0.0. No changes to config options from when everything was working earlier today. Might be caused by a separate node issue on my end it seems tho.

astro.config:

compress({
			css: { restructure: false },
			html: {
				caseSensitive: true,
				minifyCSS: true,
				minifyJS: true,
				removeComments: false,
				removeEmptyAttributes: false,
				removeEmptyElements: false,
				removeOptionalTags: false,
			},
			svg: false,
			js: false,
			img: false,
		}),

cli output:

node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/xxx/node_modules/.pnpm/[email protected]/node_modules/astro-compress/dist/options' is not supported resolving ES modules imported from /xxx/node_modules/.pnpm/[email protected]/node_modules/astro-compress/dist/index.js
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:317:17)
    at moduleResolve (node:internal/modules/esm/resolve:756:10)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:867:11)
    at Loader.resolve (node:internal/modules/esm/loader:89:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///xxx/node_modules/.pnpm/[email protected]/node_modules/astro-compress/dist/options'

ERR_UNSUPPORTED_DIR_IMPORT on 1.0.1

#19 (comment)

version: 1.0.1
The problem still exists

Unexpected behaviour.

For some reason it insists on removing type="text" on inputs.

Now while I understand why it may do this as if your not specifying it as anything specific the generic fallback is text, but in my case it leads to this pretty annoying css bug for my contact page.

With Compress Active:

    <div class="col-12">
        <label class="js-input-group">Name <input data-required="" name="name" placeholder="Fill in your name" /> <span class="form__error"></span></label>
    </div>
    <div class="col-12">
        <label class="js-input-group">Email <input data-required="" name="email" placeholder="Fill in your email" /> <span class="form__error"></span></label>
    </div>

Without Compress:

    <div class="col-12">
        <label class="js-input-group">
            Name
            <input type="text" name="name" data-required="" placeholder="Fill in your name" />
            <span class="form__error"></span>
        </label>
    </div>

    <div class="col-12">
        <label class="js-input-group">
            Email
            <input type="text" name="email" data-required="" placeholder="Fill in your email" />
            <span class="form__error"></span>
        </label>
    </div>

I'm not really sure why it does this as I don't really see it doing much to reduce size.

Would it be possible to make this opt-out or opt-in in the config ?

Sharp dependency

I got some build errors on vercel because of the Sharp dependency. I'm not using any sharp related features, would it be possible to remove it? I'm also not sure if it works with the Edge runtime but I'll have to verify that.

Compressing html results in hydration errors

Hi,
I am using Vue, and compressing the HTML gives me hydration errors on every Vue component.
Is there a way to fix this?

No additional compression with Astro 1 beta 19

I followed the installation instructions, double checked my astro config file, and everything seems set up properly. However, after running the build process, and looking at *.html files in the dist directory, none of the HTML has been compressed. The JS and CSS files have been compressed by Astro.

I'm not seeing any errors after the build process either. Maybe I'm doing something else wrong?

"astro": "1.0.0-beta.19",
"astro-compress": "^0.0.6"

astro.config.mjs

import astro from "astro-compress";

export default defineConfig({
  integrations: [
    astro({
      css: false,
      html: true,
      js: false
    })
  ],
experimental: {
    integrations: true
  }
})

Option to disable image compression

Hi, ive tried the code on the readme and had img: false but that didnt work.
Taking a look at the code i tried sharp: false and it worked.

compress({
	css: false,
	html: false,
	js: false,
	img: false, // doesnt work
        sharp: false, // works
	svg: false,
}),

Feature request: ld-json compression in readme / examples or enabled by default

Hey, great project, thanks for your work!
I'm here for feature request. Currently, there is no ld-json compression by default. It may be not very needed for many users, but it may help someone. As I found out here, terser/html-minifier-terser#34 it easily enabled by { processScripts: ['application/ld+json'] } configuration option. I spent some time in your README and finally be able to write something like this

...
    compress({
      html: {
        processScripts: ["application/ld+json"],
      },
    }),
...

And it works. But, this leads me to the following conclusions. It will be cool to do something of or both:

add in your README example of options override (because, in my opinion, it not so obvious despite the phrase «You can override any of the default options from the configurations of»). It is easy to achieve and increase ease of usage of your project. Yeah, you may say this is basic thing for the software engineer to be the partially detective, but I think more obvious path in README don't kill this vibe
add by default this option (it wouldn't harm anyone, I think?)

Example of compressed built HTML with untouched ld-json section (if anyone wants to see how it looks):

How does this interact with Astro 2.5's `compressHTML` config option?

Is HTML compression duplicative with the new Astro config option?

css is compressed even with the `css: false` option

According to the README, we can disable css compression by adding css: false to our astro.config.mjs like this:

export default defineConfig({
  integrations: [
    compress({
      css: false,
    }),
  ],
});

which is what I had, but when I ran the build command, I still got output saying css was compressed:

I don't think it's my syntax issue somewhere because I can change it to img: false and it would correctly skip the images.

Exclude a file or pattern

Hey, really neat plugin! Is there any way to exclude a single file or directory or pattern?

For example I want to exclude my favicon.png file from being compressed, but all other images should be compressed.

Is there any way to do so currently? Couldn't find anything in the docs, hence raising an issue.

Thanks

Fatal error on build (Deno Adapter)

Hi Guys,
I've an issue using this plugin on build. It's might be compatibility issue with Deno Adapter.
Here is the evidences:

Details:

❯ pnpm run build

> @apps/[email protected] build /Users/rio/Projects/JS/web/apps/astro-blog
> astro build

11:02:51 PM [build] output target: server
11:02:51 PM [build] deploy adapter: @astrojs/deno
11:02:51 PM [build] Collecting build info...
11:02:51 PM [build] Completed in 280ms.
11:02:51 PM [build] Building server entrypoints...

🌼 daisyUI components 2.33.0  https://github.com/saadeghi/daisyui
  ✔︎ Including:  base, components, themes[1], utilities
  
11:02:54 PM [build] Completed in 2.23s.

 building client 
Completed in 295ms.


 finalizing server assets 

11:02:54 PM [build] Rearranging server assets...
@astrojs/sitemap: Skipped!
No pages found! We can only detect sitemap routes for "static" builds. Since you are using an SSR adapter, we recommend manually listing your sitemap routes using the "customPages" integration option.

Example: `sitemap({ customPages: ['https://example.com/route'] })`

Compressed about.39dc5942.css for 1 Bytes (1.61% reduction).
Compressed about.d36aaeb4.css for 2.36 KB (5.69% reduction).
Compressed blog.0b6c13c9.css for 1 Bytes (0.28% reduction).
Successfully compressed a total of 3 CSS files for 2.37 KB.
Compressed client.8e9befd7.js for 1.1 KB (0.79% reduction).
Compressed entry.mjs for 495.85 KB (50.75% reduction).
Successfully compressed a total of 2 JS files for 496.95 KB.
Compressed favicon.svg for 84 Bytes (9.62% reduction).
Successfully compressed a total of 1 SVG file for 84 Bytes.
✘ [ERROR] Could not resolve "stream"

    dist/server/entry.mjs:73:87825:
      73 │ ...ct.createElement("div")}),t,n,{}),r)throw r;return a}async function getNodeWritable(){let{Writable:e}=await import("stream");return e}async function renderToStaticMarkup$1(e,t,{default:n,...r},a){delete t.class;const o={};for(const[e,t]o...
         ╵                                                                                                                       ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

 error   Build failed with 1 error:
  dist/server/entry.mjs:73:87825: ERROR: Could not resolve "stream"
  File:
    dist/server/entry.mjs
  Code:
      1623 |   }).join("");
    > 1624 |   let error = new Error(`${text}${summary}`);
           |               ^
      1625 |   error.errors = errors;
      1626 |   error.warnings = warnings;
      1627 |   return error;
    
  Stacktrace:
Error: Build failed with 1 error:
dist/server/entry.mjs:73:87825: ERROR: Could not resolve "stream"
    at failureErrorWithLog (/Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1624:15)
    at /Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1266:28
    at runOnEndCallbacks (/Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1179:65)
    at buildResponseToResult (/Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1264:7)
    at /Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1377:14
    at /Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:678:9
    at handleIncomingPacket (/Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:775:9)
    at Socket.readFromStdout (/Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:644:7)
    at Socket.emit (node:events:527:28)
    at Socket.emit (node:domain:475:12)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

 ELIFECYCLE  Command failed with exit code 1.

Thank you,
:)

LightningCSS instead of CSSO (or an option)

Hi, thank you for making this first of all!

There is LightningCSS from the author of Parcel: https://lightningcss.dev/, which seems to better and faster than CSSO. So maybe switching to it, or adding an option would make sense. What do you think?

[Solved] Install error on Android (termux)

I'd typed npm install -D -E astro-compress but got error like this :

[##################] - reify:css-tree: timing reifyNode:node_modules/
> [email protected] install
> (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)

sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-android-arm64v8.tar.br
sharp: Installation error: Prebuilt libvips 8.13.3 binaries are not yet available for android-arm64v8
sharp: Please see https://sharp.pixelplumbing.com/install for required dependencies
npm ERR! code 1
npm ERR! path /data/data/com.termux/files/home/samxuling.github.io/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c -- (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)

It say Prebuilt libvips 8.13.3 binaries are not yet available for android-arm64v8
Is the download address incorrect? 🤔
When I navigated to https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-android-arm64v8.tar.br GitHub say 404

Beautify the terminal output

You can make the terminal output readable by colorizing it.

Doesn't work on webp's

Compressed rss.xml.5dc5b570.css for 305 Bytes (0.81% reduction).
Successfully compressed a total of 3 CSS files for 1.98 KB.
Compressed index.html for 532 Bytes (6.62% reduction).
Compressed index.html for 448 Bytes (5.93% reduction).
Compressed index.html for 734 Bytes (9.20% reduction).
Compressed index.html for 437 Bytes (5.80% reduction).
Compressed index.html for 5.8 KB (6.80% reduction).
Compressed index.html for 2.21 KB (5.70% reduction).
Successfully compressed a total of 6 HTML files for 10.12 KB.
Compressed Collapse.091b4bd4.js for 74 Bytes (0.11% reduction).
Compressed Counter.a8d99670.js for 3 Bytes (0.58% reduction).
Compressed web.1ca1cc66.js for 36 Bytes (0.27% reduction).
Successfully compressed a total of 3 JS files for 113 Bytes.
Error: Cannot compress file ./dist/assets/47508893_yjLfd.webp!
Compressed 81856932_p0_400x400.d3ac6a85.jpg for 3.56 KB (8.42% reduction).
Error: Cannot compress file ./dist/assets/81856932_p0_400x400.d3ac6a85_2ooF5E.webp!
Error: Cannot compress file ./dist/assets/81856932_p0_400x400.d3ac6a85_ZbbKsc.webp!
Error: Cannot compress file ./dist/assets/astro-blog_ULBFi.webp!
Error: Cannot compress file ./dist/assets/f343733b4bcb341c2faecfb62fe1d9ca_2vqqt0.webp!
Compressed lulu.1022f4bf.jpg for 859 Bytes (1.18% reduction).
Error: Cannot compress file ./dist/assets/lulu.1022f4bf_Dcmkg.webp!
Error: Cannot compress file ./dist/assets/lulu.1022f4bf_xAKrH.webp!
Successfully compressed a total of 2 IMG files for 4.4 KB.
Compressed favicon.svg for 84 Bytes (9.62% reduction).
Successfully compressed a total of 1 SVG file for 84 Bytes.
02:00:01 AM [build] 6 page(s) built in 12.76s
02:00:01 AM [build] Complete!

Switch compress off on development mode

for better debugging switch it off in dev mode
import.meta.env.MODE === "production" ? compress() : compress({html: false}) },

HTML Compress does not work on cloudflare workers

Hello, does this plugin only supports node environment? It seems like when deploying to cloudflare workers HTML does not seem to be compressed

Astro compress remove all property when using svg - symbol

Here this is my SVG file using the trick SVG - use to optimize the network request.
But after running Astro optimize, this will remove all properties 🥹

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<symbol viewBox="0 0 24 24" id="tabler-search-outline"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="10" cy="10" r="7"></circle><path d="m21 21l-6-6"></path></g></symbol>
  <symbol viewBox="0 0 24 24" id="ic-baseline-clear-outline"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path></symbol>
</svg>

Before optimize 😭

<svg xmlns="http://www.w3.org/2000/svg" />

Hope someone can fix this, here this the file on my case.

And here is the minimal reproduction in Stackblitz(but you cannot build on that 🤣)
https://stackblitz.com/edit/github-enlpdy?file=src/pages/index.astro

Here you can pull and check it 🥰
https://github.com/harrytran998/astro-svg-optimizer

Cannot use certain pack on iconify

So i wrap the icon into component

---
import { Icon } from "astro-icon";

export interface Props {
  title: string;
  navigateTo: string;
  iconName: string;
}
const { title, navigateTo, iconName } = Astro.props;
---

<a
  href={"#" + navigateTo}
  class="flex flex-col items-center justify-center group"
>
  <Icon
    class="w-8 h-8 mb-1 text-gray-500 group-hover:text-blue-600"
    name={iconName}
  />
  <span class="text-sm group-hover:text-blue-600">{title}</span>
</a>

when i use it like this

    <BottomItem title="Home" navigateTo="home" iconName="mdi:home" />
      <BottomItem title="Profile" navigateTo="profile" iconName="mdi:account" />
      <BottomItem
        title="Story"
        navigateTo="story"
        iconName="ic:baseline-edit"
      />
      <BottomItem title="Gallery" navigateTo="gallery" iconName="solar:gallery-linear" />

      <BottomItem title="Wallet" navigateTo="wallet" iconName="uil:wallet" />

      <BottomItem title="Test" navigateTo="test" iconName="mdi:power" />

Error: Not Found: pack "solar"
but it is available on iconify

Can't disable compression types.

It looks like disabling certain compression types doesn't work properly. Even if I put this into astro.config.mjs, CSS, HTML & JS is compressed on build:

import { defineConfig } from "astro/config";
import compress from "astro-compress";

export default defineConfig({
	integrations: [
		compress({
			css: false,
			html: false,
			js: false,
			img: false,
			svg: false,
		}),
	],
});

Also a bunch of SVG errors are logged. But I'm not sure, if these are related to the problem above:

Error: Cannot compress file ./dist/webfonts/geomanist-regular-italic-webfont.svg!

Using astro-compress 0.0.10 and astro 1.0.0-beta.44.

Thank you a lot for this component and looking into this. Best wishes!

Can't build on Linux

When i run npm run build on Linux i get the following error. Using Node v14.15.5 and v16.15
pngquant-bin is not a given on all Linux distros. Have this problem with a couple of providers like cloudflare and Netify.

09:13:08.063 | npm ERR! code 1
-- | --
09:13:08.064 | npm ERR! path /opt/buildhome/repo/node_modules/pngquant-bin
09:13:08.065 | npm ERR! command failed
09:13:08.065 | npm ERR! command sh -c node lib/install.js
09:13:08.065 | npm ERR! compiling from source
09:13:08.065 | npm ERR! Command failed: /opt/buildhome/repo/node_modules/pngquant-bin/vendor/pngquant --version
09:13:08.066 | npm ERR! /opt/buildhome/repo/node_modules/pngquant-bin/vendor/pngquant: error while loading shared libraries: libimagequant.so.0: cannot open shared object file: No such file or directory
09:13:08.066 | npm ERR!
09:13:08.066 | npm ERR!
09:13:08.066 | npm ERR! pngquant pre-build test failed
09:13:08.066 | npm ERR! Error: Command failed: /bin/sh -c ./configure --prefix="/opt/buildhome/repo/node_modules/pngquant-bin/vendor"
09:13:08.066 | npm ERR!
09:13:08.066 | npm ERR!
09:13:08.066 | npm ERR!   Compiler: gcc
09:13:08.067 | npm ERR!      Debug: no
09:13:08.067 | npm ERR!        SSE: yes
09:13:08.067 | npm ERR!     OpenMP: no
09:13:08.067 | npm ERR! If you're using git, do clone with --recursive, or download from https://github.com/ImageOptim/libimagequant
09:13:08.067 | npm ERR! imagequant: error ... libimagequant.h not found in ./lib/
09:13:08.067 | npm ERR!
09:13:08.067 | npm ERR!
09:13:08.067 | npm ERR!     at /opt/buildhome/repo/node_modules/bin-build/node_modules/execa/index.js:231:11
09:13:08.068 | npm ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
09:13:08.068 | npm ERR!     at async Promise.all (index 0)

Cache

It would be nice if there would a cache folder where the already compressed images are in so they won't need a new compression. It takes long to do the images on my website currently so deployment is slower.

Use minify-html

This is not an issue but a feature request.

I manage a site in astro that builds about 65,000 html files.
I used astro-compress for a while and the compression phase time alone was about 45 minutes on a small server.

I recently switched to https://github.com/wilsonzlin/minify-html and now the compression time is 3 minutes, 1.5 orders of magnitude less time. Pretty incredible.

Is it possible to explore the opportunity to use this compress instead of html-minify-terser currently used?

CSS compression is changing the order off lines of CSS

I was wondering if you have come across this behaviour before. I believe to have isolated my problem to the astro-compress integration.

When I run astro build in my project and the CSS compression takes place, the order of the lines of my CSS are being changed in the compression process. This is causing the incorrect styling to take precedence, namely in my media queries as the breakpoints are in the incorrect order to work (I am using max-width breakpoints so require them to descend in size in my CSS for them to work correctly).

If I set compression to false in my config as below, the issue goes away, which makes me believe it's the integration's CSS compression causing the issue

export default defineConfig({
  integrations: [
    compress({
      css: false,
    }),
  ],
});

My CSS and overall Astro setup is a bit complicated so it may be difficult for me to make a minimum reproducible repo, but I can try if very necessary.

I use SCSS everywhere in my project, which may be relevant. The styles that I noticed this was happening in are in my global sass files as opposed to component styling.

These styles are in my /src/sass/ directory, where I have an abstracts and base directory with further sass files that all get imported into my global.scss. See image of directory below.

I've disabled CSS compression for now, and happy to help investigate the issue where needed.

Thanks for the great integration so far!

astro-compress middleware

May make on (true) as the default setting in development mode as well for this new feature.

related issue:

Passing `true` to options object doesn't compress

Passing true to a key for the configuration object doesn't actually perform compression for that item, and is considered the same as false. Either change the type description to reflect that only a configuration object or false can be passed, or accept true as argument to use the defaults.

Example:

import { defineConfig } from 'astro/config'
import compress from 'astro-compress'

// https://astro.build/config
export default defineConfig({
	integrations: [
		compress({
			css: false,
			html: true, // note `true` is passed here
			js: false,
			img: false,
			svg: false
		})
	]
})

This doesn't result in the HTML being compressed, and it not flagged as invalid by typescript, because the type definition goes:

export interface Options {
    [key: string]: any;
    /**
     * Astro build path.
     * @default "./dist/"
     */
    path?: string;
   // abbreviated
    /**
     * [html-minifier-terser] options.
     */
    html?: boolean | HTML; // should be `false | HTML` if this is the inteded behavior
   // abbreviated
}

Hydration completed but contains mismatches.

Hey,

When I use this plugin I'm getting this error in my console:

Through a little bit of Googling I came across this same error here vuejs/vitepress#1143 and so I'm lead to believe that it is something to do with minifying the HTML when used with Vite and Vue.

Integration Ordering: Astro-compress + Astro-critters

Seeing that integrations are run in the order listed in the config file, what's the recommended ordering of the compress and critters integrations if we have both in our project?

Astro Docs Reference: https://docs.astro.build/en/reference/integrations-reference/#integration-ordering

[performance] Compress in parallel

Love this package!

But not the performance, especially when using it with lots of image files :(

It doesn't seem to be compressing in parallel.

A "make parallel" improvement to Astro's build command was made here. Perhaps something similar could be done here to improve the performance.

From a quick look at the code, perhaps the current bottleneck somewhere here?

Happy to take a stab at making some improvements on this once I can free-up some time.

Add sample default override in README.md

I read that "you can override any of the default options from the configurations," but I am not sure how to go about doing this. It would be helpful if you can add an example of how to override a default (e.g., keepClosingSlash: true for html-minifier-terser) in README.md.

Remove html comments on default

from #11

I'll take a closer look at the comments one another time. But it is set to false for now in v0.0.17

Latest Astro Compress creates build error when using Astro Image and Sharp

Previously, I was using astro-compress 1.1.35, then updated to 1.1.42. Now when building my project, I get this error:

Waiting for the @astrojs/image integration...
 error   VipsOperation: class "heifsave_buffer" not found

If I remove sharp from my project, it will build out. But, the same can be said if I remove astro-compress instead of sharp. BTW my project isn't utilizing astro-compress image compression.

Astro Image can't be used with sharp 0.32.1 due to unmet peer dependencies, so I'm still using sharp 0.31.3.

integrations: [
    image({
      serviceEntryPoint: "@astrojs/image/sharp",
      logLevel: "error",
    }),
    compress({
      css: false,
      html: true,
      img: false,
      js: false,
      svg: true,
      logger: 2,
    }),
]

For now, this works:

"astro": "2.3.2",
"@astrojs/image": "^0.16.6",
"astro-compress": "1.1.35",
"sharp": "^0.31.0"