diff --git a/package-lock.json b/package-lock.json index 02f2c5ab8..b08b9bd38 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12174,7 +12174,8 @@ "dependencies": { "@csstools/css-color-parser": "^1.5.1", "@csstools/css-parser-algorithms": "^2.5.0", - "@csstools/css-tokenizer": "^2.2.3" + "@csstools/css-tokenizer": "^2.2.3", + "@csstools/postcss-progressive-custom-properties": "^3.0.3" }, "devDependencies": { "@csstools/postcss-tape": "*" diff --git a/plugin-packs/postcss-preset-env/test/progressive-custom-properties.expect.css b/plugin-packs/postcss-preset-env/test/progressive-custom-properties.expect.css index a1fb89ed3..161044240 100644 --- a/plugin-packs/postcss-preset-env/test/progressive-custom-properties.expect.css +++ b/plugin-packs/postcss-preset-env/test/progressive-custom-properties.expect.css @@ -40,7 +40,8 @@ } } -@supports (color: hwb(0 0% 0%)) {:root { +@supports (color: hwb(0 0% 0%)) { +:root { --hwb: hwb(20 10% 10%); } diff --git a/plugins/postcss-hwb-function/README.md b/plugins/postcss-hwb-function/README.md index 3f068a4c7..6fde9ebaf 100644 --- a/plugins/postcss-hwb-function/README.md +++ b/plugins/postcss-hwb-function/README.md @@ -1,26 +1,30 @@ -# PostCSS HWB Function [PostCSS Logo][postcss] +# PostCSS HWB Function [PostCSS Logo][PostCSS] -[npm version][npm-url] -[Build Status][cli-url] -[Discord][discord] -

-[Baseline Status][css-url] -[CSS Standard Status][css-url] +[npm version][npm-url] [Build Status][cli-url] [Discord][discord]

[Baseline Status][css-url] [CSS Standard Status][css-url] -[PostCSS HWB Function] lets you use `hwb` color functions in -CSS, following the [CSS Color] specification. +```bash +npm install @csstools/postcss-hwb-function --save-dev +``` + +[PostCSS HWB Function] lets you use the `hwb()` color function in CSS, following [CSS Color Module 4]. ```pcss a { color: hwb(194 0% 0%); +} + +b { color: hwb(194 0% 0% / .5); } /* becomes */ a { - color: rgb(0, 195, 255); - color: rgba(0, 195, 255, .5); + color: rgb(0, 196, 255); +} + +b { + color: rgba(0, 196, 255, 0.5); } ``` @@ -39,21 +43,26 @@ const postcss = require('postcss'); const postcssHWBFunction = require('@csstools/postcss-hwb-function'); postcss([ - postcssHWBFunction(/* pluginOptions */) + postcssHWBFunction(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` [PostCSS HWB Function] runs in all Node environments, with special instructions for: -| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | -| --- | --- | --- | --- | --- | +- [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 functional color notation +The `preserve` option determines whether the original notation is preserved. By default, it is not preserved. ```js @@ -63,15 +72,21 @@ postcssHWBFunction({ preserve: true }) ```pcss a { color: hwb(194 0% 0%); +} + +b { color: hwb(194 0% 0% / .5); } /* becomes */ a { - color: rgb(0, 195, 255); + color: rgb(0, 196, 255); color: hwb(194 0% 0%); - color: rgba(0, 195, 255, .5); +} + +b { + color: rgba(0, 196, 255, 0.5); color: hwb(194 0% 0% / .5); } ``` @@ -81,9 +96,6 @@ a { [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-hwb-function -[CSS Color]: https://drafts.csswg.org/css-color/#the-hwb-notation -[Gulp PostCSS]: https://github.com/postcss/gulp-postcss -[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss -[PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS HWB Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function +[CSS Color Module 4]: https://www.w3.org/TR/css-color-4/#the-hwb-notation diff --git a/plugins/postcss-hwb-function/dist/index.cjs b/plugins/postcss-hwb-function/dist/index.cjs index f5aa65116..9955ba1eb 100644 --- a/plugins/postcss-hwb-function/dist/index.cjs +++ b/plugins/postcss-hwb-function/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms"),r=require("@csstools/css-tokenizer");const s="(color: hwb(0 0% 0%))";function hasSupportsAtRuleAncestor(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&t.params.includes(s))return!0;t=t.parent}else t=t.parent;return!1}function hasFallback(e){const t=e.parent;if(!t)return!1;const r=e.prop.toLowerCase(),s=t.index(e);for(let e=0;e{const l="preserve"in Object(n)&&Boolean(n?.preserve);return{postcssPlugin:"postcss-hwb-function",Declaration:(n,{postcss:p})=>{const c=n.value;if(!o.test(c))return;if(l&&hasSupportsAtRuleAncestor(n))return;if(hasFallback(n))return;const u=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(r.tokenize({css:c})),(r=>{if(!t.isFunctionNode(r)||!a.test(r.getName()))return;const s=e.color(r);return s&&!(s.syntaxFlags.has(e.SyntaxFlag.Experimental)||s.syntaxFlags.has(e.SyntaxFlag.HasNoneKeywords)||s.syntaxFlags.has(e.SyntaxFlag.RelativeColorSyntax))?e.serializeRGB(s):void 0})),i=t.stringify(u);if(i!==c)if(n.variable&&l&&n.parent){const e=n.parent,t=p.atRule({name:"supports",params:s,source:n.source}),r=e.clone();r.removeAll(),r.append(n.clone()),t.append(r),insertAtSupportsAfterCorrectRule(t,e,s),n.replaceWith(n.clone({value:i}))}else l?n.cloneBefore({value:i}):n.replaceWith(n.clone({value:i}))}}};function insertAtSupportsAfterCorrectRule(e,t,r){let s=t,o=t.next();for(;s&&o&&"atrule"===o.type&&"supports"===o.name.toLowerCase()&&o.params===r;)s=o,o=o.next();s.after(e)}postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var s=require("@csstools/postcss-progressive-custom-properties"),e=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-hwb-function",Declaration:a=>{const i=a.value;if(!o.test(i))return;if(hasFallback(a))return;if(hasSupportsAtRuleAncestor(a))return;const c=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(e.tokenize({css:i})),(s=>{if(!t.isFunctionNode(s)||!n.test(s.getName()))return;const e=r.color(s);return e&&!(e.syntaxFlags.has(r.SyntaxFlag.Experimental)||e.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords)||e.syntaxFlags.has(r.SyntaxFlag.RelativeColorSyntax))?r.serializeRGB(e):void 0})),l=t.stringify(c);l!==i&&(a.cloneBefore({value:l}),s?.preserve||a.remove())}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},e);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-hwb-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-hwb-function/dist/index.d.ts b/plugins/postcss-hwb-function/dist/index.d.ts index d469e87a8..f502980c3 100644 --- a/plugins/postcss-hwb-function/dist/index.d.ts +++ b/plugins/postcss-hwb-function/dist/index.d.ts @@ -1,9 +1,17 @@ import type { PluginCreator } from 'postcss'; +/** postcss-hwb-function plugin options */ +export declare type basePluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean; +}; + /** postcss-hwb-function plugin options */ export declare type pluginOptions = { /** Preserve the original notation. default: false */ preserve?: boolean; + /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ + enableProgressiveCustomProperties?: boolean; }; /** Transform hwb() functions in CSS. */ diff --git a/plugins/postcss-hwb-function/dist/index.mjs b/plugins/postcss-hwb-function/dist/index.mjs index 157f55fb2..5bfd13695 100644 --- a/plugins/postcss-hwb-function/dist/index.mjs +++ b/plugins/postcss-hwb-function/dist/index.mjs @@ -1 +1 @@ -import{color as e,SyntaxFlag as t,serializeRGB as r}from"@csstools/css-color-parser";import{replaceComponentValues as s,parseCommaSeparatedListOfComponentValues as o,isFunctionNode as n,stringify as a}from"@csstools/css-parser-algorithms";import{tokenize as p}from"@csstools/css-tokenizer";const l="(color: hwb(0 0% 0%))";function hasSupportsAtRuleAncestor(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&t.params.includes(l))return!0;t=t.parent}else t=t.parent;return!1}function hasFallback(e){const t=e.parent;if(!t)return!1;const r=e.prop.toLowerCase(),s=t.index(e);for(let e=0;e{const f="preserve"in Object(i)&&Boolean(i?.preserve);return{postcssPlugin:"postcss-hwb-function",Declaration:(i,{postcss:m})=>{const h=i.value;if(!c.test(h))return;if(f&&hasSupportsAtRuleAncestor(i))return;if(hasFallback(i))return;const v=s(o(p({css:h})),(s=>{if(!n(s)||!u.test(s.getName()))return;const o=e(s);return o&&!(o.syntaxFlags.has(t.Experimental)||o.syntaxFlags.has(t.HasNoneKeywords)||o.syntaxFlags.has(t.RelativeColorSyntax))?r(o):void 0})),d=a(v);if(d!==h)if(i.variable&&f&&i.parent){const e=i.parent,t=m.atRule({name:"supports",params:l,source:i.source}),r=e.clone();r.removeAll(),r.append(i.clone()),t.append(r),insertAtSupportsAfterCorrectRule(t,e,l),i.replaceWith(i.clone({value:d}))}else f?i.cloneBefore({value:d}):i.replaceWith(i.clone({value:d}))}}};function insertAtSupportsAfterCorrectRule(e,t,r){let s=t,o=t.next();for(;s&&o&&"atrule"===o.type&&"supports"===o.name.toLowerCase()&&o.params===r;)s=o,o=o.next();s.after(e)}postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e}from"@csstools/css-tokenizer";import{color as r,SyntaxFlag as t,serializeRGB as o}from"@csstools/css-color-parser";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as a,isFunctionNode as p,stringify as c}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-hwb-function",Declaration:u=>{const f=u.value;if(!i.test(f))return;if(hasFallback(u))return;if(hasSupportsAtRuleAncestor(u))return;const m=n(a(e({css:f})),(s=>{if(!p(s)||!l.test(s.getName()))return;const e=r(s);return e&&!(e.syntaxFlags.has(t.Experimental)||e.syntaxFlags.has(t.HasNoneKeywords)||e.syntaxFlags.has(t.RelativeColorSyntax))?o(e):void 0})),h=c(m);h!==f&&(u.cloneBefore({value:h}),s?.preserve||u.remove())}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},e);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-hwb-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-hwb-function/docs/README.md b/plugins/postcss-hwb-function/docs/README.md new file mode 100644 index 000000000..197b307b9 --- /dev/null +++ b/plugins/postcss-hwb-function/docs/README.md @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + +
+ +[] lets you use the `hwb()` color function in CSS, following [CSS Color Module 4]. + +```pcss + + +/* becomes */ + + +``` + + + + + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is not preserved. + +```js +({ preserve: true }) +``` + +```pcss + + +/* becomes */ + + +``` + + +[CSS Color Module 4]: diff --git a/plugins/postcss-hwb-function/package.json b/plugins/postcss-hwb-function/package.json index 48b388f53..fefc623af 100644 --- a/plugins/postcss-hwb-function/package.json +++ b/plugins/postcss-hwb-function/package.json @@ -2,7 +2,17 @@ "name": "@csstools/postcss-hwb-function", "description": "Use hwb() color functions in CSS", "version": "3.0.8", - "author": "Jonathan Neal ", + "contributors": [ + { + "name": "Antonio Laguna", + "email": "antonio@laguna.es", + "url": "https://antonio.laguna.es" + }, + { + "name": "Romain Menke", + "email": "romainmenke@gmail.com" + } + ], "license": "MIT-0", "funding": [ { @@ -33,7 +43,6 @@ }, "files": [ "CHANGELOG.md", - "INSTALL.md", "LICENSE.md", "README.md", "dist" @@ -41,7 +50,8 @@ "dependencies": { "@csstools/css-color-parser": "^1.5.1", "@csstools/css-parser-algorithms": "^2.5.0", - "@csstools/css-tokenizer": "^2.2.3" + "@csstools/css-tokenizer": "^2.2.3", + "@csstools/postcss-progressive-custom-properties": "^3.0.3" }, "peerDependencies": { "postcss": "^8.4" @@ -51,7 +61,7 @@ }, "scripts": { "build": "rollup -c ../../rollup/default.mjs", - "docs": "node ../../.github/bin/generate-docs/install.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 --test", @@ -66,24 +76,20 @@ "bugs": "https://github.com/csstools/postcss-plugins/issues", "keywords": [ "color", - "comma", "css", "design", - "functional", - "hsl", - "hsla", "hwb", "notation", "postcss", "postcss-plugin", - "rgb", - "rgba", - "space", "syntax" ], "csstools": { + "cssdbId": "hwb-function", "exportName": "postcssHWBFunction", - "humanReadableName": "PostCSS HWB Function" + "humanReadableName": "PostCSS HWB Function", + "specUrl": "https://www.w3.org/TR/css-color-4/#the-hwb-notation" + }, "volta": { "extends": "../../package.json" diff --git a/plugins/postcss-hwb-function/src/has-supports-at-rule-ancestor.ts b/plugins/postcss-hwb-function/src/has-supports-at-rule-ancestor.ts index b9cbe3ad9..92e3655de 100644 --- a/plugins/postcss-hwb-function/src/has-supports-at-rule-ancestor.ts +++ b/plugins/postcss-hwb-function/src/has-supports-at-rule-ancestor.ts @@ -1,6 +1,6 @@ import type { Node, AtRule } from 'postcss'; -export const atSupportsHwbParams = '(color: hwb(0 0% 0%))'; +const atSupportsHwbParams = '(color: hwb(0 0% 0%))'; export function hasSupportsAtRuleAncestor(node: Node): boolean { let parent = node.parent; diff --git a/plugins/postcss-hwb-function/src/index.ts b/plugins/postcss-hwb-function/src/index.ts index 82d4624b8..58f833079 100644 --- a/plugins/postcss-hwb-function/src/index.ts +++ b/plugins/postcss-hwb-function/src/index.ts @@ -1,38 +1,36 @@ -import type { AtRule, Container, Declaration, Node, Postcss, Result } from 'postcss'; +import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties'; +import type { Declaration } from 'postcss'; import type { PluginCreator } from 'postcss'; -import { atSupportsHwbParams, hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor'; -import { color } from '@csstools/css-color-parser'; +import { tokenize } from '@csstools/css-tokenizer'; +import { color, serializeRGB, SyntaxFlag } from '@csstools/css-color-parser'; import { hasFallback } from './has-fallback-decl'; +import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor'; import { isFunctionNode, parseCommaSeparatedListOfComponentValues, replaceComponentValues, stringify } from '@csstools/css-parser-algorithms'; -import { serializeRGB, SyntaxFlag } from '@csstools/css-color-parser'; -import { tokenize } from '@csstools/css-tokenizer'; const HWB_FUNCTION_REGEX = /hwb\(/i; const HWB_NAME_REGEX = /^hwb$/i; /** postcss-hwb-function plugin options */ -export type pluginOptions = { +export type basePluginOptions = { /** Preserve the original notation. default: false */ preserve?: boolean, }; /** Transform hwb() functions in CSS. */ -const postcssPlugin: PluginCreator = (opts?: pluginOptions) => { - const preserve = 'preserve' in Object(opts) ? Boolean(opts?.preserve) : false; - +const basePlugin: PluginCreator = (opts?: basePluginOptions) => { return { postcssPlugin: 'postcss-hwb-function', - Declaration: (decl: Declaration, { postcss }: { result: Result, postcss: Postcss }) => { + Declaration: (decl: Declaration) => { const originalValue = decl.value; - if (!HWB_FUNCTION_REGEX.test(originalValue)) { + if (!(HWB_FUNCTION_REGEX.test(originalValue))) { return; } - if (preserve && hasSupportsAtRuleAncestor(decl)) { + if (hasFallback(decl)) { return; } - if (hasFallback(decl)) { + if (hasSupportsAtRuleAncestor(decl)) { return; } @@ -60,53 +58,50 @@ const postcssPlugin: PluginCreator = (opts?: pluginOptions) => { }, ); - const modified = stringify(replaced); - if (modified === originalValue) { + const modifiedValue = stringify(replaced); + if (modifiedValue === originalValue) { return; } - if (decl.variable && preserve && decl.parent) { - const parent = decl.parent; - const atSupports = postcss.atRule({ name: 'supports', params: atSupportsHwbParams, source: decl.source }); + decl.cloneBefore({ value: modifiedValue }); - const parentClone = parent.clone(); - parentClone.removeAll(); - - parentClone.append(decl.clone()); - atSupports.append(parentClone); - - insertAtSupportsAfterCorrectRule(atSupports, parent, atSupportsHwbParams); - - decl.replaceWith(decl.clone({ value: modified })); - } else if (preserve) { - decl.cloneBefore({ value: modified }); - - } else { - decl.replaceWith(decl.clone({ value: modified })); + if (!opts?.preserve) { + decl.remove(); } }, }; }; -postcssPlugin.postcss = true; +basePlugin.postcss = true; -export default postcssPlugin; +/** postcss-hwb-function plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, + /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ + enableProgressiveCustomProperties?: boolean, +}; -function insertAtSupportsAfterCorrectRule(atSupports: AtRule, parent: Container, params: string) { - // Ensure correct order of @supports rules - // Find the last one created by us or the current parent and insert after. - let insertAfter = parent; - let nextInsertAfter = parent.next(); - while ( - insertAfter && - nextInsertAfter && - nextInsertAfter.type === 'atrule' && - nextInsertAfter.name.toLowerCase() === 'supports' && - nextInsertAfter.params === params - ) { - insertAfter = nextInsertAfter; - nextInsertAfter = nextInsertAfter.next(); +/** Transform hwb() functions in CSS. */ +const postcssPlugin: PluginCreator = (opts?: pluginOptions) => { + const options = Object.assign({ + preserve: false, + enableProgressiveCustomProperties: true, + }, opts); + + if (options.enableProgressiveCustomProperties && options.preserve) { + return { + postcssPlugin: 'postcss-hwb-function', + plugins: [ + postcssProgressiveCustomProperties(), + basePlugin(options), + ], + }; } - insertAfter.after(atSupports); -} + return basePlugin(options); +}; + +postcssPlugin.postcss = true; + +export default postcssPlugin; diff --git a/plugins/postcss-hwb-function/test/_tape.mjs b/plugins/postcss-hwb-function/test/_tape.mjs index dd405cf26..dff61a353 100644 --- a/plugins/postcss-hwb-function/test/_tape.mjs +++ b/plugins/postcss-hwb-function/test/_tape.mjs @@ -29,4 +29,13 @@ postcssTape(plugin)({ preserve: true, }, }, + 'examples/example': { + message: 'minimal example', + }, + 'examples/example:preserve-true': { + message: 'minimal example', + options: { + preserve: true, + }, + }, }); diff --git a/plugins/postcss-hwb-function/test/basic.preserve-true.expect.css b/plugins/postcss-hwb-function/test/basic.preserve-true.expect.css index a9ced8e5c..00d85895b 100644 --- a/plugins/postcss-hwb-function/test/basic.preserve-true.expect.css +++ b/plugins/postcss-hwb-function/test/basic.preserve-true.expect.css @@ -17,8 +17,13 @@ color-8: hwb(0 60% 40%); color-9: hwb(none 60% 40%); color-10: rgba(153, 153, 153, var(--alpha)); +} + +@supports (color: hwb(0 0% 0%)) { +.test-hwb { color-10: hwb(0 60% 40% / var(--alpha)); } +} .test-ignore { color: hwb(194, 0%, 0%, .5); /* with comma-separated values */ diff --git a/plugins/postcss-hwb-function/test/basic.with-cloned-rules.expect.css b/plugins/postcss-hwb-function/test/basic.with-cloned-rules.expect.css index 554efb777..6ee37ed76 100644 --- a/plugins/postcss-hwb-function/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-hwb-function/test/basic.with-cloned-rules.expect.css @@ -17,8 +17,13 @@ color-8: hwb(0 60% 40%); color-9: hwb(none 60% 40%); color-10: rgba(153, 153, 153, var(--alpha)); +} + +@supports (color: hwb(0 0% 0%)) { +.test-hwb { color-10: hwb(0 60% 40% / var(--alpha)); } +} .test-ignore { color: hwb(194, 0%, 0%, .5); /* with comma-separated values */ diff --git a/plugins/postcss-hwb-function/test/examples/example.css b/plugins/postcss-hwb-function/test/examples/example.css new file mode 100644 index 000000000..717f8a7a2 --- /dev/null +++ b/plugins/postcss-hwb-function/test/examples/example.css @@ -0,0 +1,7 @@ +a { + color: hwb(194 0% 0%); +} + +b { + color: hwb(194 0% 0% / .5); +} diff --git a/plugins/postcss-hwb-function/test/examples/example.expect.css b/plugins/postcss-hwb-function/test/examples/example.expect.css new file mode 100644 index 000000000..e3902c3a6 --- /dev/null +++ b/plugins/postcss-hwb-function/test/examples/example.expect.css @@ -0,0 +1,7 @@ +a { + color: rgb(0, 196, 255); +} + +b { + color: rgba(0, 196, 255, 0.5); +} diff --git a/plugins/postcss-hwb-function/test/examples/example.preserve-true.expect.css b/plugins/postcss-hwb-function/test/examples/example.preserve-true.expect.css new file mode 100644 index 000000000..17ae8ec55 --- /dev/null +++ b/plugins/postcss-hwb-function/test/examples/example.preserve-true.expect.css @@ -0,0 +1,9 @@ +a { + color: rgb(0, 196, 255); + color: hwb(194 0% 0%); +} + +b { + color: rgba(0, 196, 255, 0.5); + color: hwb(194 0% 0% / .5); +} diff --git a/plugins/postcss-hwb-function/test/variables.preserve-true.expect.css b/plugins/postcss-hwb-function/test/variables.preserve-true.expect.css index 0386987e2..c340d0611 100644 --- a/plugins/postcss-hwb-function/test/variables.preserve-true.expect.css +++ b/plugins/postcss-hwb-function/test/variables.preserve-true.expect.css @@ -7,13 +7,12 @@ --fifty: 50; --firebrick-var: hwb(40% var(--fifty) 34.5 / var(--opacity-50)); -}@supports (color: hwb(0 0% 0%)) {:root { - --firebrick: hwb(194 0% 0%); } -}@supports (color: hwb(0 0% 0%)) {:root { + +@supports (color: hwb(0 0% 0%)) { +:root { + --firebrick: hwb(194 0% 0%); --firebrick-a50: hwb(194 0% 0%); -} -}@supports (color: hwb(0 0% 0%)) {:root { --firebrick-a50-var: hwb(194 0% 0% / var(--opacity-50)); } }