xstyled is a wrapper for styled-components that provides theming and props-based styling similar to styled-system. I’ve been using it for personal and professional projects, inevitably sticking my nose in upstream development.
I want to spin my own xstyled packages for features that are waiting to be
merged, or that may never find their way upstream. Because xstyled is a monorepo
with multiple output packages, it’s unfortunately not as simple as just changing
the name in
xstyled └── packages ├── babel-preset-emotion-css-prop ├── core ├── emotion ├── prop-types ├── styled-components ├── system └── util
Step 1: Prep
hub clone gregberge/xstyled hub fork git remote rename origin upstream git remote rename agriffis origin git checkout -b fork git push --set-upstream origin fork
Step 2: Rename
Change the names of the packages everywhere they appear. The upstream packages
are in the namespace
@xstyled—I’m going to take this a step further by using
my own namespace and adding a prefix, so that
@agriffis/xstyled-system and so forth.
rg --hidden -l --null @xstyled/ | \ xargs -0 sed -i 's,@xstyled/,@agriffis/xstyled-,g' (cd packages && for x in *; do mv $x xstyled-$x; done) git add . git commit -m "chore: fork"
Here’s the new listing of the packages directory:
xstyled └── packages ├── xstyled-babel-preset-emotion-css-prop ├── xstyled-core ├── xstyled-emotion ├── xstyled-prop-types ├── xstyled-styled-components ├── xstyled-system └── xstyled-util
Step 3: Release
I only ever want to make pre-releases from this fork, so I’ll update
"release": "lerna publish prepatch --preid agriffis",
and then make the release:
npm ci # clean-slate install npm release
Step 4: Use
Update my project to use my fork:
yarn remove @xstyled/styled-components yarn add @agriffis/xstyled-styled-components@latest rg --hidden -l --null @xstyled/ | \ xargs -0 sed -i 's,@xstyled/,@agriffis/xstyled-,g'
Here’s that commit.
Now I can make changes to xstyled for my own site, and with any luck, it won’t be too much effort to merge upstream changes into my fork.