typestyle/csstips

CSS Tips to help beginners using CSS in TS / JS

What's here

A bunch of csstips that you can use with TypeStyle. What is a csstip?

• A function that returns a mixin (e.g. padding)
• A mixin (e.g. flexbox stuff).
• Functions to make page setup easier (setupPage) and CSS designs consistent (normalize).

Quick exploration

Just use TypeScript autocomplete e.g

import * as csstips from "csstips" 
import {style} from "typestyle" 

<div className={style(csstips.scroll)}>
  .....Insert a big block of dom here....
<div>

It essentially makes it easier for:

• Beginners to explore CSS.
• Experts to review CSS / intent.
• Provides examples for how to create mixins / mixin creating functions for TypeStyle.

Docs

https://typestyle.github.io

csstips's Issues

unnecessary warning from webpack from normalize()

When using csstips with webpack, webpack will generate an annoying (albeit harmless) warning message:

./~/csstips/lib/normalize.js
Cannot find SourceMap 'normalize.min.css.map': Error: Can't resolve './normalize.min.css.map' in '/the/absolute/path/to/node_modules/csstips/lib'

It appears that even though normalize.js strips out the css source map comment before passing it to cssRaw, this does not prevent webpack from seeing it and trying to resolve the value of sourceMappingURL, resulting in the above warning.

Sure, this doesn't have any functional impact, but since normalize.js is created manually from normalize.css by copying/pasting with the source map comment intact, and then adding code to strip that comment out, how about you just leave out the comment to begin with?

I would be happy to send you a PR to clean it up.

use harmony imports

Change From
import * as types from "typestyle/lib/types"
To
import types from "typestyle/lib/types"

Webpack3 has a module concatenation plugin which relies on using harmony imports. I understand this won't work just by changing imports, but if you enable allowSyntheticDefaultImports it'll work. I can create a PR if you're interested. 🙂

`verticallySpaced` error

verticallySpaced and horizontallySpaced are broken with TypeScript 2.4 safety checks

{ '&>*': { marginBottom: string; }; '&>*:last-child': { marginBottom: string; }; }' has no properties in common with type 'CSSProperties'

PRs appreciated. Using a type assertion in my code for now 🌹

Slightly modified / simplified createBoxFunction from gls

No need to refactor now, but if I ever need to the following saves on an object allocation 🤷‍♂

/**
 * @param mapFromBox function that expects a full `BoxUnit` set
 * @returns a function that can work with any partial `BoxUnit`
 */
function createBoxFunction<T>(mapFromBox: (a: BoxUnit, b: BoxUnit, c: BoxUnit, d: BoxUnit) => T): BoxFunction<T> {
  const result: BoxFunction<T> = (a: BoxUnit, b?: BoxUnit, c?: BoxUnit, d?: BoxUnit) => {
    if (b === undefined && c === undefined && d === undefined) {
      b = c = d = a;
    }
    else if (c === undefined && d === undefined) {
      c = a;
      d = b;
    }

    return mapFromBox(
      boxUnitToString(a),
      boxUnitToString(b!),
      boxUnitToString(c!),
      boxUnitToString(d!)
    );
  }
  return result;
}

/** 
 * Padding 
 */
export const padding = createBoxFunction((top, right, bottom, left) => {
  return {
    paddingTop: top,
    paddingRight: right,
    paddingBottom: bottom,
    paddingLeft: left
  };
});

Adding grow and shrink options for flex?

Is there a particular reason that flex grow and shrink were completely omitted from this library? I find that functionality to be pretty important to be able to control. Is there a possibility it could get added?

*edit - should say that shrink isn't entirely omitted. I'm more so getting at the ability to customize whether something can grow or shrink similar to how you can do flex1 - flex12. Might be nice to do at least flexNoGrow or something like that at least.

Unable to import * from csstips using rollup

I'm trying to use csstips in a server-side rendered app. The same import style doesn't work for both.

When I use the following in a .tsx file:

import * as csstips from 'csstips';
import * as csx from 'csx';

the resulting rollup js for csstips is this:

    var csstips = /*#__PURE__*/Object.freeze({
        default: index,
        __moduleExports: lib
    });

and the generated code has undefined where I use csstips functions:

style(csstips.vertical, csstips.centerJustified, csstips.width(450))

in the original .tsx file becomes the following in the rolled up js:

style(undefined, undefined(percent(100)), undefined(percent(100))

causing an error like TypeError: undefined is not a function

---

Changing the import style to this fixes the problem for the browser, but doesn't work for the server side:

import csstips from 'csstips';
import * as csx from 'csx';

The csx imports work for both SSR and browser however.

Note: I originally reported this issue here as I thought it was a tool problem unrelated to the csstips library code: bazelbuild/rules_nodejs#933

someChildWillScroll

/**
 * Consider the layout
 *   parent.someChildWillScroll > someChild.overflow:auto
 * If you expect a child to scroll,  this hints the layout to not add the *auto* scroll bar to this parent
 */
export const someChildWillScroll = {
    overflow: 'hidden' as 'hidden'
}

someChildWillScroll

From alm : https://github.com/alm-tools/alm/blob/0108c9e0231df8c455a701b9ecaa24f218b13e11/src/app/styles/styles.tsx#L27-L32

Had a colleague need it in their project so worth bringing it into CSS tips 🌹

horizontallyCenterSelf

I tend to end up with :

csstips.horizontallyCenterSelf,
        {
          width: '100%',
          maxWidth: maxPageContentWidth,
        }),

Perhaps 100% and maxwidth argument should be a part of the tip

horizontallySpaced function return type not compatible with typestyle

Hi,
I stumbled upon issue with horizontallySpaced method, it's return type is not compatible with typestyle.style function which expect CSSProperties type.

I identified the problem in misplaced type assertion on this line: https://github.com/typestyle/csstips/blob/master/src/box.ts#L124
Type assertion to CSSProperties should be one level higher on object literal that's returned.

To reproduce:

• versions:
  typescript 2.4.0
  ├── [email protected]
  ├─┬ [email protected]

const styles = {
  root: style(css.horizontal, css.horizontallySpaced(10)),
};
// [ts] Argument of type '{ '&>*': { marginRight: string; }; '&>*:last-child': CSSProperties; }' is not assignable to parameter of type 'NestedCSSProperties | null | undefined'.
  Type '{ '&>*': { marginRight: string; }; '&>*:last-child': CSSProperties; }' has no properties in common with type 'NestedCSSProperties'.