parcel-bundler · devongovett · Aug 28, 2021 · Jul 14, 2021 · Jul 14, 2021 · Jul 14, 2021
diff --git a/flow-libs/posthtml.js.flow b/flow-libs/posthtml.js.flow
@@ -21,8 +21,8 @@ declare module 'posthtml' {
 
   declare type PostHTMLTree = Array<PostHTMLNode>;
   declare type PostHTMLOptions = {
-    sync: Boolean,
-    skipParse: Boolean,
+    sync?: Boolean,
+    skipParse?: Boolean,
     ...
   };
   declare type PostHTMLMessage = {
@@ -41,11 +41,16 @@ declare module 'posthtml' {
     messages: Array<PostHTMLMessage>,
     ...
   }>;
+  declare var match: (
+    expression: string | RegExp | Object | Array,
+    cb: (node: PostHTMLNode) => PostHTMLNode | PostHTMLNode[],
+  ) => void;
 
   declare class Api {
     static walk: typeof walk;
     walk: typeof walk;
     process: typeof process;
+    match: typeof match;
   }
 
   declare class PostHTML extends Api {

diff --git a/packages/configs/default/index.json b/packages/configs/default/index.json
@@ -40,6 +40,7 @@
     "style:*.vue": ["@parcel/transformer-vue"],
     "custom:*.vue": ["@parcel/transformer-vue"],
     "*.{png,jpg,jpeg,webp}": ["@parcel/transformer-image"],
+    "*.svg": ["@parcel/transformer-svg"],
     "url:*": ["...", "@parcel/transformer-raw"]
   },
   "namers": ["@parcel/namer-default"],
@@ -59,6 +60,7 @@
     "*.html": "@parcel/packager-html",
     "*.css": "@parcel/packager-css",
     "*.{js,mjs,cjs}": "@parcel/packager-js",
+    "*.svg": "@parcel/packager-svg",
     "*.ts": "@parcel/packager-ts",
     "*.{jsonld,webmanifest}": "@parcel/packager-raw-url",
     "*": "@parcel/packager-raw"

diff --git a/packages/configs/default/package.json b/packages/configs/default/package.json
@@ -28,6 +28,7 @@
     "@parcel/packager-html": "2.0.0-rc.0",
     "@parcel/packager-js": "2.0.0-rc.0",
     "@parcel/packager-raw": "2.0.0-rc.0",
+    "@parcel/packager-svg": "2.0.0-rc.0",
     "@parcel/reporter-dev-server": "2.0.0-rc.0",
     "@parcel/resolver-default": "2.0.0-rc.0",
     "@parcel/runtime-browser-hmr": "2.0.0-rc.0",
@@ -41,7 +42,8 @@
     "@parcel/transformer-postcss": "2.0.0-rc.0",
     "@parcel/transformer-posthtml": "2.0.0-rc.0",
     "@parcel/transformer-raw": "2.0.0-rc.0",
-    "@parcel/transformer-react-refresh-wrap": "2.0.0-rc.0"
+    "@parcel/transformer-react-refresh-wrap": "2.0.0-rc.0",
+    "@parcel/transformer-svg": "2.0.0-rc.0"
   },
   "parcelDependencies": {
     "@parcel/optimizer-data-url": "2.0.0-rc.0",

diff --git a/.../integration/custom-configs/.parcelrc-svg → ...ration/custom-configs/.parcelrc-svg-react b/.../integration/custom-configs/.parcelrc-svg → ...ration/custom-configs/.parcelrc-svg-react
@@ -1,7 +1,7 @@
 {
   "extends": "@parcel/config-default",
   "transformers": {
-    "*.svg": ["@parcel/transformer-svg-react"]
+    "*.svg": ["...", "@parcel/transformer-svg-react"]
   },
   "reporters": []
 }
diff --git a/packages/core/integration-tests/test/integration/svg-css-import/img.svg b/packages/core/integration-tests/test/integration/svg-css-import/img.svg
diff --git a/packages/core/integration-tests/test/integration/svg-css-import/test.css b/packages/core/integration-tests/test/integration/svg-css-import/test.css
@@ -0,0 +1,3 @@
+:root {
+  fill: red
+}
diff --git a/...ation-tests/test/integration/svg/icon.svg → ...tests/test/integration/svg-react/icon.svg b/...ation-tests/test/integration/svg/icon.svg → ...tests/test/integration/svg-react/icon.svg
diff --git a/...ion-tests/test/integration/svg/index.html → ...sts/test/integration/svg-react/index.html b/...ion-tests/test/integration/svg/index.html → ...sts/test/integration/svg-react/index.html
diff --git a/...n-tests/test/integration/svg/package.json → ...s/test/integration/svg-react/package.json b/...n-tests/test/integration/svg/package.json → ...s/test/integration/svg-react/package.json
diff --git a/...ation-tests/test/integration/svg/react.js → ...tests/test/integration/svg-react/react.js b/...ation-tests/test/integration/svg/react.js → ...tests/test/integration/svg-react/react.js
diff --git a/packages/core/integration-tests/test/integration/svg-xml-stylesheet/img.svg b/packages/core/integration-tests/test/integration/svg-xml-stylesheet/img.svg
diff --git a/packages/core/integration-tests/test/integration/svg-xml-stylesheet/style1.css b/packages/core/integration-tests/test/integration/svg-xml-stylesheet/style1.css
@@ -0,0 +1,4 @@
+:root {
+  fill: red;
+  font-family: serif;
+}
diff --git a/packages/core/integration-tests/test/integration/svg-xml-stylesheet/style2.css b/packages/core/integration-tests/test/integration/svg-xml-stylesheet/style2.css
@@ -0,0 +1,3 @@
+:root {
+  font-family: sans-serif;
+}
diff --git a/packages/core/integration-tests/test/integration/svg-xml-stylesheet/style3.css b/packages/core/integration-tests/test/integration/svg-xml-stylesheet/style3.css
@@ -0,0 +1,3 @@
+:root {
+  font-family: monospace;
+}
diff --git a/packages/core/integration-tests/test/integration/svg-xml-stylesheet/style4.css b/packages/core/integration-tests/test/integration/svg-xml-stylesheet/style4.css
@@ -0,0 +1,3 @@
+:root {
+  font-family: cursive;
+}
diff --git a/packages/core/integration-tests/test/integration/svg/circle.svg b/packages/core/integration-tests/test/integration/svg/circle.svg
diff --git a/packages/core/integration-tests/test/integration/svg/other1.html b/packages/core/integration-tests/test/integration/svg/other1.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<title>Other page 1</title>
diff --git a/packages/core/integration-tests/test/integration/svg/other2.html b/packages/core/integration-tests/test/integration/svg/other2.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<title>Other page 2</title>
diff --git a/packages/core/integration-tests/test/integration/svg/square.svg b/packages/core/integration-tests/test/integration/svg/square.svg
diff --git a/packages/core/integration-tests/test/svg-react.js b/packages/core/integration-tests/test/svg-react.js
@@ -0,0 +1,22 @@
+import assert from 'assert';
+import {bundle, outputFS} from '@parcel/test-utils';
+import path from 'path';
+
+describe('svg-react', function() {
+  it('should support transforming SVGs to react components', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/svg-react/react.js'),
+      {
+        defaultConfig: path.join(
+          __dirname,
+          'integration/custom-configs/.parcelrc-svg-react',
+        ),
+      },
+    );
+
+    let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf-8');
+    assert(!file.includes('inkscape'));
+    assert(file.includes('function SvgIcon'));
+    assert(file.includes('_react.createElement("svg"'));
+  });
+});
diff --git a/packages/core/integration-tests/test/svg.js b/packages/core/integration-tests/test/svg.js
@@ -1,10 +1,33 @@
 import assert from 'assert';
-import {bundle, outputFS} from '@parcel/test-utils';
+import {assertBundles, bundle, distDir, outputFS} from '@parcel/test-utils';
 import path from 'path';
 
 describe('svg', function() {
+  it('should support bundling SVG', async () => {
+    let b = await bundle(path.join(__dirname, '/integration/svg/circle.svg'));
+
+    assertBundles(b, [
+      {
+        name: 'circle.svg',
+        assets: ['circle.svg'],
+      },
+      {
+        name: 'other1.html',
+        assets: ['other1.html'],
+      },
+      {
+        type: 'svg',
+        assets: ['square.svg'],
+      },
+      {
+        name: 'other2.html',
+        assets: ['other2.html'],
+      },
+    ]);
+  });
+
   it('should minify SVG bundles', async function() {
-    let b = await bundle(path.join(__dirname, '/integration/svg/index.html'), {
+    let b = await bundle(path.join(__dirname, '/integration/svg/circle.svg'), {
       defaultTargetOptions: {
         shouldOptimize: true,
       },
@@ -14,7 +37,7 @@ describe('svg', function() {
       b.getBundles().find(b => b.type === 'svg').filePath,
       'utf-8',
     );
-    assert(!file.includes('inkscape'));
+    assert(!file.includes('comment'));
   });
 
   it('support SVGO config files', async function() {
@@ -35,17 +58,56 @@ describe('svg', function() {
     assert(file.includes('comment'));
   });
 
-  it('should support transforming SVGs to react components', async function() {
-    let b = await bundle(path.join(__dirname, '/integration/svg/react.js'), {
-      defaultConfig: path.join(
-        __dirname,
-        'integration/custom-configs/.parcelrc-svg',
-      ),
-    });
+  it('should turn xml-stylesheet processing instructions into styles', async function() {
+    const b = await bundle(
+      path.join(__dirname, '/integration/svg-xml-stylesheet/img.svg'),
+    );
 
-    let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf-8');
-    assert(!file.includes('inkscape'));
-    assert(file.includes('function SvgIcon'));
-    assert(file.includes('_react.createElement("svg"'));
+    assertBundles(b, [
+      {
+        name: 'img.svg',
+        assets: ['img.svg'],
+      },
+      {
+        type: 'css',
+        assets: ['img.svg', 'style1.css', 'style3.css'],
+      },
+    ]);
+
+    const svg = await outputFS.readFile(
+      b.getBundles().find(b => b.type === 'svg').filePath,
+      'utf-8',
+    );
+
+    assert(!svg.includes('style1.css'));
+    assert(!svg.includes('style3.css'));
+    assert(svg.includes('style2.css'));
+    assert(svg.includes('<?xml-not-a-stylesheet'));
+    assert(svg.includes('<style>'));
+    assert(!svg.includes('@import'));
+    assert(svg.includes(':root {\n  fill: red;\n  font-family: serif;\n}'));
+    assert(svg.includes(':root {\n  font-family: monospace;\n}\n'));
+  });
+
+  it('should handle CSS with @imports', async function() {
+    const b = await bundle(
+      path.join(__dirname, '/integration/svg-css-import/img.svg'),
+    );
+
+    assertBundles(b, [
+      {
+        type: 'css',
+        assets: ['img.svg', 'test.css'],
+      },
+      {
+        name: 'img.svg',
+        assets: ['img.svg'],
+      },
+    ]);
+
+    const svg = await outputFS.readFile(path.join(distDir, 'img.svg'), 'utf8');
+
+    assert(!svg.includes('@import'));
+    assert(svg.includes(':root {\n  fill: red\n}'));
   });
 });
diff --git a/packages/packagers/svg/package.json b/packages/packagers/svg/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@parcel/packager-svg",
+  "version": "2.0.0-rc.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/parcel-bundler/parcel.git"
+  },
+  "main": "lib/SVGPackager.js",
+  "source": "src/SVGPackager.js",
+  "engines": {
+    "node": ">= 12.0.0",
+    "parcel": "^2.0.0-rc.0"
+  },
+  "dependencies": {
+    "@parcel/plugin": "2.0.0-rc.0",
+    "@parcel/types": "2.0.0-rc.0",
+    "@parcel/utils": "2.0.0-rc.0",
+    "posthtml": "^0.16.4"
+  }
+}