JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 133
  • Score
    100M100P100Q87139F
  • License MIT

A PostCSS plugin and Javascript runtime combination, which allows you to write @container queries in your CSS the same way you would write @media queries.

Package Exports

  • @zeecoder/container-query

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zeecoder/container-query) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Container Query

npm version build Code Climate Coverage Status Greenkeeper badge

A PostCSS plugin and Javascript runtime combination, which allows you to write @container queries in your CSS the same way you would write @media queries.

screenshot

How to use

Install

npm install --save-dev @zeecoder/container-query

PublicAPI

  • Container.js - JS Runtime
  • containerQuery.js - PostCSS Plugin
  • initialiseAllContainers.js - helper function

The rest in build/ is not considered to be a part of the Public API, which means anything in it can change at any time. (Including minor / patch releases.)

Limitations

  • @container queries cannot be nested

Supported Browsers

  • Works with all modern browsers and IE9+

Notes

  • Lead with ## WHAT (image) followed by ## WHY
  • list supported browsers
  • BEM-inspiration: Block -> inside of which are elements (unique classnames!)
  • @container queries must always be preceded by a @define-container
  • All @containers following a @defined-container will be related to that
  • @define-container declarations will be ignored inside @container declarations
  • Example function to save all container configurations in separate JSON files in a dir
  • Gulp example
    • PostCSS example
    • SASS example: works out of the box
    • Less -> separate pipeline
  • Containers can have more than one instance of their elements
  • The container units are relative to the container's "inner" height / width. (Without the borders.)
  • Note possible circular issues
    • A container should not use container units for properties that would affect its width / height. These situations are not currently handled, so try to avoid them.
  • To avoid circular deps, use overflow: hidden and avoid using container units on defined containers
  • Use native CSS techniques to achieve your goal whenever possible (css grid, flexbox)

Thoughts on design

Here is a list of goals I started with, in case you're wondering about the tool's design:

  • Should be thoroughly unit tested
  • Use containers (as opposed to "element query"),
  • Resemble @media queries so that it's familiar and easy to use,
  • Uses PostCSS for preprocessing instead of a JS runtime parser,
  • Modular, so it plays nicely with js bundlers and "Component-based" UI libraries (Webpack / Browserify / React etc.)
  • Doesn't need to be valid CSS syntax (since it's based on PostCSS)
  • Be easy enough to use, but a transpiling step in the frontend build process would be assumed
  • Should work especially well with css component naming methodologies, like BEM or SUIT