{ "manifest": { "name": "postcss-media-minmax", "version": "5.0.0", "description": "Using more intuitive `>=`, `<=`, `>`, `<` instead of media queries min/max prefix.", "scripts": { "test": "tape test", "release": "npmpub" }, "repository": { "type": "git", "url": "https://github.com/postcss/postcss-media-minmax.git" }, "keywords": [ "css", "css3", "postcss", "postcss-plugin", "media querie", "media queries" ], "author": { "name": "yisi" }, "license": "MIT", "files": [ "CHANGELOG.md", "README.md", "README-zh.md", "LICENSE", "index.js" ], "engines": { "node": ">=10.0.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "devDependencies": { "npmpub": "^4.1.0", "postcss": "^8.1.0", "tape": "^4.9.1" }, "_registry": "npm", "_loc": "/homez.1033/heliovt/.cache/yarn/v6/npm-postcss-media-minmax-5.0.0-7140bddec173e2d6d657edbd8554a55794e2a5b5-integrity/node_modules/postcss-media-minmax/package.json", "readmeFilename": "README.md", "readme": "# PostCSS Media Minmax\n\n[![CSS Standard Status](https://cssdb.org/badge/media-query-ranges.svg)](https://cssdb.org/#media-query-ranges)\n[![Build Status](https://travis-ci.org/postcss/postcss-media-minmax.svg?branch=master)](https://travis-ci.org/postcss/postcss-media-minmax) \n[![NPM Downloads](https://img.shields.io/npm/dm/postcss-media-minmax.svg?style=flat)](https://www.npmjs.com/package/postcss-media-minmax) \n[![NPM Version](https://img.shields.io/npm/v/postcss-media-minmax.svg?style=flat)](https://www.npmjs.com/package/postcss-media-minmax) \n[![License](https://img.shields.io/npm/l/postcss-media-minmax.svg?style=flat)](https://opensource.org/licenses/MIT) \n\n> Writing simple and graceful media queries!\n\nThe `min-width`, `max-width` and many other properties of media queries are really confusing. I want to cry every time I see them. But right now according to the new specs, you can use more intuitive `<=` or `>=` to replace the `min-`/`max-` prefixes in media queries.\n\nV2.1.0 began to support `>` or `<` symbol.\n\nThis is a polyfill plugin which supports [CSS Media Queries Level 4](https://drafts.csswg.org/mediaqueries/#mq-range-context) and gives you access to the new features right away. Mom will never worry about my study any more. So amazing!\n\n\n[简体中文](README-zh.md)\n\n-----\n\n![Gif Demo](https://gtms02.alicdn.com/tps/i2/TB1UIjyGVXXXXcCaXXXx274FpXX-877-339.gif)\n\n\n## Installation\n\n $ npm install postcss-media-minmax\n\n## Quick Start\n\nExample 1:\n\n```js\nvar fs = require('fs')\nvar postcss = require('postcss')\nvar minmax = require('postcss-media-minmax')\n\nvar css = fs.readFileSync('input.css', 'utf8')\n\nvar output = postcss()\n .use(minmax())\n .process(css)\n .css\n \nconsole.log('\\n====>Output CSS:\\n', output) \n```\n\nOr just:\n\n```js\nvar output = postcss(minmax())\n .process(css)\n .css\n```\n\ninput.css:\n\n```css\n@media screen and (width >= 500px) and (width <= 1200px) {\n .bar {\n display: block;\n }\n}\n```\n\nYou will get:\n\n```css\n@media screen and (min-width: 500px) and (max-width: 1200px) {\n .bar {\n display: block;\n }\n}\n```\n\n## CSS syntax\n\n### [Syntax](https://drafts.csswg.org/mediaqueries/#mq-range-context)\n\n```\n = [ '<' | '>' ]? '='? \n | [ '<' | '>' ]? '='? \n | '<' '='? '<' '='? \n | '>' '='? '>' '='? \n```\n\n![syntax](https://gtms03.alicdn.com/tps/i3/TB1Rje0HXXXXXXeXpXXccZJ0FXX-640-290.png)\n\nPostCSS Media Minmax hasn't implemented syntax such as `200px > = width` or `200px < = width` currently because its readability is not good enough yet.\n\n## [Values](https://drafts.csswg.org/mediaqueries/#values)\n \n**The special values:**\n\n* [](https://drafts.csswg.org/mediaqueries/#typedef-ratio)\n\n The value type is a positive (not zero or negative) followed by optional whitespace, followed by a solidus ('/'), followed by optional whitespace, followed by a positive . s can be ordered or compared by transforming them into the number obtained by dividing their first by their second .\n\n ```css\n @media screen and (device-aspect-ratio: 16 / 9) {\n /* rules */\n }\n\n /* equivalent to */\n @media screen and (device-aspect-ratio: 16/9) {\n /* rules */\n }\n ```\n\n* [](https://drafts.csswg.org/mediaqueries/#typedef-mq-boolean)\n\n The value type is an with the value 0 or 1. Any other integer value is invalid. Note that -0 is always equivalent to 0 in CSS, and so is also accepted as a valid value. \n\n ```css\n @media screen and (grid: -0) {\n /* rules */\n }\n\n /* equivalent to */\n @media screen and (grid: 0) {\n /* rules */\n }\n ```\n\n## How to use\n\n### Shorthand\n\nIn Example 1, if a feature has both `>=` and `<=` logic, it can be written as follows:\n\n```css\n@media screen and (500px <= width <= 1200px) {\n .bar {\n display: block;\n }\n}\n/* Or */\n@media screen and (1200px >= width >= 500px) {\n .bar {\n display: block;\n }\n}\n```\n\nWhich will output:\n\n```css\n@media screen and (min-width: 500px) and (max-width: 1200px) {\n .bar {\n display: block;\n }\n}\n```\n\n**Note**: When the media feature name is in the middle, we must ensure that two `<=` or `>=` are in the same direction, otherwise which will not be converted.\n\nE.g. in the example below, `width` is greater than or equal to 500px and is greater than or equal to 1200px, which is the wrong in both grammar and logic.\n\n\n```css\n@media screen and (1200px <= width >= 500px) {\n .bar {\n display: block;\n }\n}\n```\n\n### Media feature names\n\nThe following properties support the `min-`/`max-` prefixes in the specifications at present, and will be automatically converted by PostCSS Media Minmax.\n\n* `width`\n* `height`\n* `device-width`\n* `device-height`\n* `aspect-ratio`\n* `device-aspect-ratio`\n* `color`\n* `color-index`\n* `monochrome`\n* `resolution`\n\n\n\n### Using with `@custom-media` & Node Watch\n\n```js\nvar fs = require('fs')\nvar chokidar = require('chokidar')\nvar postcss = require('postcss')\nvar minmax = require('postcss-media-minmax')\nvar customMedia = require('postcss-custom-media')\n\nvar src = 'input.css'\n\nconsole.info('Watching…\\nModify the input.css and save.')\n\n\nchokidar.watch(src, {\n ignored: /[\\/\\\\]\\./,\n persistent: true\n}).on('all',\n function(event, path, stats) {\n var css = fs.readFileSync(src, 'utf8')\n var output = postcss()\n .use(customMedia())\n .use(minmax())\n .process(css)\n .css;\n fs.writeFileSync('output.css', output)\n })\n\n```\n\n\ninput.css:\n\n```css\n@custom-media --foo (width >= 20em) and (width <= 50em);\n@custom-media --bar (height >= 300px) and (height <= 600px);\n\n@media (--foo) and (--bar) {\n \n}\n```\n\noutput.css:\n\n```css\n@media (min-width: 20em) and (max-width: 50em) and (min-height: 300px) and (max-height: 600px) {\n \n}\n```\n\n### Grunt\n\n```js\nmodule.exports = function(grunt) {\n grunt.initConfig({\n pkg: grunt.file.readJSON('package.json'),\n postcss: {\n options: {\n processors: [\n require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss, //Other plugin\n require('postcss-media-minmax')(),\n ]\n },\n dist: {\n src: ['src/*.css'],\n dest: 'build/grunt.css'\n }\n }\n });\n\n grunt.loadNpmTasks('grunt-contrib-uglify');\n grunt.loadNpmTasks('grunt-postcss');\n\n grunt.registerTask('default', ['postcss']);\n}\n```\n\n### Gulp\n\n```js\nvar gulp = require('gulp');\nvar rename = require('gulp-rename');\nvar postcss = require('gulp-postcss');\nvar selector = require('postcss-media-minmax')\nvar autoprefixer = require('autoprefixer-core')\n\ngulp.task('default', function () {\n var processors = [\n autoprefixer({ browsers: ['> 0%'] }), //Other plugin\n minmax()\n ];\n gulp.src('src/*.css')\n .pipe(postcss(processors))\n .pipe(rename('gulp.css'))\n .pipe(gulp.dest('build'))\n});\ngulp.watch('src/*.css', ['default']);\n```\n\n\n## Contributing\n\n* Install all the dependent modules.\n* Respect the coding style (Use [EditorConfig](https://editorconfig.org/)).\n* Add test cases in the [test](test) directory.\n* Run the test cases.\n\n```\n$ git clone https://github.com/postcss/postcss-media-minmaxs.git\n$ git checkout -b patch\n$ npm install\n$ npm test\n```\n\n## Acknowledgements\n\n* Thank the author of PostCSS [Andrey Sitnik](https://github.com/ai) for giving us such simple and easy CSS syntax analysis tools.\n\n* Thank [Tab Atkins Jr.](https://www.xanthir.com/contact/) for writing the specs of Media Queries Level 4.\n\n* Thank [ziyunfei](https://weibo.com/p/1005051708684567) for suggestions and help of this plugin.\n\n\n## [Changelog](CHANGELOG.md)\n\n## [License](LICENSE)\n", "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2014 PostCSS\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n" }, "artifacts": [], "remote": { "resolved": "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz#7140bddec173e2d6d657edbd8554a55794e2a5b5", "type": "tarball", "reference": "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", "hash": "7140bddec173e2d6d657edbd8554a55794e2a5b5", "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", "registry": "npm", "packageName": "postcss-media-minmax", "cacheIntegrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ== sha1-cUC93sFz4tbWV+29hVSlV5TipbU=" }, "registry": "npm", "hash": "7140bddec173e2d6d657edbd8554a55794e2a5b5" }