-
Notifications
You must be signed in to change notification settings - Fork 24
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add postCSS to Gazebo #23
Conversation
Deploy preview for gazebo ready! Built with commit dfe5152 |
Codecov Report
@@ Coverage Diff @@
## main #23 +/- ##
=======================================
Coverage 59.67% 59.67%
=======================================
Files 11 11
Lines 62 62
Branches 9 9
=======================================
Hits 37 37
Misses 23 23
Partials 2 2
Continue to review full report at Codecov.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job!
tailwind.config.js
Outdated
variants: { | ||
text: ['default', 'hover', 'focus', 'disabled'], | ||
backgroundColor: ['default', 'responsive', 'hover', 'focus', 'disabled'], | ||
opacity: ['default', 'responsive', 'hover', 'focus', 'disabled'], | ||
textColor: [ | ||
'default', | ||
'responsive', | ||
'hover', | ||
'focus', | ||
'disabled', | ||
'visited', | ||
], | ||
borderColor: ['default', 'responsive', 'hover', 'focus', 'disabled'], | ||
cursor: ['default', 'responsive', 'disabled'], | ||
textOpacity: ['default', 'responsive', 'hover', 'focus', 'disabled'], | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we take the default configuration on it, and we update it as we need?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah I was debating that, the only reason I left this was I wasn't sure what level of copy and pasting we'd be doing from UI. I'll clean this up.
Setups rescripts with postcss, tailwind, autoprefixed, and font magician.
Tailwind
Font Magician
CRA was very troublesome to set up with tailwind/PostCSS. I settled on extending the CRA config using rescripts. This allows us to use tailwind both in the
globals.css
file and in css modules with fast refreshing vs using the tailwindcss cli method the internet commonly opts for.Currently CRA doesn't allow the use of PostCSS 8 and some dependencies latest versions use PostCSS 8. Auto prefixed and font magician are both on slightly older versions to maintain compatibility
There's currently a PR to make PostCSS version a peer dependency, we'll need either that or for CRA to update their postCSS version in order to keep up with our PostCSS plugins in the future. Atm both dependencies are locked in to not prompt dependabot to upgrade.
facebook/create-react-app#9716
I tested
npm start
andnpm build
, auto prefixed, font magicial, and tailwindcss were all generating the correct final css file.I moved App and the main css around a bit to better represent our folder structure plans. I can update this, not sure how far Dorian and I have diverged here.