postcss-rebase-url (#1082)

.github/ISSUE_TEMPLATE/css-issue.yml

@@ -104,6 +104,7 @@ body:
         - PostCSS Place
         - PostCSS Progressive Custom Properties
         - PostCSS Pseudo Class Any Link
+        - PostCSS Rebase URL
         - PostCSS Rebeccapurple
         - PostCSS Relative Color Syntax
         - PostCSS Replace Overflow Wrap

.github/ISSUE_TEMPLATE/plugin-issue.yml

@@ -106,6 +106,7 @@ body:
         - PostCSS Place
         - PostCSS Progressive Custom Properties
         - PostCSS Pseudo Class Any Link
+        - PostCSS Rebase URL
         - PostCSS Rebeccapurple
         - PostCSS Relative Color Syntax
         - PostCSS Replace Overflow Wrap

.github/labeler.yml

@@ -226,6 +226,10 @@
   - plugins/postcss-pseudo-class-any-link/**
   - experimental/postcss-pseudo-class-any-link/**
 
+"plugins/postcss-rebase-url":
+  - plugins/postcss-rebase-url/**
+  - experimental/postcss-rebase-url/**
+
 "plugins/postcss-relative-color-syntax":
   - plugins/postcss-relative-color-syntax/**
   - experimental/postcss-relative-color-syntax/**

plugins/postcss-rebase-url/.gitignore

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

plugins/postcss-rebase-url/.nvmrc

@@ -0,0 +1 @@
+v20.2.0

plugins/postcss-rebase-url/.tape.mjs

@@ -0,0 +1,22 @@
+import { postcssTape } from '@csstools/postcss-tape';
+import plugin from '@csstools/postcss-rebase-url';
+import postcssImport from 'postcss-import';
+
+import './test/unit/index.mjs';
+
+await postcssTape(plugin)({
+	basic: {
+		message: "supports basic usage",
+		plugins: [
+			postcssImport(),
+			plugin()
+		]
+	},
+	'examples/example': {
+		message: 'minimal example',
+		plugins: [
+			postcssImport(),
+			plugin()
+		]
+	}
+});

plugins/postcss-rebase-url/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changes to PostCSS Rebase URL
+
+### Unreleased (major)
+
+- Initial major version
+
+### 0.1.0-alpha.0
+
+_August 14, 2023_
+
+- Initial version

plugins/postcss-rebase-url/INSTALL.md

@@ -0,0 +1,235 @@
+# Installing PostCSS Rebase URL
+
+[PostCSS Rebase URL] 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 Rebase URL] to your project:
+
+```bash
+npm install postcss @csstools/postcss-rebase-url --save-dev
+```
+
+Use it as a [PostCSS] plugin:
+
+```js
+// commonjs
+const postcss = require('postcss');
+const postcssRebaseURL = require('@csstools/postcss-rebase-url');
+
+postcss([
+	postcssRebaseURL(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+```js
+// esm
+import postcss from 'postcss';
+import postcssRebaseURL from '@csstools/postcss-rebase-url';
+
+postcss([
+	postcssRebaseURL(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+## PostCSS CLI
+
+Add [PostCSS CLI] to your project:
+
+```bash
+npm install postcss-cli @csstools/postcss-rebase-url --save-dev
+```
+
+Use [PostCSS Rebase URL] in your `postcss.config.js` configuration file:
+
+```js
+const postcssRebaseURL = require('@csstools/postcss-rebase-url');
+
+module.exports = {
+	plugins: [
+		postcssRebaseURL(/* pluginOptions */)
+	]
+}
+```
+
+## PostCSS Load Config
+
+If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config).
+
+```bash
+npm install @csstools/postcss-rebase-url --save-dev
+```
+
+`package.json`:
+
+```json
+{
+	"postcss": {
+		"plugins": {
+			"@csstools/postcss-rebase-url": {}
+		}
+	}
+}
+```
+
+`.postcssrc.json`:
+
+```json
+{
+	"plugins": {
+		"@csstools/postcss-rebase-url": {}
+	}
+}
+```
+
+_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-rebase-url --save-dev
+```
+
+Use [PostCSS Rebase URL] 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-rebase-url",
+										{
+											// 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-rebase-url --save-dev
+```
+
+Use [PostCSS Rebase URL] in your `postcss.config.json` file:
+
+```json
+{
+	"plugins": [
+		"@csstools/postcss-rebase-url"
+	]
+}
+```
+
+```json5
+{
+	"plugins": [
+		[
+			"@csstools/postcss-rebase-url",
+			{
+				// Optionally add plugin options
+			}
+		]
+	]
+}
+```
+
+## Gulp
+
+Add [Gulp PostCSS] to your project:
+
+```bash
+npm install gulp-postcss @csstools/postcss-rebase-url --save-dev
+```
+
+Use [PostCSS Rebase URL] in your Gulpfile:
+
+```js
+const postcss = require('gulp-postcss');
+const postcssRebaseURL = require('@csstools/postcss-rebase-url');
+
+gulp.task('css', function () {
+	var plugins = [
+		postcssRebaseURL(/* 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-rebase-url --save-dev
+```
+
+Use [PostCSS Rebase URL] in your Gruntfile:
+
+```js
+const postcssRebaseURL = require('@csstools/postcss-rebase-url');
+
+grunt.loadNpmTasks('grunt-postcss');
+
+grunt.initConfig({
+	postcss: {
+		options: {
+			processors: [
+			postcssRebaseURL(/* 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 Rebase URL]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-rebase-url
+[Next.js]: https://nextjs.org

plugins/postcss-rebase-url/LICENSE.md

@@ -0,0 +1,18 @@
+MIT No Attribution (MIT-0)
+
+Copyright © CSSTools Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.