Skip to content

Commit 1456924

Browse files
Roman86Roman86
committed
feat: isolateInsideOfContainer: rootStyles option added; docs updated
1 parent e7e0ced commit 1456924

18 files changed

+2161
-48
lines changed

‎README.md

+23-7
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@ Starting from version 3 it provides a powerful configuration to (optionally):
3232

3333
## Strategies overview
3434

35-
For ease of use, there are 3 pre-bundled isolation strategies available (as named exports) that cover 99% cases:
35+
For ease of use, there are 2 pre-bundled isolation strategies available (as named exports) that cover 99% cases:
3636

37-
| Pre-bundled strategy | Description |
38-
| :--------------------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
39-
| `isolateInsideOfContainer`<br/><img src="docs/inside.png" alt="inside" width="220"/> | Everything is protected from the preflight styles, except specified Tailwind root(s).<br/>Use it when you have all the tailwind-powered stuff **isolated under some root container**. |
40-
| `isolateOutsideOfContainer`<br/><img src="docs/outside.png" alt="outside" width="220"/> | Protects specific root(s) from the preflight styles - Tailwind is everywhere outside.<br/>Use it when you have Tailwind powered stuff everywhere as usual, but you want to **exclude some part of the DOM** from being affected by the preflight styles. |
41-
| `isolateForComponents`<br/><img src="docs/components.png" alt="components" width="220"/> | Everything is protected from the preflight styles, except components marked with the selector of your choice.<br/>Use it when you want the preflight styles to be applied only to particular elements **immediately** (without extra roots or wrappers).<br/>Good for components - just specify some unique css class for all your components and use them anywhere. |
37+
| Pre-bundled strategy | Description |
38+
| :-------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
39+
| `isolateInsideOfContainer`<br/><img src="docs/inside.png" alt="inside" width="220"/> | Everything is protected from the preflight styles, except specified Tailwind root(s).<br/>Use it when you have all the tailwind-powered stuff **isolated under some root container**. |
40+
| `isolateOutsideOfContainer`<br/><img src="docs/outside.png" alt="outside" width="220"/> | Protects specific root(s) from the preflight styles - Tailwind is everywhere outside.<br/>Use it when you have Tailwind powered stuff everywhere as usual, but you want to **exclude some part of the DOM** from being affected by the preflight styles. |
41+
| ~~`isolateForComponents`~~ (deprecated)<br/><img src="docs/components.png" alt="components" width="220"/> | It generates the same CSS as `isolateInsideOfContainer` with small difference about root styles - so I just put it as an option of `isolateInsideOfContainer` strategy to simplify the strategy selection while still be able to use both modes if needed. If you use this strategy - migrate to `isolateInsideOfContainer` and set `rootStyles` to `add :where` for the same effect). |
4242

4343
🔨 If none of these strategies work for your case, or something isn't perfect - you can [create your own strategy](#your-owncustom-isolation-strategy).
4444

@@ -52,7 +52,8 @@ npm i -D tailwindcss-scoped-preflight
5252

5353
### 2. Update your Tailwind CSS configuration
5454

55-
#### 2.1 Case: you want to lock Tailwind preflight styles inside of some root container (or multiple containers), so they couldn't affect the rest of your page.
55+
#### 2.1 Case: you want to lock Tailwind preflight styles inside of some root container (or multiple containers), so they couldn't affect the rest of your web page.
56+
5657
Use `isolateInsideOfContainer`:
5758

5859
```javascript
@@ -76,7 +77,16 @@ const config = {
7677
exports.default = config;
7778
```
7879

80+
| Option | Value | Description |
81+
| :---------------------: | ----------------------------- | ----------------------------------------------------------------------------------------------------------- |
82+
| `except` (optional) | CSS selector | to exclude some elements under .twp from being preflighted, like external markup |
83+
| `rootStyles` (optional) | `move to container` (default) | moves the root styles to the container styles (by simply replacing the selector) |
84+
| | `add :where` | adds ` :where` to the root selector so styles are still in roots, but only matching items would be affected |
85+
| `remove` (optional) | array of CSS selectors | Removes preflight styles |
86+
| `ignore` (optional) | array of CSS selectors | Keeps these preflight selectors untouched (skipped by the isolation strategy) |
87+
7988
#### 2.2 Case: you want Tailwind preflight styles to be everywhere except some root container(s) that may collide.
89+
8090
Use `isolateOutsideOfContainer`:
8191

8292
```javascript
@@ -100,6 +110,12 @@ const config = {
100110
exports.default = config;
101111
```
102112

113+
| Option | Value | Description |
114+
| :-----------------: | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
115+
| `plus` (optional) | CSS selector | if you have your Tailwind components under .no-twp, you need them to be preflighted. Specify their root selector with this option |
116+
| `remove` (optional) | array of CSS selectors | Removes preflight styles |
117+
| `ignore` (optional) | array of CSS selectors | Keeps these preflight selectors untouched (skipped by the isolation strategy) |
118+
103119
### 3. Use specified selectors in your DOM
104120

105121
```tsx

‎dist/plugin.cjs

+23-6
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,39 @@ const optionsHandlerForIgnoreAndRemove = (selector, {
1919
return null;
2020
};
2121
const roots = new Set(['html', 'body', ':host']);
22+
function isRootSelector(selector) {
23+
return roots.has(selector);
24+
}
2225
/**
2326
* Isolates the TailwindCSS preflight styles inside of the container (assuming all the TailwindCSS is inside of this container)
2427
*
2528
* @param containerSelectors
2629
* @param options
2730
* @param options.ignore - list of preflight CSS selectors to ignore (don't isolate) - these will not be affected by the transformation
2831
* @param options.remove - list of preflight CSS selectors to remove from the final CSS - use it if you have any specific conflicts and really want to remove some preflight rules
32+
* @param options.rootStyles - 'move to container' (default) - moves the root styles to the container styles (by simply replacing the selector), 'add :where' - adds ` :where` to the root selector so styles are still in roots, but only matching items would be affected
2933
*
3034
* @link https://www.npmjs.com/package/tailwindcss-scoped-preflight#isolate-inside-of-container (example)
3135
*/
3236
const isolateInsideOfContainer = (containerSelectors, options) => {
3337
const whereNotExcept = typeof (options == null ? void 0 : options.except) === 'string' && options.except ? `:where(:not(${options.except},${options.except} *))` : '';
38+
const selectorsArray = [containerSelectors].flat();
39+
const whereDirect = `:where(${selectorsArray.join(',')})`;
40+
const whereWithSubs = `:where(${selectorsArray.map(s => `${s},${s} *`).join(',')})`;
3441
return ({
3542
ruleSelector
3643
}) => {
37-
var _optionsHandlerForIgn;
38-
return (_optionsHandlerForIgn = optionsHandlerForIgnoreAndRemove(ruleSelector, options)) != null ? _optionsHandlerForIgn : roots.has(ruleSelector) ? [containerSelectors].flat().map(cont => `${cont}${whereNotExcept}`).join(',') : [containerSelectors].flat().map(s => `${ruleSelector}:where(${s},${s} *)${whereNotExcept}`).join(',');
44+
const handled = optionsHandlerForIgnoreAndRemove(ruleSelector, options);
45+
if (handled != null) {
46+
return handled;
47+
}
48+
if (isRootSelector(ruleSelector)) {
49+
if ((options == null ? void 0 : options.rootStyles) === 'add :where') {
50+
return `${ruleSelector}${whereNotExcept} ${whereDirect}`;
51+
}
52+
return selectorsArray.map(s => `${s}${whereNotExcept}`).join(',');
53+
}
54+
return `${ruleSelector}${whereWithSubs}${whereNotExcept}`;
3955
};
4056
};
4157
/**
@@ -57,7 +73,7 @@ const isolateOutsideOfContainer = (containerSelectors, options) => {
5773
if (ignoreOrRemove != null) {
5874
return ignoreOrRemove;
5975
}
60-
if (roots.has(ruleSelector)) {
76+
if (isRootSelector(ruleSelector)) {
6177
return ruleSelector;
6278
}
6379
return [`${ruleSelector}${whereNotContainerSelector}`, insideOfContainerLogic == null ? void 0 : insideOfContainerLogic({
@@ -66,7 +82,8 @@ const isolateOutsideOfContainer = (containerSelectors, options) => {
6682
};
6783
};
6884
/**
69-
* Isolates the TailwindCSS preflight styles within the component selector (not inside of the container, but immediately)
85+
* @deprecated Use `isolateInsideOfContainer` with rootStyles option set to 'add :where'
86+
* @description Isolates the TailwindCSS preflight styles within the component selector (not inside of the container, but immediately)
7087
* @param componentSelectors
7188
* @param options
7289
* @param options.ignore - list of preflight CSS selectors to ignore (don't isolate) - these will not be affected by the transformation
@@ -81,8 +98,8 @@ const isolateForComponents = (componentSelectors, options) => {
8198
return ({
8299
ruleSelector
83100
}) => {
84-
var _optionsHandlerForIgn2;
85-
return (_optionsHandlerForIgn2 = optionsHandlerForIgnoreAndRemove(ruleSelector, options)) != null ? _optionsHandlerForIgn2 : roots.has(ruleSelector) ? `${ruleSelector} ${whereComponentSelectorsDirect}` : `${ruleSelector}${whereComponentSelectorsWithSubs}`;
101+
var _optionsHandlerForIgn;
102+
return (_optionsHandlerForIgn = optionsHandlerForIgnoreAndRemove(ruleSelector, options)) != null ? _optionsHandlerForIgn : isRootSelector(ruleSelector) ? `${ruleSelector} ${whereComponentSelectorsDirect}` : `${ruleSelector}${whereComponentSelectorsWithSubs}`;
86103
};
87104
};
88105

‎dist/plugin.cjs.map

+1-1
Large diffs are not rendered by default.

‎dist/plugin.esm.js

+23-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/plugin.esm.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)