@csstools/postcss-hwb-function
Advanced tools
Comparing version 1.0.2 to 2.0.0
# Changes to PostCSS HWB Function | ||
### 2.0.0 (January 24, 2023) | ||
- Updated: Support for Node v14+ (major). | ||
### 1.0.2 (July 8, 2022) | ||
@@ -4,0 +8,0 @@ |
@@ -1,3 +0,3 @@ | ||
declare type color = [number, number, number]; | ||
type color = [number, number, number]; | ||
export declare function hwbToRgb(hwb: color): color; | ||
export {}; |
import type { PluginCreator } from 'postcss'; | ||
/** postcss-hwb-function plugin options */ | ||
export type pluginOptions = { | ||
/** Preserve the original notation. default: false */ | ||
preserve?: boolean; | ||
}; | ||
/** Transform hwb() functions in CSS. */ | ||
declare const postcssPlugin: PluginCreator<{ | ||
preserve: boolean; | ||
}>; | ||
declare const postcssPlugin: PluginCreator<pluginOptions>; | ||
export default postcssPlugin; |
@@ -5,5 +5,12 @@ # Installing PostCSS HWB Function | ||
| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | | ||
| --- | --- | --- | --- | --- | --- | | ||
- [Node](#node) | ||
- [PostCSS CLI](#postcss-cli) | ||
- [PostCSS Load Config](#postcss-load-config) | ||
- [Webpack](#webpack) | ||
- [Next.js](#nextjs) | ||
- [Gulp](#gulp) | ||
- [Grunt](#grunt) | ||
## Node | ||
@@ -20,2 +27,3 @@ | ||
```js | ||
// commonjs | ||
const postcss = require('postcss'); | ||
@@ -29,2 +37,12 @@ const postcssHWBFunction = require('@csstools/postcss-hwb-function'); | ||
```js | ||
// esm | ||
import postcss from 'postcss'; | ||
import postcssHWBFunction from '@csstools/postcss-hwb-function'; | ||
postcss([ | ||
postcssHWBFunction(/* pluginOptions */) | ||
]).process(YOUR_CSS /*, processOptions */); | ||
``` | ||
## PostCSS CLI | ||
@@ -50,2 +68,34 @@ | ||
## PostCSS Load Config | ||
If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). | ||
```bash | ||
npm install @csstools/postcss-hwb-function --save-dev | ||
``` | ||
`package.json`: | ||
```json | ||
{ | ||
"postcss": { | ||
"plugins": { | ||
"@csstools/postcss-hwb-function": {} | ||
} | ||
} | ||
} | ||
``` | ||
`.postcssrc.json`: | ||
```json | ||
{ | ||
"plugins": { | ||
"@csstools/postcss-hwb-function": {} | ||
} | ||
} | ||
``` | ||
_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ | ||
## Webpack | ||
@@ -80,2 +130,3 @@ | ||
plugins: [ | ||
// Other plugins, | ||
[ | ||
@@ -98,22 +149,31 @@ "@csstools/postcss-hwb-function", | ||
## Create React App | ||
## Next.js | ||
Add [React App Rewired] and [React App Rewire PostCSS] to your project: | ||
Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) | ||
```bash | ||
npm install react-app-rewired react-app-rewire-postcss @csstools/postcss-hwb-function --save-dev | ||
npm install @csstools/postcss-hwb-function --save-dev | ||
``` | ||
Use [React App Rewire PostCSS] and [PostCSS HWB Function] in your | ||
`config-overrides.js` file: | ||
Use [PostCSS HWB Function] in your `postcss.config.json` file: | ||
```js | ||
const reactAppRewirePostcss = require('react-app-rewire-postcss'); | ||
const postcssHWBFunction = require('@csstools/postcss-hwb-function'); | ||
```json | ||
{ | ||
"plugins": [ | ||
"@csstools/postcss-hwb-function" | ||
] | ||
} | ||
``` | ||
module.exports = config => reactAppRewirePostcss(config, { | ||
plugins: () => [ | ||
postcssHWBFunction(/* pluginOptions */) | ||
```json5 | ||
{ | ||
"plugins": [ | ||
[ | ||
"@csstools/postcss-hwb-function", | ||
{ | ||
// Optionally add plugin options | ||
} | ||
] | ||
] | ||
}); | ||
} | ||
``` | ||
@@ -181,3 +241,2 @@ | ||
[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 | ||
[Next.js]: https://nextjs.org |
{ | ||
"name": "@csstools/postcss-hwb-function", | ||
"description": "Use hwb() color functions in CSS", | ||
"version": "1.0.2", | ||
"version": "2.0.0", | ||
"author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
@@ -12,3 +12,3 @@ "license": "CC0-1.0", | ||
"engines": { | ||
"node": "^12 || ^14 || >=16" | ||
"node": "^14 || ^16 || >=18" | ||
}, | ||
@@ -36,7 +36,8 @@ "main": "dist/index.cjs", | ||
"peerDependencies": { | ||
"postcss": "^8.2" | ||
"postcss": "^8.4" | ||
}, | ||
"scripts": { | ||
"build": "rollup -c ../../rollup/default.js", | ||
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", | ||
"prebuild": "npm run clean", | ||
"build": "rollup -c ../../rollup/default.mjs", | ||
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"", | ||
"docs": "node ../../.github/bin/generate-docs/install.mjs", | ||
@@ -60,3 +61,2 @@ "lint": "npm run lint:eslint && npm run lint:package-json", | ||
"color", | ||
"colors", | ||
"comma", | ||
@@ -63,0 +63,0 @@ "css", |
@@ -48,4 +48,4 @@ # PostCSS HWB Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] | ||
| [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) | | ||
| --- | --- | --- | --- | --- | --- | | ||
| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | | ||
| --- | --- | --- | --- | --- | | ||
@@ -52,0 +52,0 @@ ## Options |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
26372
54