diff options
| author | littleblack111 <littleblack11111@gmail.com> | 2024-08-30 17:21:18 +0800 |
|---|---|---|
| committer | littleblack111 <littleblack11111@gmail.com> | 2024-08-30 17:21:18 +0800 |
| commit | efbc2ffe6a1ee5ec38a4396305561d6515d0943e (patch) | |
| tree | 2b4c94f18f2c792dfda813050755d5c0273fae22 /node_modules/@csstools/postcss-light-dark-function | |
| parent | 43acceb75957c880a5ba5a31aae221394a36d5f6 (diff) | |
node fixes, updates
Diffstat (limited to 'node_modules/@csstools/postcss-light-dark-function')
7 files changed, 311 insertions, 0 deletions
diff --git a/node_modules/@csstools/postcss-light-dark-function/CHANGELOG.md b/node_modules/@csstools/postcss-light-dark-function/CHANGELOG.md new file mode 100644 index 00000000..48a7bf66 --- /dev/null +++ b/node_modules/@csstools/postcss-light-dark-function/CHANGELOG.md @@ -0,0 +1,23 @@ +# Changes to PostCSS Light Dark Function + +### 1.0.8 + +_July 7, 2024_ + +- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.3.0`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#330) (minor) + +### 1.0.7 + +_July 6, 2024_ + +- Updated [`@csstools/css-tokenizer`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer) to [`2.4.1`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md#241) (patch) +- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.7.1`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#271) (patch) + +### 1.0.6 + +_June 29, 2024_ + +- Updated [`@csstools/css-tokenizer`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer) to [`2.3.2`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md#232) (patch) +- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.7.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#270) (minor) + +[Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function/CHANGELOG.md) diff --git a/node_modules/@csstools/postcss-light-dark-function/LICENSE.md b/node_modules/@csstools/postcss-light-dark-function/LICENSE.md new file mode 100644 index 00000000..e8ae93b9 --- /dev/null +++ b/node_modules/@csstools/postcss-light-dark-function/LICENSE.md @@ -0,0 +1,18 @@ +MIT No Attribution (MIT-0) + +Copyright © CSSTools Contributors + +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. + +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/@csstools/postcss-light-dark-function/README.md b/node_modules/@csstools/postcss-light-dark-function/README.md new file mode 100644 index 00000000..84beb299 --- /dev/null +++ b/node_modules/@csstools/postcss-light-dark-function/README.md @@ -0,0 +1,184 @@ +# PostCSS Light Dark Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS] + +[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-light-dark-function.svg" height="20">][npm-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]<br><br>[<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/light-dark-function.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/light-dark-function.svg" height="20">][css-url] + +```bash +npm install @csstools/postcss-light-dark-function --save-dev +``` + +[PostCSS Light Dark Function] lets you use the `light-dark` color function in +CSS, following the [CSS Color 5 Specification]. + +Read more about this feature on mdn: +- define the colors for light and dark with [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) +- define which elements support light and/or dark with [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) + +With both features combined you can mix and match color schemes in a single document, while also respecting the user's preferences. + +```pcss +.foo { + color: light-dark(pink, magenta); +} + +.bar { + --bar: light-dark(cyan, deepskyblue); +} + +/* becomes */ + +.foo { + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink; + color: var(--csstools-light-dark-toggle--0, magenta); + color: light-dark(pink, magenta); +} + +.bar { + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; + --bar: var(--csstools-light-dark-toggle--1, deepskyblue); + & * { + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; + --bar: var(--csstools-light-dark-toggle--1, deepskyblue); + } +} + +@supports (color: light-dark(red, red)) { +.bar { + --bar: light-dark(cyan, deepskyblue); +} +} +``` + +Declare that your document supports both light and dark mode: + +```pcss +:root { + color-scheme: light dark; +} + +/* becomes */ + +:root { + --csstools-color-scheme--dark: ; + color-scheme: light dark; +}@media (prefers-color-scheme: dark) {:root { + --csstools-color-scheme--dark: initial; +} +} +``` + +Dynamically alter the supported color scheme for some elements: + +```pcss +:root { + /* Root only supports light mode */ + color-scheme: light; +} + +.foo { + /* This element and its children only support dark mode */ + color-scheme: dark; +} + +/* becomes */ + +:root { + /* Root only supports light mode */ + --csstools-color-scheme--dark: ; + color-scheme: light; +} + +.foo { + /* This element and its children only support dark mode */ + --csstools-color-scheme--dark: initial; + color-scheme: dark; +} +``` + +## Usage + +Add [PostCSS Light Dark Function] to your project: + +```bash +npm install postcss @csstools/postcss-light-dark-function --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +const postcss = require('postcss'); +const postcssLightDarkFunction = require('@csstools/postcss-light-dark-function'); + +postcss([ + postcssLightDarkFunction(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +[PostCSS Light Dark Function] runs in all Node environments, with special +instructions for: + +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) +- [Webpack](INSTALL.md#webpack) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is preserved. + +```js +postcssLightDarkFunction({ preserve: false }) +``` + +```pcss +.foo { + color: light-dark(pink, magenta); +} + +.bar { + --bar: light-dark(cyan, deepskyblue); +} + +/* becomes */ + +.foo { + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink; + color: var(--csstools-light-dark-toggle--0, magenta); +} + +.bar { + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; + --bar: var(--csstools-light-dark-toggle--1, deepskyblue); + & * { + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; + --bar: var(--csstools-light-dark-toggle--1, deepskyblue); + } +} +``` + +### enableProgressiveCustomProperties + +The `enableProgressiveCustomProperties` option determines whether the original notation +is wrapped with `@supports` when used in Custom Properties. By default, it is enabled. + +> [!NOTE] +> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. +> See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme). + +```js +postcssLightDarkFunction({ enableProgressiveCustomProperties: false }) +``` + +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[css-url]: https://cssdb.org/#light-dark-function +[discord]: https://discord.gg/bUadyRwkJS +[npm-url]: https://www.npmjs.com/package/@csstools/postcss-light-dark-function + +[PostCSS]: https://github.com/postcss/postcss +[PostCSS Light Dark Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function +[CSS Color 5 Specification]: https://drafts.csswg.org/css-color-5/#light-dark diff --git a/node_modules/@csstools/postcss-light-dark-function/dist/index.cjs b/node_modules/@csstools/postcss-light-dark-function/dist/index.cjs new file mode 100644 index 00000000..87c700b2 --- /dev/null +++ b/node_modules/@csstools/postcss-light-dark-function/dist/index.cjs @@ -0,0 +1 @@ +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("@csstools/css-tokenizer"),r=require("@csstools/utilities"),t=require("@csstools/css-parser-algorithms");const s="--csstools-color-scheme--dark",n="initial";function toggleNameGenerator(e){return`--csstools-light-dark-toggle--${e}`}const i=/dark/i,a=/light/i;function colorSchemes(e){const r=o.tokenize({css:e});let t=!1,s=!1;return r.forEach((e=>{o.isTokenIdent(e)&&(a.test(e[4].value)?t=!0:i.test(e[4].value)&&(s=!0))})),[t,s]}const c=/^light-dark$/i;function isComma(e){return t.isTokenNode(e)&&o.isTokenComma(e.value)}function parseLightDark(e){if(!t.isFunctionNode(e)||!c.test(e.getName()))return!1;const o=e.value.filter((e=>!t.isWhitespaceNode(e)&&!t.isCommentNode(e)));if(3!==o.length)return!1;let r=o[0];const s=o[1];let n=o[2];if(!r||!s||!n)return!1;if(!isComma(s))return!1;if(isComma(r)||isComma(n))return!1;if(t.isFunctionNode(r)){const e=[r];t.walk(e,(({node:e,parent:o},r)=>{recurseLightDark(e,o,r,!0)})),[r]=e}if(t.isFunctionNode(n)){const e=[n];t.walk(e,(({node:e,parent:o},r)=>{recurseLightDark(e,o,r,!1)})),[n]=e}return[r,n]}function recurseLightDark(e,o,r,s){if("number"!=typeof r)return;const n=parseLightDark(e);if(!n)return;let i=n[s?0:1];if(t.isFunctionNode(i)){const e=[i];t.walk(e,(({node:e,parent:o},r)=>{recurseLightDark(e,o,r,s)})),[i]=e}o.value[r]=i}function transformLightDark(e,r){const n=new Map,i=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(o.tokenize({css:e})),(e=>{const i=parseLightDark(e);if(!i)return;const[a,c]=i,l=r();return n.set(l,`var(${s}) ${a.toString()}`),new t.FunctionNode([o.TokenType.Function,"var(",-1,-1,{value:"var"}],[o.TokenType.CloseParen,")",-1,-1,void 0],[new t.TokenNode([o.TokenType.Ident,l,-1,-1,{value:l}]),new t.TokenNode([o.TokenType.Comma,",",-1,-1,void 0]),new t.WhitespaceNode([[o.TokenType.Whitespace," ",-1,-1,void 0]]),c])}));return{value:t.stringify(i),toggles:n}}const l=/^color-scheme$/i,u=/\blight-dark\(/i,basePlugin=e=>({postcssPlugin:"postcss-light-dark-function",prepare(){let o=0;const currentToggleNameGenerator=()=>toggleNameGenerator(o++);return{postcssPlugin:"postcss-light-dark-function",Declaration(o,{atRule:t,rule:i}){const a=o.parent;if(a){if(l.test(o.prop)){if(a.some((e=>"decl"===e.type&&e.prop===s)))return;const[e,r]=colorSchemes(o.value);if(e&&r){o.cloneBefore({prop:s,value:" "});const e=a.clone();e.removeAll(),e.append(o.clone({prop:s,value:n}));const r=t({name:"media",params:"(prefers-color-scheme: dark)",source:a.source});return r.append(e),void a.after(r)}return r?void o.cloneBefore({prop:s,value:n}):e?void o.cloneBefore({prop:s,value:" "}):void 0}if(u.test(o.value)){if(r.hasFallback(o))return;if(r.hasSupportsAtRuleAncestor(o,u))return;const t=transformLightDark(o.value,currentToggleNameGenerator);if(t.value===o.value)return;for(const[e,r]of t.toggles)o.cloneBefore({prop:e,value:r});if(o.cloneBefore({value:t.value}),o.variable&&o.parent){const e=i({selector:"& *",source:o.source});for(const[r,s]of t.toggles)e.append(o.clone({prop:r,value:s}));e.append(o.clone({value:t.value})),o.parent.append(e)}e?.preserve||o.remove()}}}}}});basePlugin.postcss=!0;const postcssPlugin=o=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-light-dark-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/node_modules/@csstools/postcss-light-dark-function/dist/index.d.ts b/node_modules/@csstools/postcss-light-dark-function/dist/index.d.ts new file mode 100644 index 00000000..e82fd4c1 --- /dev/null +++ b/node_modules/@csstools/postcss-light-dark-function/dist/index.d.ts @@ -0,0 +1,14 @@ +import type { PluginCreator } from 'postcss'; + +/** postcss-light-dark-function plugin options */ +export declare type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean; + /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ + enableProgressiveCustomProperties?: boolean; +}; + +declare const postcssPlugin: PluginCreator<pluginOptions>; +export default postcssPlugin; + +export { } diff --git a/node_modules/@csstools/postcss-light-dark-function/dist/index.mjs b/node_modules/@csstools/postcss-light-dark-function/dist/index.mjs new file mode 100644 index 00000000..22decab0 --- /dev/null +++ b/node_modules/@csstools/postcss-light-dark-function/dist/index.mjs @@ -0,0 +1 @@ +import e from"@csstools/postcss-progressive-custom-properties";import{tokenize as r,isTokenIdent as t,isTokenComma as o,TokenType as s}from"@csstools/css-tokenizer";import{hasFallback as n,hasSupportsAtRuleAncestor as a}from"@csstools/utilities";import{isFunctionNode as i,isWhitespaceNode as c,isCommentNode as l,walk as u,isTokenNode as p,replaceComponentValues as f,parseCommaSeparatedListOfComponentValues as v,FunctionNode as g,TokenNode as m,WhitespaceNode as d,stringify as h}from"@csstools/css-parser-algorithms";const k="--csstools-color-scheme--dark",D="initial";function toggleNameGenerator(e){return`--csstools-light-dark-toggle--${e}`}const L=/dark/i,C=/light/i;function colorSchemes(e){const o=r({css:e});let s=!1,n=!1;return o.forEach((e=>{t(e)&&(C.test(e[4].value)?s=!0:L.test(e[4].value)&&(n=!0))})),[s,n]}const P=/^light-dark$/i;function isComma(e){return p(e)&&o(e.value)}function parseLightDark(e){if(!i(e)||!P.test(e.getName()))return!1;const r=e.value.filter((e=>!c(e)&&!l(e)));if(3!==r.length)return!1;let t=r[0];const o=r[1];let s=r[2];if(!t||!o||!s)return!1;if(!isComma(o))return!1;if(isComma(t)||isComma(s))return!1;if(i(t)){const e=[t];u(e,(({node:e,parent:r},t)=>{recurseLightDark(e,r,t,!0)})),[t]=e}if(i(s)){const e=[s];u(e,(({node:e,parent:r},t)=>{recurseLightDark(e,r,t,!1)})),[s]=e}return[t,s]}function recurseLightDark(e,r,t,o){if("number"!=typeof t)return;const s=parseLightDark(e);if(!s)return;let n=s[o?0:1];if(i(n)){const e=[n];u(e,(({node:e,parent:r},t)=>{recurseLightDark(e,r,t,o)})),[n]=e}r.value[t]=n}function transformLightDark(e,t){const o=new Map,n=f(v(r({css:e})),(e=>{const r=parseLightDark(e);if(!r)return;const[n,a]=r,i=t();return o.set(i,`var(${k}) ${n.toString()}`),new g([s.Function,"var(",-1,-1,{value:"var"}],[s.CloseParen,")",-1,-1,void 0],[new m([s.Ident,i,-1,-1,{value:i}]),new m([s.Comma,",",-1,-1,void 0]),new d([[s.Whitespace," ",-1,-1,void 0]]),a])}));return{value:h(n),toggles:o}}const b=/^color-scheme$/i,w=/\blight-dark\(/i,basePlugin=e=>({postcssPlugin:"postcss-light-dark-function",prepare(){let r=0;const currentToggleNameGenerator=()=>toggleNameGenerator(r++);return{postcssPlugin:"postcss-light-dark-function",Declaration(r,{atRule:t,rule:o}){const s=r.parent;if(s){if(b.test(r.prop)){if(s.some((e=>"decl"===e.type&&e.prop===k)))return;const[e,o]=colorSchemes(r.value);if(e&&o){r.cloneBefore({prop:k,value:" "});const e=s.clone();e.removeAll(),e.append(r.clone({prop:k,value:D}));const o=t({name:"media",params:"(prefers-color-scheme: dark)",source:s.source});return o.append(e),void s.after(o)}return o?void r.cloneBefore({prop:k,value:D}):e?void r.cloneBefore({prop:k,value:" "}):void 0}if(w.test(r.value)){if(n(r))return;if(a(r,w))return;const t=transformLightDark(r.value,currentToggleNameGenerator);if(t.value===r.value)return;for(const[e,o]of t.toggles)r.cloneBefore({prop:e,value:o});if(r.cloneBefore({value:t.value}),r.variable&&r.parent){const e=o({selector:"& *",source:r.source});for(const[o,s]of t.toggles)e.append(r.clone({prop:o,value:s}));e.append(r.clone({value:t.value})),r.parent.append(e)}e?.preserve||r.remove()}}}}}});basePlugin.postcss=!0;const postcssPlugin=r=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},r);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-light-dark-function",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/node_modules/@csstools/postcss-light-dark-function/package.json b/node_modules/@csstools/postcss-light-dark-function/package.json new file mode 100644 index 00000000..d444f5eb --- /dev/null +++ b/node_modules/@csstools/postcss-light-dark-function/package.json @@ -0,0 +1,70 @@ +{ + "name": "@csstools/postcss-light-dark-function", + "description": "Use the light-dark() color function in CSS", + "version": "1.0.8", + "contributors": [ + { + "name": "Antonio Laguna", + "email": "antonio@laguna.es", + "url": "https://antonio.laguna.es" + }, + { + "name": "Romain Menke", + "email": "romainmenke@gmail.com" + } + ], + "license": "MIT-0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "type": "module", + "main": "dist/index.cjs", + "module": "dist/index.mjs", + "exports": { + ".": { + "import": { + "types": "./dist/index.d.ts", + "default": "./dist/index.mjs" + }, + "require": { + "default": "./dist/index.cjs" + } + } + }, + "files": [ + "CHANGELOG.md", + "LICENSE.md", + "README.md", + "dist" + ], + "dependencies": { + "@csstools/css-parser-algorithms": "^2.7.1", + "@csstools/css-tokenizer": "^2.4.1", + "@csstools/postcss-progressive-custom-properties": "^3.3.0", + "@csstools/utilities": "^1.0.0" + }, + "peerDependencies": { + "postcss": "^8.4" + }, + "scripts": {}, + "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function#readme", + "repository": { + "type": "git", + "url": "git+https://github.com/csstools/postcss-plugins.git", + "directory": "plugins/postcss-light-dark-function" + }, + "bugs": "https://github.com/csstools/postcss-plugins/issues", + "keywords": [ + "postcss-plugin" + ] +} |
