Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@csstools/postcss-hwb-function
Advanced tools
@csstools/postcss-hwb-function - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
| # Changes to PostCSS HWB Function | ||
| ### 1.0.01 (May 18, 2022) | ||
| - Fix grayscale conversions. | ||
| ### 1.0.0 (January 22, 2022) | ||
| - Initial version |
118
INSTALL.md
| # Installing PostCSS HWB Function | ||
| [PostCSS HWB Function] runs in all Node environments, with special | ||
| instructions for: | ||
| [PostCSS HWB Function] runs in all Node environments, with special instructions for: | ||
@@ -24,3 +23,3 @@ | [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | | ||
| postcss([ | ||
| postcssHWBFunction(/* pluginOptions */) | ||
| postcssHWBFunction(/* pluginOptions */) | ||
| ]).process(YOUR_CSS /*, processOptions */); | ||
@@ -34,7 +33,6 @@ ``` | ||
| ```bash | ||
| npm install postcss-cli --save-dev | ||
| npm install postcss-cli @csstools/postcss-hwb-function --save-dev | ||
| ``` | ||
| Use [PostCSS HWB Function] in your `postcss.config.js` configuration | ||
| file: | ||
| Use [PostCSS HWB Function] in your `postcss.config.js` configuration file: | ||
@@ -45,5 +43,5 @@ ```js | ||
| module.exports = { | ||
| plugins: [ | ||
| postcssHWBFunction(/* pluginOptions */) | ||
| ] | ||
| plugins: [ | ||
| postcssHWBFunction(/* pluginOptions */) | ||
| ] | ||
| } | ||
@@ -54,6 +52,8 @@ ``` | ||
| _Webpack version 5_ | ||
| Add [PostCSS Loader] to your project: | ||
| ```bash | ||
| npm install postcss-loader --save-dev | ||
| npm install postcss-loader @csstools/postcss-hwb-function --save-dev | ||
| ``` | ||
@@ -64,23 +64,33 @@ | ||
| ```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 */) | ||
| ] | ||
| } } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.css$/i, | ||
| use: [ | ||
| "style-loader", | ||
| { | ||
| loader: "css-loader", | ||
| options: { importLoaders: 1 }, | ||
| }, | ||
| { | ||
| loader: "postcss-loader", | ||
| options: { | ||
| postcssOptions: { | ||
| plugins: [ | ||
| [ | ||
| "@csstools/postcss-hwb-function", | ||
| { | ||
| // Options | ||
| }, | ||
| ], | ||
| ], | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| }; | ||
| ``` | ||
@@ -93,3 +103,3 @@ | ||
| ```bash | ||
| npm install react-app-rewired react-app-rewire-postcss --save-dev | ||
| npm install react-app-rewired react-app-rewire-postcss @csstools/postcss-hwb-function --save-dev | ||
| ``` | ||
@@ -105,5 +115,5 @@ | ||
| module.exports = config => reactAppRewirePostcss(config, { | ||
| plugins: () => [ | ||
| postcssHWBFunction(/* pluginOptions */) | ||
| ] | ||
| plugins: () => [ | ||
| postcssHWBFunction(/* pluginOptions */) | ||
| ] | ||
| }); | ||
@@ -117,3 +127,3 @@ ``` | ||
| ```bash | ||
| npm install gulp-postcss --save-dev | ||
| npm install gulp-postcss @csstools/postcss-hwb-function --save-dev | ||
| ``` | ||
@@ -127,9 +137,11 @@ | ||
| gulp.task('css', () => gulp.src('./src/*.css').pipe( | ||
| postcss([ | ||
| postcssHWBFunction(/* pluginOptions */) | ||
| ]) | ||
| ).pipe( | ||
| gulp.dest('.') | ||
| )); | ||
| gulp.task('css', function () { | ||
| var plugins = [ | ||
| postcssHWBFunction(/* pluginOptions */) | ||
| ]; | ||
| return gulp.src('./src/*.css') | ||
| .pipe(postcss(plugins)) | ||
| .pipe(gulp.dest('.')); | ||
| }); | ||
| ``` | ||
@@ -142,3 +154,3 @@ | ||
| ```bash | ||
| npm install grunt-postcss --save-dev | ||
| npm install grunt-postcss @csstools/postcss-hwb-function --save-dev | ||
| ``` | ||
@@ -154,12 +166,12 @@ | ||
| grunt.initConfig({ | ||
| postcss: { | ||
| options: { | ||
| use: [ | ||
| postcssHWBFunction(/* pluginOptions */) | ||
| ] | ||
| }, | ||
| dist: { | ||
| src: '*.css' | ||
| } | ||
| } | ||
| postcss: { | ||
| options: { | ||
| processors: [ | ||
| postcssHWBFunction(/* pluginOptions */) | ||
| ] | ||
| }, | ||
| dist: { | ||
| src: '*.css' | ||
| } | ||
| } | ||
| }); | ||
@@ -166,0 +178,0 @@ ``` |
147
package.json
| { | ||
| "name": "@csstools/postcss-hwb-function", | ||
| "version": "1.0.0", | ||
| "description": "Use hwb() color functions in CSS", | ||
| "author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
| "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" | ||
| } | ||
| "name": "@csstools/postcss-hwb-function", | ||
| "description": "Use hwb() color functions in CSS", | ||
| "version": "1.0.1", | ||
| "author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
| "license": "CC0-1.0", | ||
| "funding": { | ||
| "type": "opencollective", | ||
| "url": "https://opencollective.com/csstools" | ||
| }, | ||
| "engines": { | ||
| "node": "^12 || ^14 || >=16" | ||
| }, | ||
| "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" | ||
| ], | ||
| "dependencies": { | ||
| "postcss-value-parser": "^4.2.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "postcss": "^8.4" | ||
| }, | ||
| "scripts": { | ||
| "build": "rollup -c ../../rollup/default.js", | ||
| "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", | ||
| "docs": "node ../../.github/bin/generate-docs/install.mjs", | ||
| "lint": "npm run lint:eslint && npm run lint:package-json", | ||
| "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", | ||
| "lint:package-json": "node ../../.github/bin/format-package-json.mjs", | ||
| "prepublishOnly": "npm run clean && npm run build && npm run test", | ||
| "test": "node .tape.mjs && npm run test:exports", | ||
| "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs", | ||
| "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs" | ||
| }, | ||
| "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function#readme", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/csstools/postcss-plugins.git", | ||
| "directory": "plugins/postcss-hwb-function" | ||
| }, | ||
| "bugs": "https://github.com/csstools/postcss-plugins/issues", | ||
| "keywords": [ | ||
| "color", | ||
| "colors", | ||
| "comma", | ||
| "css", | ||
| "design", | ||
| "functional", | ||
| "hsl", | ||
| "hsla", | ||
| "hwb", | ||
| "notation", | ||
| "postcss", | ||
| "postcss-plugin", | ||
| "rgb", | ||
| "rgba", | ||
| "space", | ||
| "syntax" | ||
| ], | ||
| "csstools": { | ||
| "exportName": "postcssHWBFunction", | ||
| "humanReadableName": "PostCSS HWB Function" | ||
| }, | ||
| "volta": { | ||
| "extends": "../../package.json" | ||
| } | ||
| } |
| # 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="CSS Standard Status" src="https://cssdb.org/badge/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="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] | ||
| [<img alt="support chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">][git-url] | ||
| [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord] | ||
@@ -80,3 +80,3 @@ | ||
| [css-url]: https://cssdb.org/#hwb-function | ||
| [git-url]: https://gitter.im/postcss/postcss | ||
| [discord]: https://discord.gg/bUadyRwkJS | ||
| [npm-url]: https://www.npmjs.com/package/@csstools/postcss-hwb-function | ||
@@ -83,0 +83,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by2.56%
23927
No dependency changes