8889841cREADME.md000066600000002052150435511620006030 0ustar00# [postcss][postcss]-minify-gradients > Minify gradient parameters with PostCSS. ## Install With [npm](https://npmjs.org/package/postcss-minify-gradients) do: ``` npm install postcss-minify-gradients ``` ## Example Where possible, this module will minify gradient parameters. It can convert linear gradient directional syntax to angles, remove the unnecessary `0%` and `100%` start and end values, and minimise color stops that use the same length values (the browser will adjust the value automatically). ### Input ```css h1 { background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%) } ``` ### Output ```css h1 { background: linear-gradient(180deg, #ffe500, #ffe500 50%, #121 0, #121) } ``` ## Usage See the [PostCSS documentation](https://github.com/postcss/postcss#usage) for examples for your environment. ## Contributors See [CONTRIBUTORS.md](https://github.com/cssnano/cssnano/blob/master/CONTRIBUTORS.md). ## License MIT © [Ben Briggs](http://beneb.info) [postcss]: https://github.com/postcss/postcss src/index.js000066600000012400150435511620007003 0ustar00'use strict'; const valueParser = require('postcss-value-parser'); const { getArguments } = require('cssnano-utils'); const isColorStop = require('./isColorStop.js'); const angles = { top: '0deg', right: '90deg', bottom: '180deg', left: '270deg', }; /** * @param {valueParser.Dimension} a * @param {valueParser.Dimension} b * @return {boolean} */ function isLessThan(a, b) { return ( a.unit.toLowerCase() === b.unit.toLowerCase() && parseFloat(a.number) >= parseFloat(b.number) ); } /** * @param {import('postcss').Declaration} decl * @return {void} */ function optimise(decl) { const value = decl.value; if (!value) { return; } const normalizedValue = value.toLowerCase(); if (normalizedValue.includes('var(') || normalizedValue.includes('env(')) { return; } if (!normalizedValue.includes('gradient')) { return; } decl.value = valueParser(value) .walk((node) => { if (node.type !== 'function' || !node.nodes.length) { return false; } const lowerCasedValue = node.value.toLowerCase(); if ( lowerCasedValue === 'linear-gradient' || lowerCasedValue === 'repeating-linear-gradient' || lowerCasedValue === '-webkit-linear-gradient' || lowerCasedValue === '-webkit-repeating-linear-gradient' ) { let args = getArguments(node); if ( node.nodes[0].value.toLowerCase() === 'to' && args[0].length === 3 ) { node.nodes = node.nodes.slice(2); node.nodes[0].value = angles[ /** @type {'top'|'right'|'bottom'|'left'}*/ ( node.nodes[0].value.toLowerCase() ) ]; } /** @type {valueParser.Dimension | false} */ let lastStop; args.forEach((arg, index) => { if (arg.length !== 3) { return; } let isFinalStop = index === args.length - 1; let thisStop = valueParser.unit(arg[2].value); if (lastStop === undefined) { lastStop = thisStop; if ( !isFinalStop && lastStop && lastStop.number === '0' && lastStop.unit.toLowerCase() !== 'deg' ) { arg[1].value = arg[2].value = ''; } return; } if (lastStop && thisStop && isLessThan(lastStop, thisStop)) { arg[2].value = '0'; } lastStop = thisStop; if (isFinalStop && arg[2].value === '100%') { arg[1].value = arg[2].value = ''; } }); return false; } if ( lowerCasedValue === 'radial-gradient' || lowerCasedValue === 'repeating-radial-gradient' ) { let args = getArguments(node); /** @type {valueParser.Dimension | false} */ let lastStop; const hasAt = args[0].find((n) => n.value.toLowerCase() === 'at'); args.forEach((arg, index) => { if (!arg[2] || (!index && hasAt)) { return; } let thisStop = valueParser.unit(arg[2].value); if (!lastStop) { lastStop = thisStop; return; } if (lastStop && thisStop && isLessThan(lastStop, thisStop)) { arg[2].value = '0'; } lastStop = thisStop; }); return false; } if ( lowerCasedValue === '-webkit-radial-gradient' || lowerCasedValue === '-webkit-repeating-radial-gradient' ) { let args = getArguments(node); /** @type {valueParser.Dimension | false} */ let lastStop; args.forEach((arg) => { let color; let stop; if (arg[2] !== undefined) { if (arg[0].type === 'function') { color = `${arg[0].value}(${valueParser.stringify(arg[0].nodes)})`; } else { color = arg[0].value; } if (arg[2].type === 'function') { stop = `${arg[2].value}(${valueParser.stringify(arg[2].nodes)})`; } else { stop = arg[2].value; } } else { if (arg[0].type === 'function') { color = `${arg[0].value}(${valueParser.stringify(arg[0].nodes)})`; } color = arg[0].value; } color = color.toLowerCase(); const colorStop = stop !== undefined ? isColorStop(color, stop.toLowerCase()) : isColorStop(color); if (!colorStop || !arg[2]) { return; } let thisStop = valueParser.unit(arg[2].value); if (!lastStop) { lastStop = thisStop; return; } if (lastStop && thisStop && isLessThan(lastStop, thisStop)) { arg[2].value = '0'; } lastStop = thisStop; }); return false; } }) .toString(); } /** * @type {import('postcss').PluginCreator} * @return {import('postcss').Plugin} */ function pluginCreator() { return { postcssPlugin: 'postcss-minify-gradients', OnceExit(css) { css.walkDecls(optimise); }, }; } pluginCreator.postcss = true; module.exports = pluginCreator; src/isColorStop.js000066600000002221150435511620010154 0ustar00'use strict'; const { unit } = require('postcss-value-parser'); const { colord, extend } = require('colord'); const namesPlugin = require('colord/plugins/names'); extend([/** @type {any} */ (namesPlugin)]); /* Code derived from https://github.com/pigcan/is-color-stop */ const lengthUnits = new Set([ 'PX', 'IN', 'CM', 'MM', 'EM', 'REM', 'POINTS', 'PC', 'EX', 'CH', 'VW', 'VH', 'VMIN', 'VMAX', '%', ]); /** * @param {string} input * @return {boolean} */ function isCSSLengthUnit(input) { return lengthUnits.has(input.toUpperCase()); } /** * @param {string|undefined} str * @return {boolean} */ function isStop(str) { if (str) { let stop = false; const node = unit(str); if (node) { const number = Number(node.number); if (number === 0 || (!isNaN(number) && isCSSLengthUnit(node.unit))) { stop = true; } } else { stop = /^calc\(\S+\)$/g.test(str); } return stop; } return true; } /** * @param {string} color * @param {string} [stop] * @return {boolean} */ module.exports = function isColorStop(color, stop) { return colord(color).isValid() && isStop(stop); }; types/isColorStop.d.ts000066600000000141150435511620010764 0ustar00declare function _exports(color: string, stop?: string | undefined): boolean; export = _exports; types/index.d.ts000066600000000360150435511620007616 0ustar00export = pluginCreator; /** * @type {import('postcss').PluginCreator} * @return {import('postcss').Plugin} */ declare function pluginCreator(): import('postcss').Plugin; declare namespace pluginCreator { const postcss: true; } LICENSE-MIT000066600000002104150435511620006203 0ustar00Copyright (c) Ben Briggs (http://beneb.info) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. package.json000066600000003736150435511620007051 0ustar00{ "name": "postcss-minify-gradients", "version": "5.1.1", "description": "Minify gradient parameters with PostCSS.", "main": "src/index.js", "types": "types/index.d.ts", "files": [ "LICENSE-MIT", "src", "types" ], "keywords": [ "css", "postcss", "postcss-plugin" ], "license": "MIT", "homepage": "https://github.com/cssnano/cssnano", "author": { "name": "Ben Briggs", "email": "beneb.info@gmail.com", "url": "http://beneb.info" }, "repository": "cssnano/cssnano", "dependencies": { "colord": "^2.9.1", "cssnano-utils": "^3.1.0", "postcss-value-parser": "^4.2.0" }, "bugs": { "url": "https://github.com/cssnano/cssnano/issues" }, "engines": { "node": "^10 || ^12 || >=14.0" }, "devDependencies": { "postcss": "^8.2.15" }, "peerDependencies": { "postcss": "^8.2.15" }, "readme": "# [postcss][postcss]-minify-gradients\n\n> Minify gradient parameters with PostCSS.\n\n## Install\n\nWith [npm](https://npmjs.org/package/postcss-minify-gradients) do:\n\n```\nnpm install postcss-minify-gradients\n```\n\n\n## Example\n\nWhere possible, this module will minify gradient parameters. It can convert\nlinear gradient directional syntax to angles, remove the unnecessary `0%` and\n`100%` start and end values, and minimise color stops that use the same length\nvalues (the browser will adjust the value automatically).\n\n### Input\n\n```css\nh1 {\n background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%)\n}\n```\n\n### Output\n\n```css\nh1 {\n background: linear-gradient(180deg, #ffe500, #ffe500 50%, #121 0, #121)\n}\n```\n\n\n## Usage\n\nSee the [PostCSS documentation](https://github.com/postcss/postcss#usage) for\nexamples for your environment.\n\n\n## Contributors\n\nSee [CONTRIBUTORS.md](https://github.com/cssnano/cssnano/blob/master/CONTRIBUTORS.md).\n\n\n## License\n\nMIT © [Ben Briggs](http://beneb.info)\n\n[postcss]: https://github.com/postcss/postcss\n" }