Update documentation for all `@compiled/` packages #1689

dddlr · 2024-07-15T05:32:30Z

Follow-up to #1687 and #1688

Click this link to see how the website looks: https://deploy-preview-1689--compiled-css-in-js.netlify.app/

Main change:

Update documentation for all @compiled/ packages so that the options listed are actually accurate
- There's a few options that aren't used anymore - I've noted them as such in the website. We may fix this in Remove unused Compiled options #1690 if we get time
- For options that are used in both @compiled/babel-pluginand @compiled/webpack-loader / @compiled/parcel-*, I've tried my best to de-duplicate them for a single source of truth
- Other issues discovered while working on this:
  - Update eslint-plugin to include full list of eslint rules #1691
  - Apply single default for extensions across @compiled/babel-plugin, @compiled/webpack-loader and @compiled/parcel-transformer #1692

Below are the other changes I've made. I recommend looking at the commit-by-commit:

Update "Atomic CSS" page to use object styles, not tagged template strings
Update @compiled/react documentation to explicitly deprecate styled and ClassName APIs, and make css/cssMap/keyframes more prominent
Update fonts and font sizes to fit more text on a page (and because Roboto belongs in the early 2010s imo)
- This is a quick hack to make it more readable; I'm not a professional designer, so it's not the most bang-up job. Please be nice 😆
- This also substantially helps readability for the other changes in this PR
- If we have more time, we can consider (1) migrating the docs to a centralised platform or (2) redesigning the website entirely.
Change the "Installation" page to recommend Parcel over Webpack
Update title of 'Media queries and other at rules' to more easily fit the sidebar

changeset-bot · 2024-07-15T05:32:34Z

⚠️ No Changeset found

Latest commit: cdf4be7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

netlify · 2024-07-15T05:32:46Z

✅ Deploy Preview for compiled-css-in-js canceled.

Name	Link
🔨 Latest commit	`cdf4be7`
🔍 Latest deploy log	https://app.netlify.com/sites/compiled-css-in-js/deploys/66973fecdad94c00089f7699

dddlr · 2024-07-15T05:38:57Z

website/packages/docs/src/pages/pkg-babel-plugin.mdx

+
+#### sortAtRules
+
+Unused.


I reckon dealing with stuff that's unused, deprecated, obsolete etc would be out of scope of this PR - as a website/docs-focussed PR, I want to avoid making changes to the Compiled packages

I've made an issue so that we can properly clean these up in the future #1690

dddlr · 2024-07-15T05:39:21Z

website/packages/docs/src/pages/pkg-babel-plugin.mdx

+
+#### processXcss
+
+An option we are only using internally. Don't use!


not sure if there's any point documenting internal options... i've erred towards including them just so we can use the docs as a single source of truth

I think that's fine to be honest, probably helps the internal team as well, eh?

dddlr · 2024-07-15T05:41:24Z

website/packages/docs/src/pages/pkg-eslint-plugin.mdx

@@ -32,4 +32,4 @@ export default [

 ## Rules

-See [here](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin) for a list of rules in `@compiled/eslint-plugin`.
+See [here](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin) for a non-exhaustive list of rules in `@compiled/eslint-plugin`.


Tracked through #1691

dddlr · 2024-07-15T05:50:37Z

website/packages/docs/src/pages/pkg-webpack-loader.mdx


-Enables baking your styles into JavaScript.
+- Type: `string[]`
+- Default: none, but note that `enhanced-resolver` and `@compiled/babel-plugin` have their own different defaults when the `extensions` option is not set.


The fact that there isn't a single default being applied everywhere does admittedly sound like a bug

enhanced-resolver uses ['js', 'json', 'node'] as a default, while @compiled/babel-plugin uses ['.js', '.jsx', '.ts', '.tsx'] as a default - I made an issue to track it here #1692

website/packages/docs/src/pages/pkg-babel-plugin-strip-runtime.mdx

kylorhall-atlassian · 2024-07-15T06:43:58Z

website/packages/docs/src/pages/pkg-babel-plugin.mdx

+
+#### processXcss
+
+An option we are only using internally. Don't use!


I think that's fine to be honest, probably helps the internal team as well, eh?

website/packages/docs/src/pages/pkg-react.mdx

website/packages/ui/src/components/anchor.tsx

… the sidebar

dddlr requested review from itsdouges and kylorhall-atlassian July 15, 2024 05:32

dddlr changed the title ~~Chore/docs revamp UI styling standard~~ Update documentation for all @compiled/ packages Jul 15, 2024

dddlr mentioned this pull request Jul 15, 2024

Remove unused Compiled options #1690

Open

dddlr commented Jul 15, 2024

View reviewed changes

dddlr mentioned this pull request Jul 15, 2024

Update eslint-plugin to include full list of eslint rules #1691

Closed

dddlr commented Jul 15, 2024

View reviewed changes

dddlr mentioned this pull request Jul 15, 2024

Apply single default for extensions across @compiled/babel-plugin, @compiled/webpack-loader and @compiled/parcel-transformer #1692

Open

dddlr marked this pull request as ready for review July 15, 2024 05:57

dddlr requested review from JakeLane, pancaspe87 and liamqma as code owners July 15, 2024 05:57

kylorhall-atlassian reviewed Jul 15, 2024

View reviewed changes

liamqma reviewed Jul 16, 2024

View reviewed changes

website/packages/ui/src/components/anchor.tsx Outdated Show resolved Hide resolved

liamqma previously approved these changes Jul 16, 2024

View reviewed changes

dddlr dismissed liamqma’s stale review via fcd709e July 16, 2024 03:01

dddlr added 7 commits July 17, 2024 13:52

Update Atomic CSS page to use object styles, not tagged template strings

75ca2d5

Update @compiled/react documentation

f093606

Update fonts

31d5169

Update remainder of @compiled/* documentation

bfe1b82

Change Installation page to recommend Parcel

df86247

Update title of 'Media queries and other at rules' to more easily fit…

5a25c1d

… the sidebar

Address PR feedback

cdf4be7

dddlr force-pushed the chore/docs-revamp-ui-styling-standard branch from fcd709e to cdf4be7 Compare July 17, 2024 03:52

liamqma approved these changes Jul 17, 2024

View reviewed changes

dddlr merged commit 18024be into master Jul 17, 2024
13 checks passed

dddlr deleted the chore/docs-revamp-ui-styling-standard branch July 17, 2024 04:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update documentation for all `@compiled/` packages #1689

Update documentation for all `@compiled/` packages #1689

dddlr commented Jul 15, 2024 •

edited

Loading

changeset-bot bot commented Jul 15, 2024 •

edited

Loading

netlify bot commented Jul 15, 2024 •

edited

Loading

dddlr Jul 15, 2024

dddlr Jul 15, 2024 •

edited

Loading

kylorhall-atlassian Jul 15, 2024

dddlr Jul 15, 2024

dddlr Jul 15, 2024

kylorhall-atlassian Jul 15, 2024


		#### processXcss

		An option we are only using internally. Don't use!

Update documentation for all @compiled/ packages #1689

Update documentation for all @compiled/ packages #1689

Conversation

dddlr commented Jul 15, 2024 • edited Loading

changeset-bot bot commented Jul 15, 2024 • edited Loading

⚠️ No Changeset found

netlify bot commented Jul 15, 2024 • edited Loading

✅ Deploy Preview for compiled-css-in-js canceled.

dddlr Jul 15, 2024

Choose a reason for hiding this comment

dddlr Jul 15, 2024 • edited Loading

Choose a reason for hiding this comment

kylorhall-atlassian Jul 15, 2024

Choose a reason for hiding this comment

dddlr Jul 15, 2024

Choose a reason for hiding this comment

dddlr Jul 15, 2024

Choose a reason for hiding this comment

kylorhall-atlassian Jul 15, 2024

Choose a reason for hiding this comment

Update documentation for all `@compiled/` packages #1689

Update documentation for all `@compiled/` packages #1689

dddlr commented Jul 15, 2024 •

edited

Loading

changeset-bot bot commented Jul 15, 2024 •

edited

Loading

netlify bot commented Jul 15, 2024 •

edited

Loading

dddlr Jul 15, 2024 •

edited

Loading