@csstools/postcss-hwb-function
Advanced tools
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
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
23927