Skip to content

Commit d481d9b

Browse files
mertasanmertasan
authored
Merge pull request #91 from jf-niji/feature/shadow-dom-host
feature(shadow-dom): inject variables in `:host` instead of `:root`
2 parents afa9af0 + e406b67 commit d481d9b

File tree

12 files changed

+1036
-10
lines changed

12 files changed

+1036
-10
lines changed

‎README.md‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Similar to the tailwindcss configurations you are used to. It is also possible t
1515
## Highlights
1616

1717
- Variables are as easy as defining tailwindcss colors...
18-
- You can designate the variables to `:root` or custom CSS selectors.
18+
- You can designate the variables to `:root`, `:host` or custom CSS selectors.
1919
- Variables can be formed through using nested object notation.
2020
- Different variables can be composed for the Dark Mode.
2121
- Dark Mode variables are set automatically through the `class` or `media` modes on your configuration.
@@ -608,14 +608,14 @@ module.exports = {
608608
**Purge:**
609609

610610
```html
611-
<div class="text-primary text-opacity-50"></div>
612-
<div class="bg-secondary bg-opacity-50"></div>
613-
<div class="bg-gray bg-opacity-50"></div>
614-
<div class="text-blue text-opacity-50"></div>
611+
<div class="text-opacity-50 text-primary"></div>
612+
<div class="bg-opacity-50 bg-secondary"></div>
613+
<div class="bg-opacity-50 bg-gray"></div>
614+
<div class="text-opacity-50 text-blue"></div>
615615
<div class="bg-red-400"></div>
616616
<div class="bg-red-500"></div>
617617
<div class="bg-red-600"></div>
618-
<div class="bg-green bg-opacity-50"></div>
618+
<div class="bg-opacity-50 bg-green"></div>
619619
<div class="bg-white bg-opacity-50"></div>
620620
```
621621
**Output:**
@@ -784,6 +784,40 @@ module.exports = {
784784
}
785785
```
786786

787+
### useHost
788+
789+
If `useHost` is set to `true`, `:host` is used instead of `:root` for variables injection.
790+
791+
#### Config
792+
793+
```javascript
794+
// tailwind.config.js
795+
796+
module.exports = {
797+
theme: {
798+
variables: {
799+
DEFAULT: {
800+
colors: {
801+
green: '#11ff00',
802+
},
803+
},
804+
},
805+
},
806+
plugins: [
807+
require('@mertasan/tailwindcss-variables')({
808+
useHost: true,
809+
})
810+
]
811+
}
812+
```
813+
814+
**Output:**
815+
816+
```css
817+
:host {
818+
--colors-green: #11ff00;
819+
}
820+
```
787821

788822
### extendColors for colorVariable
789823

‎__tests__/use-host.test.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div class='container'></div>

‎__tests__/use-host.test.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
const tailwindcssVariables = require('../src/index')
2+
const utils = require('./util/_utils')(__filename)
3+
4+
test('basic usage with host', async () => {
5+
expect(
6+
await utils.diffOnly({
7+
content: [utils.content()],
8+
darkMode: false,
9+
theme: {
10+
variables: {
11+
DEFAULT: {
12+
colors: {
13+
black: 'rgb(0, 0, 0)',
14+
white: '#ffffff',
15+
},
16+
17+
sizes: {
18+
small: '10px',
19+
medium: '2rem',
20+
large: '100%',
21+
},
22+
},
23+
24+
'.container': {
25+
colors: {
26+
primary: 'red',
27+
secondary: 'var(--colors-primary)',
28+
},
29+
},
30+
},
31+
},
32+
33+
plugins: [tailwindcssVariables({
34+
useHost: true,
35+
})],
36+
})
37+
).toMatchInlineSnapshot(`
38+
"
39+
40+
41+
+ :host {
42+
+ --colors-black: rgb(0, 0, 0);
43+
+ --colors-white: #ffffff;
44+
+ --sizes-small: 10px;
45+
+ --sizes-medium: 2rem;
46+
+ --sizes-large: 100%
47+
+ }
48+
+ .container {
49+
+ --colors-primary: red;
50+
+ --colors-secondary: var(--colors-primary)
51+
+ }
52+
53+
"
54+
`)
55+
})
56+
57+
test('basic usage with host should not work with dark', async () => {
58+
expect(
59+
await utils.diffOnly({
60+
content: [utils.content('dark-mode-to-root')],
61+
darkMode: 'class',
62+
theme: {
63+
darkVariables: {
64+
DEFAULT: {
65+
colors: {
66+
black: 'rgb(0, 0, 0)',
67+
white: '#ffffff',
68+
},
69+
70+
sizes: {
71+
small: '10px',
72+
medium: '2rem',
73+
large: '100%',
74+
},
75+
},
76+
77+
'.container': {
78+
colors: {
79+
primary: 'red',
80+
secondary: 'var(--colors-primary)',
81+
},
82+
},
83+
},
84+
},
85+
86+
plugins: [tailwindcssVariables({
87+
darkToRoot: true,
88+
useHost: true
89+
})],
90+
})
91+
).toMatchInlineSnapshot(`
92+
"
93+
94+
95+
+ :host.dark {
96+
+ --colors-black: rgb(0, 0, 0);
97+
+ --colors-white: #ffffff;
98+
+ --sizes-small: 10px;
99+
+ --sizes-medium: 2rem;
100+
+ --sizes-large: 100%
101+
+ }
102+
+ :host.dark .container {
103+
+ --colors-primary: red;
104+
+ --colors-secondary: var(--colors-primary)
105+
+ }
106+
107+
"
108+
`)
109+
})

‎examples/use-host/clean.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
:host {
2+
--sizes-small: 1rem;
3+
--sizes-medium: 2rem;
4+
--sizes-large: 3rem;
5+
--sizes-0\.5: 2px;
6+
--sizes-1\.0-foo: 1rem;
7+
--sizes-1\.0-2\.4: 2rem;
8+
--colors-red-50: #ff3232;
9+
--colors-red-500: #ff0000;
10+
--colors-red-900: #d70000
11+
}
12+
13+
.container {
14+
--sizes-medium: 1.5rem;
15+
--sizes-container: 2rem
16+
}

‎examples/use-host/image.png‎

25.8 KB
Loading

‎examples/use-host/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Use host example using @mertasan/tailwindcss-variables</title>
7+
</head>
8+
<body>
9+
<div id="shadow-root-inner" class="py-20 bg-gray-50">
10+
<div class="container items-center max-w-6xl px-10 mx-auto sm:px-20 md:px-32 lg:px-16">
11+
<div class="flex flex-wrap items-center -mx-3">
12+
<div class="order-1 w-full px-3 lg:w-1/2 lg:order-0">
13+
<div class="w-full lg:max-w-md">
14+
<h2 class="mb-4 text-3xl font-bold leading-tight tracking-tight sm:text-5xl font-heading">
15+
Tailwindcss Variables</h2>
16+
<p class="mb-4 text-2xl font-semibold leading-tight tracking-tight text-green-500 xl:mb-6 sm:text-3xl font-heading">
17+
[simple example]</p>
18+
<a href="https://github.com/mertasan/tailwindcss-variables" class="mt-4 text-base font-medium leading-tight tracking-tight text-blue-500 xl:mt-6 sm:text-md hover:text-blue-600 font-heading">
19+
source</a>
20+
</div>
21+
</div>
22+
<div class="w-full px-3 mb-12 lg:w-1/2 order-0 lg:order-1 lg:mb-0">
23+
<img class="mx-auto sm:max-w-sm lg:max-w-full" src="image.png" alt="feature image">
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
29+
<script>
30+
// Set <section> tag with shadow root
31+
let section = document.createElement('section')
32+
section.attachShadow({ mode: 'open' })
33+
document.body.appendChild(section)
34+
35+
let htmlElements = document.getElementById('shadow-root-inner')
36+
section.shadowRoot.appendChild(htmlElements)
37+
38+
// Read CSS file and inject style inside
39+
let styleElement = document.createElement('style');
40+
section.shadowRoot.appendChild(styleElement);
41+
42+
fetch('./style.css')
43+
.then(response => response.text())
44+
.then(cssContent => {
45+
styleElement.textContent = cssContent;
46+
}).catch(error => {
47+
console.error('Error when loading the CSS file:', error);
48+
});
49+
</script>
50+
</body>
51+
</html>

‎examples/use-host/package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "use-host",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"build": "env NODE_ENV=production npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./style.css",
6+
"build:clean": "env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css"
7+
},
8+
"devDependencies": {
9+
"@mertasan/tailwindcss-variables": "latest",
10+
"autoprefixer": "^10.4.0",
11+
"postcss": "^8.4.4",
12+
"tailwindcss": "^3.0.11"
13+
},
14+
"license": "MIT"
15+
}

0 commit comments

Comments
 (0)