postcss-drupal-breakpoints

PostCSS plugin to get drupal theme breakpoints in css variables

Usage no npm install needed!

<script type="module">
  import postcssDrupalBreakpoints from 'https://cdn.skypack.dev/postcss-drupal-breakpoints';
</script>

README

PostCSS Drupal Breakpoints

PostCSS plugin to get drupal theme breakpoints in css variables.

Input

css

@drupal-breakpoint wide_1x {
  .pager {
    display: none;
  }
}

THEMENAME.breakpoints.yml

THEMENAME.mobile:
  label: mobile
  mediaQuery: '(min-width: 0em)'
  weight: 0
  multipliers:
    - 1x
THEMENAME.wide:
  label: wide
  mediaQuery: 'screen and (min-width: 40em)'
  weight: 1
  multipliers:
    - 1x

postcss.config.js

module.exports = ctx => ({
  plugins: [
    require('postcss-drupal-breakpoints')({
      importFrom: './THEMENAME.breakpoints.yml',
      themeName: 'THEMENAME'
    }),
  ]
});

Output

@media screen and (min-width: 40em) {
  .pager {
    display: none;
  }
}