Babel plugin / require cache on css import? (stale tailwind config / css)

codemonkeynorth · 8 June 2021 10:16

Hi,

Just a heads up for people using tailwind with babel plugin macros (as per Tailwindcss with babel-macro-plugin and CSS-in-JS - #38 by jeffceriello)

It seems config / css output is getting cached somewhere

I make changes to tailwind.config.js (adding some responsive utilities for my global styles) and build my tailwind.css to index.css

I then import the index.css into my theme as a Global style

I’m also using twin.macro which I guess is also creating its own versions of my utility classes because I use eg
css={tw`lg:u-full-height`}

For some reason, any changes to the tailwind config / built css don’t update on the front end. Even after a complete rebuild. The index.css itself has the new values, but when I run my site it’s getting old values for the css in server.js

I tried deleting my build folder. I tried rebuilding my css. Deleted my app data in my browser. Ran in incognito. I restarted VS Code etc. I restarted Wamp

Eventually something updated it, but I’m not sure what.

Again what’s odd is the index.css is updated fine but it’s not getting updated into server.js correctly .
I’m wondering If this is more an issue with Frontity’s style import rather than tailwind specifically

I guess I can try with a basic index.css etc file, skipping the tailwind part, and see if it still happens

Any advice appreciated

Thanks
J

codemonkeynorth · 8 June 2021 10:26

I think it might be this

github.com/ben-rogerson/twin.macro

Overriding existing utilities in tailwind.config.js has no effect when using with Next.js

opened 10:47PM - 12 Jan 21 UTC

closed 09:33PM - 13 Jan 21 UTC

amrnn90

Hello, I'm using twin.macro with emotion and Next.js. Whenever I make a chang…e inside `tailwind.config.js` that overrides an existing utility, that change is ignored and restarting the server has no effect...the only way to make it work is by deleting the `.next` folder. ### Steps to reproduce: 1. `npx degit https://github.com/ben-rogerson/twin.examples/next-emotion folder-name` 2. `yarn && yarn dev` 3. override an existing utility in `tailwind.config.js` (must be an existing utility, if it's a new utility things work fine), for example: ```js module.exports = { theme: { extend: { colors: { red: { 100: 'black' } }, }, }, plugins: [], } ``` 4. apply this utility somewhere, for example `<div tw="bg-red-100"></div>` 5. the created div will show the old red instead of the new black 6. restarting the server doesn't work, you have to delete the `.next` folder and run the server again to make it work.

Appears to be a Babel caching issue

Not sure specific fix. Probably deleting .cache/babel-loader or .cache/@babel/register from node_modules

github.com/kentcdodds/babel-plugin-preval

How to force recompile?

opened 03:50PM - 16 Jul 17 UTC

silvenon

docs help wanted

- `babel-plugin-preval` version: 1.4.1 - `node` version: 8.1.3 - `npm` (or `yarn`) version: npm 5.2.0 Relevant code or config ```javascript const result = preval` const fs = require('fs'); const path = require('path'); const content = fs.readFileSync(path.join(__dirname, 'file.md')); module.exports = content.toString(); `; console.log(result); ``` What you did: I ran the code above, to export contents of `file.md`. What happened: when I modify `file.md` the result of `preval` didn't change when I tried to compile it again. Maybe I'm missing something? Reproduction repository: [demo](https://github.com/silvenon/demo-babel-plugin-preval-recompile/tree/master)  Problem description: `preval` probably doesn't see the reason to recompile because its tagged template literal didn't change. Suggested solution: I don't know. 😅

Will do some investigation

Johan · 8 June 2021 11:10

After building the CSS from tailwindcss, did you also rebuild Frontity itself? Otherwise the CSS-in-JS won’t work.

In my project I run tailwind in the theme and load it “normally” from HTML (link element in the ). This works way better with Frontity and tailwind because it can’t be split properly per component.

codemonkeynorth · 8 June 2021 12:01

Yes rebuilt everything. Restarted VS Code. Re-ran npm run build:css and npm run dev

Almost entirely sure it’s the Babel cache as stated on that twin.macro GitHub

Aside from the cache issue, you’re saying just embed the index.css in my html and not import it into my js and then just use className=“my-class” ?

I’m not actually sure what importing it actually does anyway.

Either way I also need to properly separate what’s going in my index.css (mainly tailwind base and @screen stuff) and what I’m using through tw since it’s probably duplicating at the moment

Thanks
J

nd.mamadou.dv · 14 January 2022 13:41

Good morning,

I try to add TailwindCSS to my frontity project, but I struggle as i get some error saying that twin.macro causes problems. It says that twin.macro has for properties undefined .

Could you explain me how to add tailwindCSS to my frontity configuration ?