postcss-media-queries-aspect-ratio-number-values

.github/ISSUE_TEMPLATE/css-issue.yml

@@ -87,6 +87,7 @@ body:
         - PostCSS Is Pseudo Class
         - PostCSS Lab Function
         - PostCSS Logical
+        - PostCSS Media Queries Aspect-Ratio Number Values
         - PostCSS Media Query Ranges
         - PostCSS Nested Calc
         - PostCSS Nesting

.github/ISSUE_TEMPLATE/plugin-issue.yml

@@ -89,6 +89,7 @@ body:
         - PostCSS Is Pseudo Class
         - PostCSS Lab Function
         - PostCSS Logical
+        - PostCSS Media Queries Aspect-Ratio Number Values
         - PostCSS Media Query Ranges
         - PostCSS Nested Calc
         - PostCSS Nesting

.github/labeler.yml

@@ -136,6 +136,10 @@
   - plugins/postcss-logical/**
   - experimental/postcss-logical/**
 
+"plugins/postcss-media-queries-aspect-ratio-number-values":
+  - plugins/postcss-media-queries-aspect-ratio-number-values/**
+  - experimental/postcss-media-queries-aspect-ratio-number-values/**
+
 "plugins/postcss-media-query-ranges":
   - plugins/postcss-media-query-ranges/**
   - experimental/postcss-media-query-ranges/**

plugins/postcss-media-queries-aspect-ratio-number-values/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+package-lock.json
+yarn.lock
+*.result.css
+*.result.css.map
+*.result.html
+dist/*

plugins/postcss-media-queries-aspect-ratio-number-values/.nvmrc

@@ -0,0 +1 @@
+v18.8.0

plugins/postcss-media-queries-aspect-ratio-number-values/.tape.mjs

@@ -0,0 +1,26 @@
+import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
+import plugin from '@csstools/postcss-media-queries-aspect-ratio-number-values';
+
+postcssTape(plugin)({
+	basic: {
+		message: "supports basic usage",
+	},
+	'basic:preserve-true': {
+		message: "supports basic usage",
+		options: {
+			preserve: true
+		}
+	},
+	'invalid': {
+		message: "ignores invalid values",
+	},
+	'examples/example': {
+		message: 'minimal example',
+	},
+	'examples/example:preserve-true': {
+		message: 'minimal example',
+		options: {
+			preserve: true
+		}
+	},
+});

plugins/postcss-media-queries-aspect-ratio-number-values/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changes to PostCSS Media Queries Aspect-Ratio Number Values
+
+### 1.0.0 (Unreleased)
+
+- Initial version

plugins/postcss-media-queries-aspect-ratio-number-values/INSTALL.md

@@ -0,0 +1,187 @@
+# Installing PostCSS Media Queries Aspect-Ratio Number Values
+
+[PostCSS Media Queries Aspect-Ratio Number Values] runs in all Node environments, with special instructions for:
+
+| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
+| --- | --- | --- | --- | --- | --- |
+
+## Node
+
+Add [PostCSS Media Queries Aspect-Ratio Number Values] to your project:
+
+```bash
+npm install postcss @csstools/postcss-media-queries-aspect-ratio-number-values --save-dev
+```
+
+Use it as a [PostCSS] plugin:
+
+```js
+// commonjs
+const postcss = require('postcss');
+const postcssMediaQueriesAspectRatioNumberValues = require('@csstools/postcss-media-queries-aspect-ratio-number-values');
+
+postcss([
+	postcssMediaQueriesAspectRatioNumberValues(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+```js
+// esm
+import postcss from 'postcss';
+import postcssMediaQueriesAspectRatioNumberValues from '@csstools/postcss-media-queries-aspect-ratio-number-values';
+
+postcss([
+	postcssMediaQueriesAspectRatioNumberValues(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+## PostCSS CLI
+
+Add [PostCSS CLI] to your project:
+
+```bash
+npm install postcss-cli @csstools/postcss-media-queries-aspect-ratio-number-values --save-dev
+```
+
+Use [PostCSS Media Queries Aspect-Ratio Number Values] in your `postcss.config.js` configuration file:
+
+```js
+const postcssMediaQueriesAspectRatioNumberValues = require('@csstools/postcss-media-queries-aspect-ratio-number-values');
+
+module.exports = {
+	plugins: [
+		postcssMediaQueriesAspectRatioNumberValues(/* pluginOptions */)
+	]
+}
+```
+
+## Webpack
+
+_Webpack version 5_
+
+Add [PostCSS Loader] to your project:
+
+```bash
+npm install postcss-loader @csstools/postcss-media-queries-aspect-ratio-number-values --save-dev
+```
+
+Use [PostCSS Media Queries Aspect-Ratio Number Values] 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: [
+									[
+										"@csstools/postcss-media-queries-aspect-ratio-number-values",
+										{
+											// Options
+										},
+									],
+								],
+							},
+						},
+					},
+				],
+			},
+		],
+	},
+};
+```
+
+## Create React App
+
+Add [React App Rewired] and [React App Rewire PostCSS] to your project:
+
+```bash
+npm install react-app-rewired react-app-rewire-postcss @csstools/postcss-media-queries-aspect-ratio-number-values --save-dev
+```
+
+Use [React App Rewire PostCSS] and [PostCSS Media Queries Aspect-Ratio Number Values] in your
+`config-overrides.js` file:
+
+```js
+const reactAppRewirePostcss = require('react-app-rewire-postcss');
+const postcssMediaQueriesAspectRatioNumberValues = require('@csstools/postcss-media-queries-aspect-ratio-number-values');
+
+module.exports = config => reactAppRewirePostcss(config, {
+	plugins: () => [
+		postcssMediaQueriesAspectRatioNumberValues(/* pluginOptions */)
+	]
+});
+```
+
+## Gulp
+
+Add [Gulp PostCSS] to your project:
+
+```bash
+npm install gulp-postcss @csstools/postcss-media-queries-aspect-ratio-number-values --save-dev
+```
+
+Use [PostCSS Media Queries Aspect-Ratio Number Values] in your Gulpfile:
+
+```js
+const postcss = require('gulp-postcss');
+const postcssMediaQueriesAspectRatioNumberValues = require('@csstools/postcss-media-queries-aspect-ratio-number-values');
+
+gulp.task('css', function () {
+	var plugins = [
+		postcssMediaQueriesAspectRatioNumberValues(/* 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-media-queries-aspect-ratio-number-values --save-dev
+```
+
+Use [PostCSS Media Queries Aspect-Ratio Number Values] in your Gruntfile:
+
+```js
+const postcssMediaQueriesAspectRatioNumberValues = require('@csstools/postcss-media-queries-aspect-ratio-number-values');
+
+grunt.loadNpmTasks('grunt-postcss');
+
+grunt.initConfig({
+	postcss: {
+		options: {
+			processors: [
+			postcssMediaQueriesAspectRatioNumberValues(/* 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 Media Queries Aspect-Ratio Number Values]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-queries-aspect-ratio-number-values
+[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
+[React App Rewired]: https://github.com/timarney/react-app-rewired