@compiled/parcel-optimizer 0.1.1

package/README.md

@@ -0,0 +1,13 @@
+# @compiled/parcel-optimizer
+
+Parcel plugin for Compiled.
+
+## Installation
+
+```bash
+npm i @compiled/parcel-optimizer
+```
+
+## Usage
+
+Detailed docs and example usage can be [found on the documentation website](https://compiledcssinjs.com/docs/pkg-parcel-optimizer).

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { Optimizer } from '@parcel/plugin';
+declare const _default: Optimizer<unknown>;
+export default _default;

package/dist/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_1 = require("@compiled/css");
+const plugin_1 = require("@parcel/plugin");
+exports.default = new plugin_1.Optimizer({
+    async optimize({ contents, map }) {
+        return { contents: (0, css_1.sort)(contents.toString()), map };
+    },
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAAA,uCAAqC;AACrC,2CAA2C;AAE3C,kBAAe,IAAI,kBAAS,CAAC;IAC3B,KAAK,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE;QAC9B,OAAO,EAAE,QAAQ,EAAE,IAAA,UAAI,EAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;IACtD,CAAC;CACF,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@compiled/parcel-optimizer",
+  "version": "0.1.1",
+  "description": "A familiar and performant compile time CSS-in-JS library for React.",
+  "bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/atlassian-labs/compiled.git",
+    "directory": "packages/parcel-optimizer"
+  },
+  "license": "Apache-2.0",
+  "author": "Michael Dougall",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@compiled/css": "^0.8.1",
+    "@parcel/plugin": "^2.3.1"
+  },
+  "devDependencies": {
+    "@parcel/core": "^2.3.1",
+    "@parcel/fs": "^2.3.1",
+    "@parcel/types": "^2.3.1",
+    "ts-node": "^10.4.0",
+    "tsconfig-paths": "^3.12.0"
+  },
+  "engines": {
+    "parcel": "^2.0.0"
+  }
+}

package/src/__tests__/optimizer.parceltest.ts

@@ -0,0 +1,75 @@
+/**
+ * @jest-environment node
+ */
+
+import { join } from 'path';
+
+import Parcel, { createWorkerFarm } from '@parcel/core';
+import { MemoryFS } from '@parcel/fs';
+
+const rootPath = join(__dirname, '..', '..', '..', '..');
+const fixtureRoot = join(rootPath, 'fixtures/parcel-optimizer-test-app');
+
+const workerFarm = createWorkerFarm();
+const outputFS = new MemoryFS(workerFarm);
+
+const parcel = new Parcel({
+  config: join(fixtureRoot, '.parcelrc'),
+  entries: [join(fixtureRoot, 'src', 'index.html')],
+  outputFS,
+  targets: {
+    default: {
+      distDir: join(fixtureRoot, 'dist'),
+    },
+  },
+  workerFarm,
+});
+
+afterAll(() => {
+  workerFarm.end();
+});
+
+describe('optimizer', () => {
+  it('sorts css rules', async () => {
+    const { changedAssets, bundleGraph } = await parcel.run();
+    const asset = Array.from(changedAssets.values()).find(
+      (asset) => asset.filePath === join(fixtureRoot, '/src/styles.css')
+    );
+
+    const outputCss = await outputFS.readFile(
+      bundleGraph.getBundlesWithAsset(asset!)[0].filePath,
+      'utf8'
+    );
+    expect(outputCss).toMatchInlineSnapshot(`
+      "
+
+      .color-blue {
+        color: blue;
+      }
+
+      .color-blue:focus {
+        color: orange;
+      }
+
+      .color-blue:hover {
+        color: green;
+      }
+
+      @media screen {
+        .media-screen-color-red {
+          color: red;
+        }
+      }
+
+      @media (min-width: 500px) {
+        .media-min-width-border {
+          border: 2px solid red;
+        }
+        .media-min-width-border:before {
+          content: 'large screen';
+        }
+      }
+      "
+    `);
+  }, 30000);
+});

package/src/index.ts

@@ -0,0 +1,8 @@
+import { sort } from '@compiled/css';
+import { Optimizer } from '@parcel/plugin';
+
+export default new Optimizer({
+  async optimize({ contents, map }) {
+    return { contents: sort(contents.toString()), map };
+  },
+});