Experimental WIP: strict-ui

[mxstbr]

Click here for background info. This is just an experimental prototype for me to test these ideas in practice.

This is what the entire API currently looks like (essentially it's theme-ui with the restrictions outlined in the doc above and way less API surface area):

/* @jsx jsx */
import { Grid, Flex, jsx, useStrictUI, ThemeProvider } from 'strict-ui';

<ThemeProvider theme={myTheme}>
  <Grid gap={2} columns={1}>
    <div sx={{ padding: 1 }} />
    <div sx={{ color: 'primary' }} />
  </Grid>
  <Flex flexDirection="column" gap={2}>
    <div sx={{ background: 'secondary' }} />
  </Flex>
</ThemeProvider>

Known issues

• Responsive values don't work
• red: 'red' in the theme breaks the "only theme values" detection
• Doesn't block shorthands (mx, ml) or x-y properties (marginX)
• Need to set * { margin: 0; } in reset
• There is no way to float images
• There is no way to specify display: none or display: inline-block?
• What to do about margin: auto? Can't center anything
• Fix undefined/null values
• display: list-item and padding-inline-start accepts non-theme values

[jxnblk]

😎

[joe-bell]

Maybe there's a way to approach this reset more dynamically, rather than a blanket global style? This way you'll be able to use strict-ui components alongside others.

So for instance in my Stack and Inline component, when it's rendered as an ol or ul I make use of a shared reset:

export const Stack: React.FC<StackProps> = ({ gap = 3, ...props }) => (
  <div
    {...props}
    sx={{
      /* …stack styles */
      /* …reset returns the following: */
      /* Reset: ensure direct child list-items render without bullets */
      "& > li": {
        listStyleType: "none",
        "&:before": {
          position: "absolute",
          content:
            '"\\200B"' /* Add zero-width space to prevent VoiceOver disable */,
        },
      },
    }}
  />
);

Might be worth at taking a look at how @markdalgleish tackled this in Braid!
https://twitter.com/markdalgleish/status/1223161650246602752

[joe-bell]

Just a variant idea for if flexWrap: wrap is defined:

const inline = (gap: number) => ({
  /* styles to add to the parent */
  overflow: 'hidden',
  alignItems: 'center',
  margin: (gap / 2) * -1,
  /* styles for the children */
  '& > *': {
    margin: gap / 2,
  },
});

ℹ️ The only caveat here is we're relying on negative outer margins which are counterracted by the child elements to appear as a "normal" gap. So although this won't affect the flow of adjacent components, it will require some transformation of the margin prop value on the parent.

Then we can render elements nicely inline like so:

[joe-bell]

Just an update: I've actually added that Inline component above (and some other flex-based layout primitives) to a package called raam.

• Repo: github.com/joe-bell/raam
• Docs: raam.joebell.co.uk

Please feel free to extend upon this with your stricter type strategy! I'd be happy to help out

[gatsby-cloud]

Gatsby Cloud Build Report

🚩 Your build failed. See the build logs here

[lachlanjc]

@mxstbr Hey! What are you thinking about this PR now?

@hasparus can follow up on what’s happening with our TypeScript support right now.

[mxstbr]

Going to close it for now as it was a nice experiment but would need a lot more work to be usable and I don't have the time to work on this!