eddiesigner

var fs = require('fs');
var postcss = require('postcss'); // Load PostCSS
var postcss_nested = require('postcss-nested'); // Load the postcss-nested plugin
var simple_media_queries = require('postcss-simple-media-queries'); // Load the postcss-simple-media-queries
var css = fs.readFileSync('input.css', 'utf8'); // Your stylesheet

var output = postcss([simple_media_queries, postcss_nested]) // The order is important because this plugin depends on nesting capabilities
  .process(css)
  .css;

eddiesigner

var gulp = require('gulp');
var postcss = require('gulp-postcss'); // Load PostCSS
var postcss_nested = require('postcss-nested'); // Load the postcss-nested plugin
var simple_media_queries = require('postcss-simple-media-queries'); // Load the postcss-simple-media-queries plugin

gulp.task('css', function () {
  var processors = [ // The order is important because this plugin depends on nesting capabilities
    simple_media_queries,
    postcss_nested
  ];

eddiesigner

p {
  margin: 0;
  @media (mq('medium')) {
    margin: 25px 0;
  }
}

eddiesigner

{
  'initialize': '1px',
  'small': '35.5em', // >= 568px @ 16px
  'medium': '48em', // >= 768px @ 16px
  'large': '64em', // >= 1024px @ 16px
  'extra-large': '80em' // >= 1280px @ 16px
}

eddiesigner

...
var processors = [
  simple_media_queries({
    'mobile': '32em',
    'tablet': '45em',
    'desktop': '64em',
    'extra-large': '80em',
    'super-large': '96em'
    }),
  postcss_nested

eddiesigner

/* Media queries breakpoints */
$break-small: 35.5rem; // >= 568px @ 16px
$break-medium: 48rem; // >= 768px @ 16px
$break-large: 64rem; // >= 1024px @ 16px
$break-extra-large: 80rem; // >= 1280px @ 16px
$break-largest: 90rem; // >= 1440px @ 16px

/* Media query mixin */
@mixin respond-to( $condition ) {
  @if $condition == 'initialize' { @media only screen and (min-width: 1px) { @content; } }

eddiesigner

p {
  margin: 0;
}

@media only screen and ( min-width: 42em ) {
  p {
    margin: 25px 0;
  }
}

eddiesigner

<style>
  [data-theme="dark"] .m-logo.in-desktop-topbar img,
  [data-theme="dark"] .m-logo.in-mobile-topbar img {
    filter: invert();
  }
  
  @media (prefers-color-scheme: dark) {
    .m-logo.in-desktop-topbar img,
    .m-logo.in-mobile-topbar img {
      filter: invert();

eddiesigner

<script>
const currentSavedTheme = localStorage.getItem('theme')

if (!currentSavedTheme) {
    const checkboxes = document.querySelectorAll('.js-toggle-darkmode')

    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = true
    }
}

eddiesigner

(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{25:function(n,o,e){n.exports=e(26)},26:function(n,o,e){"use strict";e.r(o);var t=e(0),a=e.n(t),d=e(3),i=e.n(d),s=2;a()(window).scroll((function(){if(a()(window).scrollTop()+a()(window).height()===a()(document).height()){var n=ghostHost+"page/"+s;a.a.get(n,(function(n){s<=maxPages&&(a()(".l-content .l-wrapper .l-grid").append(a()(n).find(".m-article-card.post").fadeIn()),s+=1,i()(".lozad",{loaded:function(n){n.classList.add("loaded")}}).observe())}))}}))}},[[25,0,1]]]);