Update most of Compiled documentation to reflect current recommendations

dddlr commented 1 month ago

Follow-up to https://github.com/atlassian-labs/compiled/pull/1687

Update most of the Compiled documentation so that it matches our current recommendations (e.g. object styles > template strings) and the UI Styling Standard recommendations.

Sections changed as part of this PR:

See the individual commits for a detailed breakdown of changes - reading commit-by commit will likely be far easier to review. Summary of most notable commits:

Update 'Writing CSS' and 'Installation', move some sections into new 'Deprecated features' section
Update CSS prop page and deprecated syntax page:
- move template literals to deprecated page
- discourage dynamic styles
- move outdated composition syntax to deprecated page
Update documentation for Compiled APIs
- Deprecate styled and ClassNames
- Merge CSS page into CSS prop
- Update cssMap to use flat @media query syntax, not the nested one that DST will remove support for
- Move details about the jsx-pragma ESLint rule to the "JSX pragma" section of the Installation page

changeset-bot[bot] commented 1 month ago

⚠️ No Changeset found

Latest commit: d57cf7772384d0466853c44b76a94018420bfbf9

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[bot] commented 1 month ago

Deploy Preview for compiled-css-in-js ready!

Name	Link
Latest commit	d57cf7772384d0466853c44b76a94018420bfbf9
Latest deploy log	https://app.netlify.com/sites/compiled-css-in-js/deploys/669088780e96a4000853fb8c
Deploy Preview	https://deploy-preview-1688--compiled-css-in-js.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

atlassian-labs / compiled