A neat and efficient way to write responsive styles for CSS-in-Js libraries.
Like facepaint, but even more powerful.
import facetat from 'facetat';
// Initialize
const mq = facetat(
// A breakpoint map from string to number that can be of any size.
// You can name them anything as your want.
// e.g. { mobile: 1, phablet: 2, tablet: 3, laptop: 5, desktop: 6 }
{ XS: 1, SM: 2, MD: 3, LG: 5, XL: 6 },
// The default unit when a unitless number is specified.
// Accept rem, em, px, or other valid css units
{ unit: 'rem' }
);
// Expected Result:
//
// @media (min-width: 1rem) {
// [className] {
// width: 100rem;
// }
// }
// Usage:
//
// CSS function from any CSS-in-Js libraries, for example, emotion
import { css } from '@emotion/core';
const style = mq.XS(
css`
width: 100rem;
`
);
// Shortcut of the above
const style = mq.XS`width: 100rem;`;
// Plain Javascript object
const style = mq.XS({ width: 100 });
// Expected Result:
//
// @media (min-width: 1rem) {
// [className] {
// width: 100rem;
// }
// }
// @media (min-width: 1rem) and (max-width: 2rem) {
// [className] {
// width: 200rem;
// }
// }
// Usage:
//
// Plain Javascript object
const style = mq.width(null, 100, '200rem');
// Expected Result:
//
// [className] {
// width: 50px;
// }
// @media (min-width: 1rem) {
// [className] {
// width: 100rem;
// }
// }
// @media (min-width: 1rem) and (max-width: 2rem) {
// [className] {
// width: 200rem;
// }
// }
// Usage:
//
// Emotion css object
const style = mq(
css`
width: 50px;
`,
css`
width: 100rem;
`,
css`
width: 200rem;
`
);
// Plain Javascript object
const style = mq({ width: '50px' }, { width: 100 }, { width: '200rem' });
// Expected Result:
//
// [className] {
// width: 50px;
// }
// @media (min-width: 1rem) {
// [className] {
// width: 100rem;
// }
// }
// @media (min-width: 1rem) and (max-width: 2rem) {
// [className] {
// width: 200rem;
// }
// }
// Usage:
//
const style = mq({ width: ['50px', 100, '200rem'] });
When used with typescript-styled-plugin, please add mq
to the list of formatting-eligible tagged template literals.
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-styled-plugin",
"tags": ["styled", "css", "mq"]
}
]
}
}
This library has been continuously used in many of my personal projects, and is regarded as production-ready. In the foreseeable future, I will continuously maintain and support this library.
Please voice your opinion and report bugs in the issues sections of this GitHub project.
You are more than welcome to add more functionalities, improve documentation, fix bugs, and anything you think is needed. The build step is pretty self-explanatory. Please refer to CONTRIBUTING.md for more details.
MIT