Legacy packages and experiments
- @styled-system/babel-plugin
- @styled-system/should-forward-prop
- @styled-system/edit
- @styled-system/typography
- Experimental & deprecated packages:
Legacy packages and experiments
License: MIT License
Legacy packages and experiments
Is there something I'm missing?
css={css({':focus': {borderColor: 'blue20'}}
This is being used on a <Flexbox />
component built in @emotion/styled
+ styled-system
.
// @flow
import styled from '@emotion/styled';
import {
alignItems,
alignContent,
justifyContent,
justifyItems,
flexWrap,
flexBasis,
flexDirection,
flex,
justifySelf,
alignSelf,
order,
} from 'styled-system';
import shouldForwardProp from '@styled-system/should-forward-prop';
import {Box} from './Box';
export const Flexbox = styled(Box, {
shouldForwardProp,
})(
{
boxSizing: 'border-box',
display: 'flex',
label: 'flexbox-primitive',
},
alignItems,
alignContent,
justifyContent,
justifyItems,
flexWrap,
flexBasis,
flexDirection,
flex,
justifySelf,
alignSelf,
order
);
What's odd is that I can get it to work here: https://stackblitz.com/edit/react-zzznyy
Hey,
I'm really enjoying this new CSS prop! Thanks for your work. I'm seeing a failure on some responsive arrays where a number is being appended. For example:
<style data-emotion="css">.css-wnbiem-NavLink-StyledSubNavLink 0{padding:4px;}</style>
<style data-emotion="css">@media screen and (min-width:480px){.css-wnbiem-NavLink-StyledSubNavLink 1{padding:4px;}}</style>
<style data-emotion="css">@media screen and (min-width:750px){.css-wnbiem-NavLink-StyledSubNavLink 2{padding:16px;}}</style>
If I can find some time, I'll will try to put together a minimal example with demonstrates this.
We've got a lot of cases where props are ending up in the dom. We're trying to go through and clean those up, but adding things to omitProps
means it doesn't get all the defaults. I'd like to be able to add props to omit in addition to the defaults.
I'll have a PR shortly.
I'm seeing a delta between the css
package doc
And the reference table in Style System's docs.
I tried using sizes
in styled-system
, but found it didn't work yet. Are there plans to unify this?
Hello again,
Should the css prop work inside of MDX?
I have attempted to use it in both a normal MDX file and one that I was using MDX-blocks with.
Thanks.
Yo,
How do you feel about adding outline
properties?
They could map to the same theme objects as border
.
I use outline
often when I don't the border to impact the computed height/width of my elements.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.