wip

Author: ZeeCoder

package.json

@@ -10,27 +10,30 @@
   "bugs": {
     "url": "https://github.com/ZeeCoder/container-query/issues"
   },
-  "dependencies": {},
   "devDependencies": {
     "coveralls": "^3.0.0",
-    "husky": "^0.14.3",
+    "husky": "^1.1.3",
     "jest": "^22.4.2",
     "lerna": "^2.9.0",
-    "lint-staged": "^7.0.0",
-    "prettier": "^1.10.2"
+    "lint-staged": "^8.0.4",
+    "prettier": "^1.14.3"
   },
   "scripts": {
     "test": "jest --coverage",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "watch:test": "jest --watch",
-    "precommit": "lint-staged",
     "pretest": "lerna run flow && yarn run build",
     "prettify": "prettier --write 'packages/**/*.js'",
     "build": "lerna run build",
     "bootstrap": "lerna bootstrap"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "lint-staged": {
-    "*.js": [
+    "*.{js,md}": [
       "prettier --write",
       "git add"
     ]

packages/container-query-meta-builder/src/remapMetaSelectors.js

@@ -0,0 +1,65 @@
+/**
+ * Runs through all selectors of a meta object.
+ * @param {{}} meta
+ * @param {function} cb
+ */
+const mapMetaSelectors = (meta, cb) => {
+  if (typeof meta[SELECTOR] === "string") {
+    meta[SELECTOR] = cb(meta[SELECTOR]);
+  }
+
+  // Patching the elements' selectors
+  if (Array.isArray(meta[QUERIES])) {
+    meta[QUERIES].forEach(query => {
+      if (Array.isArray(query[ELEMENTS])) {
+        query[ELEMENTS].forEach(element => {
+          if (typeof element[SELECTOR] === "string") {
+            element[SELECTOR] = cb(element[SELECTOR]);
+          }
+        });
+      }
+    });
+  }
+};
+
+/**
+ * Rewrites the meta selectors according to the styles map object.
+ * @param {{}} rawMeta
+ * @param {{}} styles A classname => classname map, like the one CSS Modules provides.
+ * Ex: "{ App: "App_ehyfd" }"
+ * @return {{}}
+ */
+const remapMetaSelectors = (rawMeta, styles) => {
+  // If meta is a string, then assume it's from a css-loader export
+  // todo trim quotations instead of just slicing
+  const meta =
+    typeof rawMeta === "string" ? JSON.parse(rawMeta.slice(1, -1)) : rawMeta;
+
+  /**
+   * Checks if the given css selector has a hashed css class in the given `styles`
+   * object
+   * @param {string} selector Ex: ".App"
+   * @return {boolean}
+   */
+  const hasSelectorInStyles = selector =>
+    typeof styles[selector.slice(1)] === "string";
+
+  /**
+   * Returns a hashed css class to the given selector, from the styles object.
+   * @param {string} selector Ex: ".App"
+   * @return {string} Ex: ".App_wCjtv"
+   */
+  const getMappedCssClass = selector => `.${styles[selector.slice(1)]}`;
+
+  mapMetaSelectors(meta, selector => {
+    if (!hasSelectorInStyles(selector)) {
+      return selector;
+    }
+
+    return getMappedCssClass(selector);
+  });
+
+  return meta;
+};
+
+export default remapMetaSelectors;

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

@@ -63,7 +63,8 @@ const walkRules = (root, opts, ruleHandler) => {
  * }} options
  */
 function containerQuery(options = {}) {
-  const getJSON = options.getJSON || saveMeta;
+  const getJSON =
+    typeof options.getJSON !== "undefined" ? options.getJSON : saveMeta;
   const singleContainer = options.singleContainer !== false;
 
   return function(root, result) {
@@ -145,7 +146,9 @@ function containerQuery(options = {}) {
 
     const meta = !singleContainer
       ? containers
-      : currentContainerSelector ? containers[currentContainerSelector] : {};
+      : currentContainerSelector
+        ? containers[currentContainerSelector]
+        : {};
 
     const filepath = root.source.input.file;
 
@@ -156,7 +159,14 @@ function containerQuery(options = {}) {
       filepath
     });
 
-    getJSON(filepath, meta);
+    if (typeof getJSON === "function") {
+      getJSON(filepath, meta);
+    }
+
+    // todo if option is set
+    root.append(`
+      :export { meta: '${JSON.stringify(meta)}' }
+    `);
   };
 }