@compiled/parcel-optimizer 0.1.1 → 0.2.1

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,10 +1,82 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const assert_1 = __importDefault(require("assert"));
+const path_1 = require("path");
 const css_1 = require("@compiled/css");
+const utils_1 = require("@compiled/utils");
 const plugin_1 = require("@parcel/plugin");
+const posthtml_1 = __importDefault(require("posthtml"));
+const posthtml_insert_at_1 = require("posthtml-insert-at");
+const configFiles = [
+    '.compiledcssrc',
+    '.compiledcssrc.json',
+    'compiledcss.js',
+    'compiledcss.config.js',
+];
 exports.default = new plugin_1.Optimizer({
-    async optimize({ contents, map }) {
-        return { contents: (0, css_1.sort)(contents.toString()), map };
+    async loadConfig({ config, options }) {
+        const conf = await config.getConfigFrom((0, path_1.join)(options.projectRoot, 'index'), configFiles, {
+            packageKey: '@compiled/parcel-optimizer',
+        });
+        const contents = {
+            inlineCss: false,
+        };
+        if (conf) {
+            config.invalidateOnStartup();
+            Object.assign(contents, conf.contents);
+        }
+        return contents;
+    },
+    async optimize({ contents, map, bundle, bundleGraph, options, config }) {
+        const { outputFS } = options;
+        const styleRules = new Set();
+        // Traverse the descendants of HTML bundle
+        // Extract the stylesRules from assets
+        bundleGraph.traverseBundles((childBundle) => {
+            childBundle.traverseAssets((asset) => {
+                const rules = asset.meta.styleRules;
+                if (rules == null) {
+                    return;
+                }
+                (0, assert_1.default)(rules instanceof Array);
+                for (const rule of rules) {
+                    styleRules.add(rule);
+                }
+            });
+        }, bundle);
+        if (styleRules.size === 0)
+            return { contents, map };
+        const stylesheet = (0, css_1.sort)(Array.from(styleRules).join(''));
+        let newContents = '';
+        if (config.inlineCss) {
+            newContents = (await (0, posthtml_1.default)()
+                .use((0, posthtml_insert_at_1.insertAt)({
+                selector: 'head',
+                append: '<style>' + stylesheet + '</style>',
+                behavior: 'inside',
+            }))
+                .process(contents.toString())).html;
+        }
+        else {
+            const { distDir } = bundle.target;
+            if (!outputFS.existsSync(distDir)) {
+                await outputFS.mkdirp(distDir);
+            }
+            const cssFileName = (0, path_1.basename)(bundle.displayName, '.html') + '.' + (0, utils_1.hash)(stylesheet) + '.css';
+            await outputFS.writeFile((0, path_1.join)(distDir, cssFileName), stylesheet, undefined // for TypeScript
+            );
+            newContents = (await (0, posthtml_1.default)()
+                .use((0, posthtml_insert_at_1.insertAt)({
+                selector: 'head',
+                append: '<link href="' + bundle.target.publicUrl + cssFileName + '" rel="stylesheet" />',
+                behavior: 'inside',
+            }))
+                .process(contents.toString())).html;
+        }
+        return { contents: newContents, map };
     },
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+export interface ParcelOptimizerOpts {
+    /**
+     * Indicates whether CSS content is inlined in HTML or served as a external .css file.
+     * Defaults to `false`.
+     */
+    inlineCss: boolean;
+}

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/parcel-optimizer",
-  "version": "0.1.1",
+  "version": "0.2.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": {
@@ -20,14 +20,18 @@
   ],
   "dependencies": {
     "@compiled/css": "^0.8.1",
-    "@parcel/plugin": "^2.3.1"
+    "@compiled/utils": "^0.6.16",
+    "@parcel/plugin": "^2.3.1",
+    "posthtml": "^0.16.6",
+    "posthtml-insert-at": "^0.2.7"
   },
   "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"
+    "prettier": "^2.8.1",
+    "ts-node": "^10.8.2",
+    "tsconfig-paths": "^3.14.1"
   },
   "engines": {
     "parcel": "^2.0.0"

package/src/__tests__/optimizer.parceltest.ts

@@ -6,6 +6,7 @@ import { join } from 'path';
 
 import Parcel, { createWorkerFarm } from '@parcel/core';
 import { MemoryFS } from '@parcel/fs';
+import { format } from 'prettier';
 
 const rootPath = join(__dirname, '..', '..', '..', '..');
 const fixtureRoot = join(rootPath, 'fixtures/parcel-optimizer-test-app');
@@ -23,6 +24,7 @@ const parcel = new Parcel({
     },
   },
   workerFarm,
+  mode: 'production',
 });
 
 afterAll(() => {
@@ -32,40 +34,45 @@ afterAll(() => {
 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')
+      (asset) => asset.filePath === join(fixtureRoot, '/src/index.html')
     );
 
-    const outputCss = await outputFS.readFile(
+    const outputHtml = await outputFS.readFile(
       bundleGraph.getBundlesWithAsset(asset!)[0].filePath,
       'utf8'
     );
-    expect(outputCss).toMatchInlineSnapshot(`
-      "
 
-      .color-blue {
-        color: blue;
-      }
+    const css = /<style>(.*?)<\/style>/.exec(outputHtml)?.pop();
+
+    if (!css) throw new Error('No CSS is found.');
 
-      .color-blue:focus {
+    expect(
+      format(css, {
+        parser: 'css',
+        singleQuote: true,
+      })
+    ).toMatchInlineSnapshot(`
+      "._syaz5scu {
+        color: red;
+      }
+      ._f8pjruxl:focus {
         color: orange;
       }
-
-      .color-blue:hover {
+      ._30l3bf54:hover {
         color: green;
       }
-
       @media screen {
-        .media-screen-color-red {
+        ._43475scu {
           color: red;
         }
       }
-
       @media (min-width: 500px) {
-        .media-min-width-border {
+        ._171dak0l {
           border: 2px solid red;
         }
-        .media-min-width-border:before {
+        ._14yn1439 {
           content: 'large screen';
         }
       }

package/src/index.ts

@@ -1,8 +1,108 @@
+import assert from 'assert';
+import { join, basename } from 'path';
+
 import { sort } from '@compiled/css';
+import { hash } from '@compiled/utils';
 import { Optimizer } from '@parcel/plugin';
+import posthtml from 'posthtml';
+import { insertAt } from 'posthtml-insert-at';
+
+import type { ParcelOptimizerOpts } from './types';
+
+const configFiles = [
+  '.compiledcssrc',
+  '.compiledcssrc.json',
+  'compiledcss.js',
+  'compiledcss.config.js',
+];
+
+export default new Optimizer<ParcelOptimizerOpts>({
+  async loadConfig({ config, options }) {
+    const conf = await config.getConfigFrom(join(options.projectRoot, 'index'), configFiles, {
+      packageKey: '@compiled/parcel-optimizer',
+    });
+
+    const contents = {
+      inlineCss: false,
+    };
+
+    if (conf) {
+      config.invalidateOnStartup();
+      Object.assign(contents, conf.contents);
+    }
+
+    return contents;
+  },
+
+  async optimize({ contents, map, bundle, bundleGraph, options, config }) {
+    const { outputFS } = options;
+
+    const styleRules = new Set<string>();
+
+    // Traverse the descendants of HTML bundle
+    // Extract the stylesRules from assets
+    bundleGraph.traverseBundles((childBundle) => {
+      childBundle.traverseAssets((asset) => {
+        const rules = asset.meta.styleRules;
+        if (rules == null) {
+          return;
+        }
+
+        assert(rules instanceof Array);
+
+        for (const rule of rules) {
+          styleRules.add(rule as string);
+        }
+      });
+    }, bundle);
+
+    if (styleRules.size === 0) return { contents, map };
+
+    const stylesheet = sort(Array.from(styleRules).join(''));
+
+    let newContents = '';
+
+    if (config.inlineCss) {
+      newContents = (
+        await posthtml()
+          .use(
+            insertAt({
+              selector: 'head',
+              append: '<style>' + stylesheet + '</style>',
+              behavior: 'inside',
+            })
+          )
+          .process(contents.toString())
+      ).html;
+    } else {
+      const { distDir } = bundle.target;
+
+      if (!outputFS.existsSync(distDir)) {
+        await outputFS.mkdirp(distDir);
+      }
+
+      const cssFileName = basename(bundle.displayName, '.html') + '.' + hash(stylesheet) + '.css';
+
+      await outputFS.writeFile(
+        join(distDir, cssFileName),
+        stylesheet,
+        undefined // for TypeScript
+      );
+
+      newContents = (
+        await posthtml()
+          .use(
+            insertAt({
+              selector: 'head',
+              append:
+                '<link href="' + bundle.target.publicUrl + cssFileName + '" rel="stylesheet" />',
+              behavior: 'inside',
+            })
+          )
+          .process(contents.toString())
+      ).html;
+    }
 
-export default new Optimizer({
-  async optimize({ contents, map }) {
-    return { contents: sort(contents.toString()), map };
+    return { contents: newContents, map };
   },
 });

package/src/types.ts

@@ -0,0 +1,7 @@
+export interface ParcelOptimizerOpts {
+  /**
+   * Indicates whether CSS content is inlined in HTML or served as a external .css file.
+   * Defaults to `false`.
+   */
+  inlineCss: boolean;
+}