feature(shadow-dom): inject variables in :host instead of :root

README.md

@@ -15,7 +15,7 @@ Similar to the tailwindcss configurations you are used to. It is also possible t
 ## Highlights
 
 - Variables are as easy as defining tailwindcss colors...
-- You can designate the variables to `:root` or custom CSS selectors.
+- You can designate the variables to `:root`, `:host` or custom CSS selectors.
 - Variables can be formed through using nested object notation.
 - Different variables can be composed for the Dark Mode.
 - Dark Mode variables are set automatically through the `class` or `media` modes on your configuration.
@@ -608,14 +608,14 @@ module.exports = {
 **Purge:**
 
 ```html
-<div class="text-primary text-opacity-50"></div>
-<div class="bg-secondary bg-opacity-50"></div>
-<div class="bg-gray bg-opacity-50"></div>
-<div class="text-blue text-opacity-50"></div>
+<div class="text-opacity-50 text-primary"></div>
+<div class="bg-opacity-50 bg-secondary"></div>
+<div class="bg-opacity-50 bg-gray"></div>
+<div class="text-opacity-50 text-blue"></div>
 <div class="bg-red-400"></div>
 <div class="bg-red-500"></div>
 <div class="bg-red-600"></div>
-<div class="bg-green bg-opacity-50"></div>
+<div class="bg-opacity-50 bg-green"></div>
 <div class="bg-white bg-opacity-50"></div>
 ```
 **Output:**
@@ -784,6 +784,40 @@ module.exports = {
 }
 ```
 
+### useHost
+
+If `useHost` is set to `true`, `:host` is used instead of `:root` for variables injection.
+
+#### Config
+
+```javascript
+// tailwind.config.js
+
+module.exports = {
+  theme: {
+    variables: {
+      DEFAULT: {
+        colors: {
+          green: '#11ff00',
+        },
+      },
+    },
+  },
+  plugins: [
+    require('@mertasan/tailwindcss-variables')({
+      useHost: true,
+    })
+  ]
+}
+```
+
+**Output:**
+
+```css
+:host {
+  --colors-green: #11ff00;
+}
+```
 
 ### extendColors for colorVariable
 

__tests__/use-host.test.html

@@ -0,0 +1 @@
+<div class='container'></div>

__tests__/use-host.test.js

@@ -0,0 +1,109 @@
+const tailwindcssVariables = require('../src/index')
+const utils = require('./util/_utils')(__filename)
+
+test('basic usage with host', async () => {
+  expect(
+    await utils.diffOnly({
+      content: [utils.content()],
+      darkMode: false,
+      theme: {
+        variables: {
+          DEFAULT: {
+            colors: {
+              black: 'rgb(0, 0, 0)',
+              white: '#ffffff',
+            },
+
+            sizes: {
+              small: '10px',
+              medium: '2rem',
+              large: '100%',
+            },
+          },
+
+          '.container': {
+            colors: {
+              primary: 'red',
+              secondary: 'var(--colors-primary)',
+            },
+          },
+        },
+      },
+
+      plugins: [tailwindcssVariables({
+        useHost: true,
+      })],
+    })
+  ).toMatchInlineSnapshot(`
+    "
+
+
+      + :host {
+      +   --colors-black: rgb(0, 0, 0);
+      +   --colors-white: #ffffff;
+      +   --sizes-small: 10px;
+      +   --sizes-medium: 2rem;
+      +   --sizes-large: 100%
+      + }
+      + .container {
+      +   --colors-primary: red;
+      +   --colors-secondary: var(--colors-primary)
+      + }
+
+    "
+  `)
+})
+
+test('basic usage with host should not work with dark', async () => {
+  expect(
+    await utils.diffOnly({
+      content: [utils.content('dark-mode-to-root')],
+      darkMode: 'class',
+      theme: {
+        darkVariables: {
+          DEFAULT: {
+            colors: {
+              black: 'rgb(0, 0, 0)',
+              white: '#ffffff',
+            },
+
+            sizes: {
+              small: '10px',
+              medium: '2rem',
+              large: '100%',
+            },
+          },
+
+          '.container': {
+            colors: {
+              primary: 'red',
+              secondary: 'var(--colors-primary)',
+            },
+          },
+        },
+      },
+
+      plugins: [tailwindcssVariables({
+        darkToRoot: true,
+        useHost: true
+      })],
+    })
+  ).toMatchInlineSnapshot(`
+    "
+
+
+      + :host.dark {
+      +   --colors-black: rgb(0, 0, 0);
+      +   --colors-white: #ffffff;
+      +   --sizes-small: 10px;
+      +   --sizes-medium: 2rem;
+      +   --sizes-large: 100%
+      + }
+      + :host.dark .container {
+      +   --colors-primary: red;
+      +   --colors-secondary: var(--colors-primary)
+      + }
+
+    "
+  `)
+})

examples/use-host/clean.css

@@ -0,0 +1,16 @@
+:host {
+  --sizes-small: 1rem;
+  --sizes-medium: 2rem;
+  --sizes-large: 3rem;
+  --sizes-0\.5: 2px;
+  --sizes-1\.0-foo: 1rem;
+  --sizes-1\.0-2\.4: 2rem;
+  --colors-red-50: #ff3232;
+  --colors-red-500: #ff0000;
+  --colors-red-900: #d70000
+}
+
+.container {
+  --sizes-medium: 1.5rem;
+  --sizes-container: 2rem
+}

examples/use-host/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Use host example using @mertasan/tailwindcss-variables</title>
+</head>
+<body>
+<div id="shadow-root-inner" class="py-20 bg-gray-50">
+  <div class="container items-center max-w-6xl px-10 mx-auto sm:px-20 md:px-32 lg:px-16">
+    <div class="flex flex-wrap items-center -mx-3">
+      <div class="order-1 w-full px-3 lg:w-1/2 lg:order-0">
+        <div class="w-full lg:max-w-md">
+          <h2 class="mb-4 text-3xl font-bold leading-tight tracking-tight sm:text-5xl font-heading">
+            Tailwindcss Variables</h2>
+          <p class="mb-4 text-2xl font-semibold leading-tight tracking-tight text-green-500 xl:mb-6 sm:text-3xl font-heading">
+            [simple example]</p>
+          <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">
+            source</a>
+        </div>
+      </div>
+      <div class="w-full px-3 mb-12 lg:w-1/2 order-0 lg:order-1 lg:mb-0">
+        <img class="mx-auto sm:max-w-sm lg:max-w-full" src="image.png" alt="feature image">
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Set <section> tag with shadow root
+  let section = document.createElement('section')
+  section.attachShadow({ mode: 'open' })
+  document.body.appendChild(section)
+
+  let htmlElements = document.getElementById('shadow-root-inner')
+  section.shadowRoot.appendChild(htmlElements)
+
+  // Read CSS file and inject style inside
+  let styleElement = document.createElement('style');
+  section.shadowRoot.appendChild(styleElement);
+
+  fetch('./style.css')
+    .then(response => response.text())
+    .then(cssContent => {
+      styleElement.textContent = cssContent;
+  }).catch(error => {
+    console.error('Error when loading the CSS file:', error);
+  });
+</script>
+</body>
+</html>

examples/use-host/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "use-host",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "env NODE_ENV=production npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./style.css",
+    "build:clean": "env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css"
+  },
+  "devDependencies": {
+    "@mertasan/tailwindcss-variables": "latest",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.4",
+    "tailwindcss": "^3.0.11"
+  },
+  "license": "MIT"
+}