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.

windicss CLI ignores inline styles with `@apply`

See original GitHub issue

Try compiling the following HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bare</title>
  <link rel="stylesheet" type="text/css"href="out.css">
  <style>
      .btn-blue {
        @apply bg-blue-500 hover:bg-blue-700 text-white;
        padding-top: 1rem;
      }
  </style>
</head>

<body>
  <p class="font-bold mx-auto bg-purple-200 border-2 p-3 w-1/2">I'm new</p>
  <a class="border-2 border-black border-opacity-50 border-dashed">hey</a>
  <button class="btn-blue">click</button>
</body>

</html>

windicss will ignore the btn-blue class, when I was expecting it to process the @apply directives in the script block. Is this a bug, or simply a feature that was never implemented?

./node_modules/.bin/windicss index.html
matched files: [ 'index.html' ]
output file: windi.output.css
ignored classes: [ 'btn-blue' ]

windi.output.css

.bg-purple-200 {
  --tw-bg-opacity: 1;
  background-color: rgba(221, 214, 254, var(--tw-bg-opacity));
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgba(0, 0, 0, var(--tw-border-opacity));
}
.border-opacity-50 {
  --tw-border-opacity: 0.5;
}
.border-dashed {
  border-style: dashed;
}
.border-2 {
  border-width: 2px;
}
.font-bold {
  font-weight: 700;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.p-3 {
  padding: 0.75rem;
}
.w-1\/2 {
  width: 50%;
}

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

sridcommented, Apr 1, 2021

Related concern: you can’t use @apply in good ol’ .css files, and have windi’s cli convert it? https://github.com/windicss/windicss/issues/102#issuecomment-807926266

0reactions

voorjaarcommented, May 13, 2021

https://github.com/windicss/windicss/commit/7895fe2a935418e0ad3de4776d7a1f46cb9029a8 support style block. using it like bellow.

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>cli</title>
      <link rel="stylesheet" href="windi.css">
      <style lang='windi'>
        .btn-blue {
          @apply bg-blue-500 hover:bg-blue-700 text-white;
          padding-top: 1rem;
        }
      </style>
  </head>