feat: Add CSS styling function #2273
Conversation
NicholasBoll
changed the title
… feat/static-css # Conflicts: # modules/labs-react/package.json # modules/react/package.json
… feat/static-css # Conflicts: # modules/labs-react/package.json
1 flaky test on run #6309 ↗︎
Details:
|
|||||||||||||||
NicholasBoll
changed the title
| .replace(/[^\w\s-]/g, '') | ||
| .replace(/[\s_-]+/g, '-') | ||
| .replace(/([A-Z])/g, m => { | ||
| return '-' + m.toLowerCase(); |
There was a problem hiding this comment.
was this to fix an issue with tabs?
There was a problem hiding this comment.
No. It was something I noticed when converting camelCase to dash-case.
There was a problem hiding this comment.
For example: borderRadius became borderradius instead of border-radius
NicholasBoll
force-pushed
the
feat/static-css
branch
from
bfd45bd to
dfa098a
Compare
|
|
||
| ## What is this? | ||
|
|
||
| Canvas Kit Styling is two things: |
There was a problem hiding this comment.
I'm wondering if we should link out to the discussion of the future of css and why we built this?
There was a problem hiding this comment.
yeah it seems like this is built BECAUSE we want to better support theming/ and styling and move away from emotion
There was a problem hiding this comment.
I'm adding a "Why" section with a link to the discussion.
|
|
||
| ## Production | ||
|
|
||
| If you wish to use the static compilation, you must use the `@workday/canvas-kit-styling-parser` |
There was a problem hiding this comment.
is this still part of this PR? the parser?
There was a problem hiding this comment.
Not part of this PR, but another PR will add it. It is difficult to maintain 2 separate PRs and fix this type of thing. I'd rather leave this alone for now.
| return convertProperty(obj); | ||
| } | ||
|
|
||
| export type CS = string | Record<string, string>; |
There was a problem hiding this comment.
do we want to stay as CS or CreateStyles?
There was a problem hiding this comment.
sorry, i think I'm confusing createStyles with cs
Summary
Implements: #2208
Related: #1854
Discussion: #2265
This change adds a styling function to use CSS-in-JS with a minimum developer runtime and a transform process that can turn CSS-in-JS into static styling.
Release Category
Components
Release Note
This change introduces an intermediate step towards static styling. The style function takes in statically analyzable style definitions with modifiers, variables, and static styles to create styling to be used in components. It can later be interpreted at build time to create CSS packages.
Checklist
ready for reviewhas been added to PRFor the Reviewer
Where Should the Reviewer Start?
Areas for Feedback? (optional)
Testing Manually
Screenshots or GIFs (if applicable)
Thank You Gif