Skip to content

Commit b1aede6

Browse files
committed
Potentially fully isolate tailwind rules
1 parent e1bbc2c commit b1aede6

File tree

6 files changed

+62
-28
lines changed

6 files changed

+62
-28
lines changed

package-lock.json

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

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"storybook:dev": "storybook dev -p 6006",
3232
"storybook:build": "storybook build",
3333
"storybook:test": "test-storybook",
34-
"build": "rm -rf ./dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.app.json && tailwind build -i src/index.css -o dist/index.css && cp ./src/elastic-ui.css ./dist",
34+
"build": "rm -rf ./dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.app.json && tailwind build -i src/index.css -o dist/index.css --postcss && cp ./src/elastic-ui.css ./dist",
3535
"test": ""
3636
},
3737
"dependencies": {
@@ -98,6 +98,7 @@
9898
"globals": "^16.0.0",
9999
"postcss": "^8.4.49",
100100
"postcss-loader": "^8.1.1",
101+
"postcss-nested": "^7.0.2",
101102
"prettier": "^3.4.2",
102103
"storybook": "^8.4.7",
103104
"style-loader": "^4.0.0",

postcss-scoped.cjs

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* @type {import('postcss').PluginCreator}
3+
*/
4+
module.exports = (opts = {}) => ({
5+
postcssPlugin: "postcss-scoped",
6+
Once(root) {
7+
root.walkRules((rule) => {
8+
if (rule.selector === "*, ::before, ::after") {
9+
rule.selectors = rule.selectors.map((s) => (s === "*" ? "*:where(.rfs-root,.rfs-root *)" : ":where(.rfs-root,.rfs-root *)" + s))
10+
}
11+
12+
if (rule.selector === "::backdrop") {
13+
rule.selectors = rule.selectors.map((s) => ":where(.rfs-root,.rfs-root *)" + s)
14+
}
15+
})
16+
}
17+
})
18+
19+
module.exports.postcss = true

postcss.config.cjs

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
11
module.exports = {
2-
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
5-
},
2+
plugins: [require("tailwindcss"), require("autoprefixer"), require("postcss-nested"), require("./postcss-scoped.cjs")]
63
}

src/index.css

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
.sui-layout {
5+
.rfs-root {
66
:root {
77
font-synthesis: none;
88
text-rendering: optimizeLegibility;
@@ -70,11 +70,12 @@
7070

7171
@layer base {
7272
.sui-layout * {
73-
@apply rfs-border-border;
73+
border-color: hsl(var(--rfs-border));
7474
}
7575

76-
.sui-layout {
77-
@apply rfs-bg-background rfs-text-foreground;
76+
#storybook-root {
77+
background-color: hsl(var(--rfs-background));
78+
color: hsl(var(--rfs-foreground));
7879
}
7980

8081
.sui-layout ul, .sui-layout ol {

tailwind.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
import animatePlugin from "tailwindcss-animate"
44
import { isolateInsideOfContainer, scopedPreflightStyles } from "tailwindcss-scoped-preflight"
5+
import nestingPlugin from "tailwindcss/nesting"
6+
import postcssNesting from "postcss-nested"
57

68
export default {
79
darkMode: ["class", `[class="dark"]`],
@@ -73,6 +75,7 @@ export default {
7375
},
7476
plugins: [
7577
animatePlugin,
78+
nestingPlugin(postcssNesting),
7679
scopedPreflightStyles({
7780
isolationStrategy: isolateInsideOfContainer(".rfs-root", {})
7881
})

0 commit comments

Comments
 (0)