Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat: add built-in PostCSS and Tailwind support #5229

Merged
merged 18 commits into from
Jan 25, 2023
Merged

feat: add built-in PostCSS and Tailwind support #5229

merged 18 commits into from
Jan 25, 2023

Conversation

markdalgleish
Copy link
Member

@markdalgleish markdalgleish commented Jan 24, 2023 •
edited
Loading

Closes: #5085

  • Docs
  • Tests

Long term these features are designed to be enabled by default, but for now they're behind feature flags.

These two features are designed to be completely independent from a Remix perspective:

  • If you enable PostCSS support in isolation, it works as expected.
  • If you enable Tailwind support in isolation, we set up PostCSS behind the scenes with the Tailwind plugin. Consumers don't need to know that PostCSS is being used at all. Note that PostCSS was already a dependency of Remix in order to support CSS Modules, so this strategy is an extension of that.
  • If you enable both features at the same time, we ensure that the Tailwind PostCSS plugin is included behind the scenes if it's missing in your PostCSS config. This is so that you can use the built-in Tailwind support and then later add PostCSS without inadvertently breaking your Tailwind setup because you forgot to include the plugin.

Testing strategy:

Integration tests have been provided for both PostCSS and Tailwind support, in both cases being used with regular style sheets, CSS Modules, CSS side-effect imports and Vanilla Extract.

@changeset-bot
Copy link

changeset-bot bot commented Jan 24, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: a0dd10e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages
Name Type
@remix-run/dev Minor
@remix-run/react Minor
@remix-run/server-runtime Minor
@remix-run/testing Minor
create-remix Minor
@remix-run/css-bundle Minor
@remix-run/cloudflare Minor
@remix-run/deno Minor
@remix-run/node Minor
@remix-run/cloudflare-pages Minor
@remix-run/cloudflare-workers Minor
@remix-run/architect Minor
@remix-run/express Minor
@remix-run/netlify Minor
@remix-run/vercel Minor
@remix-run/serve Minor
remix Minor
@remix-run/eslint-config Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@markdalgleish markdalgleish mentioned this pull request Jan 24, 2023
Closed
2 tasks
markdalgleish
markdalgleish commented Jan 24, 2023
View reviewed changes
packages/remix-dev/compiler/plugins/cssFilePlugin.ts
incremental: false,
splitting: false,
stdin: undefined,
outfile: undefined,
outdir: outfile ? path.dirname(outfile) : outdir,
entryNames: assetNames,
outdir: config.assetsBuildDirectory,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was needed so the build is consistent between browser and server builds. With the original code, the server and client get different source maps which results in multiple, differing copies of the same styles being generated for a single Remix build. This is because the hash of the source map is in the generated CSS file since it contains a comment with the file name. (This was a tough one to track down!)

chaance
chaance approved these changes Jan 24, 2023
View reviewed changes
Copy link
Collaborator

@chaance chaance left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks awesome. A couple minor nits on docs and comments otherwise, but no blockers. Stoked for this 👍

docs/guides/styling.md Show resolved Hide resolved
docs/guides/styling.md Show resolved Hide resolved
packages/remix-dev/compiler/plugins/cssFilePlugin.ts Show resolved Hide resolved
packages/remix-dev/compiler/plugins/cssModulesPlugin.ts Show resolved Hide resolved
@markdalgleish markdalgleish merged commit dcb1987 into dev Jan 25, 2023
@markdalgleish markdalgleish deleted the markdalgleish/postcss branch January 25, 2023 03:54
@github-actions github-actions bot added the awaiting release This issue has been fixed and will be released soon label Jan 25, 2023
@github-actions
Copy link
Contributor

🤖 Hello there,

We just published version v0.0.0-nightly-c9ff7ef-20230125 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@adamwathan adamwathan mentioned this pull request Jan 25, 2023
Merged
@github-actions github-actions bot removed the awaiting release This issue has been fixed and will be released soon label Jan 30, 2023
@github-actions
Copy link
Contributor

🤖 Hello there,

We just published version 1.12.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@zwily
Copy link

zwily commented Jan 31, 2023 •
edited
Loading

🤖 Hello there,

We just published version 1.12.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

You appear to be mistaken, kind bot. 😀

@ryanflorence
Copy link
Member

Ah, better go check out what's going on in meatspace

@mcansh
Copy link
Collaborator

mcansh commented Feb 1, 2023

You appear to be mistaken, kind bot. 😀

the kind, but sometimes mistaken bot has received a stern talking to and promises to not do it again, i believe him. #5342

This was referenced Feb 7, 2023
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MichaelDeBoey MichaelDeBoey MichaelDeBoey left review comments

@machour machour machour left review comments

@rossipedia rossipedia rossipedia left review comments

@chaance chaance chaance approved these changes

Assignees
No one assigned
Labels
CLA Signed package:dev package:server-runtime package:testing renderer:react
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
8 participants
@markdalgleish @zwily @ryanflorence @mcansh @rossipedia @machour @chaance @MichaelDeBoey