davesnx / styled-ppx Goto Github PK

Emotion supports inject global styles, we can support similar API:

[%styled.global
  html, body {
    margin: 0;
  }
];

module Component = [%styled
  (~size) => {
    if (size > 0) {
      "display: flex"
    }
  }
];

• Change the PPX detection, recursively look for any sort of function body that returns a string, turn that as the body of the styled fn.
• Define an API where you can pass more than one fn?

module Component = [%styled
  (~size) => {
    if (size > 0) {
      "display: flex"
    }
  }

  (~kind) => switch (kind) {
    | Solid => "padding: 10px"
	| _ => "padding: 2px 4px
  }
];

Basic media queries are supported.

There are a few values that aren't

@media all and (max-device-width: 218px)
           and (max-device-height: 281px)
           and (orientation: portrait) {
  color: green;
}

• device-width
• device-height
• max-device-width
• max-device-height
• orientation
• -webkit-device-pixel-ratio
• -webkit-min-device-pixel-ratio
• @media only screen
• @media print
• @media all
• min-color-index
• ...

• I need it so, I created this.
• Why I think it's a great tool.
• https://css-tricks.com/why-is-css-frustrating
• Still so much to do.
• Has been an amazing experience.
• Happy to create tools for the community.
• Thanks to Javier Chávarri, for helping me understand all the OCaml world and his knowledge about ppx
• Inspired to astrada (for bs-css-ppx).

Note on discord:

@Alexander I'm not looking at a utility-class based styling for mainly 2 reasons: First learning curve and second because it goes against type-inferred languages mentality.
Since you are allowed to define types once and not care where those data structures go, I find myself using bs-emotion directly trying to play arround types and values too often
I'm very awrae that CSS it's too flexible, but trying to fix it with functions makes writing styles a cumbersome.
Right, but maybe for simple css definitions works ok, but for background-gradient, keyframes, or even border-radius becomes much much harder.
and I'm sure that large frontend apps solve the problem of scalabilty doing some design system/UI/some sort of API-based not a CSS approach.

Hi @davesnx. Thanks for sharing this work.

I am trying to run the demo unsuccessfully.

I have cloned the demo from this repo and followed the steps from the readme after running it out of the box did not work.

Here is the reproduction: https://github.com/idkjs/styled-ppx-master-demo

I have run yarn global add @davesnx/styled-ppx @ahrefs/bs-emotion and added "ppx-flags": ["@davesnx/styled-ppx/styled-ppx", "@ahrefs/bs-emotion"] to bsconfig.json.

Upon running yarn run re:watch I get the following compiler error which I am not able to resolve:

➜  styled-ppx-master-demo [master]yarn run re:watch
yarn run v1.22.0
warning package.json: No license field
$ bsb -make-world -w
bsb: no work to do.
bsb: no work to do.
bsb: no work to do.
>>>> Start compiling 
[1/3] Building src/index.reast
FAILED: src/index.reast 
/Users/prisc_000/Downloads/styled-ppx-master-demo/node_modules/bs-platform/lib/bsc.exe  -w -30-40+6+7+27+32..39+44+45+101 -color always -bs-jsx 3 -ppx /Users/prisc_000/Downloads/styled-ppx-master-demo/node_modules/@davesnx/styled-ppx/styled-ppx -ppx /Users/prisc_000/Downloads/styled-ppx-master-demo/node_modules/@ahrefs/bs-emotion  -o src/index.reast -bs-syntax-only -bs-binary-ast /Users/prisc_000/Downloads/styled-ppx-master-demo/src/index.re
sh: /Users/prisc_000/Downloads/styled-ppx-master-demo/node_modules/@ahrefs/bs-emotion: is a directory

  We've found a bug for you!
  /Users/prisc_000/Downloads/styled-ppx-master-demo/src/index.re
  
  Error while running external preprocessor
Command line: /Users/prisc_000/Downloads/styled-ppx-master-demo/node_modules/@ahrefs/bs-emotion '/var/folders/dz/xzttny_14gs2lgxcvl5lm5680000gn/T/camlppx947ec0' '/var/folders/dz/xzttny_14gs2lgxcvl5lm5680000gn/T/camlppx74f477'

  
FAILED: subcommand failed.
>>>> Finish compiling(exit: 1)

Any guidance would be appreciated. Thank you.

This maps directly to unsafe https://github.com/ahrefs/bs-emotion/blob/master/bs-emotion/src/Emotion.re#L478

Look for people who have been asking on Discord & Twitter about styled-components/emotion bindings or any CSS in ReasonML.

Instead of snapshotting the component as now, would be great to snapshot the properties that emotion gives back.
Thanks to https://github.com/emotion-js/emotion/tree/master/packages/jest-emotion that's possible.

• Create bindings for jest-emotion
• Refactor tests to use it

Once we finish I#26, we will need to add support to pass props to those components

https://github.com/ocsigen/tyxml

https://jantimon.github.io/css-framework-performance/

https://github.com/A-gambit/CSS-IN-JS-Benchmarks

Make all the changes to have this fs:

• test -> test/native
• test_bs -> test/bucklescript

Try to setup "semantic-release" & "validate-commit-msg"

This is the umbrella issue of CSS property support.

This is the first chunk of properties that are half-supported and I think are a minimum to create any sort of styles.

Supporting those properties correctly we might unlock many more, like supporting opacity you support: stroke-opacity stop-opacity flood-opacity fill-opacity.

• animation
• box-sizing
• box-shadow
• text-shadow
• transform
• transition
• font-family
• font-weight
• border-top-right-radius
• border-top-left-radius
• border-bottom-right-radius
• border-bottom-left-radius
• background-position
• transform-origin
• flex
• border
• outline
• grid
• grid-template-area

There are some of them that might be tricky and some very straight forward.

The initial idea of theming is to allow users to specify minimum design values that are shared across all components, so can be consumed.

styled-components/emotion have solved that with ThemeProvider and theme object is there under props.theme and all the logic of context is under the lib.

const theme = {
  fg: "palevioletred",
  bg: "white"
};

const Button = styled.button`
  color: ${props => props.theme.fg};
  border: 2px solid ${props => props.theme.bg};
`;

Note. Currently bs-emotion doesn't support that, so, this would include to create the bindings on https://github.com/ahrefs/bs-emotion as https://emotion.sh/docs/emotion-theming#themeprovider-reactcomponenttype

tailwind on the other side works only with classNames, so their solution it's superior on the sense of having more logic on the creation of those design values. You define a minimum set of spacing/textsize/colors and they generate a scalar css classNames in a super-long css file.

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

I like the approach.

Check https://github.com/system-ui/theme-specification and https://github.com/kripod/glaze

color: red;
background: red;
background-color: red;
border-color: red;
border: 1px solid red;

https://github.com/ahrefs/bs-emotion/blob/master/bs-emotion/src/Emotion.rei#L308

Right now we only support components defined with "static" CSS. Where "static" means only working with strings or multi-line strings:

module ComponentMultiline = [%styled
  {|
    color: red;
    background-color: white;
    margin: auto 0 10px 1em;
    border-bottom: thin dashed #eee;
    border-right-color: rgb(1, 0, 1);
    width: 70%;
    background: url(http://example.com/test.jpg);
  |}
]

Dynamic would be something like, instead of receiving a string, we would need to add a case where the ppx checks for a function and tries to create the make fn with the props that are being passed to that fn.

module StyledComponentWithProps = [%styled
  (~color) => {|
    color: $color;
  |}
];

Would turn to be:

module StyledComponentWithProps = {
  let styled = (~color) => Emotion.(css(color $color));

  [@react.component]
  let make = (~color, ~children?) => {
    <div className=styled(~color)>
      {switch (children) {
        | Some(c) => c
        | None => React.null
      }}
    </div>
  }
];

As a reference, we would need to do similar logic from react's ppx in order to create the styled and make fns.

Here is the jsofocaml:
https://github.com/jchavarri/jsoo-react/blob/master/ppx/Rroo_jsoo_ppx.re#L213-L658

This is the first chunk of properties that are half-supported and I think are a minimum to create any sort of styles. Rendering those properties correctly we would unlock many more, like supporting opacity you unlock: stroke-opacity stop-opacity flood-opacity fill-opacity.

• animation
• box-shadow
• text-shadow
• transform
• transition
• font-family
• z-index
• opacity
• flex-grow
• flex-shrink
• font-weight
• padding
• margin
• border-top-right-radius
• border-top-left-radius
• border-bottom-right-radius
• border-bottom-left-radius
• background-position
• transform-origin
• flex
• border
• outline

Parse nested properties and be able to create styles dependant on other's components.

module Children = [%styled "display: block;"];
module Parent = [%styled {|
  $Children.styled {
    color: red;
  }
|}];

`$Children.styled` should be available. 
(This would only work in static components, warn that styled isn't available, even the compiler will say it).

/* ... */
<Parent>
  <Children />
</Parent>

• Syntax highlight

As seen on the JavaScript world, there's a few extensions that highlight and autocomplete css:

https://marketplace.visualstudio.com/items?itemName=mf.vscode-styled-components

https://scotch.io/tutorials/create-your-first-visual-studio-code-extension

https://www.youtube.com/watch?v=srwsnNhiqv8

https://tarides.com/blog/2019-05-09-an-introduction-to-ocaml-ppx-ecosystem

Functions are defined in the parser but aren't allowed in any property. Using any of those properties will break:

• calc
• max/min
• minmax
• attr
• blur
• radial-gradient() and repeating-radial-gradient()
• clamp
• repeat (#146)

First I thought the syntax would work like that:

• [%styled.div ""]; But there are a few limitations: Can't define dynamically the HTML tag. Add noise to the api, and It's a little bit complex to create those ppxs. Allows that It would remove the ability to styled(Component).
• In styled-components they use "as" prop in the render. I like that and is reasonable simple to implement in the ppx.
• I don't have many other ideas, so, feel free to discuss here.

1. Emotion open statement shadows the value identifier.

   module Component = [%styled (~color) => {j|
     color: $color;
     display: block;
   |j}];
   

   Warning 44: this open statement shadows the value identifier color (which is later used).
   

2. Appears on top of the style definition, which methods are used in Emotion.
   

reasonml-editor/language-reason#9

Wanted to create some snapshot testing with Jest, but bs-jest doesn't support it. Found not the best option to do snapshot testing of the compiled code.

We will have the bridge between CSS AST to bs-emotion completed, we can port that bridge to a solution that doesn't cause run-time overhead, making styled components way more performant (theoretically, I would love to benchmark it first).

The steps are, try to understand what it means 0 runtime cost with dynamic styling https://compiledcssinjs.com/ or https://github.com/callstack/linaria and understand css variables:

• https://joshwcomeau.com/css/css-variables-for-react-devs/
• https://scrimba.com/g/gcssvariables

creating bindings for it and create that bridge between CSS AST to the bindings.

Appears a weird error on the CSS_Parse apparently:

Parse error while reading token 'EOF'

Not entirely sure that it's the Parser itself, If you run Css_parse with an empty string works fine, maybe is the ppx detection that doesn't make it correctly.

Can't find binary on Github Actions, on local works great.

Would be amazing to keep a list of CSS properties that we can support without type-safeness with "unsafe" calls.

• Create a list of properties
• Make the mapping with those and output unsafe
• Add a warning
• Add a ppx config to enable/disable that warning

Since we use a custom lexer and pass down location everywhere we should be able to have a perfect error message.

• Errors on wrong html tags
• Errors on wrong css properties (css properties that doesn't exist)
• Missing semicolon
• Warn only support labelled arguments
• Warn unused arguments
• Warn unlabeled arguments
• Make sure the location of errors are placed on the right property, and not the ppx loc
  
• Can we re-message this? Error: This expression has type int but an expression was expected of type Emotion.Css.LengthPercentageAuto.t

I have forked and run this repo. Built with esy command and then attempted to run esy test.

I got the following output in the terminal regarding the dune version:

➜  styled-ppx [master]esy test
File "/Users/prisc_000/.opam/ocaml-base-compiler.4.08.1/lib/js_of_ocaml-compiler/dune-package", line 1, characters 11-14:
1 | (lang dune 2.2)
               ^^^
Error: Version 2.2 of dune is not supported.
Supported versions:
- 0.0
- 1.0 to 1.11
➜  styled-ppx [master]

Is this expected or did i do something wrong?

Thanks.

module App = [%styled.div (~background="#333") => should create makeProps { background: option(string) }.

Support any type as API, this would allow dynamic components being typed:

[%styled.div (~space: int) => {j|
  margin: $(space)px;
|j};

https://github.com/tizoc/ppx_pgsql#named-arguments-syntax

Another way of looking at it is like ppx_mysql and ppx_rapper:
https://github.com/issuu/ppx_mysql
https://github.com/issuu/ppx_mysql/blob/master/ppx/query.mll

Rethink some Layout flows, like Flex or Box in here: https://chakra-ui.com

• Container
• Distribute
• Popover
• Spacer
• Split
• Spread
• Grid