Container Query Snippets

css.code-snippets

{
  "container": {
    "prefix": "container",
    "body": [
      "--_container-size-min: $1;",
      "--_container-size-max: $2;",
      "--_to-cqi-min: calc(tan(atan2(1px, var(--_container-size-min))) * 100cqi);",
      "--_to-cqi-max: calc(tan(atan2(1px, var(--_container-size-max))) * 100cqi);",
      "container: $3 / inline-size;",
      "@container style(--debug: true) {",
      "\toverflow-x: auto;",
      "\tresize: inline;",
      "}"
    ]
  },
  "cqi-min": {
    "prefix": "cqi-min",
    "body": ["calc($1 * var(--_to-cqi-min))"]
  },
  "cqi-max": {
    "prefix": "cqi-max",
    "body": ["calc($1 * var(--_to-cqi-max))"]
  },
}