Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jackall3n/postcss-scope
🔠A small plugin to allow you to scope your css with a custom selector
https://github.com/jackall3n/postcss-scope
Last synced: 2 months ago
JSON representation
🔠A small plugin to allow you to scope your css with a custom selector
- Host: GitHub
- URL: https://github.com/jackall3n/postcss-scope
- Owner: jackall3n
- Created: 2023-04-20T10:08:19.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-06T23:09:09.000Z (11 months ago)
- Last Synced: 2024-09-24T02:23:17.523Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 97.7 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# postcss-scope ðŸ”
A small plugin to allow you to scope your css with a custom selector
## Installation
```bash
# pnpm
pnpm add postcss-scope --save-dev
# npm
npm install postcss-scope --save-dev
# yarn
yarn add postcss-scope --dev
```
## Setup
### Basic
```javascript
// postcss.config.js
export default {
plugins: {
"postcss-scope": ".foo",
},
};
```
### Multiple scopes
```javascript
// postcss.config.js
export default {
plugins: {
"postcss-scope": [".foo", ".bar"],
},
};
```
### With Tailwind
```javascript
// postcss.config.js
export default {
plugins: {
"postcss-import": {},
tailwindcss: {},
autoprefixer: {},
"postcss-scope": ".foo",
},
};
```
## Usage
The default output for all files would look something like this, where `.foo` is prepended on all rules. However, using CSS comments, you have more control over each file.
```css
.foo .class {
font-size: 12px;
}
.foo #id {
font-size: 12px;
}
```
### Ignore rules
Add a comment to specify particular rules that should not be scoped
```css
.foo .class {
font-size: 12px;
}
/* postcss-scope:ignore */
#id {
font-size: 12px;
}
```
### Ignore files
Add a comment to specify files that the plugin should ignore
```css
/* postcss-scope:ignore-file */
.class {
font-size: 12px;
}
#id {
font-size: 12px;
}
```
### Override global selector
Add a comment to override the selector for a particular file
```css
/* postcss-scope:.bar */
.bar .class {
font-size: 12px;
}
.bar #id {
font-size: 12px;
}
```