{"_id":"@csstools/postcss-color-mix-function","_rev":"259823","name":"@csstools/postcss-color-mix-function","description":"Use the color-mix function in CSS","dist-tags":{"latest":"1.0.0"},"maintainers":[{"name":"alaguna","email":""},{"name":"jonathantneal","email":""}],"time":{"modified":"2023-03-27T17:09:45.000Z","created":"2023-03-25T07:57:46.322Z","1.0.0":"2023-03-25T07:57:46.322Z"},"users":{},"repository":{"type":"git","url":"git+https://github.com/csstools/postcss-plugins.git","directory":"plugins/postcss-color-mix-function"},"versions":{"1.0.0":{"name":"@csstools/postcss-color-mix-function","description":"Use the color-mix function in CSS","version":"1.0.0","contributors":[{"name":"Antonio Laguna","email":"antonio@laguna.es","url":"https://antonio.laguna.es"},{"name":"Romain Menke","email":"romainmenke@gmail.com"}],"license":"CC0-1.0","funding":{"type":"opencollective","url":"https://opencollective.com/csstools"},"engines":{"node":"^14 || ^16 || >=18"},"main":"dist/index.cjs","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs","default":"./dist/index.mjs"}},"dependencies":{"@csstools/css-color-parser":"^1.0.0","@csstools/css-parser-algorithms":"^2.0.1","@csstools/css-tokenizer":"^2.1.0","@csstools/postcss-progressive-custom-properties":"^2.0.0"},"peerDependencies":{"postcss":"^8.4"},"devDependencies":{"@csstools/postcss-tape":"*"},"scripts":{"build":"rollup -c ../../rollup/default.mjs","docs":"node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs","lint":"node ../../.github/bin/format-package-json.mjs","prepublishOnly":"npm run build && npm run test","test":"node .tape.mjs && node ./test/_import.mjs && node ./test/_require.cjs","test:rewrite-expects":"REWRITE_EXPECTS=true node .tape.mjs"},"homepage":"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function#readme","repository":{"type":"git","url":"git+https://github.com/csstools/postcss-plugins.git","directory":"plugins/postcss-color-mix-function"},"bugs":{"url":"https://github.com/csstools/postcss-plugins/issues"},"keywords":["postcss-plugin"],"csstools":{"cssdbId":"color-mix","exportName":"postcssColorMixFunction","humanReadableName":"PostCSS Color Mix Function","specUrl":"https://www.w3.org/TR/css-color-5/#color-mix"},"volta":{"extends":"../../package.json"},"gitHead":"c67aee0470876b5f0a01cd1881f83922bd1c7dba","_id":"@csstools/postcss-color-mix-function@1.0.0","_nodeVersion":"18.13.0","_npmVersion":"9.4.1","dist":{"shasum":"8d65782527eefc7228ea6fb9b6fa936e52b9b4ad","size":5948,"noattachment":false,"key":"/@csstools/postcss-color-mix-function/-/@csstools/postcss-color-mix-function-1.0.0.tgz","tarball":"http://name.csiicloud.com:7001/@csstools/postcss-color-mix-function/download/@csstools/postcss-color-mix-function-1.0.0.tgz"},"_npmUser":{"name":"alaguna","email":"sombragriselros@gmail.com"},"directories":{},"maintainers":[{"name":"alaguna","email":""},{"name":"jonathantneal","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-color-mix-function_1.0.0_1679731066131_0.08686770977349423"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-03-25T07:57:46.322Z","publish_time":1679731066322,"_cnpm_publish_time":1679731066322}},"readme":"# PostCSS Color Mix Function [![\"PostCSS](\"https://postcss.github.io/postcss/logo.svg\")
][PostCSS]\n\n[![\"npm](\"https://img.shields.io/npm/v/@csstools/postcss-color-mix-function.svg\")
][npm-url] [![\"CSS](\"https://cssdb.org/images/badges/color-mix.svg\")
][css-url] [![\"Build](\"https://github.com/csstools/postcss-plugins/workflows/test/badge.svg\")
][cli-url] [![\"Discord\"](\"https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white\")
][discord]\n\n[PostCSS Color Mix Function] lets you use the `color-mix()` function following the [CSS Color 5 Specification].\n\n```pcss\n.purple_plum {\n\tcolor: color-mix(in lch, purple 50%, plum 50%);\n}\n\n/* becomes */\n\n.purple_plum {\n\tcolor: rgb(175, 92, 174);\n}\n```\n\n## Usage\n\nAdd [PostCSS Color Mix Function] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-color-mix-function --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssColorMixFunction = require('@csstools/postcss-color-mix-function');\n\npostcss([\n\tpostcssColorMixFunction(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS Color Mix Function] runs in all Node environments, with special\ninstructions for:\n\n- [Node](INSTALL.md#node)\n- [PostCSS CLI](INSTALL.md#postcss-cli)\n- [PostCSS Load Config](INSTALL.md#postcss-load-config)\n- [Webpack](INSTALL.md#webpack)\n- [Next.js](INSTALL.md#nextjs)\n- [Gulp](INSTALL.md#gulp)\n- [Grunt](INSTALL.md#grunt)\n\n## Options\n\n### preserve\n\nThe `preserve` option determines whether the original notation\nis preserved. By default, it is not preserved.\n\n```js\npostcssColorMixFunction({ preserve: true })\n```\n\n```pcss\n.purple_plum {\n\tcolor: color-mix(in lch, purple 50%, plum 50%);\n}\n\n/* becomes */\n\n.purple_plum {\n\tcolor: rgb(175, 92, 174);\n\tcolor: color-mix(in lch, purple 50%, plum 50%);\n}\n```\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n[css-url]: https://cssdb.org/#color-mix\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-color-mix-function\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Color Mix Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function\n[CSS Color 5 Specification]: https://www.w3.org/TR/css-color-5/#color-mix\n","_attachments":{},"homepage":"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function#readme","bugs":{"url":"https://github.com/csstools/postcss-plugins/issues"},"license":"CC0-1.0"}