Skip to content

postcss-hwb-function : maintenance #1289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@
}
}

@supports (color: hwb(0 0% 0%)) {:root {
@supports (color: hwb(0 0% 0%)) {
:root {

--hwb: hwb(20 10% 10%);
}
Expand Down
54 changes: 33 additions & 21 deletions plugins/postcss-hwb-function/README.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,30 @@
# PostCSS HWB Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
# PostCSS HWB 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-hwb-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/hwb-function.svg" height="20">][css-url]
[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/hwb-function.svg" height="20">][css-url]
[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-hwb-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/hwb-function.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/hwb-function.svg" height="20">][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);
}
```

Expand All @@ -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
Expand All @@ -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);
}
```
Expand All @@ -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
2 changes: 1 addition & 1 deletion plugins/postcss-hwb-function/dist/index.cjs
Original file line number Diff line number Diff line change
@@ -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<s;e++){const s=t.nodes[e];if("decl"===s.type&&s.prop.toLowerCase()===r)return!0}return!1}const o=/hwb\(/i,a=/^hwb$/i,postcssPlugin=n=>{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<t;s++){const t=e.nodes[s];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(s){let e=s.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name.toLowerCase()&&e.params.includes("(color: hwb(0 0% 0%))"))return!0;e=e.parent}else e=e.parent;return!1}const o=/hwb\(/i,n=/^hwb$/i,basePlugin=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;
8 changes: 8 additions & 0 deletions plugins/postcss-hwb-function/dist/index.d.ts
Original file line number Diff line number Diff line change
@@ -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. */
Expand Down
2 changes: 1 addition & 1 deletion plugins/postcss-hwb-function/dist/index.mjs
Original file line number Diff line number Diff line change
@@ -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<s;e++){const s=t.nodes[e];if("decl"===s.type&&s.prop.toLowerCase()===r)return!0}return!1}const c=/hwb\(/i,u=/^hwb$/i,postcssPlugin=i=>{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<t;s++){const t=e.nodes[s];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(s){let e=s.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name.toLowerCase()&&e.params.includes("(color: hwb(0 0% 0%))"))return!0;e=e.parent}else e=e.parent;return!1}const i=/hwb\(/i,l=/^hwb$/i,basePlugin=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};
54 changes: 54 additions & 0 deletions plugins/postcss-hwb-function/docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!-- Available Variables: -->
<!-- <humanReadableName> PostCSS Your Plugin -->
<!-- <exportName> postcssYourPlugin -->
<!-- <packageName> @csstools/postcss-your-plugin -->
<!-- <packageVersion> 1.0.0 -->
<!-- <packagePath> plugins/postcss-your-plugin -->
<!-- <cssdbId> your-feature -->
<!-- <specUrl> https://www.w3.org/TR/css-color-4/#funcdef-color -->
<!-- <example.css> file contents for examples/example.css -->
<!-- <header> -->
<!-- <usage> usage instructions -->
<!-- <envSupport> -->
<!-- <corsWarning> -->
<!-- <linkList> -->
<!-- <parallelBuildsNotice> -->
<!-- to generate : npm run docs -->

<header>

[<humanReadableName>] lets you use the `hwb()` color function in CSS, following [CSS Color Module 4].

```pcss
<example.css>

/* becomes */

<example.expect.css>
```

<usage>

<envSupport>

## Options

### preserve

The `preserve` option determines whether the original notation
is preserved. By default, it is not preserved.

```js
<exportName>({ preserve: true })
```

```pcss
<example.css>

/* becomes */

<example.preserve-true.expect.css>
```

<linkList>
[CSS Color Module 4]: <specUrl>
30 changes: 18 additions & 12 deletions plugins/postcss-hwb-function/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,17 @@
"name": "@csstools/postcss-hwb-function",
"description": "Use hwb() color functions in CSS",
"version": "3.0.8",
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
"contributors": [
{
"name": "Antonio Laguna",
"email": "antonio@laguna.es",
"url": "https://antonio.laguna.es"
},
{
"name": "Romain Menke",
"email": "romainmenke@gmail.com"
}
],
"license": "MIT-0",
"funding": [
{
Expand Down Expand Up @@ -33,15 +43,15 @@
},
"files": [
"CHANGELOG.md",
"INSTALL.md",
"LICENSE.md",
"README.md",
"dist"
],
"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"
Expand All @@ -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",
Expand All @@ -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"
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
Loading