CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [3.1.0]
+
+### Added
+
+- `postcss-container-query`
+  - Allowing for one `@define-container;` declaration to override the container
+    selector detected automatically in singleContainer mode
+
+## [3.0.1]
+
+### Changed
+
+- readme updates
+
 ## [3.0.0]
 
 ### Fixed

docs/react.md

@@ -42,7 +42,7 @@ You might have the following CSS:
 }
 ```
 
-### <ContainerQuery> with (children) Render Prop
+### \<ContainerQuery\> with (children) Render Prop
 
 Using render props.
 
@@ -104,7 +104,7 @@ export default withContainerQuery(App, meta);
 
 ### Browser Support
 
-As outline in the [React docs](https://reactjs.org/docs/javascript-environment-requirements.html)
+As outlined in the [React docs](https://reactjs.org/docs/javascript-environment-requirements.html)
 in order to properly support <=IE11, you'll probably want to include the appropriate
 polyfills.
 

lerna.json

@@ -2,6 +2,6 @@
   "packages": [
     "packages/*"
   ],
-  "version": "3.0.0",
+  "version": "3.1.0",
   "npmClient": "yarn"
 }

packages/postcss-container-query/README.md

@@ -2,7 +2,7 @@
 
 This module is part of a [monorepo](https://github.com/ZeeCoder/container-query).
 
-Detailed documentation can be found there.
+Detailed documentation can be found [here](https://github.com/ZeeCoder/container-query/blob/master/docs/parcel.md).
 
 ## License
 

packages/postcss-container-query/package.json

@@ -3,7 +3,7 @@
   "description": "PostCSS processing for container queries, using a media query like syntax.",
   "homepage": "https://github.com/ZeeCoder/container-query",
   "license": "MIT",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "author": "Viktor Hubert <rpgmorpheus@gmail.com>",
   "engines": {
     "node": ">=6"

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

@@ -15,13 +15,14 @@ const walkRules = (root, opts, ruleHandler) => {
     containerSelectors.indexOf(selector) !== -1;
 
   const handleRule = (rule, parentCQAtRule) => {
+    const definedContainer = hasContainerDefinition(rule);
     const isContainer =
-      hasContainerDefinition(rule) ||
+      definedContainer ||
       hasContainerSelector(rule.selector) ||
       rule.selector === ":self" ||
       (opts.singleContainer && containerSelectors.length === 0);
 
-    const data = { rule, isContainer };
+    const data = { rule, isContainer, definedContainer };
 
     if (isContainer && !hasContainerSelector(rule.selector)) {
       containerSelectors.push(rule.selector);
@@ -103,20 +104,33 @@ function containerQuery(options = {}) {
     if (!meta) {
       const containers = {};
       let currentContainerSelector = null;
+      let containerDefinitionCount = 0;
 
       walkRules(
         root,
         { singleContainer },
-        ({ rule, isContainer, parentCQAtRule }) => {
+        ({ rule, isContainer, definedContainer, parentCQAtRule }) => {
           if (
             isContainer &&
             rule.selector !== ":self" &&
             !containers[rule.selector]
           ) {
+            if (definedContainer) {
+              containerDefinitionCount++;
+            }
+
             const nextContainerSelector = rule.selector;
-            if (singleContainer && currentContainerSelector) {
+            if (
+              // We allow for a single custom definition to be used in
+              // singleContainer mode so that the user can select the container
+              // selector themselves, instead that being picked up as the first
+              // one automatically.
+              containerDefinitionCount > 1 &&
+              singleContainer &&
+              currentContainerSelector
+            ) {
               throw rule.error(
-                `define-container declaration detected in singleContainer mode. ` +
+                `More than one @define-container declaration was detected in singleContainer mode. ` +
                   `Tried to override "${currentContainerSelector}" with "${nextContainerSelector}".`
               );
             }

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

@@ -2,6 +2,7 @@ import postcss from "postcss";
 import * as regularTest from "./test/regular";
 import * as customPropertiesTest from "./test/custom-properties";
 import * as exessContainerDeclarationTest from "./test/exess-container-declaration";
+import * as singleContainerOverrideTest from "./test/single-container-override";
 import * as containerAutoDetectionTest from "./test/container-auto-detection";
 import * as unrecognisedAtRulesTest from "./test/unrecognised-at-rules";
 import * as missingContainerDelcarationTest from "./test/missing-container-declaration";
@@ -92,12 +93,15 @@ test("should properly process CSS", () =>
 test("should detect the first class as the container by default", () =>
   assertProcessingResult(containerAutoDetectionTest));
 
-test("should throw in non singleContainer mode for defining a different container", () => {
+test("should allow for one @define-container declaration in singleContainer mode", () =>
+  assertProcessingResult(singleContainerOverrideTest));
+
+test("should throw in singleContainer mode for defining a different container more than one time", () => {
   expect.assertions(1);
 
   return processCss(exessContainerDeclarationTest.cssInput).catch(e => {
     expect(e.reason).toBe(
-      "define-container declaration detected in singleContainer mode. " +
+      "More than one @define-container declaration was detected in singleContainer mode. " +
         'Tried to override ".Container" with ".AnotherContainer".'
     );
   });
@@ -121,7 +125,6 @@ test("should be able to disable the css meta export", () =>
     exportMetaInCss: false
   }));
 
-// todo rename test to reexport
 // In parcel bundler postcss plugins run multiple times for some reason over the
 // same css file. If we respect the meta export, then subsequent runs become noop.
 test("should be able to reexport meta from a previously processed css file", () =>

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

@@ -2,10 +2,11 @@ import {
   SELECTOR,
   QUERIES,
   ELEMENTS,
-  VALUES,
-  CONDITIONS
+  VALUES
 } from "@zeecoder/container-query-meta-builder";
 
+// These container definitions should be merged together, as they use the same
+// selector
 export const cssInput = `
 .Container {
   line-height: 3rh;

packages/postcss-container-query/src/test/exess-container-declaration.js

@@ -1,10 +1,17 @@
 export const cssInput = `
+body {
+  /* This would be picked up as the container normally in singleContainer mode. */
+}
+
 .Container {
+  /* One override is allowed */
+  @define-container;
   line-height: 3rh;
   border: none;
 }
 
 .AnotherContainer {
+  /* Two override is not allowed */
   @define-container;
   font-size: 2rh;
 }

packages/postcss-container-query/src/test/single-container-override.js

@@ -0,0 +1,41 @@
+import {
+  SELECTOR,
+  QUERIES,
+  ELEMENTS,
+  VALUES
+} from "@zeecoder/container-query-meta-builder";
+
+export const cssInput = `
+body {
+  background: red;
+}
+
+.Container {
+  @define-container;
+  font-size: 1rh;
+}`;
+
+export const meta = {
+  [SELECTOR]: ".Container",
+  [QUERIES]: [
+    {
+      [ELEMENTS]: [
+        {
+          [VALUES]: {
+            "font-size": `1rh`
+          }
+        }
+      ]
+    }
+  ]
+};
+
+export const cssOutput = `
+body {
+  background: red;
+}
+
+.Container {
+}
+
+:export { meta: '${JSON.stringify(meta)}' }`;

packages/react-container-query/README.md

@@ -2,143 +2,7 @@
 
 This module is part of a [monorepo](https://github.com/ZeeCoder/container-query).
 
-Detailed documentation can be found there.
-
-## Install
-
-```
-yarn add @zeecoder/react-container-query
-# or
-npm install --save @zeecoder/react-container-query
-```
-
-### Set up PostCSS with webpack
-
-[Here](https://github.com/ZeeCoder/container-query/blob/master/docs/postcss.md)
-is a documentation on how to do just that, in order to get the same syntax I've
-been using.
-
-## Usage
-
-Assuming the following CSS:
-
-```pcss
-.App {
-  background: red;
-  font-size: 20px;
-  color: white;
-  padding: 10px;
-  border: none;
-
-  @container (width > 900px) {
-    background: green;
-  }
-}
-```
-
-And assuming that `meta` is the object obtained by running the above CSS
-through the [postcss plugin](https://github.com/ZeeCoder/container-query/tree/master/packages/postcss-container-query).
-
-### `<ContainerQuery>`
-
-A render-prop approach.
-
-```js
-import React, { Component } from "react";
-import { ContainerQuery } from "@zeecoder/react-container-query";
-import { meta } from "./App.pcss";
-
-const App = () => (
-  <ContainerQuery meta={meta}>
-    <div className="App">My App</div>
-  </ContainerQuery>
-);
-
-export default App;
-```
-
-If you're also interested in the component's size:
-
-```js
-import React, { Component } from "react";
-import { ContainerQuery } from "@zeecoder/react-container-query";
-import { meta } from "./App.pcss";
-
-const App = () => (
-  <ContainerQuery meta={meta}>
-    {size => (
-      <div className="App">
-        My size is: {size.width}x{size.height}
-      </div>
-    )}
-  </ContainerQuery>
-);
-
-export default App;
-```
-
-As you can see the ContainerQuery component automatically picks up the child
-element as the Container.
-
-To do this, the component internally calls `ReactDOM.findDOMNode(this)`.
-If you want to avoid that, you can also pass in the `element` prop:
-
-```js
-import React, { Component } from "react";
-import { ContainerQuery } from "@zeecoder/react-container-query";
-import { meta } from "./App.pcss";
-
-class App extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      element: null
-    };
-
-    this.ref = React.createRef();
-  }
-
-  updateElementFromRef() {
-    if (this.state.element !== this.ref.current) {
-      this.setState({ element: this.ref.current });
-    }
-  }
-
-  componentDidMount() {
-    this.updateElementFromRef();
-  }
-
-  componentDidUpdate() {
-    this.updateElementFromRef();
-  }
-
-  render() {
-    return (
-      <ContainerQuery meta={meta} element={this.state.element}>
-        <div className="App" ref={this.ref}>
-          My App
-        </div>
-      </ContainerQuery>
-    );
-  }
-}
-
-export default App;
-```
-
-### `withContainerQuery`
-
-If you prefer Higher-Order Components:
-
-```js
-import { withContainerQuery } from "@zeecoder/react-container-query";
-import { meta } from "./App.pcss";
-
-const App = () => <div className="App">My App</div>;
-
-export default withContainerQuery(App, meta);
-```
+Detailed documentation can be found [here](https://github.com/ZeeCoder/container-query/blob/master/docs/react.md).
 
 ## License
 

packages/react-container-query/package.json

@@ -2,7 +2,7 @@
   "name": "@zeecoder/react-container-query",
   "description": "React higher order component to manage a single Container instance.",
   "homepage": "https://github.com/ZeeCoder/container-query/tree/master/packages/react-container-query",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "license": "MIT",
   "author": "Viktor Hubert <rpgmorpheus@gmail.com>",
   "main": "dist/bundle.cjs.js",

tests/react/hoc/Test/Test.pcss

@@ -1,4 +1,9 @@
+body {
+  background: rgb(200, 200, 200);
+}
+
 .Test {
+  @define-container;
   position: absolute;
   width: 100%;
   height: 100%;