postcss-hwb-function

.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

.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

.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/**

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

plugins/postcss-hwb-function/.nvmrc

@@ -0,0 +1 @@
+v16.13.1

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
+		}
+	},
+});

plugins/postcss-hwb-function/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changes to PostCSS HWB Function
+
+### 1.0.0
+
+- Initial version

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