missing features from css`...`

[threepointone]

• ~^ $ * attribute selectors~
• ~direct selectors > h1~
• ~custom properties, vars~
• babel plugin shouldn't rely on just the function name, it should verify the correct import
• @supports
• infinite nesting

[feel free to add]

[cusxio]

I'm not too sure if this is a bug or a missing feature.

the following code:

const container = css`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    max-width: 65rem;
    margin: -4.8rem auto 0;
`;

produces:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
height: 100 vh; /* notice the space after 100 */
width: 100%;
max-width: 65 rem; /* notice the space after 65 */
margin: -4 0.8 rem auto 0; /* incorrect ? */
-webkit-justify-content: center;
-webkit-align-items: center;
-ms-flex-pack: center;
-webkit-box-pack: center;
-ms-flex-align: center;
-webkit-box-align: center;

It works perfectly if I put quotes around the value of max-width, margin, and height.

i.e.

const container = css`
    display: flex;
    justify-content: center;
    align-items: center;
    height: '100vh';
    width: 100%;
    max-width: '65rem';
    margin: '-4.8rem auto 0';
`;

[threepointone]

This looks like a bug on my end. Thanks for the catch!

[ilyabo]

Probably a related issue:

 css`opacity: 0.5;` 

produces

 opacity: 0 0.5;

Adding quotes around 0.5 or using ${0.5} makes it work as it should

[ilyabo]

And one more small issue with css``:

I upgraded to 2.19.0 and now using margin: 0; without px at the end leads to an error:

val.indexOf is not a function
at /Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/glamor/lib/css/babel.js:111:26
    at Array.forEach (native)
    at Object.Declaration (/Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/glamor/lib/css/babel.js:110:23)
    at convert (/Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/glamor/lib/css/babel.js:21:32)
    at /Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/glamor/lib/css/babel.js:33:14
    at Array.map (native)
    at Object.StyleSheet (/Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/glamor/lib/css/babel.js:32:30)
    at convert (/Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/glamor/lib/css/babel.js:21:32)
    at PluginPass.TaggedTemplateExpression (/Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/glamor/lib/css/babel.js:185:31)
    at newFn (/Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/Users/ilyabo/Workspace/hyperloop/vis/dashboard/node_modules/babel-traverse/lib/context.js:192:19)

[threepointone]

man I just haven't done a good job with that :S I'll spend the next couple of days on fixing bugs. sorry!

[ilyabo]

Hey, it's OK. Thanks for making this awesome library!

On Mon, Nov 28, 2016, 5:50 AM Sunil Pai [email protected] wrote:

man I just haven't done a good job with that :S I'll spend the next couple of days on fixing bugs. sorry!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/threepointone/glamor/issues/120#issuecomment-263183083, or mute the thread https://github.com/notifications/unsubscribe-auth/AAVeVBQGl8ChW8h1i6bskfRMdGwc2s7dks5rCl2UgaJpZM4K4fNH .

[threepointone]

I published a new version 2.20.4 that fixes the above bugs. lemme know if you find any more!

[ilyabo]

Cool thanks!

On Wed, Nov 30, 2016, 5:03 AM Sunil Pai [email protected] wrote:

I published a new version 2.20.4 that fixes the above bugs. lemme know if you find any more!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/threepointone/glamor/issues/120#issuecomment-263777667, or mute the thread https://github.com/notifications/unsubscribe-auth/AAVeVAyNdFamW0VtHjkk5aMkGR3rEPeLks5rDPWhgaJpZM4K4fNH .