pluginMedia.ts

gistfile1.txt

import plugin from 'tailwindcss/plugin';

// const maxScreenWidth = 3800;
const maxContainerWidth = 640;
const media = {
  square: { min: 305, dif: 21, start: 15, '--l': '15', '--apt': '100%', '--ar': '1 / 1' }
};

const ratios = [ // [w,h]
  // landscape
  [7,6], [5,4], [4,3], [3,2], [16,10], [16,9], [37,20], 
  [16,7], [21,9], [8,3], [3,1], [16,5], [10,3], [9,2], [12,2],
  // portrait
  [6,7], [4,5], [3,4], [2,3], [10,16], [9,16], [20,37], 
  [7,16], [9,21], [3,8], [1,3], [5,16], [3,10], [2,9], [2,12]
];
const aliases = {
  'square': ['1_1'],
  '3_2': ['photo', 'landscape'],
  '16_9': ['video'],
  '37_20': ['cinema'],

  '9_2': ['pano3'],
  '12_2': ['pano4'],

  '3_1': ['apsP'],
  '21_9': ['cinemaWide'],
  '2_3': ['portrait'],
  '9_16': ['portraitVideo']
};

const mediaLines = plugin(
  function ({ addBase, theme }) { 
    const sizeBase = {};
    for (const [a,b] of ratios) {
      const factor = a/b;
      const dif = factor * media.square.dif; // 18
      const eqMin = factor * media.square.min; // 261 > 305
      let min;
      let start;
      if (a>b) {
        for (let curMin = eqMin; curMin>media.square.min; curMin = curMin-dif) {
          min = curMin;
          start = (start||media.square.start)-1;
        }
      } else {
        for (let curMin = eqMin; curMin<media.square.min; curMin = curMin+dif) {
          min = curMin;
          start = (start||(media.square.start-1))+1;
        }
      }
      min = min-dif;
      start = start-1;
      media[`${a}_${b}`] = {a, b, min, dif, start};
    }
    for (const k in media) {
      const classes = `.redaktor-${k}${
        aliases[k] 
          ? `,${ aliases[k].map((s) => `.redaktor-${s}`).join(',') }` 
          : ''
      }`;
      const {a, b, min, dif, start} = media[k];
      let lines = start;
      for (let curMin = min; curMin<maxContainerWidth; curMin = curMin+dif) {
        if (!sizeBase[classes]) sizeBase[classes] = { 
          [`@apply [--ar:${a}/${b}] [--l:${lines}] [--apt:${b/a*100}%]`]: {}
        };
        sizeBase[classes][`@container (min-width: ${Math.round(curMin)}px)`] = { [`@apply [--l:${lines}]`]: {} }
        lines = lines + 1;
      }
    }
    addBase(sizeBase);
  }
);

export {mediaLines};