diff options
| author | littleblack111 <littleblack11111@gmail.com> | 2026-05-18 23:10:59 +0800 |
|---|---|---|
| committer | littleblack111 <littleblack11111@gmail.com> | 2026-05-18 23:41:44 +0800 |
| commit | fc87c009806dcc98867f6b58efe29b042aa01dee (patch) | |
| tree | 8f59b3f4a5b66e9dfef2d40c8d318e258a521228 /node_modules/postcss-clamp | |
| parent | 3336b2356ee6152d9c6ae59bd9b87ccbc0958407 (diff) | |
node: updatemain
Diffstat (limited to 'node_modules/postcss-clamp')
| -rw-r--r-- | node_modules/postcss-clamp/INSTALL.md | 162 | ||||
| -rw-r--r-- | node_modules/postcss-clamp/LICENSE | 21 | ||||
| -rw-r--r-- | node_modules/postcss-clamp/README.md | 118 | ||||
| -rw-r--r-- | node_modules/postcss-clamp/index.js | 126 | ||||
| -rw-r--r-- | node_modules/postcss-clamp/index.test.js | 221 | ||||
| -rw-r--r-- | node_modules/postcss-clamp/package.json | 26 |
6 files changed, 0 insertions, 674 deletions
diff --git a/node_modules/postcss-clamp/INSTALL.md b/node_modules/postcss-clamp/INSTALL.md deleted file mode 100644 index f9acbee6..00000000 --- a/node_modules/postcss-clamp/INSTALL.md +++ /dev/null @@ -1,162 +0,0 @@ -# Installing PostCSS Clamp - -[PostCSS Clamp] runs in all Node environments, with special instructions for: - -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | - -## Node - -Add [PostCSS Clamp] to your project: - -```bash -$ npm install postcss-clamp --save-dev -``` - -Use [PostCSS Clamp] as a [PostCSS] plugin: - -```js -const postcss = require('postcss'); -const postcssClamp = require('postcss-clamp'); - -postcss([ - postcssClamp(/* pluginOptions */) -]).process(YOUR_CSS /*, processOptions */); -``` - -## PostCSS CLI - -Add [PostCSS CLI] to your project: - -```bash -npm install postcss-cli --save-dev -``` - -Use **PostCSS Clamp** in your `postcss.config.js` configuration file: - -```js -const postcssClamp = require('postcss-clamp'); - -module.exports = { - plugins: [ - postcssClamp(/* pluginOptions */) - ] -} -``` - -## Webpack - -Add [PostCSS Loader] to your project: - -```bash -npm install postcss-loader --save-dev -``` - -Use **PostCSS Clamp** in your Webpack configuration: - -```js -const postcssClamp = require('postcss-clamp'); - -module.exports = { - module: { - rules: [ - { - test: /\.css$/, - use: [ - 'style-loader', - { loader: 'css-loader', options: { importLoaders: 1 } }, - { loader: 'postcss-loader', options: { - ident: 'postcss', - plugins: () => [ - postcssClamp(/* pluginOptions */) - ] - } } - ] - } - ] - } -} -``` - -## Create React App - -Add [React App Rewired] and [React App Rewire PostCSS] to your project: - -```bash -npm install react-app-rewired react-app-rewire-postcss --save-dev -``` - -Use **React App Rewire PostCSS** and **PostCSS Clamp** in your -`config-overrides.js` file: - -```js -const reactAppRewirePostcss = require('react-app-rewire-postcss'); -const postcssClamp = require('postcss-clamp'); - -module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssClamp(/* pluginOptions */) - ] -}); -``` - -## Gulp - -Add [Gulp PostCSS] to your project: - -```bash -npm install gulp-postcss --save-dev -``` - -Use **PostCSS Clamp** in your Gulpfile: - -```js -const postcss = require('gulp-postcss'); -const postcssClamp = require('postcss-clamp'); - -gulp.task('css', () => gulp.src('./src/*.css').pipe( - postcss([ - postcssClamp(/* pluginOptions */) - ]) -).pipe( - gulp.dest('.') -)); -``` - -## Grunt - -Add [Grunt PostCSS] to your project: - -```bash -npm install grunt-postcss --save-dev -``` - -Use **PostCSS Clamp** in your Gruntfile: - -```js -const postcssClamp = require('postcss-clamp'); - -grunt.loadNpmTasks('grunt-postcss'); - -grunt.initConfig({ - postcss: { - options: { - use: [ - postcssClamp(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } -}); -``` - -[Gulp PostCSS]: https://github.com/postcss/gulp-postcss -[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss -[PostCSS]: https://github.com/postcss/postcss -[PostCSS CLI]: https://github.com/postcss/postcss-cli -[PostCSS Loader]: https://github.com/postcss/postcss-loader -[PostCSS Clamp]: https://github.com/polemius/postcss-clamp -[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss -[React App Rewired]: https://github.com/timarney/react-app-rewired diff --git a/node_modules/postcss-clamp/LICENSE b/node_modules/postcss-clamp/LICENSE deleted file mode 100644 index ca8f8e58..00000000 --- a/node_modules/postcss-clamp/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright 2020 Ivan Menshykov <ivan.menshykov@gmail.com> - -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. - diff --git a/node_modules/postcss-clamp/README.md b/node_modules/postcss-clamp/README.md deleted file mode 100644 index d6e56b39..00000000 --- a/node_modules/postcss-clamp/README.md +++ /dev/null @@ -1,118 +0,0 @@ -# PostCSS Clamp -[![Build Status][ci-img]][ci] [![codecov.io][cov-img]][cov] - -[PostCSS] plugin to transform `clamp()` to combination of `min/max`. - -[PostCSS]: https://github.com/postcss/postcss -[ci-img]: https://travis-ci.com/polemius/postcss-clamp.svg?branch=master -[ci]: https://travis-ci.com/polemius/postcss-clamp -[cov-img]: https://codecov.io/github/polemius/postcss-clamp/coverage.svg?branch=master -[cov]: https://codecov.io/github/polemius/postcss-clamp?branch=master - -This plugin transform this css: - -```css -.foo { - width: clamp(10px, 4em, 80px); -} -``` - -into this: - -```css -.foo { - width: max(10px, min(4em, 80px)); -} -``` - -Or with enabled options `precalculate`: - -```css -.foo { - width: clamp(10em, 4px, 10px); -} - -/* becomes */ - -.foo { - width: max(10em, 14px); -} -``` - -[](https://caniuse.com/#feat=css-math-functions) - -## Instalation - -```bash -$ npm install postcss postcss-clamp --save-dev -or -$ yarn add --dev postcss postcss-clamp -``` - -## Usage - -Use [PostCSS Clamp] as a [PostCSS] plugin: - -```js -const postcss = require('postcss'); -const postcssClamp = require('postcss-clamp'); - -postcss([ - postcssClamp(/* pluginOptions */) -]).process(YOUR_CSS /*, processOptions */); -``` - -[PostCSS Clamp] runs in all Node environments, with special instructions for: - -| [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) | -| --- | --- | --- | --- | --- | --- | - -See [PostCSS] docs for examples for your environment. - -## Options - -### precalculate - -The `precalculate` option determines whether values with the same unit -should be precalculated. By default, these are not precalculation. - -```js -postcssColorHexAlpha({ - precalculate: true -}); -``` - -The second and third value has the same unit (`px`): - -```css -.foo { - width: clamp(10em, 4px, 10px); -} - -/* becomes */ - -.foo { - width: max(10em, 14px); -} -``` - -Here all values have the same unit: - -```css -.foo { - width: clamp(10px, 4px, 10px); -} - -/* becomes */ - -.foo { - width: 24px; -} -``` - -## LICENSE - -See [LICENSE](LICENSE) - -[PostCSS]: https://github.com/postcss/postcss -[PostCSS Clamp]: https://github.com/polemius/postcss-clamp diff --git a/node_modules/postcss-clamp/index.js b/node_modules/postcss-clamp/index.js deleted file mode 100644 index 474e8a62..00000000 --- a/node_modules/postcss-clamp/index.js +++ /dev/null @@ -1,126 +0,0 @@ -let valueParser = require('postcss-value-parser') - -function parseValue (value) { - let parsed = value.match(/([\d.-]+)(.*)/) - if (!parsed || !parsed[1] || !parsed[2] || isNaN(parsed[1])) { - return undefined - } - return [parseFloat(parsed[1]), parsed[2]] -} - -function compose (first, second, third) { - if (first && second && third) { - return `max(${first}, min(${second}, ${third}))` - } - if (first && second) { - return `max(${first}, ${second})` - } - - return first -} - -function updateValue (declaration, value, preserve) { - let newValue = value - let newValueAst = valueParser(value) - let valueAST = valueParser(declaration.value) - // Walk can't be interrupted, so we only care about first - let foundClamp = false - - valueAST.walk((node, index, nodes) => { - let isClamp = node.type === 'function' && node.value === 'clamp' - - if (!isClamp || foundClamp) { - return - } - - foundClamp = true - nodes[index] = newValueAst - }) - - if (foundClamp) { - newValue = valueAST.toString() - } - - if (preserve) { - declaration.cloneBefore({ value: newValue }) - } else { - declaration.value = newValue - } -} - -module.exports = opts => { - opts = opts || {} - let precalculate = opts.precalculate ? Boolean(opts.precalculate) : false - let preserve = opts.preserve ? Boolean(opts.preserve) : false - - return { - postcssPlugin: 'postcss-clamp', - Declaration (decl) { - if (!decl || !decl.value.includes('clamp')) { - return - } - valueParser(decl.value).walk(node => { - let nodes = node.nodes - if ( - node.type !== 'function' || - node.value !== 'clamp' || - nodes.length !== 5 - ) { - return - } - let first = nodes[0] - let second = nodes[2] - let third = nodes[4] - let naive = compose( - valueParser.stringify(first), - valueParser.stringify(second), - valueParser.stringify(third) - ) - if (!precalculate || second.type !== 'word' || third.type !== 'word') { - updateValue(decl, naive, preserve) - return - } - let parsedSecond = parseValue(second.value) - let parsedThird = parseValue(third.value) - if (parsedSecond === undefined || parsedThird === undefined) { - updateValue(decl, naive, preserve) - return - } - let [secondValue, secondUnit] = parsedSecond - let [thirdValue, thirdUnit] = parsedThird - if (secondUnit !== thirdUnit) { - updateValue(decl, naive, preserve) - return - } - let parsedFirst = parseValue(first.value) - if (parsedFirst === undefined) { - let secondThirdValue = `${secondValue + thirdValue}${secondUnit}` - updateValue( - decl, - compose(valueParser.stringify(first), secondThirdValue), - preserve - ) - return - } - let [firstValue, firstUnit] = parsedFirst - if (firstUnit !== secondUnit) { - let secondThirdValue = `${secondValue + thirdValue}${secondUnit}` - updateValue( - decl, - compose(valueParser.stringify(first), secondThirdValue), - preserve - ) - return - } - - updateValue( - decl, - compose(`${firstValue + secondValue + thirdValue}${secondUnit}`), - preserve - ) - }) - } - } -} - -module.exports.postcss = true diff --git a/node_modules/postcss-clamp/index.test.js b/node_modules/postcss-clamp/index.test.js deleted file mode 100644 index 91e21ec5..00000000 --- a/node_modules/postcss-clamp/index.test.js +++ /dev/null @@ -1,221 +0,0 @@ -let postcss = require('postcss') - -let clamp = require('./') - -async function run (input, output, opts) { - let result = await postcss([clamp(opts)]).process(input, { - from: '/test.css' - }) - expect(result.css).toEqual(output) - expect(result.warnings()).toHaveLength(0) - return result -} - -it('handle simple transformation (only values)', async () => { - await run( - 'a{ width: clamp(10px, 64px, 80px); }', - 'a{ width: max(10px, min(64px, 80px)); }' - ) -}) - -it('handle simple transformation (only values) with preserve', async () => { - await run( - 'a{ width: clamp(10px, 64px, 80px); }', - 'a{ width: max(10px, min(64px, 80px)); width: clamp(10px, 64px, 80px); }', - { preserve: true } - ) -}) - -it('handle transformation with functions', async () => { - await run( - 'a{ width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); }', - 'a{ width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); }' - ) -}) - -it('handle transformation with functions with preserve', async () => { - await run( - 'a{ width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); }', - 'a{ width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); ' + - 'width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); }', - { preserve: true } - ) -}) - -it('handle transformation with different units', async () => { - await run( - 'a{ width: clamp(10%, 2px, 4rem); }', - 'a{ width: max(10%, min(2px, 4rem)); }' - ) -}) - -it('handle transformation with different units and preserve', async () => { - await run( - 'a{ width: clamp(10%, 2px, 4rem); }', - 'a{ width: max(10%, min(2px, 4rem)); width: clamp(10%, 2px, 4rem); }', - { preserve: true } - ) -}) - -it('transform only function with 3 parameters', async () => { - await run( - 'a{ width: clamp(10%, 2px, 4rem);' + - '\nheight: clamp(10px, 20px, 30px, 40px); }', - 'a{ width: max(10%, min(2px, 4rem));' + - '\nheight: clamp(10px, 20px, 30px, 40px); }' - ) -}) - -it('transform only clamp function', async () => { - await run( - 'a{ width: clamp(10%, 2px, 4rem);\nheight: calc(10px + 100%); }', - 'a{ width: max(10%, min(2px, 4rem));\nheight: calc(10px + 100%); }' - ) -}) - -it('precalculate second and third with the same unit (int values)', async () => { - await run('a{ width: clamp(10%, 2px, 5px); }', 'a{ width: max(10%, 7px); }', { - precalculate: true - }) -}) - -it('precalculate second and third with the same unit (float values)', async () => { - await run( - 'a{ width: clamp(10%, 2.5px, 5.1px); }', - 'a{ width: max(10%, 7.6px); }', - { precalculate: true } - ) -}) - -it('precalculate second and third with the same unit (float and int values)', async () => { - await run( - 'a{ width: clamp(10%, 2.5px, 5px); }', - 'a{ width: max(10%, 7.5px); }', - { precalculate: true } - ) -}) - -it('precalculate 2nd & 3rd with the same unit (float and int vals) & preserve', async () => { - await run( - 'a{ width: clamp(10%, 2.5px, 5px); }', - 'a{ width: max(10%, 7.5px); width: clamp(10%, 2.5px, 5px); }', - { precalculate: true, preserve: true } - ) -}) - -it('precalculate all values with the same unit (int values)', async () => { - await run('a{ width: clamp(10px, 2px, 5px); }', 'a{ width: 17px; }', { - precalculate: true - }) -}) - -it('precalculate all values with the same unit (float values)', async () => { - await run( - 'a{ width: clamp(10.4px, 2.11px, 5.9px); }', - 'a{ width: 18.41px; }', - { precalculate: true } - ) -}) - -it('precalculate all values with the same unit (int and float values)', async () => { - await run('a{ width: clamp(10.4px, 2px, 5.9px); }', 'a{ width: 18.3px; }', { - precalculate: true - }) -}) - -it('handle function with enable precalculation as third', async () => { - await run( - 'a{ width: clamp(10px, 2px, calc(10px + 100%)); }', - 'a{ width: max(10px, min(2px, calc(10px + 100%))); }', - { precalculate: true } - ) -}) - -it('handle function with enable precalculation as second', async () => { - await run( - 'a{ width: clamp(10px, calc(10px + 100%), 2px); }', - 'a{ width: max(10px, min(calc(10px + 100%), 2px)); }', - { precalculate: true } - ) -}) - -it('handle function with enable precalculation as first', async () => { - await run( - 'a{ width: clamp(calc(10px + 100%), 10px, 2px); }', - 'a{ width: max(calc(10px + 100%), 12px); }', - { precalculate: true } - ) -}) - -it('handle function with enable precalculation as all', async () => { - await run( - 'a{ width: clamp(calc(10px + 100%), calc(10rem + 200%), 10px); }', - 'a{ width: max(calc(10px + 100%), min(calc(10rem + 200%), 10px)); }', - { precalculate: true } - ) -}) - -it('handle not valid values', async () => { - await run('a{ width: clamp(a, b, c); }', 'a{ width: max(a, min(b, c)); }', { - precalculate: true - }) -}) - -it('handle not valid values with preserve', async () => { - await run( - 'a{ width: clamp(a, b, c); }', - 'a{ width: max(a, min(b, c)); width: clamp(a, b, c); }', - { precalculate: true, preserve: true } - ) -}) - -it('handle not valid values mixed with valid', async () => { - await run( - 'a{ width: clamp(a, 1px, 2em); }', - 'a{ width: max(a, min(1px, 2em)); }', - { precalculate: true } - ) -}) - -it('handle not valid values mixed with valid and preserve', async () => { - await run( - 'a{ width: clamp(a, 1px, 2em); }', - 'a{ width: max(a, min(1px, 2em)); width: clamp(a, 1px, 2em); }', - { precalculate: true, preserve: true } - ) -}) - -it('handle complex values', async () => { - await run( - 'a{ grid-template-columns: clamp(22rem, 40%, 32rem) minmax(0, 1fr); }', - 'a{ grid-template-columns: max(22rem, min(40%, 32rem)) minmax(0, 1fr); }' - ) -}) - -it('handle multiple complex values', async () => { - await run( - 'a{ margin: clamp(1rem, 2%, 3rem) 4px clamp(5rem, 6%, 7rem) 8rem; }', - 'a{ margin: max(1rem, min(2%, 3rem)) 4px max(5rem, min(6%, 7rem)) 8rem; }' - ) -}) - -it('handle calc', async () => { - await run( - 'a{ margin: 0 40px 0 calc(-1 * clamp(32px, 16vw, 64px)); }', - 'a{ margin: 0 40px 0 calc(-1 * max(32px, min(16vw, 64px))); }' - ) -}) - -it('handle multiple calc', async () => { - await run( - 'a{ margin: calc(-1 * clamp(1px, 2vw, 3px)) calc(-1 * clamp(4px, 5vw, 6px)); }', - 'a{ margin: calc(-1 * max(1px, min(2vw, 3px))) calc(-1 * max(4px, min(5vw, 6px))); }' - ) -}) - -it('handle nested clamp', async () => { - await run( - 'a{ font-size: clamp(clamp(1rem, 2vw, 3rem), 4vw, 5rem); }', - 'a{ font-size: max(max(1rem, min(2vw, 3rem)), min(4vw, 5rem)); }' - ) -}) diff --git a/node_modules/postcss-clamp/package.json b/node_modules/postcss-clamp/package.json deleted file mode 100644 index c4592cbd..00000000 --- a/node_modules/postcss-clamp/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "postcss-clamp", - "version": "4.1.0", - "description": "PostCSS plugin to transform clamp() to combination of min/max", - "keywords": [ - "postcss", - "css", - "postcss-plugin", - "clamp", - "min", - "max" - ], - "main": "index.js", - "repository": "polemius/postcss-clamp", - "author": "Ivan Menshykov <ivan.menshykov@gmail.com>", - "license": "MIT", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "peerDependencies": { - "postcss": "^8.4.6" - }, - "engines": { - "node": ">=7.6.0" - } -} |
