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(styles): extract static style #477

Merged
merged 15 commits into from
Oct 15, 2019
Merged

Conversation

connor-baer
Copy link
Member

@connor-baer connor-baer commented Sep 20, 2019

Closes #479.

Purpose

There are some frontend projects at SumUp that can't or don't use React. They need to implement all styles from scratch and need to be updated separately. This would be solved if we could somehow get the styles from the React components as plain CSS. This is exactly what static style extraction aims to achieve.

🔗 Proposal
🔗 Docs
🔗 Example file (GitHub doesn't allow the upload of .css files, so you need to change the file type from .txt to .css)

Approach and changes

$ yarn static-styles --help

Options:
  --theme             The name of the theme to use.
                                      [options: "circuit"] [default: "circuit"]
  --components        A comma separated list of the components to include.
                      Also supports "all" or "none".
                                                       [array] [default: "all"]
  --global            Whether to include global styles.
                                                     [boolean] [default: false]
  --customProperties  Whether to use CSS custom properties (variables).
                                                     [boolean] [default: false]
  --pretty            Whether the CSS should be formatted with prettier.
                                                     [boolean] [default: false]
  --filePath           Path to the file where the stylesheet should be saved,
                      relative to the current directory.               [string]
  --help              Show help                                       [boolean]
  --version           Show the version                                [boolean]
  • Adapt components to work better with static style extraction

Todo

  • Add configs for more components — in the future, this could be inferred from prop types or TypeScript types
  • Add documentation and usage examples

Definition of done

  • Development completed
  • Reviewers assigned
  • Unit and integration tests
  • Meets minimum browser support
  • Meets accessibility requirements

@connor-baer connor-baer added this to the v2.0 milestone Sep 20, 2019
@codecov
Copy link

codecov bot commented Sep 20, 2019

Codecov Report

Merging #477 into canary will increase coverage by 3.4%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff            @@
##           canary     #477     +/-   ##
=========================================
+ Coverage   76.15%   79.55%   +3.4%     
=========================================
  Files         167      167             
  Lines        2453     2460      +7     
  Branches      435      443      +8     
=========================================
+ Hits         1868     1957     +89     
+ Misses        467      387     -80     
+ Partials      118      116      -2
Impacted Files Coverage Δ
src/components/Tooltip/Tooltip.js 100% <ø> (ø) ⬆️
src/components/Tag/Tag.js 100% <ø> (ø) ⬆️
src/components/Hamburger/Hamburger.js 100% <ø> (ø) ⬆️
src/components/Label/Label.js 100% <ø> (ø) ⬆️
src/components/Badge/Badge.js 100% <ø> (+5.88%) ⬆️
src/components/TextArea/TextArea.js 100% <ø> (ø) ⬆️
src/components/Toggle/components/Switch/Switch.js 100% <ø> (ø) ⬆️
src/components/SubHeading/SubHeading.js 100% <100%> (ø) ⬆️
src/components/Card/Card.js 100% <100%> (ø) ⬆️
...nents/Button/components/PlainButton/PlainButton.js 100% <100%> (ø) ⬆️
... and 25 more

@fernandofleury
Copy link
Contributor

I'm so excited about this! I'm gonna take it for the test drive tomorrow

@connor-baer connor-baer force-pushed the feature/static-style-extraction branch 2 times, most recently from 4ee21e7 to c11630d Compare September 24, 2019 20:46
@connor-baer connor-baer changed the title feat(styles): static style extraction feat(styles): extract static style Sep 24, 2019
@connor-baer connor-baer marked this pull request as ready for review September 25, 2019 05:05
Copy link
Contributor

@fernandofleury fernandofleury left a comment

Choose a reason for hiding this comment

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

I don't have any initial objections with the approach. I've tested it and discussed about potential drawbacks, but honestly this is good enough for a beta version.

@connor-baer connor-baer modified the milestones: v2.0, v1.x Oct 14, 2019
@connor-baer connor-baer requested review from cristianoliveira and removed request for mlent October 14, 2019 20:51
@connor-baer connor-baer force-pushed the feature/static-style-extraction branch from f0e332c to a8bd8de Compare October 14, 2019 21:35
@connor-baer connor-baer force-pushed the feature/static-style-extraction branch from a8bd8de to 02bd4fd Compare October 14, 2019 21:44
@connor-baer connor-baer merged commit f3d0688 into canary Oct 15, 2019
@connor-baer connor-baer deleted the feature/static-style-extraction branch October 15, 2019 11:48
@ilyanoskov
Copy link
Contributor

🎉 This PR is included in version 1.2.2-canary.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

@ilyanoskov
Copy link
Contributor

🎉 This PR is included in version 1.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

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.

Extract static styles
3 participants