astrada / ppx_bs_css Goto Github PK

View Code? Open in Web Editor NEW

98.0 98.0 8.0 374 KB

A ppx rewriter for CSS expressions.

License: MIT License

Makefile 0.18% OCaml 91.90% JavaScript 7.92%

css ocaml ppx reasonml

ppx_bs_css's People

Contributors

Stargazers

Watchers

Forkers

jchavarri jsiebern thangngoc89 kujon shrynx kuy davesnx dakotamurphyucf

ppx_bs_css's Issues

Potential integration with ocaml-css parser?

I've recently learnt about ocaml-css, which also includes a css parser: https://github.com/samouri/ocaml-css/blob/master/lib/Parser.mly

I was wondering if it would make sense to join forces and create a single project / repo with just the parser + common AST types? So ocaml-css can use it to generate JSON, this PPX can use it too, and also any other project that parses CSS?

cc @samouri @ryyppy

Support of nested selectors?

[bs-typed-glamor] unsafe get translated into unsafe2

There is no unsafe2 in bs-typed-glamor, only unsafe

Add labels to functions when TypedGlamor expects them to avoid warnings

From the convo in glennsl/bs-typed-glamor#6, maybe there's a chance that ppx_bs_css produces the functions with labels to avoid warnings.

Listing the functions here just for documenting purpose:

margin
padding
border2 (not sure what this one should do)
borderRadius
backgroundPosition2
shadow
outline2
transformOrigin2
flex3

[bs-css] compiles flex to flex-shrink, flex-grow, flex-basis

Currently, bs-css only supports the simplest format of flex property: flex: 1 but there are more complex cases like:

flex: none                                            /* value 'none' case */
flex: <'flex-grow'>                                   /* One value syntax, variation 1 */
flex: <'flex-basis'>                                  /* One value syntax, variation 2 */
flex: <'flex-grow'> <'flex-basis'>                    /* Two values syntax, variation 1 */
flex: <'flex-grow'> <'flex-shrink'>                   /* Two values syntax, variation 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>    /* Three values syntax */
flex: inherit

(from https://css-tricks.com/almanac/properties/f/flex/)

As per css best practice, it's recommended that you use flex shorthand property and avoid flex-shrink, flex-grow, flex-basis because flex will override all of them.

I hope that this ppx can automatically expand the flex property without compromising css's "best pratice" or use just unsafe if that's too much troubles.
What do you think?

Installing ppx_bs_css as dependency fails with OCaml 4.2.3

When installing ppx_bs_css through esy inside a project where it's been added as a dependency, the installation fails with:

Error: ppx_bs_css > @opam/sedlex > @opam/gen > @opam/odoc > @opam/doc-ock-html > @opam/doc-ock@=1.0.0: no version found for the current OCaml version 4.2.3004.

The problem can be reproduced by removing esy.lock from the root folder of the project and calling esy install again.

I tried to pin sedlex to v1.99.2 which doesn't seem to depend on gen and thus breaks the dependency chain, but it's a release from 2014 and it seems to break something:

File "src/css_lexer.ml", line 81, characters 16-29:
Uninterpreted extension 'sedlex.regexp'.

cc @andreypopp as you mentioned to be tagged on the issue, although I think it's totally unrelated to esy and more of a dependencies headache :)

font-family support

There seems to be a few challenges with font families:

The font-family values don't have quotes around them, so:

[%style
  {typed|
  font-family: Helvetica;
  |typed}
]

fails to compile, as Helvetica gets compiled as is, but it is not defined.

Some font family names have spaces. For example:

[%style
  {typed|
  font-family: Helvetica Neue;
  |typed}
]

Gets interpreted as two values right now, and fails as "fontFamily2 can't be found".

A set of families uses commas to separate:

[%style
  {typed|
  font-family: Helvetica, Arial;
  |typed}
]

fails with "Unsupported delimiter".

[bs-css] hsl and hsla are defined as int

This is the type definition:

`hsl(int, int, int)
`hsla(int, int, int, float)

bs-css expect the second and third value to be an int but in css, they are percentage for example: hsl(120,100%, 50%)

transition-duration should accept float

How did you implement the suggestion feature?

I'm curious how you implemented the "suggestion" (i.e. "Did you mean ___?") feature since I don't see it in the code. Thanks in advance!

Negative number not supported?

NPM package

Is there an NPM package, I love how this looks, would love to try it.

Add labels to function when bs-css expects them to avoid warnings

Pretty much the same thing as #6 but for bs-css. I'll try to update the list when I encounter them:

margin

Are select and pseudo selectors in TypedGlamor supported?

I'm trying to add some pseudo selectors inside the [%style {typed|...|typed} ] declarations, but I'm getting syntax errors.

Are hover, select and other Glamor selectors supported? Maybe I'm using the wrong syntax. I took a look at the code, readme + examples in https://github.com/astrada/ppx_bs_css-examples/tree/master/packages/styled-react but haven't seen any case with typed and selectors.

Thanks!

z-index in TypedGlamor expects to be wrapped with int()

This fails to compile:

let t =
  TypedGlamor.(
    [%css
      {typed|
        {
          z-index: 7;
        }
      |typed}
    ]);

However, this workaround works :)

let z = TypedGlamor.int(7);
let t =
  TypedGlamor.(
    [%css
      {typed|
        {
          z-index: z;
        }
      |typed}
    ]);

Global installation

I understand from the ppx-flags in bsconfig.json that the ppx needs to be available globally, but the readme doesn't mention how to install the ppx globally, and i'm a total noob in native compilation 😅

Is the file the one in _build/default/.ppx/ppx_bs_css/ppx.exe?
And what's the best way to install it globally? Does esy help with that?

Thanks!!

selector " .name" becauses ". name"

open Css;
  let skillHeader =
    style @@
    [%css
      {|
      {
        background: #fff;
        border-bottom: 1px solid #dfdfdf;
      }
      .ant-breadcrumb{
        padding-top: 20px;
      }
    |}
    ];

compiled to

var skillHeader = Css.style(/* :: */Block.simpleVariant("::", [
        Css.background(Css.hex("fff")),
        /* :: */Block.simpleVariant("::", [
            Css.borderBottom(Css.px(1), Css.solid, Css.hex("dfdfdf")),
            /* :: */Block.simpleVariant("::", [
                Css.selector(". ant-breadcrumb", /* :: */Block.simpleVariant("::", [
                        Css.paddingTop(Css.px(20)),
                        /* [] */0
                      ])),
                /* [] */0
              ])
          ])
      ]));

but we need Css.selector(" .ant-breadcrumb", ... instead of Css.selector(". ant-breadcrumb", ...

Error when running esy install

in this repo

$ esy install
info install 0.3.4
info checking https://github.com/ocaml/opam-repository for updates...
info checking https://github.com/esy-ocaml/esy-opam-override for updates...
info resolving esy packages: done                        
info solving esy constraints: done         
error: No solution found:

Conflicting constraints:
  ppx_bs_css -> @opam/sedlex -> ocaml@>=4.3.0
  ppx_bs_css -> ocaml@=4.2.3006

  
esy: exiting due to errors above

[bs-css] display: flex is incorrect

display property in bs-css is typed as polymorphic variants:

let display : [ | `flex | `block | `inline | `inlineBlock | `none | `inlineFlex | `grid | `inlineGrid ] => rule;

Given this display: flex;, this ppx compile to display(flex) which is incorrect.

Correct implementation:

display(`flex)

display(flexBox)

can't use border: none; ?

[bs-css] flexGrow and flexShrink

flex-grow: 0;
flex-shrink: 0;

compiles to

flexGrow zero; 
flexShrink zero;

expected:

flexGrow 0;
flexShrink 0;

See https://github.com/SentiaAnalytics/bs-css/blob/30d0a296de9b66f569280a69b8bc4897732971b6/src/Css.rei#L417-L418

Error when running `esy install`

When running esy install i'm getting this error:

esy install v0.0.70
info No lockfile found.
[1/4] Resolving packages...
error @opam/sedlex > @opam/gen > @opam/odoc > @opam/doc-ock@*: no version found for the current OCaml version 4.2.3004.
Consider updating OCaml version constraint of your package,
run 'npm info ocaml' to see available OCaml versions.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Error: @opam/sedlex > @opam/gen > @opam/odoc > @opam/doc-ock-xml > @opam/doc-ock@ >= 1.2.0: no version found for the current OCaml version 4.2.3004.
Consider updating OCaml version constraint of your package,
run 'npm info ocaml' to see available OCaml versions.
    at MessageError.Error (native)
    at new MessageError (/Users/javi/.nvm/versions/node/v6.11.2/lib/node_modules/esy/bin/esy.js:223:167)
    at OpamResolver._callee2$ (/Users/javi/.nvm/versions/node/v6.11.2/lib/node_modules/esy/bin/esy.js:86523:23)
    at tryCatch (/Users/javi/.nvm/versions/node/v6.11.2/lib/node_modules/esy/bin/esy.js:107690:40)
    at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/javi/.nvm/versions/node/v6.11.2/lib/node_modules/esy/bin/esy.js:107924:22)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/javi/.nvm/versions/node/v6.11.2/lib/node_modules/esy/bin/esy.js:107742:21)
    at step (/Users/javi/.nvm/versions/node/v6.11.2/lib/node_modules/esy/bin/esy.js:102:30)
    at /Users/javi/.nvm/versions/node/v6.11.2/lib/node_modules/esy/bin/esy.js:113:13

Should I run esy in the next branch? Or do something specific to help esy find these packages? (i can open an issue upstream too :)

thanks!