parcel-bundler · devongovett · Sep 30, 2024
diff --git a/packages/core/integration-tests/test/html.js b/packages/core/integration-tests/test/html.js
@@ -14,6 +14,7 @@ import {
  fsFixture,
 } from '@parcel/test-utils';
 import path from 'path';
+import Logger from '@parcel/logger';
 
 describe('html', function () {
  beforeEach(async () => {
@@ -679,6 +680,77 @@ describe('html', function () {
  );
  });
 
+ it('should detect the version of SVGO to use', async function () {
+ // Test is outside parcel so that svgo is not already installed.
+ await fsFixture(overlayFS, '/')`
+ htmlnano-svgo-version
+ index.html:
+ <!DOCTYPE html>
+ <html>
+ <body>
+ <svg><rect id="test" /></svg>
+ </body>
+ </html>
+
+ .htmlnanorc:
+ {
+ "minifySvg": {
+ "full": true
+ }
+ }
+
+ yarn.lock:
+ `;
+
+ let messages = [];
+ let loggerDisposable = Logger.onLog(message => {
+ if (message.level !== 'verbose') {
+ messages.push(message);
+ }
+ });
+
+ try {
+ await bundle(path.join('/htmlnano-svgo-version/index.html'), {
+ inputFS: overlayFS,
+ defaultTargetOptions: {
+ shouldOptimize: true,
+ },
+ shouldAutoinstall: false,
+ });
+ } catch (err) {
+ // autoinstall is disabled
+ assert.equal(
+ err.diagnostics[0].message,
+ 'Could not resolve module "svgo" from "/htmlnano-svgo-version/index"',
+ );
+ }
+
+ loggerDisposable.dispose();
+ assert(
+ messages[0].diagnostics[0].message.startsWith(
+ 'Detected deprecated SVGO v2 options in',
+ ),
+ );
+ assert.deepEqual(messages[0].diagnostics[0].codeFrames, [
+ {
+ filePath: path.normalize('/htmlnano-svgo-version/.htmlnanorc'),
+ codeHighlights: [
+ {
+ message: undefined,
+ start: {
+ line: 3,
+ column: 5,
+ },
+ end: {
+ line: 3,
+ column: 16,
+ },
+ },
+ ],
+ },
+ ]);
+ });
+
  it('should not minify default values inside HTML in production mode', async function () {
  let inputFile = path.join(
  __dirname,

diff --git a/packages/core/integration-tests/test/integration/svgo-config/svgo.config.js b/packages/core/integration-tests/test/integration/svgo-config/svgo.config.js
@@ -1,10 +1,12 @@
-const { extendDefaultPlugins } = require('svgo');
-
 module.exports = {
- plugins: extendDefaultPlugins([
+ plugins: [
  {
- name: 'removeComments',
- active: false
+ name: 'preset-default',
+ params: {
+ overrides: {
+ removeComments: false
+ }
+ }
  }
- ])
+ ]
 }
diff --git a/packages/core/integration-tests/test/svg.js b/packages/core/integration-tests/test/svg.js
@@ -1,6 +1,14 @@
 import assert from 'assert';
-import {assertBundles, bundle, distDir, outputFS} from '@parcel/test-utils';
+import {
+ assertBundles,
+ bundle,
+ distDir,
+ outputFS,
+ overlayFS,
+ fsFixture,
+} from '@parcel/test-utils';
 import path from 'path';
+import Logger from '@parcel/logger';
 
 describe('svg', function () {
  it('should support bundling SVG', async () => {
@@ -126,6 +134,73 @@ describe('svg', function () {
  assert(file.includes('comment'));
  });
 
+ it('should detect the version of SVGO to use', async function () {
+ // Test is outside parcel so that svgo is not already installed.
+ await fsFixture(overlayFS, '/')`
+ svgo-version
+ icon.svg:
+ <svg></svg>
+
+ index.html:
+ <img src="icon.svg" />
+
+ svgo.config.json:
+ {
+ "full": true
+ }
+
+ yarn.lock:
+ `;
+
+ let messages = [];
+ let loggerDisposable = Logger.onLog(message => {
+ if (message.level !== 'verbose') {
+ messages.push(message);
+ }
+ });
+
+ try {
+ await bundle(path.join('/svgo-version/index.html'), {
+ inputFS: overlayFS,
+ defaultTargetOptions: {
+ shouldOptimize: true,
+ },
+ shouldAutoinstall: false,
+ });
+ } catch (err) {
+ // autoinstall is disabled
+ assert.equal(
+ err.diagnostics[0].message,
+ 'Could not resolve module "svgo" from "/svgo-version/index"',
+ );
+ }
+
+ loggerDisposable.dispose();
+ assert(
+ messages[0].diagnostics[0].message.startsWith(
+ 'Detected deprecated SVGO v2 options in',
+ ),
+ );
+ assert.deepEqual(messages[0].diagnostics[0].codeFrames, [
+ {
+ filePath: path.normalize('/svgo-version/svgo.config.json'),
+ codeHighlights: [
+ {
+ message: undefined,
+ start: {
+ line: 2,
+ column: 3,
+ },
+ end: {
+ line: 2,
+ column: 14,
+ },
+ },
+ ],
+ },
+ ]);
+ });
+
  it('should detect xml-stylesheet processing instructions', async function () {
  let b = await bundle(
  path.join(__dirname, '/integration/svg-xml-stylesheet/img.svg'),
@@ -222,7 +297,7 @@ describe('svg', function () {
 
  const svg = await outputFS.readFile(path.join(distDir, 'img.svg'), 'utf8');
 
- assert(svg.includes('<style>:root{fill:red}</style>'));
+ assert(svg.includes('style="fill:red"'));
  });
 
  it('should be in separate bundles', async function () {

diff --git a/packages/core/utils/src/index.js b/packages/core/utils/src/index.js
@@ -86,3 +86,4 @@ export {
  remapSourceLocation,
 } from './sourcemap';
 export {default as stripAnsi} from 'strip-ansi';
+export {detectSVGOVersion} from './svgo';
diff --git a/packages/core/utils/src/svgo.js b/packages/core/utils/src/svgo.js
@@ -0,0 +1,50 @@
+// @flow
+export function detectSVGOVersion(
+ config: any,
+): {|version: 3|} | {|version: 2, path: string|} {
+ if (!config) {
+ return {version: 3};
+ }
+
+ // These options were removed in v2.
+ if (config.full != null || config.svg2js != null) {
+ return {version: 2, path: config.full != null ? '/full' : '/svg2js'};
+ }
+
+ if (Array.isArray(config.plugins)) {
+ // Custom plugins in v2 had additional (required) fields that don't exist anymore.
+ let v2Plugin = config.plugins.findIndex(
+ p => p?.type != null || (p?.fn && p?.params != null),
+ );
+ if (v2Plugin !== -1) {
+ let field = config.plugins[v2Plugin].type != null ? 'type' : 'params';
+ return {version: 2, path: `/plugins/${v2Plugin}/${field}`};
+ }
+
+ // the cleanupIDs plugin lost the prefix option in v3.
+ let cleanupIdsIndex = config.plugins.findIndex(
+ p => p?.name === 'cleanupIDs',
+ );
+ let cleanupIDs =
+ cleanupIdsIndex !== -1 ? config.plugins[cleanupIdsIndex] : null;
+ if (cleanupIDs?.params?.prefix != null) {
+ return {version: 2, path: `/plugins/${cleanupIdsIndex}/params/prefix`};
+ }
+
+ // Automatically migrate some options from SVGO 2 config files.
+ config.plugins = config.plugins.filter(p => p?.active !== false);
+
+ for (let i = 0; i < config.plugins.length; i++) {
+ let p = config.plugins[i];
+ if (p === 'cleanupIDs') {
+ config.plugins[i] = 'cleanupIds';
+ }
+
+ if (p?.name === 'cleanupIDs') {
+ config.plugins[i].name = 'cleanupIds';
+ }
+ }
+ }
+
+ return {version: 3};
+}
diff --git a/packages/optimizers/htmlnano/package.json b/packages/optimizers/htmlnano/package.json
@@ -20,10 +20,14 @@
  "parcel": "^2.12.0"
  },
  "dependencies": {
+ "@parcel/diagnostic": "2.12.0",
  "@parcel/plugin": "2.12.0",
+ "@parcel/utils": "2.12.0",
  "htmlnano": "^2.0.0",
  "nullthrows": "^1.1.1",
- "posthtml": "^0.16.5",
- "svgo": "^2.4.0"
+ "posthtml": "^0.16.5"
+ },
+ "devDependencies": {
+ "svgo": "^3.3.2"
  }
 }