Skip to content

feat(babel): API for custom template tags#976

Merged
Anber merged 1 commit into
masterfrom
extracted-tag-logic
Jun 3, 2022
Merged

feat(babel): API for custom template tags#976
Anber merged 1 commit into
masterfrom
extracted-tag-logic

Conversation

@Anber
Copy link
Copy Markdown
Collaborator

@Anber Anber commented Jun 2, 2022

Motivation

atomic highlighted the complexity of tags' processing logic. That part hasn't been changed since the beginning of Linaria. So, the time for changes has finally come.

Summary

This PR introduces a new way of creating tags. Each tag (both css and styled, as well as their atomic versions) now has a processor that implements the abstract class BaseProcessor. Those processors incapsulate all tag logic and provide the API for the generic template processor inside babel-preset.

Test plan

A lot of new tests were added.

@Anber Anber force-pushed the extracted-tag-logic branch 6 times, most recently from 8643c41 to 54b473b Compare June 3, 2022 11:02
@Anber Anber marked this pull request as ready for review June 3, 2022 11:03
@Anber Anber force-pushed the extracted-tag-logic branch from 54b473b to 60413d3 Compare June 3, 2022 11:12
@Anber
Copy link
Copy Markdown
Collaborator Author

Anber commented Jun 3, 2022

@juanferreras @jpnelson
Hi guys!

I did some bad things here:

  1. atomize option was removed, since it isn't needed anymore. You don't need to configure anything, just import tags form @linaria/atomic and it should just work. But it's actually good news :)
  2. The bad news, is that I had to drop libResolver as well since it became unclear how to resolve tag processors in case of re-exports. What are your use cases for libResolver? Maybe we can find a better alternative.

And the main news is that it is become possible to make custom tags without touching Linaria's insides. The API is unstable yet and TBD, but a start has been made.

@Anber Anber force-pushed the extracted-tag-logic branch from 60413d3 to c5ee8e0 Compare June 3, 2022 14:00
@Anber Anber force-pushed the extracted-tag-logic branch from c5ee8e0 to 69a21b9 Compare June 3, 2022 14:07
@Anber Anber merged commit 3285ccc into master Jun 3, 2022
@Anber Anber deleted the extracted-tag-logic branch June 3, 2022 14:16
@juanferreras
Copy link
Copy Markdown
Contributor

@juanferreras @jpnelson Hi guys!

I did some bad things here:

  1. atomize option was removed, since it isn't needed anymore. You don't need to configure anything, just import tags form @linaria/atomic and it should just work. But it's actually good news :)
  2. The bad news, is that I had to drop libResolver as well since it became unclear how to resolve tag processors in case of re-exports. What are your use cases for libResolver? Maybe we can find a better alternative.

And the main news is that it is become possible to make custom tags without touching Linaria's insides. The API is unstable yet and TBD, but a start has been made.

Hi @Anber ! These last refactors you've been working on seem like fantastic iterations!

I don't have anything against either of these points, I can quote @jpnelson on why I think he went for options.atomize

[...] Invert the dependency so that @linaria/atomic has the atomize function, and the postcss dependency. The atomize function can be a part of the linaria config used by the babel preset, and if you want to use atomic styles, pass in atomize: require('@linaria/atomic').atomize in the config

See #867 (comment) for your original comment too. If you've managed to solve this, then this is indeed actually great news to simplify the usage!


I haven't used libResolver on my end – this is the original issue from @jpnelson #851

@Anber
Copy link
Copy Markdown
Collaborator Author

Anber commented Jun 3, 2022

If you've managed to solve this, then this is indeed actually great news to simplify the usage!

Yep, that was the aim of this refactoring.

I haven't used libResolver on my end – this is the original issue from @jpnelson #851

Maybe it's possible to re-import from the local project by adding something like this to package.json:

  "linaria": {
    "tags": {
      "css": "@linaria/core/processors/css.js",
      "styled": "@linaria/react/processors/styled.js"
    }
  },

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.

2 participants