1-nesting.css

/* https://www.npmjs.com/package/postcss-nested */

.button {
  &_theme_primary {
    color: var(--color-text-active);
    background-color: var(--color-bg-brand);

    &:focus,
    &:hover {
      background-color: var(--color-bg-brand-hover);
    }

    &:active {
      background-color: var(--color-bg-brand-active);
    }

    &:disabled {
      background-color: var(--color-bg-brand-disabled);
    }
  }
}

2-mixin.css

/* https://www.npmjs.com/package/postcss-mixins */

@define-mixin color-brand-states {
  color: var(--color-text-brand);

  &:focus,
  &:hover {
    color: var(--color-text-brand-hover);
  }

  &:active {
    color: var(--color-text-brand-active);
  }
}

.link {
  @mixin color-brand-states;
}

3-custom-media-query.css

/* https://www.npmjs.com/package/postcss-custom-media */

@custom-media --mobile (max-width: 640px);
@custom-media --tablet (max-width: 1024px);
@custom-media --desktop (min-width: 1025px);

@media (--mobile) {
  .hideOnMobile {
    display: none;
  }
}

4-custom-selector.css

/* https://www.npmjs.com/package/postcss-custom-selectors */

@custom-selector :--dark-theme html[data-theme="dark"] &;

.dialog {
  position: relative;
  height: 100%;

  /* html[data-theme="dark"] .dialog */
  :--dark-theme {
    border: 1px solid var(--color-bg-stripe);
  }
}

5-import.css

/* https://www.npmjs.com/package/postcss-import */

@import 'reset.css';
@import 'fonts.css';
@import 'variables.css';

6-var-theming.css

:root {
  --color-text-primary: #323c48;
  --color-text-secondary: #7e8fa4;
  --color-bg-default: #fff;
  --shadow-light: 0 4px 8px rgba(126, 143, 164, 0.15);
  
  @media (prefers-color-scheme: dark) {
    --color-text-primary: #fafafa;
    --color-text-secondary: #a7a7a8;
    --color-bg-default: #2c2d31;
    --shadow-light: 0 5px 15px rgba(43, 51, 62, 0.2);
  }
}

.item {
  background-color: var(--color-bg-default);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-light);
}

7-var-calc.css

.block {
  --z-items: 1;
  --z-header: calc(var(--z-tasks) + 1);
  
  &__header {
    z-index: var(--z-header);
  }
  
  &__items {
    z-index: var(--z-items);
  }
}

8-var-reassignment.css

.Badge {
  height: var(--badge-size);
  line-height: var(--badge-size);
  font-size: var(--badge-text-size);

  &_size_s {
    --badge-size: 16px;
    --badge-text-size: 12px;
  }

  &_size_m {
    --badge-size: 20px;
    --badge-text-size: 16px;
  }

  &_size_l {
    --badge-size: 32px;
    --badge-text-size: 20px;
  }