From b9b3db2a45fe36a236d2a6c1ee85f0ae1003446e Mon Sep 17 00:00:00 2001 From: romainmenke Date: Wed, 1 Dec 2021 18:03:54 +0100 Subject: [PATCH 1/3] fix some docs and add a very minimal general readme --- CONTRIBUTING.md | 23 ++++++++++++++++++++-- README.md | 20 ++++++++++++++++++- packages/base-cli/README.md | 2 ++ plugin-packs/postcss-preset-env/INSTALL.md | 2 +- plugin-packs/postcss-preset-env/README.md | 10 +++++----- plugins/postcss-env-function/INSTALL.md | 2 +- plugins/postcss-focus-visible/README.md | 2 +- 7 files changed, 50 insertions(+), 11 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 914d7a4fb..0f6453c20 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,6 +12,8 @@ Found a problem? Want a new feature? Remember, a bug is a _demonstrable problem_ caused by _our_ code. +_If this guide itself is not working or is not clear, please report it._ + ## Submitting Pull Requests Pull requests are the greatest contributions, so be sure they are focused in @@ -29,7 +31,12 @@ scope and avoid unrelated commits. git remote add upstream https://github.com/csstools/postcss-plugins.git # Install the tools necessary for testing + # Node 16 or higher is required to build and run tests. + # There is config for nvm and volta to help you use the right version. npm install + + # Do an initial build of everything to make sure local dependencies can be found. + npm run build --workspaces ``` 2. Create a branch for your feature or fix: @@ -42,10 +49,22 @@ scope and avoid unrelated commits. git checkout -b fix/something ``` -3. If your code follows our practices, then push your feature branch: +3. Navigate to the plugin you want to contribute to. + ```bash + # Navigate to a plugin directory + cd plugins/ + ``` + ```bash + # Navigate to the postcss-preset-env directory + cd plugin-packs/postcss-preset-env + ``` + +4. If your code follows our practices, then push your feature branch: ```bash + # Run the linter + npm run lint # Test current code - npm test + npm run build && npm run test ``` ```bash # Push the branch for your new feature diff --git a/README.md b/README.md index d98a19bff..e7edb3c31 100644 --- a/README.md +++ b/README.md @@ -1 +1,19 @@ -# TODO : make a README for this mono repo +# PostCSS Plugins [PostCSS][postcss] + +[build status][cli-url] +[support chat][git-url] + +[PostCSS Plugins] contains tools and plugins for [PostCSS Preset Env]. + +[PostCSS Preset Env] lets you convert modern CSS into something most browsers +can understand, determining the polyfills you need based on your targeted +browsers or runtime environments. + +[cli-img]: https://github.com/csstools/postcss-plugins/workflows/test/badge.svg +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[git-img]: https://img.shields.io/badge/support-chat-blue.svg +[git-url]: https://gitter.im/postcss/postcss + +[PostCSS]: https://github.com/postcss/postcss +[PostCSS Plugins]: https://github.com/csstools/postcss-plugins +[PostCSS Preset Env]: https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env diff --git a/packages/base-cli/README.md b/packages/base-cli/README.md index a139861db..99ac95918 100644 --- a/packages/base-cli/README.md +++ b/packages/base-cli/README.md @@ -18,3 +18,5 @@ cli( ), ); ``` + +[postcss]: https://github.com/postcss/postcss diff --git a/plugin-packs/postcss-preset-env/INSTALL.md b/plugin-packs/postcss-preset-env/INSTALL.md index b0887f80c..075b18200 100644 --- a/plugin-packs/postcss-preset-env/INSTALL.md +++ b/plugin-packs/postcss-preset-env/INSTALL.md @@ -186,7 +186,7 @@ module.exports = { [PostCSS]: https://github.com/postcss/postcss [PostCSS CLI]: https://github.com/postcss/postcss-cli [PostCSS Loader]: https://github.com/postcss/postcss-loader -[PostCSS Preset Env]: https://github.com/csstools/postcss-preset-env +[PostCSS Preset Env]: https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired [Rollup Plugin PostCSS]: https://github.com/egoist/rollup-plugin-postcss diff --git a/plugin-packs/postcss-preset-env/README.md b/plugin-packs/postcss-preset-env/README.md index 2123cbf61..479c4aef8 100644 --- a/plugin-packs/postcss-preset-env/README.md +++ b/plugin-packs/postcss-preset-env/README.md @@ -1,7 +1,7 @@ # PostCSS Preset Env [PostCSS][postcss] [npm version][npm-url] -[build status][cli-url] +[build status][cli-url] [support chat][git-url] [PostCSS Preset Env] lets you convert modern CSS into something most browsers @@ -133,7 +133,7 @@ features. The `features` option enables or disables specific polyfills by ID. Passing `true` to a specific feature ID will enable its polyfill, while passing `false` -will disable it. [List of IDs](https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js#L36) +will disable it. [List of IDs](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/src/lib/plugins-by-id.js#L36) ```js postcssPresetEnv({ @@ -354,8 +354,8 @@ postcssPresetEnv({ }); ``` -[cli-img]: https://github.com/postcss/postcss-preset-env/workflows/test/badge.svg -[cli-url]: https://github.com/postcss/postcss-preset-env/actions/workflows/test.yml?query=workflow/test +[cli-img]: https://github.com/csstools/postcss-plugins/workflows/test/badge.svg +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [git-img]: https://img.shields.io/badge/support-chat-blue.svg [git-url]: https://gitter.im/postcss/postcss [npm-img]: https://img.shields.io/npm/v/postcss-preset-env.svg @@ -366,7 +366,7 @@ postcssPresetEnv({ [caniuse]: https://caniuse.com/ [cssdb]: https://cssdb.org/ [PostCSS]: https://github.com/postcss/postcss -[PostCSS Preset Env]: https://github.com/csstools/postcss-preset-env +[PostCSS Preset Env]: https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env [readme-style-with-preset-env-img]: https://csstools.github.io/postcss-preset-env/readme-style-with-preset-env.svg [readme-style-with-preset-env-url]: https://codepen.io/pen?template=OZRovK [readme-transform-with-preset-env-img]: https://csstools.github.io/postcss-preset-env/readme-transform-with-preset-env.svg diff --git a/plugins/postcss-env-function/INSTALL.md b/plugins/postcss-env-function/INSTALL.md index 404ecc2ae..697c8c919 100644 --- a/plugins/postcss-env-function/INSTALL.md +++ b/plugins/postcss-env-function/INSTALL.md @@ -157,6 +157,6 @@ grunt.initConfig({ [PostCSS]: https://github.com/postcss/postcss [PostCSS CLI]: https://github.com/postcss/postcss-cli [PostCSS Loader]: https://github.com/postcss/postcss-loader -[PostCSS Environment Variables]: https://github.com/csstools/postcss-env-function +[PostCSS Environment Variables]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-env-function [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired diff --git a/plugins/postcss-focus-visible/README.md b/plugins/postcss-focus-visible/README.md index 60b6c9af3..99571f130 100644 --- a/plugins/postcss-focus-visible/README.md +++ b/plugins/postcss-focus-visible/README.md @@ -2,7 +2,7 @@ [npm version][npm-url] [CSS Standard Status][css-url] -[Build Status][cli-url] +[Build Status][cli-url] [support chat][git-url] [PostCSS Focus Visible] lets you use the `:focus-visible` pseudo-class in From 904bd82715e5ec0216be004fed0002d8cb592eb5 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Wed, 1 Dec 2021 18:21:29 +0100 Subject: [PATCH 2/3] document python3 and coloaide usage --- plugins/postcss-lab-function/package.json | 3 +-- .../postcss-lab-function/test/color/README.md | 21 +++++++++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) create mode 100644 plugins/postcss-lab-function/test/color/README.md diff --git a/plugins/postcss-lab-function/package.json b/plugins/postcss-lab-function/package.json index d6d10b593..45c83e43d 100644 --- a/plugins/postcss-lab-function/package.json +++ b/plugins/postcss-lab-function/package.json @@ -24,8 +24,7 @@ "lint": "eslint src/**/*.ts", "test": "node ./test/color/test.mjs && postcss-tape --ci", "build": "rollup -c ../../rollup/default.js", - "stryker": "stryker run --logLevel error", - "generate-color-corpus": "python3 ./test/color/generate.py" + "stryker": "stryker run --logLevel error" }, "engines": { "node": "^12 || ^14 || >=16" diff --git a/plugins/postcss-lab-function/test/color/README.md b/plugins/postcss-lab-function/test/color/README.md new file mode 100644 index 000000000..ec33e60b1 --- /dev/null +++ b/plugins/postcss-lab-function/test/color/README.md @@ -0,0 +1,21 @@ +# Color unit tests. + +Reading : +- https://github.com/w3c/csswg-drafts/issues/6816 +- https://github.com/csstools/postcss-lab-function/issues/7 +- https://github.com/w3c/csswg-drafts/issues/5191 +- https://facelessuser.github.io/coloraide/ + +At the moment there is still unspecified behavior around color conversion from `lab`|`lch` to `rgb` or `color()` + +[coloraide](https://facelessuser.github.io/coloraide/) is used to mimick browser behavior. +This allows us to quickly tweak the conversion and test the output against variants produced by coloaide. + +coloraide requires `python3`. + +```bash +# USAGE: +# python3 -m pip install coloraide +# python3 ./test/color/generate.py +``` + From 44a39f5b74448e382a66465c0bf1159cb0df2f89 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Wed, 1 Dec 2021 18:26:42 +0100 Subject: [PATCH 3/3] typo's --- plugins/postcss-lab-function/test/color/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/postcss-lab-function/test/color/README.md b/plugins/postcss-lab-function/test/color/README.md index ec33e60b1..7e065d223 100644 --- a/plugins/postcss-lab-function/test/color/README.md +++ b/plugins/postcss-lab-function/test/color/README.md @@ -8,8 +8,8 @@ Reading : At the moment there is still unspecified behavior around color conversion from `lab`|`lch` to `rgb` or `color()` -[coloraide](https://facelessuser.github.io/coloraide/) is used to mimick browser behavior. -This allows us to quickly tweak the conversion and test the output against variants produced by coloaide. +[coloraide](https://facelessuser.github.io/coloraide/) is used to mimic browser behavior. +This allows us to quickly tweak the conversion and test the output against variants produced by coloraide. coloraide requires `python3`.