Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Global style injection in plugins doesn't work for twind/shim

See original GitHub issue

Reproduction

I was expecting “test button1” button to have same paddings as “test button2” button which is takes its styles from btn class.

Issue Analytics

State:
Created 2 years ago
Comments:11 (9 by maintainers)

Top GitHub Comments

1reaction

danielweckcommented, Apr 2, 2021

This works (and important is not needed thanks to using preflight with a plain button selector instead of the :global css() which I gave as an example (where the :root “prefix” in the selector increased its specificity):

<!DOCTYPE html>
<html lang="en" hidden>
  <head>
    <script type="module">
      import {setup} from "https://cdn.skypack.dev/twind/shim"
      import {tw, apply} from "https://cdn.skypack.dev/twind"
      import {css} from "https://cdn.skypack.dev/twind/css"

      setup({
      preflight: {
      	'button': apply('px-4 py-2 block bg-red-600 text-green-400')
      },
        plugins: {
          btn: 'bg-black text-white'
        }
      })
      

/*
      tw(css({
         ':global': {
           ':root button': apply`px-4 py-2 block bg-red-600 text-green-400`
         }
      }))
      */
    </script>
  </head>
  <body>
    <button class="btn">test button2</button>
    <button>test button1</button>
  </body>
</html>

0reactions

sastancommented, Jan 25, 2022

apply is fixed in twind v1.

Please give it a try. Here are some links to get you started: