Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dalbitresb12/postcss-url-append
PostCSS plugin to append a raw block of CSS from a URL.
https://github.com/dalbitresb12/postcss-url-append
postcss
Last synced: about 1 month ago
JSON representation
PostCSS plugin to append a raw block of CSS from a URL.
- Host: GitHub
- URL: https://github.com/dalbitresb12/postcss-url-append
- Owner: dalbitresb12
- License: mit
- Created: 2021-05-13T10:54:05.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T07:28:20.000Z (almost 2 years ago)
- Last Synced: 2024-11-09T15:46:09.073Z (about 2 months ago)
- Topics: postcss
- Language: TypeScript
- Homepage:
- Size: 1.32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS URL Append
[PostCSS](https://github.com/postcss/postcss) plugin to append a raw block of CSS from a URL. Similar to [`postcss-import-url`](https://github.com/unlight/postcss-import-url), but the URLs are set in the configuration file.
```css
@append base;
@append theme;
.foo {}
```
```js
const opts = {
urls: [
{
id: 'base',
url: 'https://example.com/base.css',
},
{
id: 'theme',
url: 'https://example.com/theme.css',
},
],
};
```
```css
/* content from https://example.com/base.css */
/* content from https://example.com/theme.css */
.foo {}
```
## Usage
**Step 1:** Install plugin:
```sh
$ npm install --save-dev postcss postcss-url-append
or
$ yarn add --dev postcss postcss-url-append
```
**Step 2:** Check your project for an existing PostCSS config: `postcss.config.js` in the project root, `"postcss"` section in `package.json` or `postcss` in bundle config.
If you do not use PostCSS, add it according to [official docs](https://github.com/postcss/postcss#usage) and set this plugin in settings.
**Step 3:** Add the plugin to the plugins list and setup your appends:
```diff
module.exports = {
plugins: [
+ require('postcss-url-append')({
+ urls: {
+ id: 'base',
+ url: 'https://example.com/base.css',
+ },
+ }),
require('autoprefixer')
]
}
```
**Step 4:** Add `@append` rules to your CSS files:
```css
.foo {}
@append base;
```
## Options
- `urls` (`UrlOptions[]`): The list of URLs to append to the file. Default value: `[]`.
- `modernBrowser` (`boolean`): This will set the User-Agent header to `Mozilla/5.0 AppleWebKit/538.0 Chrome/88.0.0.0 Safari/538`. This can be useful to import from Google Fonts, as Google checks it and can respond differently. Default value: `false`.
- `userAgent` (`string`): Set a custom User-Agent header. Default value: `undefined`.
### UrlOptions
- `id` (`string`): The id to match `@append` rules in your CSS.
- `url` (`string`): The url from which to fetch the CSS file.