Add Option to Keep CSS Comments in babel-plugin-emotion. Fixes #1325 #1336
Conversation
Codecov Report
|
Codecov Report
|
|
Preview Docs Built with commit 5677a2d |
|
Who can point me in the right direction to add a test for this new babel plugin feature? |
|
I’m not a fan of adding another option like this. I think the better solution would be to keep all block comments that contain After that change, you can add a fixture in packages/babel-plugin-emotion/tests/fixtures |
Thank you for the comments, @mitchellhamilton ! If you are not interested in the general option to keep comments, then this sounds easier to do. I'll update the PR as soon as I get the chance. |
…der to support stylis plugins such as those that use cssjanus library, which depend on special css comments.
Zenwolf
force-pushed
the
add-babel-plugin-css-option
branch
from
5677a2d
to
3d6f522
Compare
💥 No ChangesetLatest commit: f1289ae Merging this PR will not cause any packages to be released. If these changes should not cause updates to packages in this repo, this is fine 🙂 If these changes should be published to npm, you need to add a changeset. Click here to learn what changesets are, and how to add one. |
| // @noflip supports RTL via stylis plugin using cssjanus lib. If the comments | ||
| // that include this are stripped out, RTL will not work. | ||
| '@noflip' | ||
| ] |
There was a problem hiding this comment.
Sorry, let me clarify, I meant any block comment that contains @ anywhere in the comment, they should be kept so /* @whatever */ and etc. should be kept.
There was a problem hiding this comment.
Sure, no problem. I can make that change.
|
Hi @mitchellhamilton , is there any way to know when a new version of Emotion will be released that contains these changes? Or do I need to do something in order to create a release? |
|
This change has been included in the past two versions of babel-plugin-emotion |
|
@mitchellhamilton Thank you very much! I really appreciate your response. |
…n-js#1325 (emotion-js#1336) * Add ability to retain CSS comments with specific allowed values in order to support stylis plugins such as those that use cssjanus library, which depend on special css comments. * Simplify comment-checking.
[edited to reflect current changes]
What:
Fixes #1325. This PR adds a list of CSS comment values that, when found, keeps the CSS comment instead of removing it when using the
babel-plugin-emotionpackage.Why:
Some CSS libraries require the use of comments to control library functionality. Stylis plugins can use these libraries to provide support via Stylis that Emotion uses. One example of this is the stylis-rtl plugin and the cssjanus library.
The cssjanus lib requires the use of comments to control the rtl flipping behavior for individual style rules or properties. This is an example of the comment:
/* @noflip */.The babel plugin is very convenient for developers using
babel-preset-css-propfor thecssreact prop by automatically inserting the jsx pragma:/* @jsx jsx */. It would be really helpful if developers using libraries that depend on comments can leverage the plugin instead of having to manually configure every file.How:
In order to support retaining comments, I added an approved list of CSS comment values. When a standard CSS comment contains the special values, the plugin will keep the comment instead of removing it. All other comments are removed.
Checklist:
Thank you!