will be fixed in future release

Using Windi with sapper, I have an issue when passing a tailwind class as a prop. I am building a responsive nav which has a "direction" prop such as flex-row on large device and flex-col on smaller ones : 

<ul class="flex {direction} justify-end space-x-8">

But this direction prop doesn't render on smaller device. I looked in the developer tools and when I uncheck the windi class (eg: windi-15d8t28) that is created, it works fine.

Thanks!

I have added

<style>
  :root {
   ...
   // some default css vars
  }

  .form-input,
  .form-select {
    @apply block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm;
  }
</style>

to a _layout.svelte file and somehow the classes are not taken into account. Any idea why? Could you update the sapper example as well? 🤗

I also tried <style global>...</style>

https://github.com/sveltejs/kit

[!] (plugin svelte) ParseError: Identifier `deep` is expected
node_modules/@responsive-ui/loader/src/Loader.svelte
34:   border-width: 2px;
35: }
36: // .responsive-ui-loader__spinner:after {
     ^
37:   //   content: "";
38:   //   width: 5px;

The comment in <style> is identified as deep selector.

The examples have just been refactored, but if I just started to use them 😅 .

If I click on a blog post in the sapper rollup example:

https://github.com/windicss/svelte-windicss-preprocess/tree/main/example/outdated/sapper-webpack/src/routes/blog

The styles are not loaded:

GET http://localhost:3000/blog/client/client-d93a1e23.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/blog/client/[slug]-72d51346.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/blog/client/client-d93a1e23.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/blog/client/[slug]-72d51346.css net::ERR_ABORTED 404 (Not Found)

I suspect, that the import path is relative, not absolute and while adding `/blog to the path, it breaks.

Pseudo-classes like :hover, :first or :focus doesn't work.

A code like this doesn't make effect:

<h1>Hello world!</h1>

<style>
  /* Doesn't works */
  h1:hover {
    @apply text-red-500;
    /* Or simply `color: red;` */
  }

/* But, @variants works */
  @variants hover {
    h1 {
      @apply text-red-500;
      /* Or simply `color: red;` */
    }
  }
</style>

I think that should affect other CSS statements like :not(.class), but I not tested it yet, so I'm not very sure.

improve build config of REPL

Form input styles doesn't work properly, sometimes it works, sometimes it doesn't and sometimes it works partially.
Tested with the latest version of windicss + svelte-windicss-preprocess on the latest version of SvelteKit and Sapper.

How to reproduce the issue:
1 - set all the files listed below
2 - $ npm run dev
3 - manually refresh the page
4 - $ npm run build && npm run start
5 - manually refresh the page

svelte.config.cjs:

const sveltePreprocess = require('svelte-preprocess');
module.exports = {
  preprocess: [
    sveltePreprocess.typescript(),
    require('svelte-windicss-preprocess').preprocess({
      config: 'tailwind.config.cjs',
      compile: true,
      prefix: 'css-',
      globalPreflight: true,
      globalUtility: true,
    }),
  ],
  kit: {
    adapter: '@sveltejs/adapter-node',
    target: '#svelte'
  }
};

tailwind.config.cjs:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('windicss/plugin/forms')
  ],
}

src/components/Input.svelte:

<script>
  let css;
  export { css as class };
  export let placeholder;
</script>

<input type="text" {placeholder} class="{css} border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" />

src/routes/index.svelte:

<script>
  import Input from '$components/Input.svelte';
</script>

<form action="">
  <Input placeholder="component-input" class="block mt-1 ml-1 w-56" />
  <input type="text" placeholder="normal-input" class="block mt-1 ml-1 w-56 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" />
</form>

screenshots:

Usually in Tailwind you have to import
@tailwind base;
@tailwind components;
@tailwind utilities;

somewhere. Is it required with svelte-windicss-preprocess? Or does svelte-windicss-preprocess always include the three?

steps to reproduce

• git clone repo
• npm i
• npm run build // or other npm tasks
  will give an error if the person does not have pnpm installed locally.
  adding pnpm as dev dependency would fix.

this is not urgent I personally just don't use pnpm and I like if repos are self contained if i do npm i && npm whatever.

A note in the README that pnpm is a dev dependency would work too.

just close this issue if you think otherwise.

add fallback solution for people not using node_nev

I'm trying to migrate over to windi but I'm running into issues with compiling some of the tailwind workarounds we needed to implement in Svelte.

What we're trying to express is this: set the color to bg-red-600 if the foo variable is true, otherwise set it to a dynamic color. Here's how we worked things before:

<div class="{foo ? 'bg-red-600' : `bg-${colorLookup(index)}-600`}">

where colorLookup() returns strings like "purple" or "green".

Is there a way to both dynamically apply a color class depending on another dynamic variable? It's fine if we need to list out every class that the colorLookup() function would generate (i.e. bg-purple-600 bg-green-600 etc).

update docs to match v3.0.0

needs debugging and validation , issue to keep track

example:

<div class="bg-white font-light sm:hover:(bg-gray-100 font-medium)"/>

works with Compilation mode
does not work with Interpretation mode

a safelist or description to set it, might be the only way to make this possible, since classes are only set in runtime not in preprocess

<div
  class:w-40={width === 'large'}
  class:w-30={width === 'medium'}
  class:w-20={width === 'small'}
  class="bg-primary h-1.25 mx-auto rounded-lg"
/>

Ref: https://svelte.dev/tutorial/classes

Originally posted by @lamualfa in #55 (comment)

I followed the install instructions and most of of tailwind works, but I noticed that I couldn't get the ring class to work with windicss.

For example, if I have run a file with a single file with <div class="ring-2" /> i get:

.ring-2 {
  -webkit-box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

But nothing appears as i suspect the css vars like --tw-ring-color and are not defined. This is likely a noob tailwindcss configuration issue, as I'm not sure how the base tailwind imports in a svelte project with windicss. Any ideas?

I have a svelte module:

<script context="module">
  ...
  export { something }
</script>

<script>
  ...
</script>

<h1>hello<h1>

Whenever I add svelte-windicss-preprocess, I can no longer import the module. Instead the bundler hangs. Have tried Rollup and Snowpack.

Hello!

Thanks for this utility, is awesome!!!

I am testing and can see that the container media query no is orderer correctly

my monitor is 1920 x 1080 and take 768

and see this in css

when i reorder manually this is fixed

I just tested the new 2.0.0 release in sveltejs/kit, but when I run the project throws:

TypeError: Reduce of empty array with no initial value
    at Array.reduce (<anonymous>)
    at compileStyleSheet (/home/villacorta/Proyectos/svelte-experiments/node_modules/windicss/lib/index.js:626:10)
    at StyleSheet.build (/home/villacorta/Proyectos/svelte-experiments/node_modules/windicss/lib/index.js:668:16)
    at _preprocess (/home/villacorta/Proyectos/svelte-experiments/node_modules/svelte-windicss-preprocess/src/index.js:169:10)
    at Object.preprocess (/home/villacorta/Proyectos/svelte-experiments/node_modules/svelte/src/compiler/preprocess/index.ts:235:27)
    at markup (/home/villacorta/Proyectos/svelte-experiments/node_modules/svelte-sequential-preprocessor/src/main.ts:10:33)
    at Object.preprocess (/home/villacorta/Proyectos/svelte-experiments/node_modules/svelte/src/compiler/preprocess/index.ts:235:21)
    at Object.load (/home/villacorta/Proyectos/svelte-experiments/node_modules/@snowpack/plugin-svelte/plugin.js:105:11)
    at runPipelineLoadStep (/home/villacorta/Proyectos/svelte-experiments/node_modules/snowpack/lib/index.js:74471:28)
    at Object.buildFile (/home/villacorta/Proyectos/svelte-experiments/node_modules/snowpack/lib/index.js:74638:24)
    at /home/villacorta/Proyectos/svelte-experiments/node_modules/snowpack/lib/index.js:131382:41
    at buildFile (/home/villacorta/Proyectos/svelte-experiments/node_modules/snowpack/lib/index.js:131394:24)
    at Object.loadUrl (/home/villacorta/Proyectos/svelte-experiments/node_modules/snowpack/lib/index.js:131738:30)
    at /home/villacorta/Proyectos/svelte-experiments/node_modules/@sveltejs/kit/src/api/dev/index.js:162:14

The svelte.config.js is:

const { typescript } = require('svelte-preprocess')
const windicss = require('svelte-windicss-preprocess')
const seqPreprocess = require('svelte-sequential-preprocessor')

const windi = {
  markup: windicss.preprocess({
    compile: true,          // false: interpretation mode; true: compilation mode
    globalPreflight: true,  // set preflight style is global or scoped
    globalUtility: true,    // set utility style is global or scoped
    prefix: 'tw-'           // set compilation mode style prefix
  }),
}

module.exports = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: seqPreprocess([
    typescript(),
    windi,
  ]),
  kit: {
    // By default, `npm run build` will create a standard Node app.
    // You can create optimized builds for different platforms by
    // specifying a different adapter
    adapter: '@sveltejs/adapter-node',

    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte'
  }
};

Note: I use svelte-sequential-preprocessor for svelte-preprocess support, but if I disable it, the problem persist.
Note 2: I tested the same svelte-windicss-preprocess on a vanilla sapper template and the problem persist, but without a descriptive error like sveltekit. Not tested on stock svelte template.

I'm very hyped with the tailwind.config.js support, thank!

for changes see windicss/windicss#101

• update packages
• update readme
• include examples

Windi fails with

// SomeComponent.svelte
<div class="p-4 {$$props.class}">Hello</div>

Usage

<SomeComponent class="bg-blue" />

Any idea, how to add this feature? :)

Can't seem to get it to work in Sapper/Rollup/Typescript. Build (also dev) hangs forever ... Is there some way to debug/see what's going on?

Config:

   svelte({
        preprocess: [
          sveltePreprocess.typescript(),
          require("svelte-windicss-preprocess").preprocess({
            config: "tailwind.config.js", // tailwind config file path
            compile: true, // false: interpretation mode; true: compilation mode
            prefix: "windi-", // set compilation mode style prefix
            globalPreflight: true, // set preflight style is global or scoped
            globalUtility: true, // set utility style is global or scoped
          }),
        ],

Having multiple Svelte components appears to create duplicated *, html, body etc. entries in the resulting CSS:

@voorjaar can you add one simple example of code where this break

how to reproduce

• check out this repo
• npm i
• npm run build
• cd example/svelte
• npm i
• npm run dev

Add this markup to the src/App.svelte file:

<script>
  import Feature from './components/Feature.svelte'
</script>
<h1 class="bg-gray-100">a</h1>
<main>
...

and hit save. It renders correctly.
Now add one character and hit save:

<script>
  import Feature from './components/Feature.svelte'
</script>
<h1 class="bg-gray-100">ab</h1>
<main>
...

Again it renders correctly.
Now remove the last character and hit save:

<script>
  import Feature from './components/Feature.svelte'
</script>
<h1 class="bg-gray-100">a</h1>
<main>
...

Now the global reset styles are gone (not added to bundle.css).
This happens to all markup that I already entered. As soon as I enter markup the first time, the global styles are added again. The second time with the same markup -> styles are gone.

Hope it's detailed enough to reproduce.

make sure that class sorting keeps same -> expression based

(node:9014) UnhandledPromiseRejectionWarning: Error: Cannot find module '../../src/index'

combined in one issue for better tracking.

styles are getting sorted in wrong order (happens not all the time) therefore breaking if not in component file. This happens for typography and forms so far. Need to do more debugging.

When visiting a sapper site using svelte-windicss-preprocess, the css does not render instantly. Reloading the page makes it even clearer.

REPRO:
Create Sapper Project with Rollup
Install svelte-windicss-preprocess and add it to your rollup
npm run build; npm run start
Go to locahost:3000 and refresh the page, you should see how the css does not render instantly and the content flickers.

From fresh clone of main:

eden ~/svelte-windicss-preprocess (main)> cd example/snowpack/
eden ~/s/e/snowpack (main)> pnpm install
Lockfile is up-to-date, resolution step is skipped
Packages: +42
++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /Users/eden/.pnpm-store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 42, reused 0, downloaded 42, added 42, done
node_modules/.pnpm/[email protected][email protected]/node_modules/svelte-preprocess: Running postinstall script, done in 25ms
node_modules/.pnpm/[email protected]/node_modules/esbuild: Running postinstall script, done in 121ms

dependencies:
+ svelte 3.32.3
+ svelte-windicss-preprocess 2.2.1

devDependencies:
+ @snowpack/plugin-svelte 3.5.2
+ rollup 2.39.1
+ snowpack 3.0.13
+ svelte-hmr 0.12.6
eden ~/s/e/snowpack (main)> pnpm run dev

> @ dev /Users/eden/svelte-windicss-preprocess/example/snowpack
> snowpack dev --open none

[snowpack] Error: Cannot find module '../../dist/index.js'
Require stack:
- /Users/eden/svelte-windicss-preprocess/example/snowpack/svelte.config.js
- /Users/eden/svelte-windicss-preprocess/example/snowpack/node_modules/.pnpm/@snowpack/[email protected][email protected][email protected]/node_modules/@snowpack/plugin-svelte/plugin.js
- /Users/eden/svelte-windicss-preprocess/example/snowpack/node_modules/.pnpm/[email protected]/node_modules/snowpack/lib/index.js
- /Users/eden/svelte-windicss-preprocess/example/snowpack/node_modules/.pnpm/[email protected]/node_modules/snowpack/index.bin.js

Error: Cannot find module '../../dist/index.js'
Require stack:
- /Users/eden/svelte-windicss-preprocess/example/snowpack/svelte.config.js
- /Users/eden/svelte-windicss-preprocess/example/snowpack/node_modules/.pnpm/@snowpack/[email protected][email protected][email protected]/node_modules/@snowpack/plugin-svelte/plugin.js
- /Users/eden/svelte-windicss-preprocess/example/snowpack/node_modules/.pnpm/[email protected]/node_modules/snowpack/lib/index.js
- /Users/eden/svelte-windicss-preprocess/example/snowpack/node_modules/.pnpm/[email protected]/node_modules/snowpack/index.bin.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/eden/svelte-windicss-preprocess/example/snowpack/svelte.config.js:2:15)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at plugin (/Users/eden/svelte-windicss-preprocess/example/snowpack/node_modules/.pnpm/@snowpack/[email protected][email protected][email protected]/node_modules/@snowpack/plugin-svelte/plugin.js:71:30)
    at execPluginFactory (/Users/eden/svelte-windicss-preprocess/example/snowpack/node_modules/.pnpm/[email protected]/node_modules/snowpack/lib/index.js:71552:18)
    at loadPluginFromConfig (/Users/eden/svelte-windicss-preprocess/example/snowpack/node_modules/.pnpm/[email protected]/node_modules/snowpack/lib/index.js:71565:22)
    at /Users/eden/svelte-windicss-preprocess/example/snowpack/node_modules/.pnpm/[email protected]/node_modules/snowpack/lib/index.js:71589:24
    at Array.forEach (<anonymous>)

 ERROR  Command failed with exit code 1.

how to reproduce

• uncomment config: "tailwind.config.js" in example/svelte/rollup.config.js

// example/svelte/rollup.config.js
...
 preprocess: windicss.preprocess({
        config: "tailwind.config.js",
        // bundle: './public/windi.css',
        // compile: true,
        prefix: "windi-",
        globalPreflight: true,
        globalUtility: true,
      }),
...

• add only the typography plugin in "tailwind.config.js"

// example/svelte/tailwind.config.js

module.exports = {
  plugins: [
    require("windicss/plugin/typography"),
  ],
};

• add some markup with .prose in example/svelte/src/App.svelte

<div class="prose">
  <h1>Hello Windicss!</h1>
  <p>lorem</p>
</div>

• start dev server npm i npm run dev
• now start editing App.svelte with markup and / or classes

what behavior is expected

I expect to see the markup formated with the prose definitions

what happens instead

On the first run all prose related classed get generated like expected in bundle.css

...
.prose {
    color: #374151;
    max-width: 65ch;
    font-size: 1rem;
    line-height: 1.75
}
...

After making one change in App.svelte, the css outputed looks like this:

...
:global(.prose) {
    color: #374151;
    max-width: 65ch;
    font-size: 1rem;
    line-height: 1.75
}
...

four edits later...

...
:global(:global(:global(:global(.prose)))) {
    color: #374151;
    max-width: 65ch;
    font-size: 1rem;
    line-height: 1.75
}
...

and so on and so forth.

what I found out so far

I found out that uncommenting this in src/utils.ts stops the adding of :global and the css output doesn't break.

// src/util.ts
...
export function globalStyleSheet(styleSheet: StyleSheet) {
  // turn all styles in stylesheet to global style
  /*
  styleSheet.children.forEach((style) => {
    style.wrapRule((rule: string) => `:global(${rule})`);
  });
  */
...
  return styleSheet;
}

But now the .prose classes are always scoped, which could not be the final solution.
I hope you have enough informations to solve the issue and thank you very much for your effort in making windicss and the preprocessors! I highly appreciate that.

Let me know if I can support you in any way.

I have a strange issue, I am serving my Svelte App with esbuild serve (shouldn't be a problem here, am more than happy to try things with this setup for you), but if I reload the first time it does look correct, site does work completely and is loaded fully, however if I am reloading a second time it does removes some styles, looks strange. Anytime I am changing any class it does work for the first reload, any reload after that is not working. Tried with both modes (...compile)

I encountered an error while adding the disabled attribute to an element.

For example, the following all fail:

<button disabled>Login</button>
<button disabled="disabled">Login</button>
<button disabled={isLoading}>Login</button>

Example error:

[!] (plugin svelte) TypeError: i.value.map is not a function
src/Login.svelte
TypeError: i.value.map is not a function
    at /project-root/node_modules/svelte-windicss-preprocess/src/index.js:123:71
    at Array.forEach (<anonymous>)
    at Object.enter (/project-root/node_modules/svelte-windicss-preprocess/src/index.js:111:33)
    at visit (/project-root/node_modules/svelte/node_modules/estree-walker/src/estree-walker.js:51:10)
    at visit (/project-root/node_modules/svelte/node_modules/estree-walker/src/estree-walker.js:83:12)
    at visit (/project-root/node_modules/svelte/node_modules/estree-walker/src/estree-walker.js:83:12)
    at visit (/project-root/node_modules/svelte/node_modules/estree-walker/src/estree-walker.js:83:12)
    at visit (/project-root/node_modules/svelte/node_modules/estree-walker/src/estree-walker.js:83:12)
    at Object.walk (/project-root/node_modules/svelte/node_modules/estree-walker/src/estree-walker.js:2:9)
    at _preprocess (/project-root/node_modules/svelte-windicss-preprocess/src/index.js:101:16)

i will rework this completely. old test class is not good enough here

Hi again!

I'm testing various classes and see that duration not is passed in compile time, only on interpreted

I'm using template literal in my class attribute class={`resizer resizer--${axe}`}. It get preprocessed as class="resizer resizer-- {axe}" (notice the space between -- and {axe}).

I've dug into the code and found out these two lines. They introduce an extra space between the text and expression part of the attribute.

Am I missing something, a limitation of the preprocessor with template literal perhaps?

I'd be happy to create a PR to remove the space there.

Just started using this, so dunno if this is intended or not. Btw love it!

This
<style> :global(p){ } .something{ font-size: 1.4em; } </style>

Becomes this:
<style> :global(p){ } :global(.something){ font-size: 1.4em; } </style>

if there is one or more :global() in the style the :global() gets added to all elements in the style tag

Using the default svelte configuration in the readme

After following the guide using webpack with sapper(on electron) I am getting this error message!

src/node_modules/@sapper/internal/App.svelte
Module build failed (from ./node_modules/svelte-loader/index.js):
Error: Couldn't resolve parser "svelte"
    at new Promise (<anonymous>)
webpack:///./src/routes/index.svelte?:1
throw new Error("Module build failed (from ./node_modules/svelte-loader/index.js):\nError: Couldn't resolve parser \"svelte\"\n    at resolveParser (/Users/corey/freelance/daily/node_modules/prettier/index.js:13599:13)\n    at normalize$1 (/Users/corey/freelance/daily/node_modules/prettier/index.js:13695:18)\n    at format (/Users/corey/freelance/daily/node_modules/prettier/index.js:15111:46)\n    at /Users/corey/freelance/daily/node_modules/prettier/index.js:57542:12\n    at format (/Users/corey/freelance/daily/node_modules/prettier/index.js:57562:12)\n    at _preprocess (/Users/corey/freelance/daily/node_modules/svelte-windicss-preprocess/index.js:199:23)\n    at /Users/corey/freelance/daily/node_modules/svelte-windicss-preprocess/index.js:420:27\n    at new Promise (<anonymous>)\n    at markup (/Users/corey/freelance/daily/node_modules/svelte-windicss-preprocess/index.js:418:20)\n    at preprocess (/Users/corey/freelance/daily/node_modules/svelte/compiler.js:26987:34)");
^

Error: Module build failed (from ./node_modules/svelte-loader/index.js):
Error: Couldn't resolve parser "svelte"
    at resolveParser (/Users/corey/freelance/daily/node_modules/prettier/index.js:13599:13)
    at normalize$1 (/Users/corey/freelance/daily/node_modules/prettier/index.js:13695:18)
    at format (/Users/corey/freelance/daily/node_modules/prettier/index.js:15111:46)
    at /Users/corey/freelance/daily/node_modules/prettier/index.js:57542:12
    at format (/Users/corey/freelance/daily/node_modules/prettier/index.js:57562:12)
    at _preprocess (/Users/corey/freelance/daily/node_modules/svelte-windicss-preprocess/index.js:199:23)
    at /Users/corey/freelance/daily/node_modules/svelte-windicss-preprocess/index.js:420:27
    at new Promise (<anonymous>)
    at markup (/Users/corey/freelance/daily/node_modules/svelte-windicss-preprocess/index.js:418:20)
    at preprocess (/Users/corey/freelance/daily/node_modules/svelte/compiler.js:26987:34)
    at eval (webpack:///./src/routes/index.svelte?:1:7)
    at Object../src/routes/index.svelte (/Users/corey/freelance/daily/__sapper__/dev/server/server.js:564:1)
    at __webpack_require__ (/Users/corey/freelance/daily/__sapper__/dev/server/server.js:21:30)
    at eval (webpack:///./src/node_modules/@sapper/internal/manifest-server.mjs?:8:78)
    at Module../src/node_modules/@sapper/internal/manifest-server.mjs (/Users/corey/freelance/daily/__sapper__/dev/server/server.js:450:1)
    at __webpack_require__ (/Users/corey/freelance/daily/__sapper__/dev/server/server.js:21:30)
    at eval (webpack:///./src/node_modules/@sapper/server.mjs?:7:83)
    at Module../src/node_modules/@sapper/server.mjs (/Users/corey/freelance/daily/__sapper__/dev/server/server.js:462:1)
    at __webpack_require__ (/Users/corey/freelance/daily/__sapper__/dev/server/server.js:21:30)
    at eval (webpack:///./src/server.js?:6:72)

Any ideas would be great!

Hello there. I've met with this brilliance yesterday and encountered a weird issue.

When I comment out my style section like this, the code still works and styles get applied:

<!-- <style lang="postcss">
  nav {
    border: 10px solid black;
    @apply bg-red-200;
  }
</style> -->

But if I comment out my code like this, styles doesn't get applied as intended:

<style>
  /* nav {
    border: 10px solid black;
    @apply bg-red-200;
  } */
</style>

It doesn't matter if I change the lang attribute of the style tag, or even omitting it. The issue is bound to Windi CSS since removing preprocess codes from rollup.config.js, everything works as expected.

I'm willing to help to fix this issue if any tests and/or recoding to do. Thanks a lot for this plugin.

Example:

<button
  on:click={increment}
  class="
    rounded-2em
    px-2em
    py-1em
    bg-orange-200
  "
  >Clicks: {count}</button
>

This doesn't generate the expected output

In the past day, I've put a small proof of concept of a refactor of this project to reuse the Svelte & Windi parsers. You can find it here grenierdev/svelte-windicss-preprocess.

<div class="min-h-screen bg-gray-100" />
stays
<div class="min-h-screen bg-gray-100" />

<div class="bg-white font-light sm:hover:(bg-gray-100 font-medium)" />
becomes
<div class="bg-white font-light sm:hover:bg-gray-100 sm:hover:font-medium" />

<div class="flex px-{a} lg:px-{b}" />
becomes
<div class="flex px-{a} lg:px-{b}" />
                    ^---------^------------------------- intact, author will need to add style
                                                         manually for all possible values of {a}
                                                         and {b}

<div class="bg-white font-light sm:hover:(bg-gray-{b} font-medium)" />
becomes
<div class="bg-white font-light sm:hover:bg-gray-{b} sm:hover:font-medium" />
                                                 ^------ intact, author will need to add style
                                                         manually for all possible values of {b}

<div class={`px-3 py-${c + 2 - 10} sm:(text-gray-${d} text-sm font-medium)`} />
becomes
<div class={`px-3 py-${c + 2 - 10} sm:text-gray-${d} sm:text-sm sm:font-medium`} />
                     ^--------------------------^------- intact, author will need to add style
                                                         manually for all possible values of 
                                                         {c + 2 - 10} and {d}

All of which could be passed to something described in #35 (comment) (using WindiCSS at runtime).

Still just a proof of concept and does not yet cover all the features, namely the class directive.

Could be worth discussing?

animate-spin generates this code:

@keyframes svelte-1fil0v3-spin {
    :global(.windi-sdy900) {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

Which doesn't work. Real tailwind generates this instead:

@keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }

Not sure if this is svelte specific, but I reproduced the issue with the rollup example in this repo: https://github.com/lawrencecchen/svelte-windicss-preprocess/tree/main/example/rollup

Example

Windi CSS Config

module.exports = {
  theme: {
    extend: {
      margin: {
        large: '4rem',
        medium: '2.5rem',
        small: '1rem',
      },
      colors: {
        primary: {
          DEFAULT: '#991B1B',
          50: '#F0AAAA',
          100: '#EC9494',
          200: '#E46969',
          300: '#DD3D3D',
          400: '#C42323',
          500: '#991B1B',
          600: '#6E1313',
          700: '#420C0C',
          800: '#170404',
          900: '#000000',
        },
      },
    },
  },
};

HTML

<div class="bg-primary h-1.5 mx-auto rounded-lg  w-30 "></div>

Output CSS

.rounded-lg {
    border-radius: 0.5rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

// I don't know why, but it will be created 2 times if you use `mx-auto` 2 times in difference place
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgba(153, 27, 27, var(--tw-bg-opacity));
}

h-1.5 and w-30 the two are is missing from CSS Output.

Environment

• Rollup v2.33.1
• Svelte v3.29.4
• Windi CSS Preprocess v3.0.0-beta.1

I use Routify Framework for the routing library. See https://github.com/lamualfa/routify-windi.

I discovered that if you have the following Svelte code

<script>
  export let active = false
</script>

the Javascript code ends like this:

export let class="active:false"

If I remove the windicss preprocess from the config, this doesn't happen anymore. What is happening here?

ToDo's (will do it the next days)

• cherry pick and customize latest changes regarding pnpm and building from upstream windicss repo
• prepare test action
• prepare publish package action

inline expression do not work with compiling