Support for postcss plugin messages

Author: ZeeCoder

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+* `postcss-container-query`
+  * Now uses messages to provide the metadata.
+  * `getMetadataFromMessages` to help extracting metadata from an array of messages
+  * `saveMeta` function to save the extracted metadata alongside the CSS file
+
+### Deprecated
+
+* `postcss-container-query`
+  * `getJSON` will be removed, in favour of `getMetadataFromMessages` and `saveMeta`
+
 ## [2.6.0]
 
 ### Added

packages/postcss-container-query/src/containerQuery.js

@@ -1,9 +1,11 @@
 import postcss from "postcss";
 import hasContainerDefinition from "./hasContainerDefinition";
 import extractPropsFromNode from "./extractPropsFromNode";
-import saveJSON from "./saveJSON";
+import saveMeta from "./saveMeta";
 import MetaBuilder from "@zeecoder/container-query-meta-builder";
 
+const plugin = "postcss-container-query";
+
 const isContainerQuery = node =>
   node.type === "atrule" && node.name === "container";
 
@@ -61,10 +63,10 @@ const walkRules = (root, opts, ruleHandler) => {
  * }} options
  */
 function containerQuery(options = {}) {
-  const getJSON = options.getJSON || saveJSON;
+  const getJSON = options.getJSON || saveMeta;
   const singleContainer = options.singleContainer !== false;
 
-  return function(root) {
+  return function(root, result) {
     const containers = {};
     let currentContainerSelector = null;
 
@@ -141,12 +143,41 @@ function containerQuery(options = {}) {
       containers[selector] = containers[selector].build();
     }
 
-    const response = !singleContainer
+    const meta = !singleContainer
       ? containers
       : currentContainerSelector ? containers[currentContainerSelector] : {};
 
-    getJSON(root.source.input.file, response);
+    const filepath = root.source.input.file;
+
+    result.messages.push({
+      type: "metadata",
+      plugin,
+      meta,
+      filepath
+    });
+
+    getJSON(filepath, meta);
   };
 }
 
-export default postcss.plugin("postcss-container-query", containerQuery);
+/**
+ * @param {Array<{plugin: string, type: string, [meta]: {}}>} messages
+ * @return {null|{}}
+ */
+export function getMetadataFromMessages(messages) {
+  const filteredMessages = messages.filter(
+    message =>
+      message.plugin === "postcss-container-query" &&
+      message.type === "metadata"
+  );
+
+  if (!filteredMessages.length) {
+    return null;
+  }
+
+  return filteredMessages[0].meta;
+}
+
+export { saveMeta };
+
+export default postcss.plugin(plugin, containerQuery);

packages/postcss-container-query/src/containerQuery.spec.js

@@ -1,5 +1,5 @@
 import postcss from "postcss";
-import containerQuery from "./containerQuery";
+import containerQuery, { getMetadataFromMessages } from "./containerQuery";
 import Root from "../__mocks__/Root";
 import * as regularTest from "./test/regular";
 import * as customPropertiesTest from "./test/custom-properties";
@@ -11,57 +11,56 @@ import * as missingDeclarationWithRUnitsTest from "./test/missing-declaration-wi
 import * as selfTest from "./test/self";
 import * as simpleTest from "./test/simple";
 
-jest.mock("./saveJSON");
+jest.mock("./saveMeta");
 
 /**
- * @param {string} css Raw CSS containing container queries
- * @param {{}} options plugin options
+ * @param {string} rawCSS Raw CSS containing container queries
+ * @param {{}} [options] plugin options
  * @return {Promise<{
  *   css: string,
  *   meta: {},
  * }>}
  */
-const processCss = (css, options = {}) =>
-  Promise.resolve().then(() => {
-    let meta = null;
-    options.getJSON = (path, metaJson) => (meta = metaJson);
-
-    return postcss([containerQuery(options)])
-      .process(css, { from: "from.css", to: "to.css" })
-      .then(({ css }) => ({ css, meta }));
-  });
+const processCss = async (rawCSS, options = {}) => {
+  let getJsonMeta = null;
+  options.getJSON = (path, meta) => (getJsonMeta = meta);
+
+  const { css, messages } = await postcss([containerQuery(options)]).process(
+    rawCSS,
+    { from: "from.css", to: "to.css" }
+  );
+
+  const meta = getMetadataFromMessages(messages);
+
+  // As long as the `getJSON` option is supported, this is important
+  expect(getJsonMeta).toEqual(meta);
+
+  return { css, meta };
+};
 
 /**
  * @param {{
  *   cssInput: string,
  *   cssOutput: string,
  *   meta: {},
  * }} testObj
- * @param {{}} options plugin options
- * @return {Promise<{
- *  cssOutput: string,
- *  meta: {},
- * }>}
+ * @param {{}} [options] plugin options
  */
-const assertProcessingResult = (testObj, options = {}) =>
-  processCss(testObj.cssInput, options).then(({ css, meta }) => {
-    expect(css).toBe(testObj.cssOutput);
-    expect(meta).toEqual(testObj.meta);
-
-    return {
-      cssOutput: css,
-      meta: meta
-    };
-  });
+const assertProcessingResult = async (testObj, options = {}) => {
+  const { css, meta } = await processCss(testObj.cssInput, options);
+
+  expect(css).toBe(testObj.cssOutput);
+  expect(meta).toEqual(testObj.meta);
+};
 
 test("should use the default json saving function if none was supplied", () => {
-  const saveJSON = require("./saveJSON").default;
+  const saveMeta = require("./saveMeta").default;
 
   const pluginInstance = containerQuery();
 
-  pluginInstance(new Root());
+  pluginInstance(new Root(), { messages: [] });
 
-  expect(saveJSON).toHaveBeenCalledTimes(1);
+  expect(saveMeta).toHaveBeenCalledTimes(1);
 });
 
 test("should throw on missing container declaration", () => {

…/postcss-container-query/src/saveJSON.js …/postcss-container-query/src/saveMeta.jspackages/postcss-container-query/src/saveJSON.js renamed to packages/postcss-container-query/src/saveMeta.js packages/postcss-container-query/src/saveJSON.js renamed to packages/postcss-container-query/src/saveMeta.js

@@ -1,12 +1,12 @@
 import { readFile, writeFile } from "fs";
 
-const saveJSON = (cssFile, json) =>
+const saveMeta = (cssFile, meta) =>
   new Promise(resolve => {
-    const jsonData = JSON.stringify(json);
+    const stringMeta = JSON.stringify(meta);
     const jsonFilePath = `${cssFile}.json`;
 
     const writeJson = () =>
-      writeFile(jsonFilePath, jsonData, e => {
+      writeFile(jsonFilePath, stringMeta, e => {
         if (e) {
           console.error(`Failed to save container query json file: ${e}`);
         }
@@ -16,12 +16,12 @@ const saveJSON = (cssFile, json) =>
 
     readFile(jsonFilePath, "utf8", (e, contents) => {
       // Write file if it doesn't exist yet, or if the contents changed
-      if (e || contents !== jsonData) {
+      if (e || contents !== stringMeta) {
         writeJson();
       } else {
         resolve();
       }
     });
   });
 
-export default saveJSON;
+export default saveMeta;

…css-container-query/src/saveJSON.spec.js …css-container-query/src/saveMeta.spec.jspackages/postcss-container-query/src/saveJSON.spec.js renamed to packages/postcss-container-query/src/saveMeta.spec.js packages/postcss-container-query/src/saveJSON.spec.js renamed to packages/postcss-container-query/src/saveMeta.spec.js

@@ -1,10 +1,10 @@
-import saveJSON from "./saveJSON";
+import saveMeta from "./saveMeta";
 
 jest.mock("fs");
 
 test("should write contents when file does not exist", () => {
   const fs = require("fs");
-  const cssFilePath = __dirname + "/tmp/saveJSON.test.css";
+  const cssFilePath = __dirname + "/tmp/saveMeta.test.css";
   const jsonFilePath = `${cssFilePath}.json`;
   const json = { some: "JSON" };
 
@@ -14,7 +14,7 @@ test("should write contents when file does not exist", () => {
   expect.hasAssertions();
 
   return Promise.resolve()
-    .then(() => saveJSON(cssFilePath, json))
+    .then(() => saveMeta(cssFilePath, json))
     .then(() => {
       expect(fs.readFile).toHaveBeenCalledTimes(1);
       expect(fs.writeFile).toHaveBeenCalledTimes(1);
@@ -25,7 +25,7 @@ test("should write contents when file does not exist", () => {
 
 test("should not write contents when file already with same contents", () => {
   const fs = require("fs");
-  const cssFilePath = __dirname + "/tmp/saveJSON.test.css";
+  const cssFilePath = __dirname + "/tmp/saveMeta.test.css";
   const jsonFilePath = `${cssFilePath}.json`;
   const json = { some: "JSON" };
 
@@ -35,7 +35,7 @@ test("should not write contents when file already with same contents", () => {
   expect.hasAssertions();
 
   return Promise.resolve()
-    .then(() => saveJSON(cssFilePath, json))
+    .then(() => saveMeta(cssFilePath, json))
     .then(() => {
       expect(fs.readFile).toHaveBeenCalledTimes(1);
       expect(fs.writeFile).toHaveBeenCalledTimes(0);
@@ -44,7 +44,7 @@ test("should not write contents when file already with same contents", () => {
 
 test("should log error in case there's an issue writing the file", () => {
   const fs = require("fs");
-  const cssFilePath = __dirname + "/tmp/saveJSON.test.css";
+  const cssFilePath = __dirname + "/tmp/saveMeta.test.css";
   const jsonFilePath = `${cssFilePath}.json`;
   const json = { some: "JSON" };
 
@@ -55,7 +55,7 @@ test("should log error in case there's an issue writing the file", () => {
   expect.hasAssertions();
 
   return Promise.resolve()
-    .then(() => saveJSON(cssFilePath, json))
+    .then(() => saveMeta(cssFilePath, json))
     .then(() => {
       expect(fs.readFile).toHaveBeenCalledTimes(1);
       expect(fs.writeFile).toHaveBeenCalledTimes(1);