removed getJSON in favour of the css :export syntax

Author: ZeeCoder

CHANGELOG.md

@@ -16,7 +16,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Removed
 
 - "test" script is now only in the root, instead of in every package.
-- No longer testing for Node 7
+- [BREAKING] No longer testing for Node 7
 
 ### Changed
 
@@ -26,7 +26,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - [BREAKING] Removed the UMD build
 
 - `postcss-container-query`
-  - Minimum Node version lifted to v8
+  - [BREAKING] Minimum Node version lifted to v8
+  - [BREAKING] Dropped the `getJSON` option, and no json is saved by default.
+    The new behaviour is to use the ICSS `:export` syntax, which then can be
+    imported through css-loader. (The meta object is still passed down in the
+    postcss plugin messages in case it's needed.)
+  - [BREAKING] `saveMeta` is removed
 
 ## [2.7.4]
 

packages/postcss-container-query/rollup.config.js

@@ -6,23 +6,14 @@ const generate = ({ input, output }) => ({
   input,
   output: [{ file: output, format: "cjs" }],
   plugins: [flow(), babel(), terser()],
-  external: [
-    "postcss",
-    "lodash/trim",
-    "fs",
-    "@zeecoder/container-query-meta-builder"
-  ]
+  external: ["postcss", "lodash/trim", "@zeecoder/container-query-meta-builder"]
 });
 
 export default [
   generate({
     input: "src/containerQuery.js",
     output: "dist/index.js"
   }),
-  generate({
-    input: "src/saveMeta.js",
-    output: "./saveMeta.js"
-  }),
   generate({
     input: "src/getMetadataFromMessages.js",
     output: "./getMetadataFromMessages.js"

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

@@ -1,7 +1,6 @@
 import postcss from "postcss";
 import hasContainerDefinition from "./hasContainerDefinition";
 import extractPropsFromNode from "./extractPropsFromNode";
-import saveMeta from "./saveMeta";
 import MetaBuilder from "@zeecoder/container-query-meta-builder";
 
 const plugin = "postcss-container-query";
@@ -58,13 +57,11 @@ const walkRules = (root, opts, ruleHandler) => {
 
 /**
  * @param {{
- *   [getJSON]: function,
  *   [singleContainer]: boolean,
  *   [exportMetaInCss]: boolean|string,
  * }} options
  */
 function containerQuery(options = {}) {
-  const getJSON = options.getJSON || saveMeta;
   const singleContainer = options.singleContainer !== false;
   const exportMetaInCss =
     typeof options.exportMetaInCss !== "undefined"
@@ -163,10 +160,6 @@ function containerQuery(options = {}) {
       filepath
     });
 
-    if (typeof getJSON === "function") {
-      getJSON(filepath, meta);
-    }
-
     // The following is picked up by css-loader, therefore making importing json
     // files obsolete
     if (exportMetaInCss) {

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

@@ -1,5 +1,4 @@
 import postcss from "postcss";
-import Root from "../__mocks__/Root";
 import * as regularTest from "./test/regular";
 import * as customPropertiesTest from "./test/custom-properties";
 import * as exessContainerDeclarationTest from "./test/exess-container-declaration";
@@ -9,12 +8,11 @@ import * as missingContainerDelcarationTest from "./test/missing-container-decla
 import * as missingDeclarationWithRUnitsTest from "./test/missing-declaration-with-r-units";
 import * as selfTest from "./test/self";
 import * as simpleTest from "./test/simple";
-import * as metaExportTest from "./test/meta-export";
 import * as metaNamedExportTest from "./test/meta-named-export";
+import * as disabledMetaExportTest from "./test/disabled-meta-export";
 import fs from "fs";
 import containerQuery from "./containerQuery";
 import getMetadataFromMessages from "../getMetadataFromMessages";
-import saveMeta from "../saveMeta";
 
 jest.mock("fs");
 
@@ -27,19 +25,13 @@ jest.mock("fs");
  * }>}
  */
 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 };
 };
 
@@ -52,32 +44,19 @@ const processCss = async (rawCSS, options = {}) => {
  * @param {{}} [options] plugin options
  */
 const assertProcessingResult = async (testObj, options = {}) => {
-  const { css, meta } = await processCss(testObj.cssInput, {
-    exportMetaInCss: false,
-    ...options
-  });
+  const { css, meta } = await processCss(testObj.cssInput, options);
 
   expect(css).toBe(testObj.cssOutput);
   expect(meta).toEqual(testObj.meta);
 };
 
 test('should avoid accidentally creating ".default" exports', () => {
-  expect(typeof saveMeta).toBe("function");
   expect(typeof getMetadataFromMessages).toBe("function");
   expect(typeof containerQuery).toBe("function");
-  expect(typeof saveMeta.default).toBe("undefined");
   expect(typeof getMetadataFromMessages.default).toBe("undefined");
   expect(typeof containerQuery.default).toBe("undefined");
 });
 
-test("should use the default json saving function if none was supplied", () => {
-  const pluginInstance = containerQuery({ exportMetaInCss: false });
-
-  pluginInstance(new Root(), { messages: [] });
-
-  expect(fs.readFile).toHaveBeenCalledTimes(1);
-});
-
 test("should throw on missing container declaration", () => {
   expect.assertions(1);
 
@@ -103,16 +82,10 @@ test("should throw on missing container declaration when the container has r-uni
 });
 
 test("should ignore unrecognised at-rules, like @keyframes", () =>
-  assertProcessingResult(unrecognisedAtRulesTest, {
-    singleContainer: false,
-    exportMetaInCss: false
-  }));
+  assertProcessingResult(unrecognisedAtRulesTest, { singleContainer: false }));
 
 test("should properly process CSS", () =>
-  assertProcessingResult(regularTest, {
-    singleContainer: false,
-    exportMetaInCss: false
-  }));
+  assertProcessingResult(regularTest, { singleContainer: false }));
 
 // This also tests that containers are processed even without queries
 test("should detect the first class as the container by default", () =>
@@ -137,10 +110,12 @@ test("should handle :self", () => assertProcessingResult(selfTest));
 test("should be able to run this simple test", () =>
   assertProcessingResult(simpleTest));
 
-test("should export the meta in the css by default", () =>
-  assertProcessingResult(metaExportTest, { exportMetaInCss: undefined }));
-
 test("should be able to export the meta under a custom export", () =>
   assertProcessingResult(metaNamedExportTest, {
     exportMetaInCss: "custom-meta"
   }));
+
+test("should be able to disable the css meta export", () =>
+  assertProcessingResult(disabledMetaExportTest, {
+    exportMetaInCss: false
+  }));

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

@@ -15,17 +15,7 @@ export const cssInput = `
 .Container {
   @define-container;
   font-size: 2rh;
-}
-`;
-
-export const cssOutput = `
-.Container {
-  border: none;
-}
-
-.Container {
-}
-`;
+}`;
 
 export const meta = {
   [SELECTOR]: ".Container",
@@ -42,3 +32,13 @@ export const meta = {
     }
   ]
 };
+
+export const cssOutput = `
+.Container {
+  border: none;
+}
+
+.Container {
+}
+
+:export { meta: '${JSON.stringify(meta)}' }`;

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

@@ -15,11 +15,6 @@ export const cssInput = `
 }
 `;
 
-export const cssOutput = `
-.Container {
-}
-`;
-
 export const meta = {
   [SELECTOR]: ".Container",
   [QUERIES]: [
@@ -37,3 +32,9 @@ export const meta = {
     }
   ]
 };
+
+export const cssOutput = `
+.Container {
+}
+:export { meta: '${JSON.stringify(meta)}' }
+`;

packages/postcss-container-query/src/test/container-auto-detection.js

@@ -46,5 +46,4 @@ export const meta = {
 export const cssOutput = `
 .Container {
 }
-:export { meta: '${JSON.stringify(meta)}' }
 `;