Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Package(@limbo-works/screens): Standardise TailwindCSS (etc.) Breakpoint Configuration #1

Open
saulhardman opened this issue Oct 12, 2021 · 1 comment · May be fixed by #4
Open

Package(@limbo-works/screens): Standardise TailwindCSS (etc.) Breakpoint Configuration #1

saulhardman opened this issue Oct 12, 2021 · 1 comment · May be fixed by #4

Comments

@saulhardman
Copy link
Contributor

saulhardman commented Oct 12, 2021

https://3.basecamp.com/4364932/buckets/19300233/todos/3754290834

export default (breakpoints, rootFontSize = 16) =>
	breakpoints.reduce((acc, breakpoint) => {
		const {
			value: pxValue,
			min = true,
			max = false,
		} = typeof breakpoint === 'number'
			? { value: breakpoint }
			: breakpoint ?? {};

		if (!pxValue) {
			throw new Error(`\`value\` required: ${breakpoint}`);
		}

		const emValue = pxValue / rootFontSize;

		return {
			...acc,

			...(min
				? {
						[`>=${pxValue}`]: `${emValue}em`,
				  }
				: {}),

			...(max
				? {
						[`<${pxValue}`]: { max: `${emValue - 0.01}em` },
				  }
				: {}),
		};
	}, {});
// tailwind.config.js

import screens from `@limbo-works/screens;

import breakpoints from '~/assets/js/breakpoints';

module.exports = {
	theme: {
		screens: screens(breakpoints),
	},
};
saulhardman added a commit that referenced this issue Oct 12, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Closes #1
@saulhardman saulhardman linked a pull request Oct 12, 2021 that will close this issue
saulhardman added a commit that referenced this issue Oct 12, 2021
@SEMilfred
Copy link
Member

Just a consideration: Would it make sense to make the tailwind part of this more apparent as tailwind?
Like calling the export twScreens or tailwindScreens instead of just screens? Just for the purpose of making it more self-documenting, and to clearly differentiate between breakpoints and screens.

Counter-point to myself is wether it is the package itself that's tailored to be used with Tailwind mainly, in which case it might be the whole package that should be prefixed?

Functionally not very important, just some thoughts popping into my head 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants