JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

JavaScript

const mediaQueryKeywords = {
  'max-width': true,
  'min-width': true,
  'max-height': true,
  'min-height': true,
  'screen': true,
};

const mediaQueryTransforms = {
  'max-width': (value) => getParenthesizedQuery('max-width', value),
  'min-width': (value) => getParenthesizedQuery('min-width', value),
  'max-height': (value) => getParenthesizedQuery('max-height', value),
  'min-height': (value) => getParenthesizedQuery('min-height', value),
  'screen': () => 'screen',
};

function getParenthesizedQuery(query, value) {
  const normalizedValue = prependUnits(value);
  return `(${query}: ${normalizedValue})`;
}

function prependUnits(value) {
  if (value.includes('px')) return value;
  return `${value}px`;
}

// fileName__media__max-width_400px__min-width_200px__screen
function fileIsSpecificToMedia(fileName) {
  return fileName.includes('__media__');
}

function buildMediaQuery(fileName) {
  const parts = fileName.split('__');
  const mediaQuery = parts.reduce((acc, part, i) => {
    const [ key, value ] = part.split('_');

    if (!mediaQueryKeywords[key]) return acc;

    const queryString = mediaQueryTransforms[key](value);
    acc[key] = queryString;
    return acc;
  }, {});

	// - initially creating an object vs an array to avoid duplicate keys
  return Object.values(mediaQuery).join(' and ');
}


const theFile = 'fileName__media__max-width_400px__min-width_200px__screen';
const result = buildMediaQuery(theFile);
console.log(result);