Resolves #557 - Use @container style as custom media query

.gitignore

@@ -6,4 +6,5 @@ node_modules/
 src/shadow.*.css
 *.json
 *.ts
-*.d.ts
+*.d.ts
+.idea

build/props.js

@@ -7,6 +7,7 @@ import * as ColorsHSL from '../src/props.colors-hsl.js'
 import ColorsOKLCH from '../src/props.colors-oklch.js'
 import ColorsOKLCHgray from '../src/props.gray-oklch.js'
 import ColorHues from '../src/props.colors-oklch-hues.js'
+import Container from '../src/props.container.js'
 import Fonts from '../src/props.fonts.js'
 import Borders from '../src/props.borders.js'
 import Aspects from '../src/props.aspects.js'
@@ -39,6 +40,7 @@ const mainbundle = {
   [`${pfx}props.shadows.css`]: Shadows,
   [`${pfx}props.aspects.css`]: Aspects,
   [`${pfx}props.colors.css`]: Colors.default,
+  [`${pfx}props.container.css`]: Container,
   // [`${pfx}props.svg.css`]: SVG,
   [`${pfx}props.gradients.css`]: Gradients,
   [`${pfx}props.animations.css`]: Animations,
@@ -154,6 +156,11 @@ buildPropsStylesheet(
   {selector, prefix}
 )
 
+buildPropsStylesheet(
+  {filename: pfx + 'props.container.css', props: Container},
+  {selector, prefix}
+)
+
 // gen index.css
 const entry = fs.createWriteStream(`../src/${pfx}index.css`)
 entry.write(`@import 'props.media.css';

build/to-stylesheet.js

@@ -62,6 +62,15 @@ ${dark_propsMeta}
     file.write(`  ${prop}: ${val};\n`)
   })
 
+  if (filename.includes('container')) {
+    Object.entries(props).forEach(([prop, val]) => {
+      if (prop.includes('-@') && typeof val === 'string') {
+        const baseProp = prop.substring(0, prop.lastIndexOf('-@'));
+        appendedMeta += `\n${val} {\n  ${selector} {\n    ${baseProp}: true;\n  }\n}`
+      }
+    })
+  }
+
   if (filename.includes('animations')) {
     let dark_props = Object.entries(props)
       .filter(([prop, val]) =>

package.json

@@ -217,6 +217,7 @@
     "lib:zindex": "postcss src/props.zindex.css -o zindex.min.css",
     "lib:masks:edges": "postcss src/props.masks.edges.css -o masks.edges.min.css",
     "lib:masks:cornercuts": "postcss src/props.masks.corner-cuts.css -o masks.corner-cuts.min.css",
+    "lib:container": "postcss src/props.container.css -o container.min.css",
     "lib:colors": "postcss src/props.colors.css -o colors.min.css",
     "lib:colors:oklch-hues": "postcss src/props.colors-oklch-hues.css -o oklch-hues.min.css",
     "lib:colors-hsl": "postcss src/props.colors-hsl.css -o colors-hsl.min.css",
@@ -270,6 +271,7 @@
     "shadow:shadows": "postcss src/shadow.props.shadows.css -o shadows.shadow.min.css",
     "shadow:sizes": "postcss src/shadow.props.sizes.css -o sizes.shadow.min.css",
     "shadow:zindex": "postcss src/shadow.props.zindex.css -o zindex.shadow.min.css",
+    "shadow:container": "postcss src/shadow.props.container.css -o container.shadow.min.css",
     "shadow:colors": "postcss src/shadow.props.colors.css -o colors.shadow.min.css",
     "shadow:colors:oklch-hues": "postcss src/shadow.props.colors-oklch-hues.css -o oklch-hues.shadow.min.css",
     "shadow:colors-hsl": "postcss src/shadow.props.colors-hsl.css -o colors-hsl.shadow.min.css",

src/index.css

@@ -6,6 +6,7 @@
 @import 'props.shadows.css';
 @import 'props.aspects.css';
 @import 'props.colors.css';
+@import 'props.container.css';
 @import 'props.gradients.css';
 @import 'props.animations.css';
 @import 'props.borders.css';

src/index.js

@@ -2,6 +2,7 @@ import Animations from './props.animations.js'
 import Sizes from './props.sizes.js'
 import Colors from './props.colors.js'
 import ColorsHSL from './props.colors-hsl.js'
+import Container from "./props.container.js";
 import Fonts from './props.fonts.js'
 import Borders from './props.borders.js'
 import Aspects from './props.aspects.js'
@@ -31,6 +32,7 @@ const OpenProps = mapToObjectNotation({
   ...Sizes,
   ...Colors,
   ...ColorsHSL,
+  ...Container,
   ...Fonts,
   ...Borders,
   ...Aspects,

src/props.container.css

@@ -0,0 +1,129 @@
+:where(html) {
+  --is-xxs-only: false;
+  --is-xxs-n-above: false;
+  --is-xxs-n-below: false;
+  --is-xs-only: false;
+  --is-xs-n-above: false;
+  --is-xs-n-below: false;
+  --is-sm-only: false;
+  --is-sm-n-above: false;
+  --is-sm-n-below: false;
+  --is-md-only: false;
+  --is-md-n-above: false;
+  --is-md-n-below: false;
+  --is-lg-only: false;
+  --is-lg-n-above: false;
+  --is-lg-n-below: false;
+  --is-xl-only: false;
+  --is-xl-n-above: false;
+  --is-xl-n-below: false;
+  --is-xxl-only: false;
+  --is-xxl-n-above: false;
+  --is-xxl-n-below: false;
+}
+
+@media screen and (min-width: 0) and (max-width: 240px) {
+  :where(html) {
+    --is-xxs-only: true;
+  }
+}
+@media screen and (min-width: 241px) {
+  :where(html) {
+    --is-xxs-n-above: true;
+  }
+}
+@media screen and (max-width: 240px) {
+  :where(html) {
+    --is-xxs-n-below: true;
+  }
+}
+@media screen and (min-width: 241px) and (max-width: 360px) {
+  :where(html) {
+    --is-xs-only: true;
+  }
+}
+@media screen and (min-width: 361px) {
+  :where(html) {
+    --is-xs-n-above: true;
+  }
+}
+@media screen and (max-width: 360px) {
+  :where(html) {
+    --is-xs-n-below: true;
+  }
+}
+@media screen and (min-width: 361px) and (max-width: 480px) {
+  :where(html) {
+    --is-sm-only: true;
+  }
+}
+@media screen and (min-width: 481px) {
+  :where(html) {
+    --is-sm-n-above: true;
+  }
+}
+@media screen and (max-width: 480px) {
+  :where(html) {
+    --is-sm-n-below: true;
+  }
+}
+@media screen and (min-width: 481px) and (max-width: 768px) {
+  :where(html) {
+    --is-md-only: true;
+  }
+}
+@media screen and (min-width: 769px) {
+  :where(html) {
+    --is-md-n-above: true;
+  }
+}
+@media screen and (max-width: 768px) {
+  :where(html) {
+    --is-md-n-below: true;
+  }
+}
+@media screen and (min-width: 769px) and (max-width: 1024px) {
+  :where(html) {
+    --is-lg-only: true;
+  }
+}
+@media screen and (min-width: 1025px) {
+  :where(html) {
+    --is-lg-n-above: true;
+  }
+}
+@media screen and (max-width: 1024px) {
+  :where(html) {
+    --is-lg-n-below: true;
+  }
+}
+@media screen and (min-width: 1025px) and (max-width: 1440px) {
+  :where(html) {
+    --is-xl-only: true;
+  }
+}
+@media screen and (min-width: 1441px) {
+  :where(html) {
+    --is-xl-n-above: true;
+  }
+}
+@media screen and (max-width: 1440px) {
+  :where(html) {
+    --is-xl-n-below: true;
+  }
+}
+@media screen and (min-width: 1441px) {
+  :where(html) {
+    --is-xxl-only: true;
+  }
+}
+@media screen and (min-width: 1441px) {
+  :where(html) {
+    --is-xxl-n-above: true;
+  }
+}
+@media screen and (max-width: 1440px) {
+  :where(html) {
+    --is-xxl-n-below: true;
+  }
+}

src/props.container.js

@@ -0,0 +1,53 @@
+export const Container = {
+  /* XXS */
+  '--is-xxs-only': false,
+  '--is-xxs-only-@': '@media screen and (min-width: 0) and (max-width: 240px)',
+  '--is-xxs-n-above': false,
+  '--is-xxs-n-above-@': '@media screen and (min-width: 241px)',
+  '--is-xxs-n-below': false,
+  '--is-xxs-n-below-@': '@media screen and (max-width: 240px)',
+  /* XS */
+  '--is-xs-only': false,
+  '--is-xs-only-@': '@media screen and (min-width: 241px) and (max-width: 360px)',
+  '--is-xs-n-above': false,
+  '--is-xs-n-above-@': '@media screen and (min-width: 361px)',
+  '--is-xs-n-below': false,
+  '--is-xs-n-below-@': '@media screen and (max-width: 360px)',
+  /* SM */
+  '--is-sm-only': false,
+  '--is-sm-only-@': '@media screen and (min-width: 361px) and (max-width: 480px)',
+  '--is-sm-n-above': false,
+  '--is-sm-n-above-@': '@media screen and (min-width: 481px)',
+  '--is-sm-n-below': false,
+  '--is-sm-n-below-@': '@media screen and (max-width: 480px)',
+  /* MD */
+  '--is-md-only': false,
+  '--is-md-only-@': '@media screen and (min-width: 481px) and (max-width: 768px)',
+  '--is-md-n-above': false,
+  '--is-md-n-above-@': '@media screen and (min-width: 769px)',
+  '--is-md-n-below': false,
+  '--is-md-n-below-@': '@media screen and (max-width: 768px)',
+  /* LG */
+  '--is-lg-only': false,
+  '--is-lg-only-@': '@media screen and (min-width: 769px) and (max-width: 1024px)',
+  '--is-lg-n-above': false,
+  '--is-lg-n-above-@': '@media screen and (min-width: 1025px)',
+  '--is-lg-n-below': false,
+  '--is-lg-n-below-@': '@media screen and (max-width: 1024px)',
+  /* XL */
+  '--is-xl-only': false,
+  '--is-xl-only-@': '@media screen and (min-width: 1025px) and (max-width: 1440px)',
+  '--is-xl-n-above': false,
+  '--is-xl-n-above-@': '@media screen and (min-width: 1441px)',
+  '--is-xl-n-below': false,
+  '--is-xl-n-below-@': '@media screen and (max-width: 1440px)',
+  /* XXL */
+  '--is-xxl-only': false,
+  '--is-xxl-only-@': '@media screen and (min-width: 1441px)',
+  '--is-xxl-n-above': false,
+  '--is-xxl-n-above-@': '@media screen and (min-width: 1441px)',
+  '--is-xxl-n-below': false,
+  '--is-xxl-n-below-@': '@media screen and (max-width: 1440px)',
+}
+
+export default Container