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.

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

feat: add style tag injection #659

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

mprobber
Copy link

Motivation

When using React in a variety of environments (client-side rendered, server-side rendered, React Native), your build tooling is going to vary from platform to platform. Often times it can be a heavy lift to introduce new rules, plugins, and loaders, as well as keep their options consistent between platforms. Allowing Linaria to inject some logic to add a style tag to the page during the babel transform allows us to check for the existence of the document object, and if it exists, add it to the page. This lets you use libraries that rely on Linaria without setting up any bespoke build tooling, and styles the page if possible.

Summary

I refactored transform.ts to split out any of the preprocessing logic, so it could be shared between it and the babel plugin. (preprocess.ts)

I added an additional option to the linaria configuration, injectStyleTags, that defaults to false.

When injectStyleTags is true, the babel plugin constructs an AST for code to inject the CSS into the head of the DOM, appends that code to the end of the transformed file, so on module initialization, the file adds its' styles to the DOM.

Test plan

All existing unit tests pass (I moved the tests for transformUrl from transform.ts to preprocess.test.ts, that function is now in preprocess.test.ts).

In addition, a new snapshot test was added in babel.test.ts, to make sure that injecting the style works as expected.

@callstack-bot
Copy link

Hey @mprobber, thank you for your pull request 🤗.
The coverage report for this branch can be viewed here.

@Anber
Copy link
Collaborator

Anber commented Sep 3, 2020

Hi @mprobber!
It's an interesting proposal.
@jayu what do you think?

@mprobber
Copy link
Author

@Anber @jayu any updates on this? It would help reduce a bunch of complexity in a build system I'm working on.

@mprobber
Copy link
Author

mprobber commented Sep 23, 2020

@Anber @jayu bump? 😄

@Anber
Copy link
Collaborator

Anber commented Oct 26, 2020

Hi @mprobber
First of all, sorry for the late reply.
If the core team doesn't have any objections, I would like to include it in the next (after 2.0) release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants