Skip to content

Commit 36fdf52

Browse files
joris-fonck-lorealjoris-fonck-loreal
committed
feature(shadow-dom): inject variables in :host instead of :root 
1 parent afa9af0 commit 36fdf52

File tree

11 files changed

+996
-4
lines changed

11 files changed

+996
-4
lines changed

‎__tests__/use-host.test.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div class='container'></div>

‎__tests__/use-host.test.js

+109
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

+16
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

+51
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

+15
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)