facetat
A neat and efficient way to write responsive styles for CSS-in-Js libraries.
Like facepaint, but even more powerful.
Usage
Initialization
; // Initializeconst mq = ;
Single-media Form
// Expected Result://// @media (min-width: 1rem) {// [className] {// width: 100rem;// }// } // Usage://// CSS function from any CSS-in-Js libraries, for example, emotion; const style = mq; // Shortcut of the aboveconst style = mqXS`width: 100rem;`; // Plain Javascript objectconst style = mq;
Single-property Form
// Expected Result://// @media (min-width: 1rem) {// [className] {// width: 100rem;// }// }// @media (min-width: 1rem) and (max-width: 2rem) {// [className] {// width: 200rem;// }// } // Usage://// Plain Javascript objectconst style = mqwidthnull 100 '200rem';
Chaining Form
// 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 objectconst style = ; // Plain Javascript objectconst style = ;
Compact Form
// 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 = ;
Editor Support
VSCode
When used with typescript-styled-plugin, please add mq
to the list of formatting-eligible tagged template literals.
Support
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.
Issues and Feedback
Please voice your opinion and report bugs in the issues sections of this GitHub project.
Contributing
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.
License
MIT