typestyle / csstips Goto Github PK
View Code? Open in Web Editor NEWCSS Tips to help beginners using CSS in TS / JS
Home Page: https://typestyle.github.io
CSS Tips to help beginners using CSS in TS / JS
Home Page: https://typestyle.github.io
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. ๐
I tend to end up with :
csstips.horizontallyCenterSelf,
{
width: '100%',
maxWidth: maxPageContentWidth,
}),
Perhaps 100%
and maxwidth argument should be a part of the tip
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.
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.
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
};
});
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
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.
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'.
Had a colleague need it in their project so worth bringing it into CSS tips ๐น
/**
* 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'
}
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 ๐น
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.