astrada / ppx_bs_css Goto Github PK
View Code? Open in Web Editor NEWA ppx rewriter for CSS expressions.
License: MIT License
A ppx rewriter for CSS expressions.
License: MIT License
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", ...
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?
There is no unsafe2 in bs-typed-glamor, only unsafe
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!
Is there an NPM package, I love how this looks, would love to try it.
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 ๐
_build/default/.ppx/ppx_bs_css/ppx.exe
?Thanks!!
There seems to be a few challenges with font families:
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.
[%style
{typed|
font-family: Helvetica Neue;
|typed}
]
Gets interpreted as two values right now, and fails as "fontFamily2
can't be found".
[%style
{typed|
font-family: Helvetica, Arial;
|typed}
]
fails with "Unsupported delimiter".
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%)
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?
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!
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)
or
display(flexBox)
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 :)
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:
border2
(not sure what this one should do)
flex-grow: 0;
flex-shrink: 0;
compiles to
flexGrow zero;
flexShrink zero;
expected:
flexGrow 0;
flexShrink 0;
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
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}
]);
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.