postcss-image-set-function
Advanced tools
| {"version":3,"file":"index.cjs.js","sources":["lib/get-comma.js","lib/get-image.js","lib/get-media.js","lib/handle-invalidation.js","lib/process-image-set.js","index.js"],"sourcesContent":["// return whether a node is a valid comma\nexport default node => Object(node).type === 'comma';\n","const imageSetFunctionMatchRegExp = /^(-webkit-)?image-set$/i\n\n// return a valid image\nexport default node =>\n\t// <url> | <image()> | <cross-fade()> | <gradient>\n\t// the image-set() function can not be nested inside of itself\n\tObject(node).type === 'func' && /^(cross-fade|image|(repeating-)?(conic|linear|radial)-gradient|url)$/i.test(node.value) && !(\n\t\tnode.parent.parent && node.parent.parent.type === 'func' && imageSetFunctionMatchRegExp.test(node.parent.parent.value)\n\t)\n\t? String(node)\n: Object(node).type === 'string'\n\t? node.value\n: false;\n","import postcss from 'postcss';\n\nconst dpiRatios = { dpcm: 2.54, dpi: 1, dppx: 96, x: 96 };\n\n// return a valid @media rule\nexport default (node, mediasByDpr) => {\n\tif (Object(node).type === 'number' && node.unit in dpiRatios) {\n\t\t// calculate min-device-pixel-ratio and min-resolution\n\t\tconst dpi = Number(node.value) * dpiRatios[node.unit.toLowerCase()];\n\t\tconst dpr = Math.floor(dpi / dpiRatios.x * 100) / 100;\n\n\t\tif (dpi in mediasByDpr) {\n\t\t\treturn false;\n\t\t} else {\n\t\t\tconst media = mediasByDpr[dpi] = postcss.atRule({\n\t\t\t\tname: 'media',\n\t\t\t\tparams: `(-webkit-min-device-pixel-ratio: ${dpr}), (min-resolution: ${dpi}dpi)`\n\t\t\t});\n\n\t\t\treturn media;\n\t\t}\n\t} else {\n\t\treturn false;\n\t}\n};\n","export default (opts, message, word) => {\n\tif (opts.oninvalid === 'warn') {\n\t\topts.decl.warn(opts.result, message, { word: String(word) });\n\t} else if (opts.oninvalid === 'throw') {\n\t\tthrow opts.decl.error(message, { word: String(word) });\n\t}\n};\n","import getComma from './get-comma';\nimport getImage from './get-image';\nimport getMedia from './get-media';\nimport handleInvalidation from './handle-invalidation';\n\nexport default (imageSetOptionNodes, decl, opts) => {\n\tconst parent = decl.parent;\n\tconst mediasByDpr = {};\n\n\tlet length = imageSetOptionNodes.length;\n\tlet index = -1;\n\n\twhile (index < length) {\n\t\tconst [comma, value, media] = [\n\t\t\tindex < 0 ? true : getComma(imageSetOptionNodes[index]),\n\t\t\tgetImage(imageSetOptionNodes[index + 1]),\n\t\t\tgetMedia(imageSetOptionNodes[index + 2], mediasByDpr)\n\t\t];\n\n\t\t// handle invalidations\n\t\tif (!comma) {\n\t\t\treturn handleInvalidation(opts, 'unexpected comma', imageSetOptionNodes[index]);\n\t\t} else if (!value) {\n\t\t\treturn handleInvalidation(opts, 'unexpected image', imageSetOptionNodes[index + 1]);\n\t\t} else if (!media) {\n\t\t\treturn handleInvalidation(opts, 'unexpected resolution', imageSetOptionNodes[index + 2]);\n\t\t}\n\n\t\t// prepare @media { decl: <image> }\n\t\tconst parentClone = parent.clone().removeAll();\n\t\tconst declClone = decl.clone({ value });\n\n\t\tparentClone.append(declClone);\n\t\tmedia.append(parentClone);\n\n\t\tindex += 3\n\t}\n\n\tconst medias = Object.keys(mediasByDpr).sort((a, b) => a - b).map(params => mediasByDpr[params]);\n\n\t// conditionally prepend previous siblings\n\tif (medias.length) {\n\t\tconst firstDecl = medias[0].nodes[0].nodes[0];\n\n\t\tif (medias.length === 1) {\n\t\t\tdecl.value = firstDecl.value\n\t\t} else {\n\t\t\tconst siblings = parent.nodes;\n\t\t\tconst previousSiblings = siblings.slice(0, siblings.indexOf(decl)).concat(firstDecl);\n\n\t\t\tif (previousSiblings.length) {\n\t\t\t\tconst parentClone = parent.cloneBefore().removeAll();\n\n\t\t\t\tparentClone.append(previousSiblings);\n\t\t\t}\n\n\t\t\t// prepend any @media { decl: <image> } rules\n\t\t\tparent.before(medias.slice(1));\n\n\t\t\t// conditionally remove the current rule\n\t\t\tif (!opts.preserve) {\n\t\t\t\tdecl.remove();\n\n\t\t\t\t// and then conditionally remove its parent\n\t\t\t\tif (!parent.nodes.length) {\n\t\t\t\t\tparent.remove();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import postcss from 'postcss';\nimport parser from 'postcss-values-parser';\nimport processImageSet from './lib/process-image-set';\n\nconst imageSetValueMatchRegExp = /(^|[^\\w-])(-webkit-)?image-set\\(/\nconst imageSetFunctionMatchRegExp = /^(-webkit-)?image-set$/i\n\nexport default postcss.plugin('postcss-image-set-function', opts => {\n\t// prepare options\n\tconst preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true;\n\tconst oninvalid = 'oninvalid' in Object(opts) ? opts.oninvalid : 'ignore';\n\n\treturn (root, result) => {\n\t\t// for every declaration\n\t\troot.walkDecls(decl => {\n\t\t\tconst { value } = decl;\n\n\t\t\t// if a declaration likely uses an image-set() function\n\t\t\tif (imageSetValueMatchRegExp.test(value)) {\n\t\t\t\tconst ast = parser(value).parse();\n\n\t\t\t\t// process every image-set() function\n\t\t\t\tast.walkType('func', node => {\n\t\t\t\t\tif (imageSetFunctionMatchRegExp.test(node.value)) {\n\t\t\t\t\t\tprocessImageSet(\n\t\t\t\t\t\t\tnode.nodes.slice(1, -1),\n\t\t\t\t\t\t\tdecl,\n\t\t\t\t\t\t\t{ decl, oninvalid, preserve, result }\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t}\n});\n"],"names":["node","Object","type","imageSetFunctionMatchRegExp","test","value","parent","String","dpiRatios","dpcm","dpi","dppx","x","mediasByDpr","unit","Number","toLowerCase","dpr","Math","floor","media","postcss","atRule","name","params","opts","message","word","oninvalid","decl","warn","result","error","imageSetOptionNodes","length","index","getComma","getImage","getMedia","comma","handleInvalidation","parentClone","clone","removeAll","declClone","append","medias","keys","sort","a","b","map","firstDecl","nodes","siblings","previousSiblings","slice","indexOf","concat","cloneBefore","before","preserve","remove","imageSetValueMatchRegExp","plugin","Boolean","root","walkDecls","ast","parser","parse","walkType","processImageSet"],"mappings":"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"} |
+142
| import postcss from 'postcss'; | ||
| import parser from 'postcss-values-parser'; | ||
| // return whether a node is a valid comma | ||
| var getComma = (node => Object(node).type === 'comma'); | ||
| const imageSetFunctionMatchRegExp = /^(-webkit-)?image-set$/i; // return a valid image | ||
| var getImage = (node => // <url> | <image()> | <cross-fade()> | <gradient> | ||
| // the image-set() function can not be nested inside of itself | ||
| Object(node).type === 'func' && /^(cross-fade|image|(repeating-)?(conic|linear|radial)-gradient|url)$/i.test(node.value) && !(node.parent.parent && node.parent.parent.type === 'func' && imageSetFunctionMatchRegExp.test(node.parent.parent.value)) ? String(node) : Object(node).type === 'string' ? node.value : false); | ||
| const dpiRatios = { | ||
| dpcm: 2.54, | ||
| dpi: 1, | ||
| dppx: 96, | ||
| x: 96 | ||
| }; // return a valid @media rule | ||
| var getMedia = ((node, mediasByDpr) => { | ||
| if (Object(node).type === 'number' && node.unit in dpiRatios) { | ||
| // calculate min-device-pixel-ratio and min-resolution | ||
| const dpi = Number(node.value) * dpiRatios[node.unit.toLowerCase()]; | ||
| const dpr = Math.floor(dpi / dpiRatios.x * 100) / 100; | ||
| if (dpi in mediasByDpr) { | ||
| return false; | ||
| } else { | ||
| const media = mediasByDpr[dpi] = postcss.atRule({ | ||
| name: 'media', | ||
| params: `(-webkit-min-device-pixel-ratio: ${dpr}), (min-resolution: ${dpi}dpi)` | ||
| }); | ||
| return media; | ||
| } | ||
| } else { | ||
| return false; | ||
| } | ||
| }); | ||
| var handleInvalidation = ((opts, message, word) => { | ||
| if (opts.oninvalid === 'warn') { | ||
| opts.decl.warn(opts.result, message, { | ||
| word: String(word) | ||
| }); | ||
| } else if (opts.oninvalid === 'throw') { | ||
| throw opts.decl.error(message, { | ||
| word: String(word) | ||
| }); | ||
| } | ||
| }); | ||
| var processImageSet = ((imageSetOptionNodes, decl, opts) => { | ||
| const parent = decl.parent; | ||
| const mediasByDpr = {}; | ||
| let length = imageSetOptionNodes.length; | ||
| let index = -1; | ||
| while (index < length) { | ||
| const _ref = [index < 0 ? true : getComma(imageSetOptionNodes[index]), getImage(imageSetOptionNodes[index + 1]), getMedia(imageSetOptionNodes[index + 2], mediasByDpr)], | ||
| comma = _ref[0], | ||
| value = _ref[1], | ||
| media = _ref[2]; // handle invalidations | ||
| if (!comma) { | ||
| return handleInvalidation(opts, 'unexpected comma', imageSetOptionNodes[index]); | ||
| } else if (!value) { | ||
| return handleInvalidation(opts, 'unexpected image', imageSetOptionNodes[index + 1]); | ||
| } else if (!media) { | ||
| return handleInvalidation(opts, 'unexpected resolution', imageSetOptionNodes[index + 2]); | ||
| } // prepare @media { decl: <image> } | ||
| const parentClone = parent.clone().removeAll(); | ||
| const declClone = decl.clone({ | ||
| value | ||
| }); | ||
| parentClone.append(declClone); | ||
| media.append(parentClone); | ||
| index += 3; | ||
| } | ||
| const medias = Object.keys(mediasByDpr).sort((a, b) => a - b).map(params => mediasByDpr[params]); // conditionally prepend previous siblings | ||
| if (medias.length) { | ||
| const firstDecl = medias[0].nodes[0].nodes[0]; | ||
| if (medias.length === 1) { | ||
| decl.value = firstDecl.value; | ||
| } else { | ||
| const siblings = parent.nodes; | ||
| const previousSiblings = siblings.slice(0, siblings.indexOf(decl)).concat(firstDecl); | ||
| if (previousSiblings.length) { | ||
| const parentClone = parent.cloneBefore().removeAll(); | ||
| parentClone.append(previousSiblings); | ||
| } // prepend any @media { decl: <image> } rules | ||
| parent.before(medias.slice(1)); // conditionally remove the current rule | ||
| if (!opts.preserve) { | ||
| decl.remove(); // and then conditionally remove its parent | ||
| if (!parent.nodes.length) { | ||
| parent.remove(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| const imageSetValueMatchRegExp = /(^|[^\w-])(-webkit-)?image-set\(/; | ||
| const imageSetFunctionMatchRegExp$1 = /^(-webkit-)?image-set$/i; | ||
| var index = postcss.plugin('postcss-image-set-function', opts => { | ||
| // prepare options | ||
| const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; | ||
| const oninvalid = 'oninvalid' in Object(opts) ? opts.oninvalid : 'ignore'; | ||
| return (root, result) => { | ||
| // for every declaration | ||
| root.walkDecls(decl => { | ||
| const value = decl.value; // if a declaration likely uses an image-set() function | ||
| if (imageSetValueMatchRegExp.test(value)) { | ||
| const ast = parser(value).parse(); // process every image-set() function | ||
| ast.walkType('func', node => { | ||
| if (imageSetFunctionMatchRegExp$1.test(node.value)) { | ||
| processImageSet(node.nodes.slice(1, -1), decl, { | ||
| decl, | ||
| oninvalid, | ||
| preserve, | ||
| result | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| }; | ||
| }); | ||
| export default index; | ||
| //# sourceMappingURL=index.es.mjs.map |
| {"version":3,"file":"index.es.mjs","sources":["lib/get-comma.js","lib/get-image.js","lib/get-media.js","lib/handle-invalidation.js","lib/process-image-set.js","index.js"],"sourcesContent":["// return whether a node is a valid comma\nexport default node => Object(node).type === 'comma';\n","const imageSetFunctionMatchRegExp = /^(-webkit-)?image-set$/i\n\n// return a valid image\nexport default node =>\n\t// <url> | <image()> | <cross-fade()> | <gradient>\n\t// the image-set() function can not be nested inside of itself\n\tObject(node).type === 'func' && /^(cross-fade|image|(repeating-)?(conic|linear|radial)-gradient|url)$/i.test(node.value) && !(\n\t\tnode.parent.parent && node.parent.parent.type === 'func' && imageSetFunctionMatchRegExp.test(node.parent.parent.value)\n\t)\n\t? String(node)\n: Object(node).type === 'string'\n\t? node.value\n: false;\n","import postcss from 'postcss';\n\nconst dpiRatios = { dpcm: 2.54, dpi: 1, dppx: 96, x: 96 };\n\n// return a valid @media rule\nexport default (node, mediasByDpr) => {\n\tif (Object(node).type === 'number' && node.unit in dpiRatios) {\n\t\t// calculate min-device-pixel-ratio and min-resolution\n\t\tconst dpi = Number(node.value) * dpiRatios[node.unit.toLowerCase()];\n\t\tconst dpr = Math.floor(dpi / dpiRatios.x * 100) / 100;\n\n\t\tif (dpi in mediasByDpr) {\n\t\t\treturn false;\n\t\t} else {\n\t\t\tconst media = mediasByDpr[dpi] = postcss.atRule({\n\t\t\t\tname: 'media',\n\t\t\t\tparams: `(-webkit-min-device-pixel-ratio: ${dpr}), (min-resolution: ${dpi}dpi)`\n\t\t\t});\n\n\t\t\treturn media;\n\t\t}\n\t} else {\n\t\treturn false;\n\t}\n};\n","export default (opts, message, word) => {\n\tif (opts.oninvalid === 'warn') {\n\t\topts.decl.warn(opts.result, message, { word: String(word) });\n\t} else if (opts.oninvalid === 'throw') {\n\t\tthrow opts.decl.error(message, { word: String(word) });\n\t}\n};\n","import getComma from './get-comma';\nimport getImage from './get-image';\nimport getMedia from './get-media';\nimport handleInvalidation from './handle-invalidation';\n\nexport default (imageSetOptionNodes, decl, opts) => {\n\tconst parent = decl.parent;\n\tconst mediasByDpr = {};\n\n\tlet length = imageSetOptionNodes.length;\n\tlet index = -1;\n\n\twhile (index < length) {\n\t\tconst [comma, value, media] = [\n\t\t\tindex < 0 ? true : getComma(imageSetOptionNodes[index]),\n\t\t\tgetImage(imageSetOptionNodes[index + 1]),\n\t\t\tgetMedia(imageSetOptionNodes[index + 2], mediasByDpr)\n\t\t];\n\n\t\t// handle invalidations\n\t\tif (!comma) {\n\t\t\treturn handleInvalidation(opts, 'unexpected comma', imageSetOptionNodes[index]);\n\t\t} else if (!value) {\n\t\t\treturn handleInvalidation(opts, 'unexpected image', imageSetOptionNodes[index + 1]);\n\t\t} else if (!media) {\n\t\t\treturn handleInvalidation(opts, 'unexpected resolution', imageSetOptionNodes[index + 2]);\n\t\t}\n\n\t\t// prepare @media { decl: <image> }\n\t\tconst parentClone = parent.clone().removeAll();\n\t\tconst declClone = decl.clone({ value });\n\n\t\tparentClone.append(declClone);\n\t\tmedia.append(parentClone);\n\n\t\tindex += 3\n\t}\n\n\tconst medias = Object.keys(mediasByDpr).sort((a, b) => a - b).map(params => mediasByDpr[params]);\n\n\t// conditionally prepend previous siblings\n\tif (medias.length) {\n\t\tconst firstDecl = medias[0].nodes[0].nodes[0];\n\n\t\tif (medias.length === 1) {\n\t\t\tdecl.value = firstDecl.value\n\t\t} else {\n\t\t\tconst siblings = parent.nodes;\n\t\t\tconst previousSiblings = siblings.slice(0, siblings.indexOf(decl)).concat(firstDecl);\n\n\t\t\tif (previousSiblings.length) {\n\t\t\t\tconst parentClone = parent.cloneBefore().removeAll();\n\n\t\t\t\tparentClone.append(previousSiblings);\n\t\t\t}\n\n\t\t\t// prepend any @media { decl: <image> } rules\n\t\t\tparent.before(medias.slice(1));\n\n\t\t\t// conditionally remove the current rule\n\t\t\tif (!opts.preserve) {\n\t\t\t\tdecl.remove();\n\n\t\t\t\t// and then conditionally remove its parent\n\t\t\t\tif (!parent.nodes.length) {\n\t\t\t\t\tparent.remove();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import postcss from 'postcss';\nimport parser from 'postcss-values-parser';\nimport processImageSet from './lib/process-image-set';\n\nconst imageSetValueMatchRegExp = /(^|[^\\w-])(-webkit-)?image-set\\(/\nconst imageSetFunctionMatchRegExp = /^(-webkit-)?image-set$/i\n\nexport default postcss.plugin('postcss-image-set-function', opts => {\n\t// prepare options\n\tconst preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true;\n\tconst oninvalid = 'oninvalid' in Object(opts) ? opts.oninvalid : 'ignore';\n\n\treturn (root, result) => {\n\t\t// for every declaration\n\t\troot.walkDecls(decl => {\n\t\t\tconst { value } = decl;\n\n\t\t\t// if a declaration likely uses an image-set() function\n\t\t\tif (imageSetValueMatchRegExp.test(value)) {\n\t\t\t\tconst ast = parser(value).parse();\n\n\t\t\t\t// process every image-set() function\n\t\t\t\tast.walkType('func', node => {\n\t\t\t\t\tif (imageSetFunctionMatchRegExp.test(node.value)) {\n\t\t\t\t\t\tprocessImageSet(\n\t\t\t\t\t\t\tnode.nodes.slice(1, -1),\n\t\t\t\t\t\t\tdecl,\n\t\t\t\t\t\t\t{ decl, oninvalid, preserve, result }\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t}\n});\n"],"names":["node","Object","type","imageSetFunctionMatchRegExp","test","value","parent","String","dpiRatios","dpcm","dpi","dppx","x","mediasByDpr","unit","Number","toLowerCase","dpr","Math","floor","media","postcss","atRule","name","params","opts","message","word","oninvalid","decl","warn","result","error","imageSetOptionNodes","length","index","getComma","getImage","getMedia","comma","handleInvalidation","parentClone","clone","removeAll","declClone","append","medias","keys","sort","a","b","map","firstDecl","nodes","siblings","previousSiblings","slice","indexOf","concat","cloneBefore","before","preserve","remove","imageSetValueMatchRegExp","plugin","Boolean","root","walkDecls","ast","parser","parse","walkType","processImageSet"],"mappings":"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"} |
+5
-0
| # Changes to PostCSS image-set() Function | ||
| ### 3.0.0 (September 17, 2018) | ||
| - Updated: Support for PostCSS v7+ | ||
| - Updated: Support for Node v6+ | ||
| ### 2.0.0 (May 7, 2018) | ||
@@ -4,0 +9,0 @@ |
+110
-120
@@ -9,149 +9,139 @@ 'use strict'; | ||
| // return whether a node is a valid comma | ||
| var getComma = (function (node) { | ||
| return Object(node).type === 'comma'; | ||
| }); | ||
| var getComma = (node => Object(node).type === 'comma'); | ||
| var imageSetFunctionMatchRegExp = /^(-webkit-)?image-set$/i; | ||
| const imageSetFunctionMatchRegExp = /^(-webkit-)?image-set$/i; // return a valid image | ||
| // return a valid image | ||
| var getImage = (function (node) { | ||
| return ( | ||
| // <url> | <image()> | <cross-fade()> | <gradient> | ||
| // the image-set() function can not be nested inside of itself | ||
| Object(node).type === 'func' && /^(cross-fade|image|(repeating-)?(conic|linear|radial)-gradient|url)$/i.test(node.value) && !(node.parent.parent && node.parent.parent.type === 'func' && imageSetFunctionMatchRegExp.test(node.parent.parent.value)) ? String(node) : Object(node).type === 'string' ? node.value : false | ||
| ); | ||
| }); | ||
| var getImage = (node => // <url> | <image()> | <cross-fade()> | <gradient> | ||
| // the image-set() function can not be nested inside of itself | ||
| Object(node).type === 'func' && /^(cross-fade|image|(repeating-)?(conic|linear|radial)-gradient|url)$/i.test(node.value) && !(node.parent.parent && node.parent.parent.type === 'func' && imageSetFunctionMatchRegExp.test(node.parent.parent.value)) ? String(node) : Object(node).type === 'string' ? node.value : false); | ||
| var dpiRatios = { dpcm: 2.54, dpi: 1, dppx: 96, x: 96 }; | ||
| const dpiRatios = { | ||
| dpcm: 2.54, | ||
| dpi: 1, | ||
| dppx: 96, | ||
| x: 96 | ||
| }; // return a valid @media rule | ||
| // return a valid @media rule | ||
| var getMedia = (function (node, mediasByDpr) { | ||
| if (Object(node).type === 'number' && node.unit in dpiRatios) { | ||
| // calculate min-device-pixel-ratio and min-resolution | ||
| var dpi = Number(node.value) * dpiRatios[node.unit.toLowerCase()]; | ||
| var dpr = Math.floor(dpi / dpiRatios.x * 100) / 100; | ||
| var getMedia = ((node, mediasByDpr) => { | ||
| if (Object(node).type === 'number' && node.unit in dpiRatios) { | ||
| // calculate min-device-pixel-ratio and min-resolution | ||
| const dpi = Number(node.value) * dpiRatios[node.unit.toLowerCase()]; | ||
| const dpr = Math.floor(dpi / dpiRatios.x * 100) / 100; | ||
| if (dpi in mediasByDpr) { | ||
| return false; | ||
| } else { | ||
| var media = mediasByDpr[dpi] = postcss.atRule({ | ||
| name: 'media', | ||
| params: `(-webkit-min-device-pixel-ratio: ${dpr}), (min-resolution: ${dpi}dpi)` | ||
| }); | ||
| return media; | ||
| } | ||
| } else { | ||
| return false; | ||
| } | ||
| if (dpi in mediasByDpr) { | ||
| return false; | ||
| } else { | ||
| const media = mediasByDpr[dpi] = postcss.atRule({ | ||
| name: 'media', | ||
| params: `(-webkit-min-device-pixel-ratio: ${dpr}), (min-resolution: ${dpi}dpi)` | ||
| }); | ||
| return media; | ||
| } | ||
| } else { | ||
| return false; | ||
| } | ||
| }); | ||
| var handleInvalidation = (function (opts, message, word) { | ||
| if (opts.oninvalid === 'warn') { | ||
| opts.decl.warn(opts.result, message, { word: String(word) }); | ||
| } else if (opts.oninvalid === 'throw') { | ||
| throw opts.decl.error(message, { word: String(word) }); | ||
| } | ||
| var handleInvalidation = ((opts, message, word) => { | ||
| if (opts.oninvalid === 'warn') { | ||
| opts.decl.warn(opts.result, message, { | ||
| word: String(word) | ||
| }); | ||
| } else if (opts.oninvalid === 'throw') { | ||
| throw opts.decl.error(message, { | ||
| word: String(word) | ||
| }); | ||
| } | ||
| }); | ||
| var processImageSet = (function (imageSetOptionNodes, decl, opts) { | ||
| var parent = decl.parent; | ||
| var mediasByDpr = {}; | ||
| var processImageSet = ((imageSetOptionNodes, decl, opts) => { | ||
| const parent = decl.parent; | ||
| const mediasByDpr = {}; | ||
| let length = imageSetOptionNodes.length; | ||
| let index = -1; | ||
| var length = imageSetOptionNodes.length; | ||
| var index = -1; | ||
| while (index < length) { | ||
| const _ref = [index < 0 ? true : getComma(imageSetOptionNodes[index]), getImage(imageSetOptionNodes[index + 1]), getMedia(imageSetOptionNodes[index + 2], mediasByDpr)], | ||
| comma = _ref[0], | ||
| value = _ref[1], | ||
| media = _ref[2]; // handle invalidations | ||
| while (index < length) { | ||
| var _ref = [index < 0 ? true : getComma(imageSetOptionNodes[index]), getImage(imageSetOptionNodes[index + 1]), getMedia(imageSetOptionNodes[index + 2], mediasByDpr)], | ||
| comma = _ref[0], | ||
| value = _ref[1], | ||
| media = _ref[2]; | ||
| if (!comma) { | ||
| return handleInvalidation(opts, 'unexpected comma', imageSetOptionNodes[index]); | ||
| } else if (!value) { | ||
| return handleInvalidation(opts, 'unexpected image', imageSetOptionNodes[index + 1]); | ||
| } else if (!media) { | ||
| return handleInvalidation(opts, 'unexpected resolution', imageSetOptionNodes[index + 2]); | ||
| } // prepare @media { decl: <image> } | ||
| // handle invalidations | ||
| if (!comma) { | ||
| return handleInvalidation(opts, 'unexpected comma', imageSetOptionNodes[index]); | ||
| } else if (!value) { | ||
| return handleInvalidation(opts, 'unexpected image', imageSetOptionNodes[index + 1]); | ||
| } else if (!media) { | ||
| return handleInvalidation(opts, 'unexpected resolution', imageSetOptionNodes[index + 2]); | ||
| } | ||
| const parentClone = parent.clone().removeAll(); | ||
| const declClone = decl.clone({ | ||
| value | ||
| }); | ||
| parentClone.append(declClone); | ||
| media.append(parentClone); | ||
| index += 3; | ||
| } | ||
| // prepare @media { decl: <image> } | ||
| var parentClone = parent.clone().removeAll(); | ||
| var declClone = decl.clone({ value }); | ||
| const medias = Object.keys(mediasByDpr).sort((a, b) => a - b).map(params => mediasByDpr[params]); // conditionally prepend previous siblings | ||
| parentClone.append(declClone); | ||
| media.append(parentClone); | ||
| if (medias.length) { | ||
| const firstDecl = medias[0].nodes[0].nodes[0]; | ||
| index += 3; | ||
| } | ||
| if (medias.length === 1) { | ||
| decl.value = firstDecl.value; | ||
| } else { | ||
| const siblings = parent.nodes; | ||
| const previousSiblings = siblings.slice(0, siblings.indexOf(decl)).concat(firstDecl); | ||
| var medias = Object.keys(mediasByDpr).sort(function (a, b) { | ||
| return a - b; | ||
| }).map(function (params) { | ||
| return mediasByDpr[params]; | ||
| }); | ||
| if (previousSiblings.length) { | ||
| const parentClone = parent.cloneBefore().removeAll(); | ||
| parentClone.append(previousSiblings); | ||
| } // prepend any @media { decl: <image> } rules | ||
| // conditionally prepend previous siblings | ||
| if (medias.length) { | ||
| var firstDecl = medias[0].nodes[0].nodes[0]; | ||
| if (medias.length === 1) { | ||
| decl.value = firstDecl.value; | ||
| } else { | ||
| var siblings = parent.nodes; | ||
| var previousSiblings = siblings.slice(0, siblings.indexOf(decl)).concat(firstDecl); | ||
| parent.before(medias.slice(1)); // conditionally remove the current rule | ||
| if (previousSiblings.length) { | ||
| var _parentClone = parent.cloneBefore().removeAll(); | ||
| if (!opts.preserve) { | ||
| decl.remove(); // and then conditionally remove its parent | ||
| _parentClone.append(previousSiblings); | ||
| } | ||
| // prepend any @media { decl: <image> } rules | ||
| parent.before(medias.slice(1)); | ||
| // conditionally remove the current rule | ||
| if (!opts.preserve) { | ||
| decl.remove(); | ||
| // and then conditionally remove its parent | ||
| if (!parent.nodes.length) { | ||
| parent.remove(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| if (!parent.nodes.length) { | ||
| parent.remove(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| var imageSetValueMatchRegExp = /(^|[^\w-])(-webkit-)?image-set\(/; | ||
| var imageSetFunctionMatchRegExp$1 = /^(-webkit-)?image-set$/i; | ||
| const imageSetValueMatchRegExp = /(^|[^\w-])(-webkit-)?image-set\(/; | ||
| const imageSetFunctionMatchRegExp$1 = /^(-webkit-)?image-set$/i; | ||
| var index = postcss.plugin('postcss-image-set-function', opts => { | ||
| // prepare options | ||
| const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; | ||
| const oninvalid = 'oninvalid' in Object(opts) ? opts.oninvalid : 'ignore'; | ||
| return (root, result) => { | ||
| // for every declaration | ||
| root.walkDecls(decl => { | ||
| const value = decl.value; // if a declaration likely uses an image-set() function | ||
| var index = postcss.plugin('postcss-image-set-function', function (opts) { | ||
| // prepare options | ||
| var preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; | ||
| var oninvalid = 'oninvalid' in Object(opts) ? opts.oninvalid : 'ignore'; | ||
| if (imageSetValueMatchRegExp.test(value)) { | ||
| const ast = parser(value).parse(); // process every image-set() function | ||
| return function (root, result) { | ||
| // for every declaration | ||
| root.walkDecls(function (decl) { | ||
| var value = decl.value; | ||
| // if a declaration likely uses an image-set() function | ||
| if (imageSetValueMatchRegExp.test(value)) { | ||
| var ast = parser(value).parse(); | ||
| // process every image-set() function | ||
| ast.walkType('func', function (node) { | ||
| if (imageSetFunctionMatchRegExp$1.test(node.value)) { | ||
| processImageSet(node.nodes.slice(1, -1), decl, { decl, oninvalid, preserve, result }); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| }; | ||
| ast.walkType('func', node => { | ||
| if (imageSetFunctionMatchRegExp$1.test(node.value)) { | ||
| processImageSet(node.nodes.slice(1, -1), decl, { | ||
| decl, | ||
| oninvalid, | ||
| preserve, | ||
| result | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| }; | ||
| }); | ||
| module.exports = index; | ||
| //# sourceMappingURL=index.cjs.js.map |
+12
-10
| { | ||
| "name": "postcss-image-set-function", | ||
| "version": "2.0.0", | ||
| "version": "3.0.0", | ||
| "description": "Display resolution-dependent images using the image-set() function in CSS", | ||
@@ -11,6 +11,8 @@ "author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
| "main": "index.cjs.js", | ||
| "module": "index.es.js", | ||
| "module": "index.es.mjs", | ||
| "files": [ | ||
| "index.cjs.js", | ||
| "index.es.js" | ||
| "index.cjs.js.map", | ||
| "index.es.mjs", | ||
| "index.es.mjs.map" | ||
| ], | ||
@@ -29,15 +31,15 @@ "scripts": { | ||
| "dependencies": { | ||
| "postcss": "^6.0.22", | ||
| "postcss": "^7.0.2", | ||
| "postcss-values-parser": "^1.5.0" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-core": "^6.26.3", | ||
| "babel-eslint": "^8.2.3", | ||
| "babel-preset-env": "^1.6.1", | ||
| "eslint": "^4.19.1", | ||
| "@babel/core": "^7.0.0", | ||
| "@babel/preset-env": "^7.0.0", | ||
| "babel-eslint": "^9.0.0", | ||
| "eslint": "^5.6.0", | ||
| "eslint-config-dev": "^2.0.0", | ||
| "postcss-tape": "^2.2.0", | ||
| "pre-commit": "^1.2.2", | ||
| "rollup": "^0.58.2", | ||
| "rollup-plugin-babel": "^3.0.4" | ||
| "rollup": "^0.66.0", | ||
| "rollup-plugin-babel": "^4.0.1" | ||
| }, | ||
@@ -44,0 +46,0 @@ "eslintConfig": { |
+11
-104
@@ -6,3 +6,2 @@ # PostCSS image-set() Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] | ||
| [![Build Status][cli-img]][cli-url] | ||
| [![Windows Build Status][win-img]][win-url] | ||
| [![Support Chat][git-img]][git-url] | ||
@@ -53,3 +52,3 @@ | ||
| Add [PostCSS image-set() Function] to your build tool: | ||
| Add [PostCSS image-set() Function] to your project: | ||
@@ -60,117 +59,27 @@ ```bash | ||
| #### Node | ||
| Use [PostCSS image-set() Function] to process your CSS: | ||
| ```js | ||
| import postcssImageSetFunction from 'postcss-image-set-function'; | ||
| const postcssImageSetFunction = require('postcss-image-set-function'); | ||
| postcssImageSetFunction.process(YOUR_CSS, /* processOptions */, /* pluginOptions */); | ||
| postcssImageSetFunction.process(YOUR_CSS /*, processOptions, pluginOptions */); | ||
| ``` | ||
| #### PostCSS | ||
| Or use it as a [PostCSS] plugin: | ||
| Add [PostCSS] to your build tool: | ||
| ```bash | ||
| npm install postcss --save-dev | ||
| ``` | ||
| Use [PostCSS image-set() Function] as a plugin: | ||
| ```js | ||
| import postcss from 'gulp-postcss'; | ||
| import postcssImageSetFunction from 'postcss-image-set-function'; | ||
| const postcss = require('postcss'); | ||
| const postcssImageSetFunction = require('postcss-image-set-function'); | ||
| postcss([ | ||
| postcssImageSetFunction(/* pluginOptions */) | ||
| ]).process(YOUR_CSS); | ||
| ]).process(YOUR_CSS /*, processOptions */); | ||
| ``` | ||
| #### Webpack | ||
| [PostCSS image-set() Function] runs in all Node environments, with special | ||
| instructions for: | ||
| Add [PostCSS Loader] to your build tool: | ||
| | [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | | ||
| | --- | --- | --- | --- | --- | --- | | ||
| ```bash | ||
| npm install postcss-loader --save-dev | ||
| ``` | ||
| Use [PostCSS image-set() Function] in your Webpack configuration: | ||
| ```js | ||
| import postcssImageSetFunction from 'postcss-image-set-function'; | ||
| module.exports = { | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.css$/, | ||
| use: [ | ||
| 'style-loader', | ||
| { loader: 'css-loader', options: { importLoaders: 1 } }, | ||
| { loader: 'postcss-loader', options: { | ||
| ident: 'postcss', | ||
| plugins: () => [ | ||
| postcssImageSetFunction(/* pluginOptions */) | ||
| ] | ||
| } } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| ``` | ||
| #### Gulp | ||
| Add [Gulp PostCSS] to your build tool: | ||
| ```bash | ||
| npm install gulp-postcss --save-dev | ||
| ``` | ||
| Use [PostCSS image-set() Function] in your Gulpfile: | ||
| ```js | ||
| import postcss from 'gulp-postcss'; | ||
| import postcssImageSetFunction from 'postcss-image-set-function'; | ||
| gulp.task('css', () => gulp.src('./src/*.css').pipe( | ||
| postcss([ | ||
| postcssImageSetFunction(/* pluginOptions */) | ||
| ]) | ||
| ).pipe( | ||
| gulp.dest('.') | ||
| )); | ||
| ``` | ||
| #### Grunt | ||
| Add [Grunt PostCSS] to your build tool: | ||
| ```bash | ||
| npm install grunt-postcss --save-dev | ||
| ``` | ||
| Use [PostCSS image-set() Function] in your Gruntfile: | ||
| ```js | ||
| import postcssImageSetFunction from 'postcss-image-set-function'; | ||
| grunt.loadNpmTasks('grunt-postcss'); | ||
| grunt.initConfig({ | ||
| postcss: { | ||
| options: { | ||
| use: [ | ||
| postcssImageSetFunction(/* pluginOptions */) | ||
| ] | ||
| }, | ||
| dist: { | ||
| src: '*.css' | ||
| } | ||
| } | ||
| }); | ||
| ``` | ||
| ## Options | ||
@@ -255,4 +164,2 @@ | ||
| [npm-url]: https://www.npmjs.com/package/postcss-image-set-function | ||
| [win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-image-set-function.svg | ||
| [win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-image-set-function | ||
@@ -259,0 +166,0 @@ [CSS Images]: https://drafts.csswg.org/css-images-4/#image-set-notation |
-152
| import postcss from 'postcss'; | ||
| import parser from 'postcss-values-parser'; | ||
| // return whether a node is a valid comma | ||
| var getComma = (function (node) { | ||
| return Object(node).type === 'comma'; | ||
| }); | ||
| var imageSetFunctionMatchRegExp = /^(-webkit-)?image-set$/i; | ||
| // return a valid image | ||
| var getImage = (function (node) { | ||
| return ( | ||
| // <url> | <image()> | <cross-fade()> | <gradient> | ||
| // the image-set() function can not be nested inside of itself | ||
| Object(node).type === 'func' && /^(cross-fade|image|(repeating-)?(conic|linear|radial)-gradient|url)$/i.test(node.value) && !(node.parent.parent && node.parent.parent.type === 'func' && imageSetFunctionMatchRegExp.test(node.parent.parent.value)) ? String(node) : Object(node).type === 'string' ? node.value : false | ||
| ); | ||
| }); | ||
| var dpiRatios = { dpcm: 2.54, dpi: 1, dppx: 96, x: 96 }; | ||
| // return a valid @media rule | ||
| var getMedia = (function (node, mediasByDpr) { | ||
| if (Object(node).type === 'number' && node.unit in dpiRatios) { | ||
| // calculate min-device-pixel-ratio and min-resolution | ||
| var dpi = Number(node.value) * dpiRatios[node.unit.toLowerCase()]; | ||
| var dpr = Math.floor(dpi / dpiRatios.x * 100) / 100; | ||
| if (dpi in mediasByDpr) { | ||
| return false; | ||
| } else { | ||
| var media = mediasByDpr[dpi] = postcss.atRule({ | ||
| name: 'media', | ||
| params: `(-webkit-min-device-pixel-ratio: ${dpr}), (min-resolution: ${dpi}dpi)` | ||
| }); | ||
| return media; | ||
| } | ||
| } else { | ||
| return false; | ||
| } | ||
| }); | ||
| var handleInvalidation = (function (opts, message, word) { | ||
| if (opts.oninvalid === 'warn') { | ||
| opts.decl.warn(opts.result, message, { word: String(word) }); | ||
| } else if (opts.oninvalid === 'throw') { | ||
| throw opts.decl.error(message, { word: String(word) }); | ||
| } | ||
| }); | ||
| var processImageSet = (function (imageSetOptionNodes, decl, opts) { | ||
| var parent = decl.parent; | ||
| var mediasByDpr = {}; | ||
| var length = imageSetOptionNodes.length; | ||
| var index = -1; | ||
| while (index < length) { | ||
| var _ref = [index < 0 ? true : getComma(imageSetOptionNodes[index]), getImage(imageSetOptionNodes[index + 1]), getMedia(imageSetOptionNodes[index + 2], mediasByDpr)], | ||
| comma = _ref[0], | ||
| value = _ref[1], | ||
| media = _ref[2]; | ||
| // handle invalidations | ||
| if (!comma) { | ||
| return handleInvalidation(opts, 'unexpected comma', imageSetOptionNodes[index]); | ||
| } else if (!value) { | ||
| return handleInvalidation(opts, 'unexpected image', imageSetOptionNodes[index + 1]); | ||
| } else if (!media) { | ||
| return handleInvalidation(opts, 'unexpected resolution', imageSetOptionNodes[index + 2]); | ||
| } | ||
| // prepare @media { decl: <image> } | ||
| var parentClone = parent.clone().removeAll(); | ||
| var declClone = decl.clone({ value }); | ||
| parentClone.append(declClone); | ||
| media.append(parentClone); | ||
| index += 3; | ||
| } | ||
| var medias = Object.keys(mediasByDpr).sort(function (a, b) { | ||
| return a - b; | ||
| }).map(function (params) { | ||
| return mediasByDpr[params]; | ||
| }); | ||
| // conditionally prepend previous siblings | ||
| if (medias.length) { | ||
| var firstDecl = medias[0].nodes[0].nodes[0]; | ||
| if (medias.length === 1) { | ||
| decl.value = firstDecl.value; | ||
| } else { | ||
| var siblings = parent.nodes; | ||
| var previousSiblings = siblings.slice(0, siblings.indexOf(decl)).concat(firstDecl); | ||
| if (previousSiblings.length) { | ||
| var _parentClone = parent.cloneBefore().removeAll(); | ||
| _parentClone.append(previousSiblings); | ||
| } | ||
| // prepend any @media { decl: <image> } rules | ||
| parent.before(medias.slice(1)); | ||
| // conditionally remove the current rule | ||
| if (!opts.preserve) { | ||
| decl.remove(); | ||
| // and then conditionally remove its parent | ||
| if (!parent.nodes.length) { | ||
| parent.remove(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| var imageSetValueMatchRegExp = /(^|[^\w-])(-webkit-)?image-set\(/; | ||
| var imageSetFunctionMatchRegExp$1 = /^(-webkit-)?image-set$/i; | ||
| var index = postcss.plugin('postcss-image-set-function', function (opts) { | ||
| // prepare options | ||
| var preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; | ||
| var oninvalid = 'oninvalid' in Object(opts) ? opts.oninvalid : 'ignore'; | ||
| return function (root, result) { | ||
| // for every declaration | ||
| root.walkDecls(function (decl) { | ||
| var value = decl.value; | ||
| // if a declaration likely uses an image-set() function | ||
| if (imageSetValueMatchRegExp.test(value)) { | ||
| var ast = parser(value).parse(); | ||
| // process every image-set() function | ||
| ast.walkType('func', function (node) { | ||
| if (imageSetFunctionMatchRegExp$1.test(node.value)) { | ||
| processImageSet(node.nodes.slice(1, -1), decl, { decl, oninvalid, preserve, result }); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| }; | ||
| }); | ||
| export default index; |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
43784
81.24%8
33.33%240
-2.44%168
-35.63%1
Infinity%+ Added
+ Added
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
Updated