{"_id":"@akst.io/postcss-media-value","_rev":"5-be121e9818c1765ff3e5061ad335fec0","name":"@akst.io/postcss-media-value","description":"Declaritive values for responsive styles.","dist-tags":{"latest":"0.1.5"},"versions":{"0.1.1":{"name":"@akst.io/postcss-media-value","version":"0.1.1","description":"## About","main":"./dist/src/index.js","author":{"name":"Angus Thomsen","email":"hmu@akst.io"},"license":"MIT","publishConfig":{"access":"public"},"devDependencies":{"babel-cli":"^6.24.0","babel-eslint":"^7.2.1","babel-plugin-root-import":"^5.1.0","babel-plugin-syntax-flow":"^6.18.0","babel-plugin-transform-async-to-generator":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-plugin-transform-function-bind":"^6.22.0","babel-polyfill":"^6.23.0","babel-preset-env":"^1.3.2","babel-preset-es2016":"^6.22.0","babel-preset-stage-1":"^6.22.0","documentation":"^4.0.0-beta.18","eslint":"^3.19.0","eslint-config-standard":"^10.2.0","eslint-plugin-flowtype":"^2.30.4","eslint-plugin-import":"^2.2.0","eslint-plugin-jest":"^19.0.1","eslint-plugin-jsdoc":"^3.0.0","eslint-plugin-node":"^4.2.2","eslint-plugin-promise":"^3.5.0","eslint-plugin-standard":"^3.0.1","flow-bin":"0.49.1","flow-typed":"2.1.2","jest":"^19.0.2","npm-run-all":"^4.0.2"},"dependencies":{"postcss":"^6.0.13"},"_id":"@akst.io/postcss-media-value@0.1.1","scripts":{},"_shasum":"023bc294682e030afb0712440a820ba6a8a4fbb1","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.3","_npmUser":{"name":"akst","email":"aksthomsen@gmail.com"},"dist":{"shasum":"023bc294682e030afb0712440a820ba6a8a4fbb1","tarball":"https://registry.npmjs.org/@akst.io/postcss-media-value/-/postcss-media-value-0.1.1.tgz","integrity":"sha512-OBuxlEajwVMGYUjSQrAFW4ZKWzPexFY/uV/jFK03SVi4O7fhPGZTJ1YQ544Kr+bNxRyZQ427QixRDeZbGL1wyQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwWE/smbU2A9SPjV/PZ3C8AGOLWqdme9mHRKKZYd9IHAiEAi8VdcgbMpyxwwz+Y4n0Y2OV3vq1no6VvulJWku4x8Cs="}]},"maintainers":[{"name":"akst","email":"aksthomsen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-media-value-0.1.1.tgz_1508636957667_0.015512729529291391"}},"0.1.3":{"name":"@akst.io/postcss-media-value","version":"0.1.3","description":"Declaritive values for responsive styles.","main":"./dist/src/index.js","author":{"name":"Angus Thomsen","email":"hmu@akst.io"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/AKST/postcss-media-value.git"},"homepage":"https://github.com/AKST/postcss-media-value","bugs":{"url":"https://github.com/AKST/postcss-media-value/issues"},"keywords":["postcss","postcss-plugin","responsive","media queries","media query","css"],"publishConfig":{"access":"public"},"devDependencies":{"babel-cli":"^6.24.0","babel-eslint":"^7.2.1","babel-plugin-root-import":"^5.1.0","babel-plugin-syntax-flow":"^6.18.0","babel-plugin-transform-async-to-generator":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-plugin-transform-function-bind":"^6.22.0","babel-polyfill":"^6.23.0","babel-preset-env":"^1.3.2","babel-preset-es2016":"^6.22.0","babel-preset-stage-1":"^6.22.0","documentation":"^4.0.0-beta.18","eslint":"^3.19.0","eslint-config-standard":"^10.2.0","eslint-plugin-flowtype":"^2.30.4","eslint-plugin-import":"^2.2.0","eslint-plugin-jest":"^19.0.1","eslint-plugin-jsdoc":"^3.0.0","eslint-plugin-node":"^4.2.2","eslint-plugin-promise":"^3.5.0","eslint-plugin-standard":"^3.0.1","flow-bin":"0.49.1","flow-typed":"2.1.2","jest":"^19.0.2","npm-run-all":"^4.0.2"},"dependencies":{"postcss":"^6.0.13"},"_id":"@akst.io/postcss-media-value@0.1.3","scripts":{},"_shasum":"e0314a98e8a9fdbf227397f202ca3b0261a449d8","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.3","_npmUser":{"name":"akst","email":"aksthomsen@gmail.com"},"dist":{"shasum":"e0314a98e8a9fdbf227397f202ca3b0261a449d8","tarball":"https://registry.npmjs.org/@akst.io/postcss-media-value/-/postcss-media-value-0.1.3.tgz","integrity":"sha512-CMLL8w6RJ0tu57Fgp/yGQbbhHabovEGHmjnbih97S4vLAdFlWUiS+ClaipnvEBwxYcIXbaOg3Oetp/JqbOM8JQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHhe/7HspHybo+E+pO3kXxKTK7jzMehapElL9QjJVbgvAiEA7ppbDx8Sb7g4oAJ1RsWsE3HCLoXGKJP9ruW9F7+/u84="}]},"maintainers":[{"name":"akst","email":"aksthomsen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-media-value-0.1.3.tgz_1508638425117_0.1569907134398818"}},"0.1.4":{"name":"@akst.io/postcss-media-value","version":"0.1.4","description":"Declaritive values for responsive styles.","main":"./dist/src/index.js","author":{"name":"Angus Thomsen","email":"hmu@akst.io"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/AKST/postcss-media-value.git"},"homepage":"https://github.com/AKST/postcss-media-value","bugs":{"url":"https://github.com/AKST/postcss-media-value/issues"},"keywords":["postcss","postcss-plugin","responsive","media queries","media query","css"],"publishConfig":{"access":"public"},"devDependencies":{"babel-cli":"^6.24.0","babel-eslint":"^7.2.1","babel-plugin-root-import":"^5.1.0","babel-plugin-syntax-flow":"^6.18.0","babel-plugin-transform-async-to-generator":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-plugin-transform-function-bind":"^6.22.0","babel-polyfill":"^6.23.0","babel-preset-env":"^1.3.2","babel-preset-es2016":"^6.22.0","babel-preset-stage-1":"^6.22.0","documentation":"^4.0.0-beta.18","eslint":"^3.19.0","eslint-config-standard":"^10.2.0","eslint-plugin-flowtype":"^2.30.4","eslint-plugin-import":"^2.2.0","eslint-plugin-jest":"^19.0.1","eslint-plugin-jsdoc":"^3.0.0","eslint-plugin-node":"^4.2.2","eslint-plugin-promise":"^3.5.0","eslint-plugin-standard":"^3.0.1","flow-bin":"0.49.1","flow-typed":"2.1.2","jest":"^19.0.2","npm-run-all":"^4.0.2"},"dependencies":{"postcss":"^6.0.13"},"_id":"@akst.io/postcss-media-value@0.1.4","scripts":{},"_shasum":"8f34b262e8660948b74f048587d46a2c371b48bf","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.3","_npmUser":{"name":"akst","email":"aksthomsen@gmail.com"},"dist":{"shasum":"8f34b262e8660948b74f048587d46a2c371b48bf","tarball":"https://registry.npmjs.org/@akst.io/postcss-media-value/-/postcss-media-value-0.1.4.tgz","integrity":"sha512-Wi6eqYm9Qb2S1un0MvRA8VL9VyAENAEUXXEVZOGOpivLg3QcIndkiy/kmQvPk5L1LBMZbS9rApMf2f582kKtcA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDaLb/EmSqtZffudxlWhxoVuZpxd9tbWcpsOcAiWD24VAiEAgH6y4VCp7i9rjunzfJlgUYOb69jz9wEMIyENRQuR/eM="}]},"maintainers":[{"name":"akst","email":"aksthomsen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-media-value-0.1.4.tgz_1508643945016_0.6185083312448114"}},"0.1.5":{"name":"@akst.io/postcss-media-value","version":"0.1.5","description":"Declaritive values for responsive styles.","main":"./dist/src/index.js","author":{"name":"Angus Thomsen","email":"hmu@akst.io"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/AKST/postcss-media-value.git"},"homepage":"https://github.com/AKST/postcss-media-value","bugs":{"url":"https://github.com/AKST/postcss-media-value/issues"},"keywords":["postcss","postcss-plugin","responsive","media queries","media query","css"],"publishConfig":{"access":"public"},"devDependencies":{"babel-cli":"^6.24.0","babel-eslint":"^7.2.1","babel-plugin-root-import":"^5.1.0","babel-plugin-syntax-flow":"^6.18.0","babel-plugin-transform-async-to-generator":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-plugin-transform-function-bind":"^6.22.0","babel-polyfill":"^6.23.0","babel-preset-env":"^1.3.2","babel-preset-es2016":"^6.22.0","babel-preset-stage-1":"^6.22.0","documentation":"^4.0.0-beta.18","eslint":"^3.19.0","eslint-config-standard":"^10.2.0","eslint-plugin-flowtype":"^2.30.4","eslint-plugin-import":"^2.2.0","eslint-plugin-jest":"^19.0.1","eslint-plugin-jsdoc":"^3.0.0","eslint-plugin-node":"^4.2.2","eslint-plugin-promise":"^3.5.0","eslint-plugin-standard":"^3.0.1","flow-bin":"0.49.1","flow-typed":"2.1.2","jest":"^19.0.2","npm-run-all":"^4.0.2"},"dependencies":{"postcss":"^6.0.13"},"_id":"@akst.io/postcss-media-value@0.1.5","scripts":{},"_shasum":"512ffde0f2d21d0aed403ac00aa3d6f1115d4d32","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.3","_npmUser":{"name":"akst","email":"aksthomsen@gmail.com"},"dist":{"shasum":"512ffde0f2d21d0aed403ac00aa3d6f1115d4d32","tarball":"https://registry.npmjs.org/@akst.io/postcss-media-value/-/postcss-media-value-0.1.5.tgz","integrity":"sha512-Gk/75AJ+3VwYWSvZ7yDwphI/2opRZfr4avN68uAhjnCN655kZfoyHMAdR9gBEJ15TwFh//Q0Oznj5scya8Vymw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHzNKO3472a3KXv3AfxVua0TvpJGd7wyI+aWik5iUvqbAiEAy9P+SYVvns8W8xIXZa2yfQhFpksLzM+HjNxWmUMD0Kg="}]},"maintainers":[{"name":"akst","email":"aksthomsen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-media-value-0.1.5.tgz_1509336909181_0.5652716939803213"}}},"readme":"# PostCSS Media Value\n\n## About\n\nThis is a [postCSS][PostCSS] plugin that allows you to define a responsive\nvalue. For reuse I recommend you use something like [CSS modules][CSSModules],\nwith [CSS Modules values][CSSModulesValues].\n\n## Installation\n\n```bash\nyarn add @akst.io/postcss-media-value\n```\n\nUpdate your build\n\n```js\n/* \"your build\" */\nconst postcssMediaValue = require('@akst.io/postcss-media-value');\n\nconst plugins = [\n  // this is optional, but possibly required\n  // depending on your css modules implementation\n  new postcssMediaValue.CSSModulePrep({}),\n\n  new CSSModules({}),\n  new postcssMediaValue.MediaValue({}),\n];\n\n```\n\n## Features\n\n- **Value based**\n  - Designed for CSS Modules.\n- **Declaritive**\n  - Can be nested in an expresssion like, `solid $borderSize black`\n  - Properties can be the value itself like `$borderSize`\n  - Properties can include multiple values `$verticalPadding $horizontalPadding`\n  - Optional fallback\n- **Mimumimal output**\n  - Only produces as much output as required\n- **Correctness**\n  - Error messages for non exhaustive media queries when two values\n    are used to together\n  - Trys to retain the original ordering as much as possible\n    - There are currently some quirks that need to be addressed in some\n      edge cases, see [this issue][issue/1] for more information.\n\n[issue/1]: https://github.com/AKST/postcss-media-value/issues/1\n\n## Usage\n\nSay you defined your config in some file, and you're using css modules.\n\n```css\n/* app/styles/grid.css */\n@value mobile: only screen and (max-width: 375px);\n@value desktop: only screen and (min-width: 376px);\n\n/* ignore the terrible breakpoints */\n@value basePadding: media-value(\n  case: \"desktop\" as: \"20px\",\n  case: \"mobile\" as: \"10px\",\n  else: \"0\",\n);\n\n@value lineHeight: media-value(\n  case: \"desktop\" as: \"20px\",\n  case: \"mobile\" as: \"16px\",\n  else: \"1em\",\n);\n\n/* note that these media value arguements\n * allow for trailing commas ;) */\n@value lineCount: media-value(\n  case: \"desktop\" as: \"4\",\n  else: \"2\"\n);\n```\n\nAnd you want to import, so you do so and use it like this.\n\n```css\n@value grid: 'app/styles/grid';\n@value basePadding, lineHeight, lineCount from grid;\n\n.tile {\n  padding: basePadding;\n  height: calc(lineHeight * lineCount);\n}\n```\n\nYou end up with this.\n\n```css\n/* Note the 'else' caluse is the first rule as 'else'\n * kinda has fallback semantics. This way it has the\n * least priority. However if unspecified, the original\n * declartion will be removed. */\n.tile { padding: 0; height: calc(1em * 2); }\n\n/* Also note how the first rule in the value defintition\n * appears after the original rule. This way the is a sense\n * of predictable ordering. */\n@media only screen and (min-width: 376px) {\n  /* note how the two properties who shared the media query\n   * didn't end up in a different rule */\n  .tile { padding: 20px; height: calc(20px * 4); }\n}\n\n@media only screen and (max-width: 375px) {\n  /* note that even though we never specfied a case\n   * for this lineCount in this media query, it picked\n   * a value, and that's because a default value was\n   * specified for it. */\n  .tile { padding: 10px; height: calc(16px * 2); }\n}\n```\n\n\n### More examples\n\nSee the examples folders.\n\n## Contributing\n\n> TL;DR run `make ci` on code before submitting a pull request.\n\n### Workflow\n\nI'm down with anyone contributing, try creating an issue first if\nyou have a feature idea or find a bug, just so I can track somewhere.\nThe only really thing I expect of contributed changes is that they're\nrun against the type checker, linter, and tests. You can do that by\nrunning\n\n```\nmake ci\n```\n\nIf you have [watchman][watchman] installed, just run this for repeated\ntests in the background.\n\n```\nmake watch\n```\n\nYou'll also want to install [Flow][Flow].\n\n### Tests\n\nWe use Jest for the tests, but all you really know is to run `make test`.\n\n### Linting & Code Style\n\nI prefer to let the linter define the rules, so just run `make lint`.\n\n[Flow]: https://flow.org\n[watchman]: https://facebook.github.io/watchman/\n[PostCSS]: http://postcss.org\n[CSSModules]: https://github.com/css-modules/css-modules\n[CSSModulesValues]: https://github.com/css-modules/postcss-icss-values\n","maintainers":[{"name":"akst","email":"aksthomsen@gmail.com"}],"time":{"modified":"2022-06-12T14:27:16.820Z","created":"2017-10-22T01:49:17.789Z","0.1.1":"2017-10-22T01:49:17.789Z","0.1.3":"2017-10-22T02:13:45.447Z","0.1.4":"2017-10-22T03:45:45.084Z","0.1.5":"2017-10-30T04:15:09.273Z"},"author":{"name":"Angus Thomsen","email":"hmu@akst.io"},"license":"MIT","readmeFilename":"README.md","homepage":"https://github.com/AKST/postcss-media-value","keywords":["postcss","postcss-plugin","responsive","media queries","media query","css"],"repository":{"type":"git","url":"git+ssh://git@github.com/AKST/postcss-media-value.git"},"bugs":{"url":"https://github.com/AKST/postcss-media-value/issues"}}