Skip to content

Commit a8ea763

Browse files
romainmenkeromainmenke
authored
postcss-rebase-url (#1082)
1 parent 4a673fb commit a8ea763

38 files changed

+1126
-0
lines changed

‎.github/ISSUE_TEMPLATE/css-issue.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ body:
104104
- PostCSS Place
105105
- PostCSS Progressive Custom Properties
106106
- PostCSS Pseudo Class Any Link
107+
- PostCSS Rebase URL
107108
- PostCSS Rebeccapurple
108109
- PostCSS Relative Color Syntax
109110
- PostCSS Replace Overflow Wrap

‎.github/ISSUE_TEMPLATE/plugin-issue.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ body:
106106
- PostCSS Place
107107
- PostCSS Progressive Custom Properties
108108
- PostCSS Pseudo Class Any Link
109+
- PostCSS Rebase URL
109110
- PostCSS Rebeccapurple
110111
- PostCSS Relative Color Syntax
111112
- PostCSS Replace Overflow Wrap

‎.github/labeler.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,10 @@
226226
- plugins/postcss-pseudo-class-any-link/**
227227
- experimental/postcss-pseudo-class-any-link/**
228228

229+
"plugins/postcss-rebase-url":
230+
- plugins/postcss-rebase-url/**
231+
- experimental/postcss-rebase-url/**
232+
229233
"plugins/postcss-relative-color-syntax":
230234
- plugins/postcss-relative-color-syntax/**
231235
- experimental/postcss-relative-color-syntax/**

‎package-lock.json

Lines changed: 32 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/postcss-rebase-url/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
package-lock.json
3+
yarn.lock
4+
*.result.css
5+
*.result.css.map
6+
*.result.html

‎plugins/postcss-rebase-url/.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v20.2.0

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { postcssTape } from '@csstools/postcss-tape';
2+
import plugin from '@csstools/postcss-rebase-url';
3+
import postcssImport from 'postcss-import';
4+
5+
import './test/unit/index.mjs';
6+
7+
await postcssTape(plugin)({
8+
basic: {
9+
message: "supports basic usage",
10+
plugins: [
11+
postcssImport(),
12+
plugin()
13+
]
14+
},
15+
'examples/example': {
16+
message: 'minimal example',
17+
plugins: [
18+
postcssImport(),
19+
plugin()
20+
]
21+
}
22+
});

‎plugins/postcss-rebase-url/CHANGELOG.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Changes to PostCSS Rebase URL
2+
3+
### Unreleased (major)
4+
5+
- Initial major version
6+
7+
### 0.1.0-alpha.0
8+
9+
_August 14, 2023_
10+
11+
- Initial version

‎plugins/postcss-rebase-url/INSTALL.md

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
# Installing PostCSS Rebase URL
2+
3+
[PostCSS Rebase URL] runs in all Node environments, with special instructions for:
4+
5+
- [Node](#node)
6+
- [PostCSS CLI](#postcss-cli)
7+
- [PostCSS Load Config](#postcss-load-config)
8+
- [Webpack](#webpack)
9+
- [Next.js](#nextjs)
10+
- [Gulp](#gulp)
11+
- [Grunt](#grunt)
12+
13+
14+
15+
## Node
16+
17+
Add [PostCSS Rebase URL] to your project:
18+
19+
```bash
20+
npm install postcss @csstools/postcss-rebase-url --save-dev
21+
```
22+
23+
Use it as a [PostCSS] plugin:
24+
25+
```js
26+
// commonjs
27+
const postcss = require('postcss');
28+
const postcssRebaseURL = require('@csstools/postcss-rebase-url');
29+
30+
postcss([
31+
postcssRebaseURL(/* pluginOptions */)
32+
]).process(YOUR_CSS /*, processOptions */);
33+
```
34+
35+
```js
36+
// esm
37+
import postcss from 'postcss';
38+
import postcssRebaseURL from '@csstools/postcss-rebase-url';
39+
40+
postcss([
41+
postcssRebaseURL(/* pluginOptions */)
42+
]).process(YOUR_CSS /*, processOptions */);
43+
```
44+
45+
## PostCSS CLI
46+
47+
Add [PostCSS CLI] to your project:
48+
49+
```bash
50+
npm install postcss-cli @csstools/postcss-rebase-url --save-dev
51+
```
52+
53+
Use [PostCSS Rebase URL] in your `postcss.config.js` configuration file:
54+
55+
```js
56+
const postcssRebaseURL = require('@csstools/postcss-rebase-url');
57+
58+
module.exports = {
59+
plugins: [
60+
postcssRebaseURL(/* pluginOptions */)
61+
]
62+
}
63+
```
64+
65+
## PostCSS Load Config
66+
67+
If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config).
68+
69+
```bash
70+
npm install @csstools/postcss-rebase-url --save-dev
71+
```
72+
73+
`package.json`:
74+
75+
```json
76+
{
77+
"postcss": {
78+
"plugins": {
79+
"@csstools/postcss-rebase-url": {}
80+
}
81+
}
82+
}
83+
```
84+
85+
`.postcssrc.json`:
86+
87+
```json
88+
{
89+
"plugins": {
90+
"@csstools/postcss-rebase-url": {}
91+
}
92+
}
93+
```
94+
95+
_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._
96+
97+
## Webpack
98+
99+
_Webpack version 5_
100+
101+
Add [PostCSS Loader] to your project:
102+
103+
```bash
104+
npm install postcss-loader @csstools/postcss-rebase-url --save-dev
105+
```
106+
107+
Use [PostCSS Rebase URL] in your Webpack configuration:
108+
109+
```js
110+
module.exports = {
111+
module: {
112+
rules: [
113+
{
114+
test: /\.css$/i,
115+
use: [
116+
"style-loader",
117+
{
118+
loader: "css-loader",
119+
options: { importLoaders: 1 },
120+
},
121+
{
122+
loader: "postcss-loader",
123+
options: {
124+
postcssOptions: {
125+
plugins: [
126+
// Other plugins,
127+
[
128+
"@csstools/postcss-rebase-url",
129+
{
130+
// Options
131+
},
132+
],
133+
],
134+
},
135+
},
136+
},
137+
],
138+
},
139+
],
140+
},
141+
};
142+
```
143+
144+
## Next.js
145+
146+
Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config)
147+
148+
```bash
149+
npm install @csstools/postcss-rebase-url --save-dev
150+
```
151+
152+
Use [PostCSS Rebase URL] in your `postcss.config.json` file:
153+
154+
```json
155+
{
156+
"plugins": [
157+
"@csstools/postcss-rebase-url"
158+
]
159+
}
160+
```
161+
162+
```json5
163+
{
164+
"plugins": [
165+
[
166+
"@csstools/postcss-rebase-url",
167+
{
168+
// Optionally add plugin options
169+
}
170+
]
171+
]
172+
}
173+
```
174+
175+
## Gulp
176+
177+
Add [Gulp PostCSS] to your project:
178+
179+
```bash
180+
npm install gulp-postcss @csstools/postcss-rebase-url --save-dev
181+
```
182+
183+
Use [PostCSS Rebase URL] in your Gulpfile:
184+
185+
```js
186+
const postcss = require('gulp-postcss');
187+
const postcssRebaseURL = require('@csstools/postcss-rebase-url');
188+
189+
gulp.task('css', function () {
190+
var plugins = [
191+
postcssRebaseURL(/* pluginOptions */)
192+
];
193+
194+
return gulp.src('./src/*.css')
195+
.pipe(postcss(plugins))
196+
.pipe(gulp.dest('.'));
197+
});
198+
```
199+
200+
## Grunt
201+
202+
Add [Grunt PostCSS] to your project:
203+
204+
```bash
205+
npm install grunt-postcss @csstools/postcss-rebase-url --save-dev
206+
```
207+
208+
Use [PostCSS Rebase URL] in your Gruntfile:
209+
210+
```js
211+
const postcssRebaseURL = require('@csstools/postcss-rebase-url');
212+
213+
grunt.loadNpmTasks('grunt-postcss');
214+
215+
grunt.initConfig({
216+
postcss: {
217+
options: {
218+
processors: [
219+
postcssRebaseURL(/* pluginOptions */)
220+
]
221+
},
222+
dist: {
223+
src: '*.css'
224+
}
225+
}
226+
});
227+
```
228+
229+
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
230+
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
231+
[PostCSS]: https://github.com/postcss/postcss
232+
[PostCSS CLI]: https://github.com/postcss/postcss-cli
233+
[PostCSS Loader]: https://github.com/postcss/postcss-loader
234+
[PostCSS Rebase URL]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-rebase-url
235+
[Next.js]: https://nextjs.org

‎plugins/postcss-rebase-url/LICENSE.md

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

0 commit comments

Comments
 (0)