BreakPoints

Breakpoint prefix	Minimum Maximum	CSS
`min_sm`	640px	`@media (min-width: 640px) { ... }`
`min_md`	768px	`@media (min-width: 768px) { ... }`
`min_lg`	1024px	`@media (min-width: 1024px) { ... }`
`min_xl`	1280px	`@media (min-width: 1280px) { ... }`
`min_2xl`	1536px	`@media (min-width: 1536px) { ... }`
`max_sm`	640px	`@media (max-width: 640px) { ... }`
`max_md`	768px	`@media (max-width: 768px) { ... }`
`max_lg`	1024px	`@media (max-width: 1024px) { ... }`
`max_xl`	1280px	`@media (max-width: 1280px) { ... }`
`max_2xl`	1536px	`@media (max-width: 1536px) { ... }`

Input

Take a look at the media queries in the mobile functions and compare them.

style.ts

import cssx, { max_md } from 'typedcssx';
 
export const css = cssx.create({
    logo: {
      left: 400,
      top: 12,
      [max_md]: {
        left: 6,
        top: 6,
      },
    },
});
 
cssx.global({
  [max_md]: {
    body: {
      width: '100%',
      padding: '120px 24px',
      fontSize: 12,
    },
    h1: {
      color: 'var(--color-heading)',
      padding: 0,
      margin: 0,
      fontSize: '20px',
      fontWeight: 400
    },
    h2: {
      color: 'var(--color-heading)',
      fontSize: '18px',
      fontWeight: '400',
    },
  },
});

Output

If you wrap a property, the selector will be split and output.

css

.logo_nBXWJ {
  left: 400px;
  top: 12px;
}
 
@media (max-width: 768px) {
  .logo_nBXWJ {
    left: 6px;
    top: 6px;
  }
}
 
@media (max-width: 768px) {
  body {
    width: 100%;
    padding: 120px 24px;
    font-size: 12px;
  }
 
  h1 {
    color: var(--color-heading);
    padding: 0px;
    margin: 0px;
    font-size: 20px;
    font-weight: 400;
  }
 
  h2 {
    color: var(--color-heading);
    font-size: 18px;
    font-weight: 400;
  }
}