From eb31890c209677527786e9c168aad0ee6745b590 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Thu, 20 Jan 2022 17:25:01 +0100 Subject: [PATCH 1/4] postcss-hwb-function --- package-lock.json | 32 +- plugins/postcss-hwb-function/.gitignore | 13 + plugins/postcss-hwb-function/.nvmrc | 1 + plugins/postcss-hwb-function/.tape.mjs | 23 ++ plugins/postcss-hwb-function/CHANGELOG.md | 5 + plugins/postcss-hwb-function/INSTALL.md | 164 +++++++++++ plugins/postcss-hwb-function/LICENSE.md | 108 +++++++ plugins/postcss-hwb-function/README.md | 88 ++++++ plugins/postcss-hwb-function/package.json | 70 +++++ .../src/has-supports-at-rule-ancestor.ts | 19 ++ plugins/postcss-hwb-function/src/hwb.ts | 43 +++ plugins/postcss-hwb-function/src/index.ts | 112 +++++++ .../src/on-css-function.ts | 277 ++++++++++++++++++ plugins/postcss-hwb-function/test/_import.mjs | 6 + .../postcss-hwb-function/test/_require.cjs | 6 + plugins/postcss-hwb-function/test/basic.css | 9 + .../test/basic.expect.css | 9 + .../test/basic.preserve-true.expect.css | 11 + .../postcss-hwb-function/test/variables.css | 10 + .../test/variables.expect.css | 10 + .../test/variables.preserve-true.expect.css | 19 ++ plugins/postcss-hwb-function/tsconfig.json | 9 + 22 files changed, 1034 insertions(+), 10 deletions(-) create mode 100644 plugins/postcss-hwb-function/.gitignore create mode 100644 plugins/postcss-hwb-function/.nvmrc create mode 100644 plugins/postcss-hwb-function/.tape.mjs create mode 100644 plugins/postcss-hwb-function/CHANGELOG.md create mode 100644 plugins/postcss-hwb-function/INSTALL.md create mode 100644 plugins/postcss-hwb-function/LICENSE.md create mode 100644 plugins/postcss-hwb-function/README.md create mode 100644 plugins/postcss-hwb-function/package.json create mode 100644 plugins/postcss-hwb-function/src/has-supports-at-rule-ancestor.ts create mode 100644 plugins/postcss-hwb-function/src/hwb.ts create mode 100644 plugins/postcss-hwb-function/src/index.ts create mode 100644 plugins/postcss-hwb-function/src/on-css-function.ts create mode 100644 plugins/postcss-hwb-function/test/_import.mjs create mode 100644 plugins/postcss-hwb-function/test/_require.cjs create mode 100644 plugins/postcss-hwb-function/test/basic.css create mode 100644 plugins/postcss-hwb-function/test/basic.expect.css create mode 100644 plugins/postcss-hwb-function/test/basic.preserve-true.expect.css create mode 100644 plugins/postcss-hwb-function/test/variables.css create mode 100644 plugins/postcss-hwb-function/test/variables.expect.css create mode 100644 plugins/postcss-hwb-function/test/variables.preserve-true.expect.css create mode 100644 plugins/postcss-hwb-function/tsconfig.json diff --git a/package-lock.json b/package-lock.json index b064c0651..430bd02e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1747,6 +1747,10 @@ "resolved": "plugins/postcss-base-plugin", "link": true }, + "node_modules/@csstools/postcss-hwb-function": { + "resolved": "plugins/postcss-hwb-function", + "link": true + }, "node_modules/@csstools/postcss-is-pseudo-class": { "resolved": "plugins/postcss-is-pseudo-class", "link": true @@ -6427,9 +6431,6 @@ "bin": { "postcss-base-plugin": "dist/cli.cjs" }, - "devDependencies": { - "@csstools/postcss-tape": "^1.0.0" - }, "engines": { "node": "^12 || ^14 || >=16" }, @@ -6495,7 +6496,6 @@ "postcss-value-parser": "^4.2.0" }, "devDependencies": { - "@csstools/postcss-tape": "^1.0.0", "postcss-import": "^14.0.2" }, "engines": { @@ -6604,6 +6604,19 @@ "postcss": "^8.3" } }, + "plugins/postcss-hwb-function": { + "version": "1.0.0", + "license": "CC0-1.0", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^12 || ^14 || >=16" + }, + "peerDependencies": { + "postcss": "^8.3" + } + }, "plugins/postcss-image-set-function": { "version": "4.0.4", "license": "CC0-1.0", @@ -6676,9 +6689,6 @@ "dependencies": { "postcss-selector-parser": "^6.0.8" }, - "devDependencies": { - "@csstools/postcss-tape": "^1.0.0" - }, "engines": { "node": "^12 || ^14 || >=16" }, @@ -7919,8 +7929,12 @@ }, "@csstools/postcss-base-plugin": { "version": "file:plugins/postcss-base-plugin", + "requires": {} + }, + "@csstools/postcss-hwb-function": { + "version": "file:plugins/postcss-hwb-function", "requires": { - "@csstools/postcss-tape": "^1.0.0" + "postcss-value-parser": "^4.2.0" } }, "@csstools/postcss-is-pseudo-class": { @@ -10372,7 +10386,6 @@ "postcss-custom-properties": { "version": "file:plugins/postcss-custom-properties", "requires": { - "@csstools/postcss-tape": "^1.0.0", "postcss-import": "^14.0.2", "postcss-value-parser": "^4.2.0" } @@ -10487,7 +10500,6 @@ "postcss-nesting": { "version": "file:plugins/postcss-nesting", "requires": { - "@csstools/postcss-tape": "^1.0.0", "postcss-selector-parser": "^6.0.8" } }, diff --git a/plugins/postcss-hwb-function/.gitignore b/plugins/postcss-hwb-function/.gitignore new file mode 100644 index 000000000..b5d13c8c0 --- /dev/null +++ b/plugins/postcss-hwb-function/.gitignore @@ -0,0 +1,13 @@ +node_modules +dist +package-lock.json +yarn.lock +*.log* +*.result.css +*.result.css.map +!.editorconfig +!.gitignore +!.rollup.js +!.tape.js +!.travis.yml +!.github diff --git a/plugins/postcss-hwb-function/.nvmrc b/plugins/postcss-hwb-function/.nvmrc new file mode 100644 index 000000000..f0b10f153 --- /dev/null +++ b/plugins/postcss-hwb-function/.nvmrc @@ -0,0 +1 @@ +v16.13.1 diff --git a/plugins/postcss-hwb-function/.tape.mjs b/plugins/postcss-hwb-function/.tape.mjs new file mode 100644 index 000000000..b261f8d50 --- /dev/null +++ b/plugins/postcss-hwb-function/.tape.mjs @@ -0,0 +1,23 @@ +import postcssTape from '../../packages/postcss-tape/dist/index.mjs'; +import plugin from '@csstools/postcss-hwb-function'; + +postcssTape(plugin)({ + 'basic': { + message: 'supports basic usage', + }, + 'basic:preserve-true': { + message: 'supports variables with { preserve: true } usage', + options: { + preserve: true + } + }, + 'variables': { + message: 'supports variables', + }, + 'variables:preserve-true': { + message: 'supports variables with { preserve: true } usage', + options: { + preserve: true + } + }, +}); diff --git a/plugins/postcss-hwb-function/CHANGELOG.md b/plugins/postcss-hwb-function/CHANGELOG.md new file mode 100644 index 000000000..decff10e3 --- /dev/null +++ b/plugins/postcss-hwb-function/CHANGELOG.md @@ -0,0 +1,5 @@ +# Changes to PostCSS Hwb Function + +### 1.0.0 + +- Initial version diff --git a/plugins/postcss-hwb-function/INSTALL.md b/plugins/postcss-hwb-function/INSTALL.md new file mode 100644 index 000000000..983e9fc22 --- /dev/null +++ b/plugins/postcss-hwb-function/INSTALL.md @@ -0,0 +1,164 @@ +# Installing PostCSS Hwb Function + +[PostCSS Hwb Function] 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 Hwb Function] to your project: + +```bash +npm install postcss @csstools/postcss-hwb-function --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +const postcss = require('postcss'); +const postcssHwbFunction = require('@csstools/postcss-hwb-function'); + +postcss([ + postcssHwbFunction(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +## PostCSS CLI + +Add [PostCSS CLI] to your project: + +```bash +npm install postcss-cli --save-dev +``` + +Use [PostCSS Hwb Function] in your `postcss.config.js` configuration +file: + +```js +const postcssHwbFunction = require('@csstools/postcss-hwb-function'); + +module.exports = { + plugins: [ + postcssHwbFunction(/* pluginOptions */) + ] +} +``` + +## Webpack + +Add [PostCSS Loader] to your project: + +```bash +npm install postcss-loader --save-dev +``` + +Use [PostCSS Hwb Function] in your Webpack configuration: + +```js +const postcssHwbFunction = require('@csstools/postcss-hwb-function'); + +module.exports = { + module: { + rules: [ + { + test: /\.css$/, + use: [ + 'style-loader', + { loader: 'css-loader', options: { importLoaders: 1 } }, + { loader: 'postcss-loader', options: { + ident: 'postcss', + plugins: () => [ + postcssHwbFunction(/* 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 Hwb Function] in your +`config-overrides.js` file: + +```js +const reactAppRewirePostcss = require('react-app-rewire-postcss'); +const postcssHwbFunction = require('@csstools/postcss-hwb-function'); + +module.exports = config => reactAppRewirePostcss(config, { + plugins: () => [ + postcssHwbFunction(/* pluginOptions */) + ] +}); +``` + +## Gulp + +Add [Gulp PostCSS] to your project: + +```bash +npm install gulp-postcss --save-dev +``` + +Use [PostCSS Hwb Function] in your Gulpfile: + +```js +const postcss = require('gulp-postcss'); +const postcssHwbFunction = require('@csstools/postcss-hwb-function'); + +gulp.task('css', () => gulp.src('./src/*.css').pipe( + postcss([ + postcssHwbFunction(/* pluginOptions */) + ]) +).pipe( + gulp.dest('.') +)); +``` + +## Grunt + +Add [Grunt PostCSS] to your project: + +```bash +npm install grunt-postcss --save-dev +``` + +Use [PostCSS Hwb Function] in your Gruntfile: + +```js +const postcssHwbFunction = require('@csstools/postcss-hwb-function'); + +grunt.loadNpmTasks('grunt-postcss'); + +grunt.initConfig({ + postcss: { + options: { + use: [ + postcssHwbFunction(/* 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 Hwb Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function +[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/plugins/postcss-hwb-function/LICENSE.md b/plugins/postcss-hwb-function/LICENSE.md new file mode 100644 index 000000000..0bc1fa706 --- /dev/null +++ b/plugins/postcss-hwb-function/LICENSE.md @@ -0,0 +1,108 @@ +# CC0 1.0 Universal + +## Statement of Purpose + +The laws of most jurisdictions throughout the world automatically confer +exclusive Copyright and Related Rights (defined below) upon the creator and +subsequent owner(s) (each and all, an “owner”) of an original work of +authorship and/or a database (each, a “Work”). + +Certain owners wish to permanently relinquish those rights to a Work for the +purpose of contributing to a commons of creative, cultural and scientific works +(“Commons”) that the public can reliably and without fear of later claims of +infringement build upon, modify, incorporate in other works, reuse and +redistribute as freely as possible in any form whatsoever and for any purposes, +including without limitation commercial purposes. These owners may contribute +to the Commons to promote the ideal of a free culture and the further +production of creative, cultural and scientific works, or to gain reputation or +greater distribution for their Work in part through the use and efforts of +others. + +For these and/or other purposes and motivations, and without any expectation of +additional consideration or compensation, the person associating CC0 with a +Work (the “Affirmer”), to the extent that he or she is an owner of Copyright +and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and +publicly distribute the Work under its terms, with knowledge of his or her +Copyright and Related Rights in the Work and the meaning and intended legal +effect of CC0 on those rights. + +1. Copyright and Related Rights. A Work made available under CC0 may be + protected by copyright and related or neighboring rights (“Copyright and + Related Rights”). Copyright and Related Rights include, but are not limited + to, the following: + 1. the right to reproduce, adapt, distribute, perform, display, communicate, + and translate a Work; + 2. moral rights retained by the original author(s) and/or performer(s); + 3. publicity and privacy rights pertaining to a person’s image or likeness + depicted in a Work; + 4. rights protecting against unfair competition in regards to a Work, + subject to the limitations in paragraph 4(i), below; + 5. rights protecting the extraction, dissemination, use and reuse of data in + a Work; + 6. database rights (such as those arising under Directive 96/9/EC of the + European Parliament and of the Council of 11 March 1996 on the legal + protection of databases, and under any national implementation thereof, + including any amended or successor version of such directive); and + 7. other similar, equivalent or corresponding rights throughout the world + based on applicable law or treaty, and any national implementations + thereof. + +2. Waiver. To the greatest extent permitted by, but not in contravention of, + applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and + unconditionally waives, abandons, and surrenders all of Affirmer’s Copyright + and Related Rights and associated claims and causes of action, whether now + known or unknown (including existing as well as future claims and causes of + action), in the Work (i) in all territories worldwide, (ii) for the maximum + duration provided by applicable law or treaty (including future time + extensions), (iii) in any current or future medium and for any number of + copies, and (iv) for any purpose whatsoever, including without limitation + commercial, advertising or promotional purposes (the “Waiver”). Affirmer + makes the Waiver for the benefit of each member of the public at large and + to the detriment of Affirmer’s heirs and successors, fully intending that + such Waiver shall not be subject to revocation, rescission, cancellation, + termination, or any other legal or equitable action to disrupt the quiet + enjoyment of the Work by the public as contemplated by Affirmer’s express + Statement of Purpose. + +3. Public License Fallback. Should any part of the Waiver for any reason be + judged legally invalid or ineffective under applicable law, then the Waiver + shall be preserved to the maximum extent permitted taking into account + Affirmer’s express Statement of Purpose. In addition, to the extent the + Waiver is so judged Affirmer hereby grants to each affected person a + royalty-free, non transferable, non sublicensable, non exclusive, + irrevocable and unconditional license to exercise Affirmer’s Copyright and + Related Rights in the Work (i) in all territories worldwide, (ii) for the + maximum duration provided by applicable law or treaty (including future time + extensions), (iii) in any current or future medium and for any number of + copies, and (iv) for any purpose whatsoever, including without limitation + commercial, advertising or promotional purposes (the “License”). The License + shall be deemed effective as of the date CC0 was applied by Affirmer to the + Work. Should any part of the License for any reason be judged legally + invalid or ineffective under applicable law, such partial invalidity or + ineffectiveness shall not invalidate the remainder of the License, and in + such case Affirmer hereby affirms that he or she will not (i) exercise any + of his or her remaining Copyright and Related Rights in the Work or (ii) + assert any associated claims and causes of action with respect to the Work, + in either case contrary to Affirmer’s express Statement of Purpose. + +4. Limitations and Disclaimers. + 1. No trademark or patent rights held by Affirmer are waived, abandoned, + surrendered, licensed or otherwise affected by this document. + 2. Affirmer offers the Work as-is and makes no representations or warranties + of any kind concerning the Work, express, implied, statutory or + otherwise, including without limitation warranties of title, + merchantability, fitness for a particular purpose, non infringement, or + the absence of latent or other defects, accuracy, or the present or + absence of errors, whether or not discoverable, all to the greatest + extent permissible under applicable law. + 3. Affirmer disclaims responsibility for clearing rights of other persons + that may apply to the Work or any use thereof, including without + limitation any person’s Copyright and Related Rights in the Work. + Further, Affirmer disclaims responsibility for obtaining any necessary + consents, permissions or other rights required for any use of the Work. + 4. Affirmer understands and acknowledges that Creative Commons is not a + party to this document and has no duty or obligation with respect to this + CC0 or use of the Work. + +For more information, please see +http://creativecommons.org/publicdomain/zero/1.0/. diff --git a/plugins/postcss-hwb-function/README.md b/plugins/postcss-hwb-function/README.md new file mode 100644 index 000000000..6831365a6 --- /dev/null +++ b/plugins/postcss-hwb-function/README.md @@ -0,0 +1,88 @@ +# PostCSS Hwb Function [PostCSS Logo][postcss] + +[npm version][npm-url] +[CSS Standard Status][css-url] +[Build Status][cli-url] +[support chat][git-url] + + +[PostCSS Hwb Function] lets you use `hwb` color functions in +CSS, following the [CSS Color] specification. + +```pcss +a { + color: hwb(194 0% 0%); + color: hwb(194 0% 0% / .5); +} + +/* becomes */ + +a { + color: rgb(0, 195, 255); + color: rgba(0, 195, 255, .5); +} +``` + +## Usage + +Add [PostCSS Hwb Function] to your project: + +```bash +npm install postcss @csstools/postcss-hwb-function --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +const postcss = require('postcss'); +const postcssHwbFunction = require('@csstools/postcss-hwb-function'); + +postcss([ + 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) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | +| --- | --- | --- | --- | --- | --- | + +## Options + +### preserve + +The `preserve` option determines whether the original functional color notation +is preserved. By default, it is not preserved. + +```js +postcssHwbFunction({ preserve: true }) +``` + +```pcss +a { + color: hwb(194 0% 0%); + color: hwb(194 0% 0% / .5); +} + +/* becomes */ + +a { + color: rgb(0, 195, 255); + color: hwb(194 0% 0%); + color: rgba(0, 195, 255, .5); + color: hwb(194 0% 0% / .5); +} +``` + +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[css-url]: https://cssdb.org/#hwb-function +[git-url]: https://gitter.im/postcss/postcss +[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 diff --git a/plugins/postcss-hwb-function/package.json b/plugins/postcss-hwb-function/package.json new file mode 100644 index 000000000..2d1211201 --- /dev/null +++ b/plugins/postcss-hwb-function/package.json @@ -0,0 +1,70 @@ +{ + "name": "@csstools/postcss-hwb-function", + "version": "1.0.0", + "description": "Use hwb() color functions in CSS", + "author": "Jonathan Neal ", + "license": "CC0-1.0", + "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function#readme", + "bugs": "https://github.com/csstools/postcss-plugins/issues", + "main": "dist/index.cjs", + "module": "dist/index.mjs", + "types": "./dist/index.d.ts", + "exports": { + ".": { + "import": "./dist/index.mjs", + "require": "./dist/index.cjs", + "default": "./dist/index.mjs" + } + }, + "files": [ + "CHANGELOG.md", + "INSTALL.md", + "LICENSE.md", + "README.md", + "dist" + ], + "scripts": { + "build": "rollup -c ../../rollup/default.js", + "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", + "lint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", + "prepublishOnly": "npm run clean && npm run build && npm run test", + "stryker": "stryker run --logLevel error", + "test": "node .tape.mjs && npm run test:exports", + "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs" + }, + "engines": { + "node": "^12 || ^14 || >=16" + }, + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "peerDependencies": { + "postcss": "^8.3" + }, + "keywords": [ + "postcss", + "css", + "postcss-plugin", + "color", + "colors", + "rgb", + "rgba", + "hsl", + "hsla", + "hwb", + "functional", + "notation", + "design", + "syntax", + "space", + "comma" + ], + "repository": { + "type": "git", + "url": "https://github.com/csstools/postcss-plugins.git", + "directory": "plugins/postcss-hwb-function" + }, + "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 new file mode 100644 index 000000000..59eb4680a --- /dev/null +++ b/plugins/postcss-hwb-function/src/has-supports-at-rule-ancestor.ts @@ -0,0 +1,19 @@ +import type { Node, AtRule } from 'postcss'; + +export function hasSupportsAtRuleAncestor(node: Node): boolean { + let parent = node.parent; + while (parent) { + if (parent.type !== 'atrule') { + parent = parent.parent; + continue; + } + + if ((parent as AtRule).name === 'supports' && (parent as AtRule).params.indexOf('(color: hwb(0% 0 0))') !== -1) { + return true; + } + + parent = parent.parent; + } + + return false; +} diff --git a/plugins/postcss-hwb-function/src/hwb.ts b/plugins/postcss-hwb-function/src/hwb.ts new file mode 100644 index 000000000..37ff26a9b --- /dev/null +++ b/plugins/postcss-hwb-function/src/hwb.ts @@ -0,0 +1,43 @@ +type color = [number, number, number]; + +export function hwbToRgb(hwb: color): color { + const hue = hwb[0]; + let white = hwb[1]; + let black = hwb[2]; + + white /= 100; + black /= 100; + if (white + black >= 1) { + const gray = white / (white + black); + return [gray, gray, gray]; + } + const rgb = hslToRgb([hue, 100, 50]); + for (let i = 0; i < 3; i++) { + rgb[i] *= (1 - white - black); + rgb[i] += white; + } + return rgb.map((x) => Math.round(x * 255)) as color; +} + +function hslToRgb(hwb: color): color { + let hue = hwb[0]; + let sat = hwb[1]; + let light = hwb[2]; + + hue = hue % 360; + + if (hue < 0) { + hue += 360; + } + + sat /= 100; + light /= 100; + + function f(n) { + const k = (n + hue / 30) % 12; + const a = sat * Math.min(light, 1 - light); + return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1)); + } + + return [f(0), f(8), f(4)]; +} diff --git a/plugins/postcss-hwb-function/src/index.ts b/plugins/postcss-hwb-function/src/index.ts new file mode 100644 index 000000000..45019a1da --- /dev/null +++ b/plugins/postcss-hwb-function/src/index.ts @@ -0,0 +1,112 @@ +import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor'; +import valueParser from 'postcss-value-parser'; +import type { ParsedValue, FunctionNode } from 'postcss-value-parser'; +import type { AtRule, Container, Declaration, Node, Postcss, Result } from 'postcss'; +import { onCSSFunctionSRgb } from './on-css-function'; + +import type { PluginCreator } from 'postcss'; + +const atSupportsHwbParams = '(color: hwb(0% 0 0))'; + +/** Transform hwb() functions in CSS. */ +const postcssPlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve: boolean }) => { + const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false; + + return { + postcssPlugin: 'postcss-hwb-function', + Declaration: (decl: Declaration, { result, postcss }: { result: Result, postcss: Postcss }) => { + if (preserve && hasSupportsAtRuleAncestor(decl)) { + return; + } + + const originalValue = decl.value; + if (!originalValue.includes('hwb')) { + return; + } + + const modified = modifiedValues(originalValue, decl, result); + if (typeof modified === 'undefined') { + return; + } + + if (decl.variable && preserve) { + const parent = decl.parent; + const atSupports = postcss.atRule({ name: 'supports', params: atSupportsHwbParams, source: decl.source }); + + const parentClone = parent.clone(); + parentClone.removeAll(); + + parentClone.append(decl.clone()); + atSupports.append(parentClone); + + insertAtSupportsAfterCorrectRule(atSupports, parent, atSupportsHwbParams); + + decl.value = modified; + } else if (preserve) { + decl.cloneBefore({ value: modified }); + + } else { + decl.value = modified; + } + }, + }; +}; + +postcssPlugin.postcss = true; + +export default postcssPlugin; + +function modifiedValues(originalValue: string, decl: Declaration, result: Result): string | undefined { + let valueASTSRgb: ParsedValue | undefined; + + try { + valueASTSRgb = valueParser(originalValue); + } catch (error) { + decl.warn( + result, + `Failed to parse value '${originalValue}' as a hwb function. Leaving the original value intact.`, + ); + } + + if (typeof valueASTSRgb === 'undefined') { + return; + } + + valueASTSRgb.walk((node) => { + if (!node.type || node.type !== 'function') { + return; + } + + if (node.value !== 'hwb') { + return; + } + + onCSSFunctionSRgb(node as FunctionNode); + }); + const modifiedValueSRgb = String(valueASTSRgb); + + if (modifiedValueSRgb === originalValue) { + return; + } + + return modifiedValueSRgb; +} + +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 === 'supports' && + nextInsertAfter.params === params + ) { + insertAfter = nextInsertAfter; + nextInsertAfter = nextInsertAfter.next(); + } + + insertAfter.after(atSupports); +} diff --git a/plugins/postcss-hwb-function/src/on-css-function.ts b/plugins/postcss-hwb-function/src/on-css-function.ts new file mode 100644 index 000000000..ecabdad5a --- /dev/null +++ b/plugins/postcss-hwb-function/src/on-css-function.ts @@ -0,0 +1,277 @@ +import valueParser from 'postcss-value-parser'; +import type { FunctionNode, Dimension, Node, DivNode, WordNode } from 'postcss-value-parser'; +import { hwbToRgb } from './hwb'; + +export function onCSSFunctionSRgb(node: FunctionNode) { + const rawNodes = node.nodes; + const relevantNodes = rawNodes.slice().filter((x) => { + return x.type !== 'comment' && x.type !== 'space'; + }); + + const nodes = hwbFunctionContents(relevantNodes); + if (!nodes) { + return; + } + + if (relevantNodes.length > 3 && (!nodes.slash || !nodes.alpha)) { + return; + } + + // rename the Color function to `rgb` + node.value = 'rgb'; + + transformAlpha(node, nodes.slash, nodes.alpha); + + /** Extracted Color channels. */ + const [channelNode1, channelNode2, channelNode3] = channelNodes(nodes); + const [channelDimension1, channelDimension2, channelDimension3] = channelDimensions(nodes); + + /** RGB channels from the source color. */ + const channelNumbers: [number, number, number] = [ + channelDimension1.number, + channelDimension2.number, + channelDimension3.number, + ].map( + channelNumber => parseFloat(channelNumber), + ) as [number, number, number]; + + const rgbValues = hwbToRgb( + channelNumbers, + ); + + node.nodes.splice(node.nodes.indexOf(channelNode1) + 1, 0, commaNode()); + node.nodes.splice(node.nodes.indexOf(channelNode2) + 1, 0, commaNode()); + + replaceWith(node.nodes, channelNode1, { + ...channelNode1, + value: String(rgbValues[0]), + }); + + replaceWith(node.nodes, channelNode2, { + ...channelNode2, + value: String(rgbValues[1]), + }); + + replaceWith(node.nodes, channelNode3, { + ...channelNode3, + value: String(rgbValues[2]), + }); +} + +function commaNode(): DivNode { + return { + sourceIndex: 0, + sourceEndIndex: 1, + value: ',', + type: 'div', + before: '', + after: '', + }; +} + +function isNumericNode(node: Node): node is WordNode { + if (!node || node.type !== 'word') { + return false; + } + + if (!canParseAsUnit(node)) { + return false; + } + + const unitAndValue = valueParser.unit(node.value); + if (!unitAndValue) { + return false; + } + + return !!unitAndValue.number; +} + +function isNumericNodeHueLike(node: Node): node is WordNode { + if (!node || node.type !== 'word') { + return false; + } + + if (!canParseAsUnit(node)) { + return false; + } + + const unitAndValue = valueParser.unit(node.value); + if (!unitAndValue) { + return false; + } + + return !!unitAndValue.number && ( + unitAndValue.unit === 'deg' || + unitAndValue.unit === 'grad' || + unitAndValue.unit === 'rad' || + unitAndValue.unit === 'turn' || + unitAndValue.unit === '' + ); +} + +function isNumericNodePercentageOrNumber(node: Node): node is WordNode { + if (!node || node.type !== 'word') { + return false; + } + + if (!canParseAsUnit(node)) { + return false; + } + + const unitAndValue = valueParser.unit(node.value); + if (!unitAndValue) { + return false; + } + + return unitAndValue.unit === '%' || unitAndValue.unit === ''; +} + +function isCalcNode(node: Node): node is FunctionNode { + return node && node.type === 'function' && node.value === 'calc'; +} + +function isVarNode(node: Node): node is FunctionNode { + return node && node.type === 'function' && node.value === 'var'; +} + +function isSlashNode(node: Node): node is DivNode { + return node && node.type === 'div' && node.value === '/'; +} + +type Hwb = { + h: Dimension, + hNode: Node, + w: Dimension, + wNode: Node, + b: Dimension, + bNode: Node, + slash?: DivNode, + alpha?: WordNode|FunctionNode, +} + +function hwbFunctionContents(nodes): Hwb | null { + if (!isNumericNodeHueLike(nodes[0])) { + return null; + } + + if (!isNumericNodePercentageOrNumber(nodes[1])) { + return null; + } + + if (!isNumericNodePercentageOrNumber(nodes[2])) { + return null; + } + + const out: Hwb = { + h: valueParser.unit(nodes[0].value) as Dimension, + hNode: nodes[0], + w: valueParser.unit(nodes[1].value) as Dimension, + wNode: nodes[1], + b: valueParser.unit(nodes[2].value) as Dimension, + bNode: nodes[2], + }; + + normalizeHueNode(out.h); + if (out.h.unit !== '') { + return null; + } + + normalizeBlackOrWhiteNode(out.w); + normalizeBlackOrWhiteNode(out.b); + + if (isSlashNode(nodes[3])) { + out.slash = nodes[3]; + } + + if ((isNumericNodePercentageOrNumber(nodes[4]) || isCalcNode(nodes[4]) || isVarNode(nodes[4]))) { + out.alpha = nodes[4]; + } + + return out; +} + +function channelNodes(x: Hwb): [Node, Node, Node] { + return [x.hNode, x.wNode, x.bNode]; +} + +function channelDimensions(x: Hwb): [Dimension, Dimension, Dimension] { + return [x.h, x.w, x.b]; +} + +function transformAlpha(node: FunctionNode, slashNode: DivNode | undefined, alphaNode: WordNode | FunctionNode | undefined) { + if (!slashNode || !alphaNode) { + return; + } + + node.value = 'rgba'; + slashNode.value = ','; + slashNode.before = ''; + + if (!isNumericNode(alphaNode)) { + return; + } + + const unitAndValue = valueParser.unit(alphaNode.value); + if (!unitAndValue) { + return; + } + + if (unitAndValue.unit === '%') { + // transform the Alpha channel from a Percentage to (0-1) Number + unitAndValue.number = String(parseFloat(unitAndValue.number) / 100); + alphaNode.value = String(unitAndValue.number); + } +} + +function replaceWith(nodes: Array, oldNode: Node, newNode: Node) { + const index = nodes.indexOf(oldNode); + nodes[index] = newNode; +} + +function normalizeHueNode(dimension: Dimension) { + switch (dimension.unit) { + case 'deg': + dimension.unit = ''; + return; + case 'rad': + // radians -> degrees + dimension.unit = ''; + dimension.number = (parseFloat(dimension.number) * 180 / Math.PI).toString(); + return; + + case 'grad': + // grades -> degrees + dimension.unit = ''; + dimension.number = (parseFloat(dimension.number) * 0.9).toString(); + return; + + case 'turn': + // turns -> degrees + dimension.unit = ''; + dimension.number = (parseFloat(dimension.number) * 360).toString(); + return; + } +} + +function normalizeBlackOrWhiteNode(dimension: Dimension) { + switch (dimension.unit) { + case '%': + return; + default: + dimension.unit = '%'; + dimension.number = (parseFloat(dimension.number) * 100).toString(); + return; + } +} + +function canParseAsUnit(node : Node): boolean { + if (!node || !node.value) { + return false; + } + + try { + return valueParser.unit(node.value) !== false; + } catch (e) { + return false; + } +} diff --git a/plugins/postcss-hwb-function/test/_import.mjs b/plugins/postcss-hwb-function/test/_import.mjs new file mode 100644 index 000000000..c6b46cf7e --- /dev/null +++ b/plugins/postcss-hwb-function/test/_import.mjs @@ -0,0 +1,6 @@ +import assert from 'assert'; +import plugin from '@csstools/postcss-hwb-function'; +plugin(); + +assert.ok(plugin.postcss, 'should have "postcss flag"'); +assert.equal(typeof plugin, 'function', 'should return a function'); diff --git a/plugins/postcss-hwb-function/test/_require.cjs b/plugins/postcss-hwb-function/test/_require.cjs new file mode 100644 index 000000000..0b29012e5 --- /dev/null +++ b/plugins/postcss-hwb-function/test/_require.cjs @@ -0,0 +1,6 @@ +const assert = require('assert'); +const plugin = require('@csstools/postcss-hwb-function'); +plugin(); + +assert.ok(plugin.postcss, 'should have "postcss flag"'); +assert.equal(typeof plugin, 'function', 'should return a function'); diff --git a/plugins/postcss-hwb-function/test/basic.css b/plugins/postcss-hwb-function/test/basic.css new file mode 100644 index 000000000..57c320469 --- /dev/null +++ b/plugins/postcss-hwb-function/test/basic.css @@ -0,0 +1,9 @@ +.test-hwb { + color: hwb(194 0% 0%); /* #00c3ff */ + color: hwb(194 0% 0% / .5); /* #00c3ff with 50% opacity */ + +} + +.test-ignore { + color: hwb(194, 0%, 0%, .5); /* with comma-separated values */ +} diff --git a/plugins/postcss-hwb-function/test/basic.expect.css b/plugins/postcss-hwb-function/test/basic.expect.css new file mode 100644 index 000000000..0292adf57 --- /dev/null +++ b/plugins/postcss-hwb-function/test/basic.expect.css @@ -0,0 +1,9 @@ +.test-hwb { + color: rgb(0, 195, 255); /* #00c3ff */ + color: rgba(0, 195, 255, .5); /* #00c3ff with 50% opacity */ + +} + +.test-ignore { + color: hwb(194, 0%, 0%, .5); /* with comma-separated values */ +} diff --git a/plugins/postcss-hwb-function/test/basic.preserve-true.expect.css b/plugins/postcss-hwb-function/test/basic.preserve-true.expect.css new file mode 100644 index 000000000..3748c1354 --- /dev/null +++ b/plugins/postcss-hwb-function/test/basic.preserve-true.expect.css @@ -0,0 +1,11 @@ +.test-hwb { + color: rgb(0, 195, 255); + color: hwb(194 0% 0%); /* #00c3ff */ + color: rgba(0, 195, 255, .5); + color: hwb(194 0% 0% / .5); /* #00c3ff with 50% opacity */ + +} + +.test-ignore { + color: hwb(194, 0%, 0%, .5); /* with comma-separated values */ +} diff --git a/plugins/postcss-hwb-function/test/variables.css b/plugins/postcss-hwb-function/test/variables.css new file mode 100644 index 000000000..c47397a92 --- /dev/null +++ b/plugins/postcss-hwb-function/test/variables.css @@ -0,0 +1,10 @@ +:root { + --firebrick: hwb(194 0% 0%); + --firebrick-a50: hwb(194 0% 0%); + + --opacity-50: 0.5; + --firebrick-a50-var: hwb(194 0% 0% / var(--opacity-50)); + + --fifty: 50; + --firebrick-var: hwb(40% var(--fifty) 34.5 / var(--opacity-50)); +} diff --git a/plugins/postcss-hwb-function/test/variables.expect.css b/plugins/postcss-hwb-function/test/variables.expect.css new file mode 100644 index 000000000..f728ad1d8 --- /dev/null +++ b/plugins/postcss-hwb-function/test/variables.expect.css @@ -0,0 +1,10 @@ +:root { + --firebrick: rgb(0, 195, 255); + --firebrick-a50: rgb(0, 195, 255); + + --opacity-50: 0.5; + --firebrick-a50-var: rgba(0, 195, 255, var(--opacity-50)); + + --fifty: 50; + --firebrick-var: hwb(40% var(--fifty) 34.5 / var(--opacity-50)); +} diff --git a/plugins/postcss-hwb-function/test/variables.preserve-true.expect.css b/plugins/postcss-hwb-function/test/variables.preserve-true.expect.css new file mode 100644 index 000000000..2b04cf613 --- /dev/null +++ b/plugins/postcss-hwb-function/test/variables.preserve-true.expect.css @@ -0,0 +1,19 @@ +:root { + --firebrick: rgb(0, 195, 255); + --firebrick-a50: rgb(0, 195, 255); + + --opacity-50: 0.5; + --firebrick-a50-var: rgba(0, 195, 255, var(--opacity-50)); + + --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 { + --firebrick-a50: hwb(194 0% 0%); +} +}@supports (color: hwb(0% 0 0)) {:root { + --firebrick-a50-var: hwb(194 0% 0% / var(--opacity-50)); +} +} diff --git a/plugins/postcss-hwb-function/tsconfig.json b/plugins/postcss-hwb-function/tsconfig.json new file mode 100644 index 000000000..68a2606f6 --- /dev/null +++ b/plugins/postcss-hwb-function/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": "." + }, + "include": ["./src/**/*"], + "exclude": ["dist"], +} From 426dba5bb49a4ae713b5844ddc4197316f1f722f Mon Sep 17 00:00:00 2001 From: romainmenke Date: Thu, 20 Jan 2022 17:42:48 +0100 Subject: [PATCH 2/4] add reference for color conversions --- plugins/postcss-hwb-function/src/hwb.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/plugins/postcss-hwb-function/src/hwb.ts b/plugins/postcss-hwb-function/src/hwb.ts index 37ff26a9b..9531cbbca 100644 --- a/plugins/postcss-hwb-function/src/hwb.ts +++ b/plugins/postcss-hwb-function/src/hwb.ts @@ -1,5 +1,6 @@ type color = [number, number, number]; +// source: https://github.com/w3c/csswg-drafts/blob/main/css-color-4/hwbToRgb.js export function hwbToRgb(hwb: color): color { const hue = hwb[0]; let white = hwb[1]; @@ -19,6 +20,7 @@ export function hwbToRgb(hwb: color): color { return rgb.map((x) => Math.round(x * 255)) as color; } +// source: https://github.com/w3c/csswg-drafts/blob/main/css-color-4/hslToRgb.js function hslToRgb(hwb: color): color { let hue = hwb[0]; let sat = hwb[1]; From 8ff183459fb4cb85c6278298b2a6ebad4f9c9250 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Thu, 20 Jan 2022 17:51:27 +0100 Subject: [PATCH 3/4] add to labeler --- .github/labeler.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/labeler.yml b/.github/labeler.yml index 0bbd105c6..1be04be84 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -85,6 +85,10 @@ - plugins/postcss-gap-properties/** - experimental/postcss-gap-properties/** +"plugins/postcss-hwb-function": + - plugins/postcss-hwb-function/** + - experimental/postcss-hwb-function/** + "plugins/postcss-image-set-function": - plugins/postcss-image-set-function/** - experimental/postcss-image-set-function/** From 93860cfd4801c65b7f60858d5d579aedd285f949 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Thu, 20 Jan 2022 17:55:00 +0100 Subject: [PATCH 4/4] issue templates and casing --- .github/ISSUE_TEMPLATE/css-issue.yml | 1 + .github/ISSUE_TEMPLATE/plugin-issue.yml | 1 + plugins/postcss-hwb-function/CHANGELOG.md | 2 +- plugins/postcss-hwb-function/INSTALL.md | 42 +++++++++++------------ plugins/postcss-hwb-function/README.md | 16 ++++----- 5 files changed, 32 insertions(+), 30 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/css-issue.yml b/.github/ISSUE_TEMPLATE/css-issue.yml index e90ef96a5..280929b96 100644 --- a/.github/ISSUE_TEMPLATE/css-issue.yml +++ b/.github/ISSUE_TEMPLATE/css-issue.yml @@ -70,6 +70,7 @@ body: - PostCSS Focus Within - PostCSS Font Variant - PostCSS Gap Properties + - PostCSS HWB Function - PostCSS Image Set Function - PostCSS Lab Function - PostCSS Logical diff --git a/.github/ISSUE_TEMPLATE/plugin-issue.yml b/.github/ISSUE_TEMPLATE/plugin-issue.yml index 1fbb70769..5a68bd5e5 100644 --- a/.github/ISSUE_TEMPLATE/plugin-issue.yml +++ b/.github/ISSUE_TEMPLATE/plugin-issue.yml @@ -79,6 +79,7 @@ body: - PostCSS Focus Within - PostCSS Font Variant - PostCSS Gap Properties + - PostCSS HWB Function - PostCSS Image Set Function - PostCSS Lab Function - PostCSS Logical diff --git a/plugins/postcss-hwb-function/CHANGELOG.md b/plugins/postcss-hwb-function/CHANGELOG.md index decff10e3..aefe61991 100644 --- a/plugins/postcss-hwb-function/CHANGELOG.md +++ b/plugins/postcss-hwb-function/CHANGELOG.md @@ -1,4 +1,4 @@ -# Changes to PostCSS Hwb Function +# Changes to PostCSS HWB Function ### 1.0.0 diff --git a/plugins/postcss-hwb-function/INSTALL.md b/plugins/postcss-hwb-function/INSTALL.md index 983e9fc22..4df8645a4 100644 --- a/plugins/postcss-hwb-function/INSTALL.md +++ b/plugins/postcss-hwb-function/INSTALL.md @@ -1,6 +1,6 @@ -# Installing PostCSS Hwb Function +# Installing PostCSS HWB Function -[PostCSS Hwb Function] runs in all Node environments, with special +[PostCSS HWB Function] 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) | @@ -8,7 +8,7 @@ instructions for: ## Node -Add [PostCSS Hwb Function] to your project: +Add [PostCSS HWB Function] to your project: ```bash npm install postcss @csstools/postcss-hwb-function --save-dev @@ -18,10 +18,10 @@ Use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); -const postcssHwbFunction = require('@csstools/postcss-hwb-function'); +const postcssHWBFunction = require('@csstools/postcss-hwb-function'); postcss([ - postcssHwbFunction(/* pluginOptions */) + postcssHWBFunction(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -33,15 +33,15 @@ Add [PostCSS CLI] to your project: npm install postcss-cli --save-dev ``` -Use [PostCSS Hwb Function] in your `postcss.config.js` configuration +Use [PostCSS HWB Function] in your `postcss.config.js` configuration file: ```js -const postcssHwbFunction = require('@csstools/postcss-hwb-function'); +const postcssHWBFunction = require('@csstools/postcss-hwb-function'); module.exports = { plugins: [ - postcssHwbFunction(/* pluginOptions */) + postcssHWBFunction(/* pluginOptions */) ] } ``` @@ -54,10 +54,10 @@ Add [PostCSS Loader] to your project: npm install postcss-loader --save-dev ``` -Use [PostCSS Hwb Function] in your Webpack configuration: +Use [PostCSS HWB Function] in your Webpack configuration: ```js -const postcssHwbFunction = require('@csstools/postcss-hwb-function'); +const postcssHWBFunction = require('@csstools/postcss-hwb-function'); module.exports = { module: { @@ -70,7 +70,7 @@ module.exports = { { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ - postcssHwbFunction(/* pluginOptions */) + postcssHWBFunction(/* pluginOptions */) ] } } ] @@ -88,16 +88,16 @@ Add [React App Rewired] and [React App Rewire PostCSS] to your project: npm install react-app-rewired react-app-rewire-postcss --save-dev ``` -Use [React App Rewire PostCSS] and [PostCSS Hwb Function] in your +Use [React App Rewire PostCSS] and [PostCSS HWB Function] in your `config-overrides.js` file: ```js const reactAppRewirePostcss = require('react-app-rewire-postcss'); -const postcssHwbFunction = require('@csstools/postcss-hwb-function'); +const postcssHWBFunction = require('@csstools/postcss-hwb-function'); module.exports = config => reactAppRewirePostcss(config, { plugins: () => [ - postcssHwbFunction(/* pluginOptions */) + postcssHWBFunction(/* pluginOptions */) ] }); ``` @@ -110,15 +110,15 @@ Add [Gulp PostCSS] to your project: npm install gulp-postcss --save-dev ``` -Use [PostCSS Hwb Function] in your Gulpfile: +Use [PostCSS HWB Function] in your Gulpfile: ```js const postcss = require('gulp-postcss'); -const postcssHwbFunction = require('@csstools/postcss-hwb-function'); +const postcssHWBFunction = require('@csstools/postcss-hwb-function'); gulp.task('css', () => gulp.src('./src/*.css').pipe( postcss([ - postcssHwbFunction(/* pluginOptions */) + postcssHWBFunction(/* pluginOptions */) ]) ).pipe( gulp.dest('.') @@ -133,10 +133,10 @@ Add [Grunt PostCSS] to your project: npm install grunt-postcss --save-dev ``` -Use [PostCSS Hwb Function] in your Gruntfile: +Use [PostCSS HWB Function] in your Gruntfile: ```js -const postcssHwbFunction = require('@csstools/postcss-hwb-function'); +const postcssHWBFunction = require('@csstools/postcss-hwb-function'); grunt.loadNpmTasks('grunt-postcss'); @@ -144,7 +144,7 @@ grunt.initConfig({ postcss: { options: { use: [ - postcssHwbFunction(/* pluginOptions */) + postcssHWBFunction(/* pluginOptions */) ] }, dist: { @@ -159,6 +159,6 @@ grunt.initConfig({ [PostCSS]: https://github.com/postcss/postcss [PostCSS CLI]: https://github.com/postcss/postcss-cli [PostCSS Loader]: https://github.com/postcss/postcss-loader -[PostCSS Hwb Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function +[PostCSS HWB Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function [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/plugins/postcss-hwb-function/README.md b/plugins/postcss-hwb-function/README.md index 6831365a6..d3539f3d1 100644 --- a/plugins/postcss-hwb-function/README.md +++ b/plugins/postcss-hwb-function/README.md @@ -1,4 +1,4 @@ -# PostCSS Hwb Function [PostCSS Logo][postcss] +# PostCSS HWB Function [PostCSS Logo][postcss] [npm version][npm-url] [CSS Standard Status][css-url] @@ -6,7 +6,7 @@ [support chat][git-url] -[PostCSS Hwb Function] lets you use `hwb` color functions in +[PostCSS HWB Function] lets you use `hwb` color functions in CSS, following the [CSS Color] specification. ```pcss @@ -25,7 +25,7 @@ a { ## Usage -Add [PostCSS Hwb Function] to your project: +Add [PostCSS HWB Function] to your project: ```bash npm install postcss @csstools/postcss-hwb-function --save-dev @@ -35,14 +35,14 @@ Use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); -const postcssHwbFunction = require('@csstools/postcss-hwb-function'); +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 +[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) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | @@ -56,7 +56,7 @@ The `preserve` option determines whether the original functional color notation is preserved. By default, it is not preserved. ```js -postcssHwbFunction({ preserve: true }) +postcssHWBFunction({ preserve: true }) ``` ```pcss @@ -85,4 +85,4 @@ a { [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 +[PostCSS HWB Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function