Comments (12)
I have already spend several days looking for a solution. Currently, there aren't any solution I'm totally satisfy.
Someone already shared the babel config for SWC support:
vercel/next.js#30174 (comment)
Maybe we should wait Vercel to add support?
I'm totally open for ideas.
from next-js-boilerplate.
Do you see any slowness using the boilerplate?
I'm using for several Next JS projects and I don't see any issue even without using SWC compiler.
from next-js-boilerplate.
Still is pretty quick. Vercel builds in about a minute, though ~12 seconds would be incredible (if the 5x claims are to be believed).
I think it makes sense to wait for Vercel to support it.
I am curious about removing styled-jsx altogether. Haven't used it before and I've been pretty happy with vanilla tailwind. What use do you still find for it?
from next-js-boilerplate.
If you don't used styled-jsx, I think you can remove .babelrc, remove the dependencies in package.json and you should be able to enjoy SWC speed.
I added styled-jsx support because
- It's one of Next JS core feature. It doesn't mean we should keep it...
- There is currently some limitation in vanilla tailwind for selector.
styled-jsx
is able to solve it with some powerful CSS selector.
from next-js-boilerplate.
Which selector are your referring to?
from next-js-boilerplate.
Something you are currently not able to do it with Tailwind CSS is the children selector: styling the children with Tailwind. Or, the CSS attribute selector.
Maybe, we should the other way around: try to enable swc by removing the custom babel and if someone need a powerful selector, he can add it.
from next-js-boilerplate.
Something you are currently not able to do it with Tailwind CSS is the children selector: styling the children with Tailwind. Or, the CSS attribute selector.
Maybe, we should the other way around: try to enable swc by removing the custom babel and if someone need a powerful selector, he can add it.
Sorry if I'm mistaken with my understanding of this. Are you aware of the custom class names you can use in TailwindCSS currently? You can select pure selectors and group attributes together to select exactly what you need.
With that being said it was made in the interests of speed to do as you mentioned in the latter part of your response and remove the dependencies and the .babelrc file.
from next-js-boilerplate.
@oliverpatrick Thank you for your message and your suggestion.
I reread your suggestion several and didn't fully understand your solution.
Could you share me example or a link to the documentation?
from next-js-boilerplate.
@ixartz Sorry about that. As I said, excuse me if I’m mistaken. After a quick google search I couldn’t find anything conclusive.
Fireship on YouTube however covers quite a concise little video on tailwind and roughly mentions what I mean. I have timestamped the link for you: https://youtu.be/pfaSUYaSgRo?t=503
Hope this helps.
from next-js-boilerplate.
@oliverpatrick Thank you for taking the time to share the solution. It's one possible solution but it isn't as easy as I expected.
Here is someone asking the same thing: tailwindlabs/tailwindcss#1984
I think it's an edge case: styled-jsx-plugin-postcss
doesn't need for all project. We can remove it from the boilerplate and we can use the rust compiler.
from next-js-boilerplate.
Spot on. Thank you for taking the time to review my comments and making the boilerplate. I’m glad I could offer feedback.
from next-js-boilerplate.
@oliverpatrick @andrewschreiber I just remove styled-jsx-plugin-postcss
and .babelrc. By default, the boilerplate now uses SWC compiler and the warning is now removed: "Disabled SWC as replacement for Babel because of custom Babel configuration"
from next-js-boilerplate.
Related Issues (20)
- Google Analytic HOT 1
- Building Failed HOT 2
- Difficulty Using Template and Running Migrations on Vercel Deploy HOT 1
- Option for Client Side Redendering(CSR) HOT 1
- Errors with PNPM straight out of the box HOT 7
- Migrating to Vitest HOT 7
- Minor typo HOT 1
- Sign-up and Sign-in meta descriptions should be swapped HOT 1
- Add `.devcontainer/devcontainer.json HOT 5
- Image quality HOT 3
- Custom SignOutButton currently not being used HOT 5
- Confusing naming between Schema and Validation. HOT 6
- Should Intl middleware be applied to API routes? HOT 7
- Error: Cannot find module './sw.js.json' HOT 4
- add additional authentication options (not just clerk) HOT 5
- Sentry Auth token HOT 1
- Guide to remove certain dependencies? HOT 2
- How to integrate state management in Zustand with NextJS HOT 1
- Sitemap HOT 9
- Feature request: Turborepo and Documentation HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-js-boilerplate.