{"_id":"@alaguna/css-mqpacker","_rev":"1-78635d8dea5fef190d3453e2c41b1b08","name":"@alaguna/css-mqpacker","dist-tags":{"latest":"8.0.1"},"versions":{"8.0.1":{"name":"@alaguna/css-mqpacker","version":"8.0.1","description":"Pack same CSS media query rules into one using PostCSS","homepage":"https://github.com/Antonio-Laguna/node-css-mqpacker","bugs":{"url":"https://github.com/Antonio-Laguna/node-css-mqpacker/issues"},"license":"MIT","author":{"name":"Kyo Nagashima","email":"hail2u@gmail.com","url":"https://hail2u.net/"},"main":"index.js","bin":{"mqpacker":"bin/mqpacker.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/Antonio-Laguna/node-css-mqpacker.git"},"scripts":{"test":"eslint index.js test/index.js && tape \"test/**/*.js\""},"dependencies":{"minimist":"^1.2.5","postcss":"^7.0.32"},"devDependencies":{"eslint":"^7.2.0","tape":"^5.0.1"},"gitHead":"7ce03f95f8fb444e8bb20add4235ffa13a939887","_id":"@alaguna/css-mqpacker@8.0.1","_nodeVersion":"14.4.0","_npmVersion":"6.14.9","dist":{"integrity":"sha512-86vF6P8h1irpsvQoKnYzKeid7xGonHYzuaWdEBS7pi+BVQSZxW82MaADTPSpUSLgu+V/BwsfrY+W2RVuvIDX8Q==","shasum":"0eadd6f8795a8c8badfe49a07e536b96c80113cf","tarball":"https://registry.npmjs.org/@alaguna/css-mqpacker/-/css-mqpacker-8.0.1.tgz","fileCount":4,"unpackedSize":13244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyUQoCRA9TVsSAnZWagAA8D4P/iAwux+jFJ+CBRFsz5HS\ncnQ+XAhOtVFumyaS6r1WFhspY4qKHm5WZ7PYOit8nTLzp8Ag1D/2XoltyskC\nAOV4yqA2m0bSvHMqWTjdty74UQ6dhcnOKLBC5NDn6fOBwdJvDo4nMuFSHw7e\n4yh3Tqm5aXvYz0GYP/f5c5+lfs2X72xoualXZFeNklczr+oT5mQ2PpYclx42\nNZU/m2wqlu5yE6Byee8sUS+x1fRVmasNoHbT/p2lPUKUMYYy8LEo7F0EvjH8\nUpf5S8CkGs93cQdTGwgKSfH/EYu1ruyuAWCDyAjOzW0fbsoZAcP2voWB3cGu\noA5zJ6ZrggxN2jhgQLougmf28klcYOQcVzzjP412k/9rANQLyio5pGnjVr7l\n8kI+tRj8olHMAhgMidyqO6tK/4R3BmdpKWH+AdxVTWbSNTEGspr4fD3H61n0\n/PXWA/nUqVVSkEavgUGTKCzM7NowrSHIFeavQweglYGQSJzkvG90S77t7JOJ\nf4oDLkqspwq8u0z/zRzD7vCtuOSc4kDI3ZMmSBOXtYNNu1HFZpC0o/yGsPCu\ny7RlWFw2HSq++w5pdIE12lDoDDiUe9sdhkra8ab6tH6VlE1Y10yJSYhPYqPn\nG6zbHv1t9QR4AF0AHiBFHaC4871EB4OS/ICr7jOv304PhQ5bYMeNj/UQO4Ei\nrimi\r\n=+Qz7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYwqJp6w+RAuO4hLkitz4ub3UOfYxbPuthfc+ABHoDFQIhALEGxA+BKW7EfV7HoEE4oYEpGZlMIeY3/J/o58hvPqim"}]},"_npmUser":{"name":"alaguna","email":"sombragriselros@gmail.com"},"directories":{},"maintainers":[{"name":"alaguna","email":"sombragriselros@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/css-mqpacker_8.0.1_1607025704485_0.7120499549546142"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-03T20:01:44.433Z","8.0.1":"2020-12-03T20:01:44.652Z","modified":"2022-04-04T12:32:48.611Z"},"maintainers":[{"name":"alaguna","email":"sombragriselros@gmail.com"}],"description":"Pack same CSS media query rules into one using PostCSS","homepage":"https://github.com/Antonio-Laguna/node-css-mqpacker","repository":{"type":"git","url":"git+ssh://git@github.com/Antonio-Laguna/node-css-mqpacker.git"},"author":{"name":"Kyo Nagashima","email":"hail2u@gmail.com","url":"https://hail2u.net/"},"bugs":{"url":"https://github.com/Antonio-Laguna/node-css-mqpacker/issues"},"license":"MIT","readme":"CSS MQPacker\n============\n\nPack same CSS media query rules into one using PostCSS\n\n\nSYNOPSIS\n--------\n\nA well componentized CSS file may have same media queries that can merge:\n\n```css\n.foo {\n\twidth: 240px;\n}\n\n@media screen and (min-width: 768px) {\n\t.foo {\n\t\twidth: 576px;\n\t}\n}\n\n.bar {\n\twidth: 160px;\n}\n\n@media screen and (min-width: 768px) {\n\t.bar {\n\t\twidth: 384px;\n\t}\n}\n```\n\nThis tool packs exactly same media queries:\n\n```css\n.foo {\n\twidth: 240px;\n}\n\n.bar {\n\twidth: 160px;\n}\n\n@media screen and (min-width: 768px) {\n\t.foo {\n\t\twidth: 576px;\n\t}\n\t.bar {\n\t\twidth: 384px;\n\t}\n}\n```\n\nINSTALL\n-------\n\n    $ echo @hail2u:registry=https://npm.pkg.github.com >> .npmrc\n    $ npm install --save-dev @hail2u/css-mqpacker\n\nIf you or your team member does not have GitHub account, you can install\ndirectly from the GitHub repository:\n\n    $ npm install --save-dev github:hail2u/node-css-mqpacker#<TAG>\n\n`<TAG>` should be replaced with one of the [available tags][1].\n\n\nUSAGE\n-----\n\nOf course, this package can be used as PostCSS plugin:\n\n```javascript\nconst fs = require(\"fs\");\nconst postcss = require(\"postcss\");\n\npostcss([\n\trequire(\"@hail2u/css-mqpacker\")()\n]).process(fs.readFileSync(\"from.css\", \"utf8\")).then(function (result) {\n\tconsole.log(result.css);\n});\n```\n\nIt is a recommended way to use this tool.\n\n\n### As standard Node.js package\n\nThis package is also a Node.js module. For example, you can read `from.css`,\nprocess its content, and output processed CSS to STDOUT:\n\n```javascript\nconst fs = require(\"fs\");\nconst mqpacker = require(\"@hail2u/css-mqpacker\");\n\nconsole.log(mqpacker.pack(fs.readFileSync(\"from.css\", \"utf8\"), {\n\tfrom: \"from.css\",\n\tmap: {\n\t\tinline: false\n\t},\n\tto: \"to.css\"\n}).css);\n```\n\n\n### As CLI Program\n\nThis package also installs a command line interface.\n\n\n    $ node ./node_modules/.bin/mqpacker --help\n    Usage: mqpacker [options] INPUT [OUTPUT]\n    \n    Description:\n      Pack same CSS media query rules into one using PostCSS\n    \n    Options:\n      -s, --sort       Sort “min-width” queries.\n          --sourcemap  Create source map file.\n      -h, --help       Show this message.\n          --version    Print version information.\n    \n    Use a single dash for INPUT to read CSS from standard input.\n    \n    Examples:\n      $ mqpacker fragmented.css\n      $ mqpacker fragmented.css > packed.css\n\nWhen PostCSS failed to parse INPUT, CLI shows a CSS parse error in GNU error\nformat instead of Node.js stack trace.\n\nThe `--sort` option does not currently support a custom function.\n\n\nOPTIONS\n-------\n\n### sort\n\nBy default, CSS MQPacker pack and order media queries as they are defined ([the\n“first win” algorithm][2]). If you want to sort media queries automatically,\npass `sort: true` to this module.\n\n```javascript\npostcss([\n\tmqpacker({\n\t\tsort: true\n\t})\n]).process(css);\n```\n\nCurrently, this option only supports `min-width` queries with specific units\n(`ch`, `em`, `ex`, `px`, and `rem`). If you want to do more, you need to create\nyour own sorting function and pass it to this module like this:\n\n```javascript\npostcss([\n\tmqpacker({\n\t\tsort: function (a, b) {\n\t\t\treturn a.localeCompare(b);\n\t\t}\n\t})\n]).process(css);\n```\n\nIn this example, all your media queries will sort by A-Z order.\n\nThis sorting function is directly passed to `Array#sort()` method of an array of\nall your media queries.\n\n\nAPI\n---\n\n### pack(css[, options])\n\nPacks media queries in `css`.\n\nThe second argument is optional. The `options` are:\n\n- [options][3] mentioned above\n- the second argument of [PostCSS’s `process()` method][4]\n\nYou can specify both at the same time.\n\n```javascript\nconst fs = require(\"fs\");\nconst mqpacker = require(\"@hail2u/css-mqpacker\");\n\nconst result = mqpacker.pack(fs.readFileSync(\"from.css\", \"utf8\"), {\n\tfrom: \"from.css\",\n\tmap: {\n\t\tinline: false\n\t},\n\tsort: true,\n\tto: \"to.css\"\n});\nfs.writeFileSync(\"to.css\", result.css);\nfs.writeFileSync(\"to.css.map\", result.map);\n```\n\n\nNOTES\n-----\n\nWith CSS MQPacker, the processed CSS is always valid CSS, but you and your\nwebsite user will get unexpected results. This section explains how CSS MQPacker\nworks and what you should keep in mind.\n\n\n### CSS Cascading Order\n\nCSS MQPacker changes rulesets’ order. This means the processed CSS will have an\nunexpected cascading order. For example:\n\n```css\n@media (min-width: 640px) {\n\t.foo {\n\t\twidth: 300px;\n\t}\n}\n\n.foo {\n\twidth: 400px;\n}\n```\n\nBecomes:\n\n```css\n.foo {\n\twidth: 400px;\n}\n\n@media (min-width: 640px) {\n\t.foo {\n\t\twidth: 300px;\n\t}\n}\n```\n\n`.foo` is always `400px` with original CSS. With processed CSS, however, `.foo`\nis `300px` if viewport is wider than `640px`.\n\nThis does not occur on small project. However, this could occur frequently on\nlarge project. For example, if you want to override a CSS framework (like\nBootstrap) component declaration, your whole CSS code will be something similar\nto above example. To avoid this problem, you should pack only CSS you write, and\nthen concatenate with a CSS framework.\n\n\n### The “First Win” Algorithm\n\nCSS MQPacker is implemented with the “first win” algorithm. This means:\n\n```css\n.foo {\n\twidth: 10px;\n}\n\n@media (min-width: 640px) {\n\t.foo {\n\t\twidth: 150px;\n\t}\n}\n\n.bar {\n\twidth: 20px;\n}\n\n@media (min-width: 320px) {\n\t.bar {\n\t\twidth: 200px;\n\t}\n}\n\n@media (min-width: 640px) {\n\t.bar {\n\t\twidth: 300px;\n\t}\n}\n```\n\nBecomes:\n\n```css\n.foo {\n\twidth: 10px;\n}\n\n.bar {\n\twidth: 20px;\n}\n\n@media (min-width: 640px) {\n\t.foo {\n\t\twidth: 150px;\n\t}\n\t.bar {\n\t\twidth: 300px;\n\t}\n}\n\n@media (min-width: 320px) {\n\t.bar {\n\t\twidth: 200px;\n\t}\n}\n```\n\nThis breaks cascading order of `.bar`, and `.bar` will be displayed in `200px`\ninstead of `300px` even if a viewport wider than `640px`.\n\nI suggest defining a query order on top of your CSS:\n\n```css\n@media (min-width: 320px) { /* Wider than 320px */ }\n@media (min-width: 640px) { /* Wider than 640px */ }\n```\n\nIf you use simple `min-width` queries only, [the `sort` option][5] can help.\n\n\n### Multiple Classes\n\nCSS MQPacker works only with CSS. This may break CSS applying order to an\nelements that have multiple classes. For example:\n\n```css\n@media (min-width: 320px) {\n\t.foo {\n\t\twidth: 100px;\n\t}\n}\n\n@media (min-width: 640px) {\n\t.bar {\n\t\twidth: 200px;\n\t}\n}\n\n@media (min-width: 320px) {\n\t.baz {\n\t\twidth: 300px;\n\t}\n}\n```\n\nBecomes:\n\n```css\n@media (min-width: 320px) {\n\t.foo {\n\t\twidth: 100px;\n\t}\n\t.baz {\n\t\twidth: 300px;\n\t}\n}\n\n@media (min-width: 640px) {\n\t.bar {\n\t\twidth: 200px;\n\t}\n}\n```\n\nThe result looks good. However, if an HTML element has `class=\"bar baz\"` and\nviewport width larger than `640px`, that element `width` incorrectly set to\n`200px` instead of `300px`. This problem cannot be resolved only with CSS, so be\ncareful!\n\n\nLICENSE\n-------\n\nMIT\n\n\n[1]: https://github.com/hail2u/node-css-mqpacker/tags\n[2]: #the-first-win-algorithm\n[3]: #options\n[4]: http://api.postcss.org/global.html#processOptions\n[5]: #sort\n","readmeFilename":"README.md"}