diff options
| author | littleblack111 <littleblack11111@gmail.com> | 2024-05-14 14:05:49 +0800 |
|---|---|---|
| committer | littleblack111 <littleblack11111@gmail.com> | 2024-05-14 14:05:49 +0800 |
| commit | 06823fbf1c2e763a5bf76c3990ca98fbbcd98691 (patch) | |
| tree | 4280bece3888d12a022093bf1a9cd1b049393602 /node_modules/@csstools/postcss-hwb-function/INSTALL.md | |
| parent | 1368909b3cd552dbb0d12d5863c597f5be46177d (diff) | |
updated node_modules
Diffstat (limited to 'node_modules/@csstools/postcss-hwb-function/INSTALL.md')
| -rw-r--r-- | node_modules/@csstools/postcss-hwb-function/INSTALL.md | 235 |
1 files changed, 0 insertions, 235 deletions
diff --git a/node_modules/@csstools/postcss-hwb-function/INSTALL.md b/node_modules/@csstools/postcss-hwb-function/INSTALL.md deleted file mode 100644 index eaf1cf25..00000000 --- a/node_modules/@csstools/postcss-hwb-function/INSTALL.md +++ /dev/null @@ -1,235 +0,0 @@ -# Installing PostCSS HWB Function - -[PostCSS HWB Function] runs in all Node environments, with special instructions for: - -- [Node](#node) -- [PostCSS CLI](#postcss-cli) -- [PostCSS Load Config](#postcss-load-config) -- [Webpack](#webpack) -- [Next.js](#nextjs) -- [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 -// commonjs -const postcss = require('postcss'); -const postcssHWBFunction = require('@csstools/postcss-hwb-function'); - -postcss([ - postcssHWBFunction(/* pluginOptions */) -]).process(YOUR_CSS /*, processOptions */); -``` - -```js -// esm -import postcss from 'postcss'; -import postcssHWBFunction from '@csstools/postcss-hwb-function'; - -postcss([ - postcssHWBFunction(/* pluginOptions */) -]).process(YOUR_CSS /*, processOptions */); -``` - -## PostCSS CLI - -Add [PostCSS CLI] to your project: - -```bash -npm install postcss-cli @csstools/postcss-hwb-function --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 */) - ] -} -``` - -## 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 - -_Webpack version 5_ - -Add [PostCSS Loader] to your project: - -```bash -npm install postcss-loader @csstools/postcss-hwb-function --save-dev -``` - -Use [PostCSS HWB Function] in your Webpack configuration: - -```js -module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - // Other plugins, - [ - "@csstools/postcss-hwb-function", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, -}; -``` - -## Next.js - -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 @csstools/postcss-hwb-function --save-dev -``` - -Use [PostCSS HWB Function] in your `postcss.config.json` file: - -```json -{ - "plugins": [ - "@csstools/postcss-hwb-function" - ] -} -``` - -```json5 -{ - "plugins": [ - [ - "@csstools/postcss-hwb-function", - { - // Optionally add plugin options - } - ] - ] -} -``` - -## Gulp - -Add [Gulp PostCSS] to your project: - -```bash -npm install gulp-postcss @csstools/postcss-hwb-function --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', function () { - var plugins = [ - postcssHWBFunction(/* pluginOptions */) - ]; - - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); -}); -``` - -## Grunt - -Add [Grunt PostCSS] to your project: - -```bash -npm install grunt-postcss @csstools/postcss-hwb-function --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: { - processors: [ - 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 -[Next.js]: https://nextjs.org |
