@homebound/truss 1.109.0 → 1.110.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/breakpoints.d.ts +0 -1
- package/build/breakpoints.js +11 -11
- package/build/breakpoints.js.map +1 -1
- package/build/breakpoints.test.d.ts +0 -1
- package/build/breakpoints.test.js +4 -4
- package/build/breakpoints.test.js.map +1 -1
- package/build/config.d.ts +0 -1
- package/build/generate.d.ts +0 -1
- package/build/generate.js +21 -18
- package/build/generate.js.map +1 -1
- package/build/index.d.ts +3 -3
- package/build/index.js +7 -3
- package/build/index.js.map +1 -1
- package/build/methods.d.ts +1 -2
- package/build/methods.js +35 -30
- package/build/methods.js.map +1 -1
- package/build/methods.test.d.ts +0 -1
- package/build/methods.test.js +3 -3
- package/build/methods.test.js.map +1 -1
- package/build/sections/tachyons/border.d.ts +2 -0
- package/build/sections/{border.js → tachyons/border.js} +14 -9
- package/build/sections/tachyons/border.js.map +1 -0
- package/build/sections/tachyons/borderColors.d.ts +2 -0
- package/build/sections/{borderColors.js → tachyons/borderColors.js} +3 -3
- package/build/sections/tachyons/borderColors.js.map +1 -0
- package/build/sections/tachyons/borderRadius.d.ts +2 -0
- package/build/sections/{borderRadius.js → tachyons/borderRadius.js} +2 -2
- package/build/sections/tachyons/borderRadius.js.map +1 -0
- package/build/sections/tachyons/borderStyles.d.ts +2 -0
- package/build/sections/{borderStyles.js → tachyons/borderStyles.js} +2 -2
- package/build/sections/tachyons/borderStyles.js.map +1 -0
- package/build/sections/tachyons/borderWidths.d.ts +2 -0
- package/build/sections/{borderWidths.js → tachyons/borderWidths.js} +2 -2
- package/build/sections/tachyons/borderWidths.js.map +1 -0
- package/build/sections/tachyons/boxShadow.d.ts +2 -0
- package/build/sections/{boxShadow.js → tachyons/boxShadow.js} +2 -2
- package/build/sections/tachyons/boxShadow.js.map +1 -0
- package/build/sections/tachyons/coordinates.d.ts +2 -0
- package/build/sections/{coordinates.js → tachyons/coordinates.js} +2 -2
- package/build/sections/tachyons/coordinates.js.map +1 -0
- package/build/sections/tachyons/cursor.d.ts +2 -0
- package/build/sections/{cursor.js → tachyons/cursor.js} +11 -6
- package/build/sections/tachyons/cursor.js.map +1 -0
- package/build/sections/tachyons/display.d.ts +2 -0
- package/build/sections/{display.js → tachyons/display.js} +2 -2
- package/build/sections/tachyons/display.js.map +1 -0
- package/build/sections/tachyons/flexbox.d.ts +2 -0
- package/build/sections/{flexbox.js → tachyons/flexbox.js} +16 -11
- package/build/sections/tachyons/flexbox.js.map +1 -0
- package/build/sections/tachyons/floats.d.ts +2 -0
- package/build/sections/{floats.js → tachyons/floats.js} +2 -2
- package/build/sections/tachyons/floats.js.map +1 -0
- package/build/sections/tachyons/fontWeight.d.ts +2 -0
- package/build/sections/{fontWeight.js → tachyons/fontWeight.js} +2 -2
- package/build/sections/tachyons/fontWeight.js.map +1 -0
- package/build/sections/tachyons/grid.d.ts +2 -0
- package/build/sections/tachyons/grid.js +37 -0
- package/build/sections/tachyons/grid.js.map +1 -0
- package/build/sections/tachyons/heights.d.ts +2 -0
- package/build/sections/{heights.js → tachyons/heights.js} +15 -10
- package/build/sections/tachyons/heights.js.map +1 -0
- package/build/sections/tachyons/index.d.ts +35 -0
- package/build/sections/{index.js → tachyons/index.js} +0 -0
- package/build/sections/tachyons/index.js.map +1 -0
- package/build/sections/tachyons/lineClamp.d.ts +2 -0
- package/build/sections/{lineClamp.js → tachyons/lineClamp.js} +14 -9
- package/build/sections/tachyons/lineClamp.js.map +1 -0
- package/build/sections/tachyons/objectFit.d.ts +2 -0
- package/build/sections/{objectFit.js → tachyons/objectFit.js} +2 -2
- package/build/sections/tachyons/objectFit.js.map +1 -0
- package/build/sections/tachyons/outlines.d.ts +2 -0
- package/build/sections/{outlines.js → tachyons/outlines.js} +2 -2
- package/build/sections/tachyons/outlines.js.map +1 -0
- package/build/sections/tachyons/overflow.d.ts +2 -0
- package/build/sections/{overflow.js → tachyons/overflow.js} +13 -8
- package/build/sections/tachyons/overflow.js.map +1 -0
- package/build/sections/tachyons/position.d.ts +2 -0
- package/build/sections/{position.js → tachyons/position.js} +2 -2
- package/build/sections/tachyons/position.js.map +1 -0
- package/build/sections/tachyons/skins.d.ts +2 -0
- package/build/sections/tachyons/skins.js +51 -0
- package/build/sections/tachyons/skins.js.map +1 -0
- package/build/sections/tachyons/spacing.d.ts +2 -0
- package/build/sections/{spacing.js → tachyons/spacing.js} +12 -7
- package/build/sections/tachyons/spacing.js.map +1 -0
- package/build/sections/tachyons/textAlign.d.ts +2 -0
- package/build/sections/{textAlign.js → tachyons/textAlign.js} +2 -2
- package/build/sections/tachyons/textAlign.js.map +1 -0
- package/build/sections/tachyons/textDecoration.d.ts +2 -0
- package/build/sections/{textDecoration.js → tachyons/textDecoration.js} +2 -2
- package/build/sections/tachyons/textDecoration.js.map +1 -0
- package/build/sections/tachyons/textTransform.d.ts +2 -0
- package/build/sections/{textTransform.js → tachyons/textTransform.js} +2 -2
- package/build/sections/tachyons/textTransform.js.map +1 -0
- package/build/sections/tachyons/typeScale.d.ts +2 -0
- package/build/sections/{typeScale.js → tachyons/typeScale.js} +3 -3
- package/build/sections/tachyons/typeScale.js.map +1 -0
- package/build/sections/tachyons/typography.d.ts +2 -0
- package/build/sections/tachyons/typography.js +24 -0
- package/build/sections/tachyons/typography.js.map +1 -0
- package/build/sections/tachyons/userSelect.d.ts +2 -0
- package/build/sections/{userSelect.js → tachyons/userSelect.js} +2 -2
- package/build/sections/tachyons/userSelect.js.map +1 -0
- package/build/sections/tachyons/verticalAlign.d.ts +2 -0
- package/build/sections/{verticalAlign.js → tachyons/verticalAlign.js} +2 -2
- package/build/sections/tachyons/verticalAlign.js.map +1 -0
- package/build/sections/tachyons/visibility.d.ts +2 -0
- package/build/sections/{visibility.js → tachyons/visibility.js} +2 -2
- package/build/sections/tachyons/visibility.js.map +1 -0
- package/build/sections/tachyons/whitespace.d.ts +2 -0
- package/build/sections/{whitespace.js → tachyons/whitespace.js} +2 -2
- package/build/sections/tachyons/whitespace.js.map +1 -0
- package/build/sections/tachyons/widths.d.ts +2 -0
- package/build/sections/tachyons/widths.js +49 -0
- package/build/sections/tachyons/widths.js.map +1 -0
- package/build/sections/tachyons/wordBreak.d.ts +2 -0
- package/build/sections/{wordBreak.js → tachyons/wordBreak.js} +2 -2
- package/build/sections/tachyons/wordBreak.js.map +1 -0
- package/build/sections/tachyons/zIndex.d.ts +2 -0
- package/build/sections/{zIndex.js → tachyons/zIndex.js} +11 -6
- package/build/sections/tachyons/zIndex.js.map +1 -0
- package/build/utils.d.ts +0 -1
- package/build/utils.js +1 -1
- package/build/utils.js.map +1 -1
- package/package.json +9 -17
- package/.nvmrc +0 -1
- package/README.markdown +0 -373
- package/build/breakpoints.d.ts.map +0 -1
- package/build/breakpoints.test.d.ts.map +0 -1
- package/build/config.d.ts.map +0 -1
- package/build/generate.d.ts.map +0 -1
- package/build/index.d.ts.map +0 -1
- package/build/methods.d.ts.map +0 -1
- package/build/methods.test.d.ts.map +0 -1
- package/build/sections/border.d.ts +0 -3
- package/build/sections/border.d.ts.map +0 -1
- package/build/sections/border.js.map +0 -1
- package/build/sections/borderColors.d.ts +0 -3
- package/build/sections/borderColors.d.ts.map +0 -1
- package/build/sections/borderColors.js.map +0 -1
- package/build/sections/borderRadius.d.ts +0 -3
- package/build/sections/borderRadius.d.ts.map +0 -1
- package/build/sections/borderRadius.js.map +0 -1
- package/build/sections/borderStyles.d.ts +0 -3
- package/build/sections/borderStyles.d.ts.map +0 -1
- package/build/sections/borderStyles.js.map +0 -1
- package/build/sections/borderWidths.d.ts +0 -3
- package/build/sections/borderWidths.d.ts.map +0 -1
- package/build/sections/borderWidths.js.map +0 -1
- package/build/sections/boxShadow.d.ts +0 -3
- package/build/sections/boxShadow.d.ts.map +0 -1
- package/build/sections/boxShadow.js.map +0 -1
- package/build/sections/coordinates.d.ts +0 -3
- package/build/sections/coordinates.d.ts.map +0 -1
- package/build/sections/coordinates.js.map +0 -1
- package/build/sections/cursor.d.ts +0 -3
- package/build/sections/cursor.d.ts.map +0 -1
- package/build/sections/cursor.js.map +0 -1
- package/build/sections/display.d.ts +0 -3
- package/build/sections/display.d.ts.map +0 -1
- package/build/sections/display.js.map +0 -1
- package/build/sections/flexbox.d.ts +0 -3
- package/build/sections/flexbox.d.ts.map +0 -1
- package/build/sections/flexbox.js.map +0 -1
- package/build/sections/floats.d.ts +0 -3
- package/build/sections/floats.d.ts.map +0 -1
- package/build/sections/floats.js.map +0 -1
- package/build/sections/fontWeight.d.ts +0 -3
- package/build/sections/fontWeight.d.ts.map +0 -1
- package/build/sections/fontWeight.js.map +0 -1
- package/build/sections/grid.d.ts +0 -3
- package/build/sections/grid.d.ts.map +0 -1
- package/build/sections/grid.js +0 -32
- package/build/sections/grid.js.map +0 -1
- package/build/sections/heights.d.ts +0 -3
- package/build/sections/heights.d.ts.map +0 -1
- package/build/sections/heights.js.map +0 -1
- package/build/sections/index.d.ts +0 -36
- package/build/sections/index.d.ts.map +0 -1
- package/build/sections/index.js.map +0 -1
- package/build/sections/lineClamp.d.ts +0 -3
- package/build/sections/lineClamp.d.ts.map +0 -1
- package/build/sections/lineClamp.js.map +0 -1
- package/build/sections/objectFit.d.ts +0 -3
- package/build/sections/objectFit.d.ts.map +0 -1
- package/build/sections/objectFit.js.map +0 -1
- package/build/sections/outlines.d.ts +0 -3
- package/build/sections/outlines.d.ts.map +0 -1
- package/build/sections/outlines.js.map +0 -1
- package/build/sections/overflow.d.ts +0 -3
- package/build/sections/overflow.d.ts.map +0 -1
- package/build/sections/overflow.js.map +0 -1
- package/build/sections/position.d.ts +0 -3
- package/build/sections/position.d.ts.map +0 -1
- package/build/sections/position.js.map +0 -1
- package/build/sections/skins.d.ts +0 -3
- package/build/sections/skins.d.ts.map +0 -1
- package/build/sections/skins.js +0 -46
- package/build/sections/skins.js.map +0 -1
- package/build/sections/spacing.d.ts +0 -3
- package/build/sections/spacing.d.ts.map +0 -1
- package/build/sections/spacing.js.map +0 -1
- package/build/sections/textAlign.d.ts +0 -3
- package/build/sections/textAlign.d.ts.map +0 -1
- package/build/sections/textAlign.js.map +0 -1
- package/build/sections/textDecoration.d.ts +0 -3
- package/build/sections/textDecoration.d.ts.map +0 -1
- package/build/sections/textDecoration.js.map +0 -1
- package/build/sections/textTransform.d.ts +0 -3
- package/build/sections/textTransform.d.ts.map +0 -1
- package/build/sections/textTransform.js.map +0 -1
- package/build/sections/typeScale.d.ts +0 -3
- package/build/sections/typeScale.d.ts.map +0 -1
- package/build/sections/typeScale.js.map +0 -1
- package/build/sections/typography.d.ts +0 -3
- package/build/sections/typography.d.ts.map +0 -1
- package/build/sections/typography.js +0 -24
- package/build/sections/typography.js.map +0 -1
- package/build/sections/userSelect.d.ts +0 -3
- package/build/sections/userSelect.d.ts.map +0 -1
- package/build/sections/userSelect.js.map +0 -1
- package/build/sections/verticalAlign.d.ts +0 -3
- package/build/sections/verticalAlign.d.ts.map +0 -1
- package/build/sections/verticalAlign.js.map +0 -1
- package/build/sections/visibility.d.ts +0 -3
- package/build/sections/visibility.d.ts.map +0 -1
- package/build/sections/visibility.js.map +0 -1
- package/build/sections/whitespace.d.ts +0 -3
- package/build/sections/whitespace.d.ts.map +0 -1
- package/build/sections/whitespace.js.map +0 -1
- package/build/sections/widths.d.ts +0 -3
- package/build/sections/widths.d.ts.map +0 -1
- package/build/sections/widths.js +0 -44
- package/build/sections/widths.js.map +0 -1
- package/build/sections/wordBreak.d.ts +0 -3
- package/build/sections/wordBreak.d.ts.map +0 -1
- package/build/sections/wordBreak.js.map +0 -1
- package/build/sections/zIndex.d.ts +0 -3
- package/build/sections/zIndex.d.ts.map +0 -1
- package/build/sections/zIndex.js.map +0 -1
- package/build/utils.d.ts.map +0 -1
- package/logo.svg +0 -11
- package/package.json.bak +0 -38
- package/tsconfig.json +0 -20
package/README.markdown
DELETED
|
@@ -1,373 +0,0 @@
|
|
|
1
|
-
<p align="center" style="padding: 100px">
|
|
2
|
-
<img src="logo.svg" width="400" />
|
|
3
|
-
</p>
|
|
4
|
-
|
|
5
|
-
Truss is a TypeScript DSL for writing utility CSS (think Tailwinds or Tachyons) in React/JSX, but on top of existing CSS-in-JS libraries (i.e. Emotion, MUI, and Fela).
|
|
6
|
-
|
|
7
|
-
## Quick Features
|
|
8
|
-
|
|
9
|
-
Truss lets you:
|
|
10
|
-
|
|
11
|
-
* Write `<div css={Css.mt1.black.$}>`, which Truss turns into `css={{ margin-top: 8px, color: "black" }}`, and then Emotion (or another CSS-in-JS library) turns into injected CSS classes.
|
|
12
|
-
|
|
13
|
-
* Setup your project's design system (palette, fonts, increments, and breakpoints) in Truss's configuration ([see example code](https://github.com/homebound-team/truss/blob/main/integration-test/index.ts#L12) and the "Customization" section below)
|
|
14
|
-
|
|
15
|
-
* Achieve both utility-class brevity and critical-CSS delivery.
|
|
16
|
-
|
|
17
|
-
* Output dynamic style values as needed, i.e. `Css.mt(someValue).$` or `Css.mt0.if(someCondition).mt4.$`.
|
|
18
|
-
|
|
19
|
-
Also see the "Why This Approach?" section for more rationale.
|
|
20
|
-
|
|
21
|
-
## Quick Intro
|
|
22
|
-
|
|
23
|
-
Truss generates a `src/Css.ts` file in your local project; this file exports a `Css` const that you use like:
|
|
24
|
-
|
|
25
|
-
```typescript
|
|
26
|
-
import { Css } from "src/Css";
|
|
27
|
-
|
|
28
|
-
const css = Css.mx2.black.$;
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
The last `.$` is like a `.build()` or `.finish()` method that converts the DSL object, with its fluent abbreviation getters/methods (like `mx2` and `black`), into just a regular POJO (plain old JavaScript object), as if you'd written by hand:
|
|
32
|
-
|
|
33
|
-
```typescript
|
|
34
|
-
const css = {
|
|
35
|
-
// added by .mx2
|
|
36
|
-
marginLeft: "16px",
|
|
37
|
-
marginRight: "16px",
|
|
38
|
-
// added by .black
|
|
39
|
-
color: "#000000",
|
|
40
|
-
};
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
You can then pass this POJO to whatever CSS-in-JS framework you're using, i.e. with Emotion you would do something like:
|
|
44
|
-
|
|
45
|
-
```tsx
|
|
46
|
-
/** @jsxImportSource @emotion/react */
|
|
47
|
-
|
|
48
|
-
function MyReactComponent(props: ...) {
|
|
49
|
-
// Use emotion's css prop
|
|
50
|
-
return <div css={Css.mx2.black.$}>content</div>
|
|
51
|
-
}
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
And in your HTML output, you'd get an Emotion-generated `.emotion-0` CSS class with the three `marginLeft`, `marginRight`, `color` properties set. (If you were to use Truss with Fela's `fe` JSX factory/`css` prop, you'd get three CSS classes, `a`, `b`, and `c`.)
|
|
55
|
-
|
|
56
|
-
See the "Common CSS-in-JS Frameworks" section below for Fela and MUI examples.
|
|
57
|
-
|
|
58
|
-
## Installation
|
|
59
|
-
|
|
60
|
-
The recommended Truss installation involves checking a few `index.ts`/`package.json` files into a `truss/` subdirectory of your project, to provide a place for Truss configuration/customization, as well as an easy way to kick off the code generator (i.e. it keeps Truss's `package.json`/`tsconfig.json` from interfering with your project's existing setup).
|
|
61
|
-
|
|
62
|
-
In your current project, run (todo script/make this shorter):
|
|
63
|
-
|
|
64
|
-
- `mkdir truss`
|
|
65
|
-
- `cd truss`
|
|
66
|
-
- `wget https://github.com/homebound-team/truss-project-files/archive/main.zip`
|
|
67
|
-
- `unzip main.zip`
|
|
68
|
-
- `mv truss-project-files-main/* .`
|
|
69
|
-
- `mv truss-project-files-main/.gitignore .`
|
|
70
|
-
- `rmdir truss-project-files-main`
|
|
71
|
-
- `rm main.zip`
|
|
72
|
-
- `npm install --save @homebound/truss`
|
|
73
|
-
- Note this is purposefully `install`-ing into the `truss/package.json` and not your root `package.json` file
|
|
74
|
-
- `npm run generate`
|
|
75
|
-
|
|
76
|
-
This should create a `src/Css.ts` in your project's main `src/` directory (you can change the output path in `index.ts` if needed).
|
|
77
|
-
|
|
78
|
-
You can then check in the `truss/` directory, and the generated `src/Css.ts` file (which will be in your root project's `src/` directory and not the `truss/` subdirectory).
|
|
79
|
-
|
|
80
|
-
Note that you do not need to run `npm run generate` on a regular basis/as part of your day-to-day workflow; you only need to run it when you're specifically making updates to the `truss/index.ts`/`truss/palette.ts` files.
|
|
81
|
-
|
|
82
|
-
## Configuration
|
|
83
|
-
|
|
84
|
-
Truss's configuration is all done in the `truss/index.ts` and `truss/palette.ts` files that are installed in your local project.
|
|
85
|
-
|
|
86
|
-
See the comments in [that file](https://github.com/homebound-team/truss-project-files/blob/main/index.ts) for the available config options.
|
|
87
|
-
|
|
88
|
-
## Psuedo-Selectors and Media Queries
|
|
89
|
-
|
|
90
|
-
Unlike Tachyons and Tailwinds, Truss's DSL does not have abbreviations/method names for psuedo-selectors and media queries.
|
|
91
|
-
|
|
92
|
-
Instead of building these complications into the DSL, with Truss you use your CSS-in-JS framework-of-choice's existing psuedo-selector and media query support.
|
|
93
|
-
|
|
94
|
-
For example, using Emotion you would do hover-specific styling like:
|
|
95
|
-
|
|
96
|
-
```tsx
|
|
97
|
-
/** @jsxImportSource @emotion/react */
|
|
98
|
-
|
|
99
|
-
function MyReactComponent(props: ...) {
|
|
100
|
-
return (
|
|
101
|
-
<div css={{...Css.mx2.black.$, "&:hover": Css.blue.$ }}>
|
|
102
|
-
content
|
|
103
|
-
</div>
|
|
104
|
-
);
|
|
105
|
-
}
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
And breakpoints like:
|
|
109
|
-
|
|
110
|
-
```tsx
|
|
111
|
-
/** @jsxImportSource @emotion/react */
|
|
112
|
-
import { Css, sm } from "src/Css";
|
|
113
|
-
|
|
114
|
-
function MyReactComponent(props: ...) {
|
|
115
|
-
return (
|
|
116
|
-
<div css={{...Css.mx2.black.$, [sm]: Css.mx1.$}}>
|
|
117
|
-
content
|
|
118
|
-
</div>
|
|
119
|
-
);
|
|
120
|
-
}
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
Where `sm` is just a regular media query string, i.e. `@media (max-width: 420px)`, that you can either generate with Truss's `breakpoints` config setting or just write your own by hand.
|
|
124
|
-
|
|
125
|
-
This leveraging of the existing framework's selector support makes Truss's DSL shorter and simpler than Tachyons/Tailwinds, which have to repetively/pre-emptively mixin hover/media variations for each size into each abbreviation.
|
|
126
|
-
|
|
127
|
-
## Common CSS-in-JS Frameworks
|
|
128
|
-
|
|
129
|
-
Truss generates a TypeScript/`Css.ts` DSL that, without any changes, can be used in MUI, Emotion, and Fela.
|
|
130
|
-
|
|
131
|
-
See the `./integration-test` directory in Truss's repo for running unit tests for each of the these frameworks.
|
|
132
|
-
|
|
133
|
-
### Emotion
|
|
134
|
-
|
|
135
|
-
```tsx
|
|
136
|
-
function FooComponent() {
|
|
137
|
-
return <div css={Css.black.$}>root</div>;
|
|
138
|
-
}
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
### Fela
|
|
142
|
-
|
|
143
|
-
```tsx
|
|
144
|
-
function FooComponent() {
|
|
145
|
-
return <div css={Css.black.$}>root</div>;
|
|
146
|
-
}
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
```tsx
|
|
150
|
-
function FooComponent() {
|
|
151
|
-
const { css } = useFela();
|
|
152
|
-
return <div className={css(Css.black.$)}>root</div>;
|
|
153
|
-
}
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
### MUI
|
|
157
|
-
|
|
158
|
-
```tsx
|
|
159
|
-
const useStyles = makeStyles({ root: Css.black.$ });
|
|
160
|
-
|
|
161
|
-
function FooComponent() {
|
|
162
|
-
const styles = useStyles();
|
|
163
|
-
return <div className={styles.root}>root</div>;
|
|
164
|
-
}
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
## XStyles / Xss Extension Contracts
|
|
168
|
-
|
|
169
|
-
Truss liberally borrows the idea of type-checked "extension" CSS from the currently-unreleased Facebook XStyles library (at least in theory; I've only seen one or two slides for this feature of XStyles, but I'm pretty sure Truss is faithful re-implementation of it).
|
|
170
|
-
|
|
171
|
-
As context, when developing components, you often end up with "properties that are okay for the caller to set" (i.e. that you as the component developer support the caller setting) and "properties that are _not_ okay for the caller to set" (i.e. because the component controls them).
|
|
172
|
-
|
|
173
|
-
Basically, you want to allow the caller to customize _some_ styles of the component, typically things like color or margin or font size, but not give them blanket control of "here is a `className` prop, do whatever you want to my root element", which risks "radical"/open-ended customization that then you, as the component developer, don't know if you will/will not unintentionally break going forward.
|
|
174
|
-
|
|
175
|
-
(I.e. see [Layout isolated components](https://visly.app/blog/layout-isolated-components) for a great write up of "parents control margin, components control padding".)
|
|
176
|
-
|
|
177
|
-
With Truss, you can explicitly declare a contract of styles allowed to be set on your component, i.e.:
|
|
178
|
-
|
|
179
|
-
```tsx
|
|
180
|
-
import { Css, Only, Xss } from "src/Css";
|
|
181
|
-
|
|
182
|
-
// Declare the allowed/supported styles
|
|
183
|
-
export type DatePickerXss = Xss<"marginLeft" | "marginRight">;
|
|
184
|
-
|
|
185
|
-
// Update the props to accept an `xss` prop to accept the customizations
|
|
186
|
-
export interface DatePickerProps<X> {
|
|
187
|
-
date: Date;
|
|
188
|
-
xss?: X;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
// Use the `Only` type to ensure `xss` prop is a subset of DatePickerXss
|
|
192
|
-
export function DatePicker<X extends Only<DatePickerXss, X>>(
|
|
193
|
-
props: DatePickerProps<X>
|
|
194
|
-
) {
|
|
195
|
-
const { date, xss } = props;
|
|
196
|
-
// The component controls marginTop/marginBottom, and defers to the caller for marginLeft/marginRight
|
|
197
|
-
return <div css={{ ...Css.my2.$, ...xss }}>{date}</div>;
|
|
198
|
-
}
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
Here we're allowing callers to set `marginLeft` or `marginRight`, i.e. this line will compile because `mx2` is statically typed as `{ marginLeft: number; marginRight: number }`, and so is a valid `xss` value:
|
|
202
|
-
|
|
203
|
-
```tsx
|
|
204
|
-
<DatePicker xss={Css.mx2.$} date={...} />
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
However, this line will not compile because `mt2` is statically typed as `{ marginTop: number }`, and `marginTop` is not allowed by `DatePickerXss`:
|
|
208
|
-
|
|
209
|
-
```tsx
|
|
210
|
-
<DatePicker date={...} xss={Css.mt2.$} />
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
The `Css` DSL also iteratively types itself, i.e. `Css.ml1.mr2.$` is still statically typed as `{ marginLeft: number; marginRight: number }`, instead of being based just on the last-used abbreviation.
|
|
214
|
-
|
|
215
|
-
Note that Truss conventionally uses the `xss` prop name for "the component's allowed extension styles" as a play on Emotion's `css` prop, with the `x` representing the "extension" concept. But there is otherwise nothing special about the name of the `xss` prop; i.e. you could use `xstyles={...}` which I believe is what the Facebook XStyles library does, or your own convention.
|
|
216
|
-
|
|
217
|
-
Also note that the XStyles/Xss feature is completely opt-in; you can use it if you want, or you can use Truss solely for the `Css.m2.black.$` abbreviations.
|
|
218
|
-
|
|
219
|
-
## Customization
|
|
220
|
-
|
|
221
|
-
Truss supports several levels of customization:
|
|
222
|
-
|
|
223
|
-
1. Per-project fonts/colors/etc.
|
|
224
|
-
2. Per-project rule additions or changes
|
|
225
|
-
3. Forking
|
|
226
|
-
|
|
227
|
-
### Per-Project Fonts/Colors/Etc
|
|
228
|
-
|
|
229
|
-
Each project that uses Truss gets a local `index.ts`, checked into its repo essentially as a config file, that defines in TypeScript the core settings, i.e.:
|
|
230
|
-
|
|
231
|
-
```typescript
|
|
232
|
-
const increment = 8;
|
|
233
|
-
const numberOfIncrements = 4;
|
|
234
|
-
|
|
235
|
-
const palette = {
|
|
236
|
-
Black: "#353535",
|
|
237
|
-
MidGray: "#888888",
|
|
238
|
-
LightGray: "#cecece",
|
|
239
|
-
White: "#fcfcfa",
|
|
240
|
-
Blue: "#526675",
|
|
241
|
-
};
|
|
242
|
-
|
|
243
|
-
const fonts = {
|
|
244
|
-
f24: "24px",
|
|
245
|
-
f18: "18px",
|
|
246
|
-
f16: "16px",
|
|
247
|
-
f14: "14px",
|
|
248
|
-
f12: "12px",
|
|
249
|
-
// Can also set multiple properties if necessary
|
|
250
|
-
f10: { fontSize: "10px", fontWeight: 500 },
|
|
251
|
-
};
|
|
252
|
-
|
|
253
|
-
const breakpoints = { sm: 0, md: 600, lg: 960 };
|
|
254
|
-
|
|
255
|
-
// ...rest of the config file...
|
|
256
|
-
```
|
|
257
|
-
|
|
258
|
-
Projects should heavily customize these settings to match their project-specific design system, then run `npm run generate` to get an updated `Css.ts`, i.e. after adding `Green: "green"` as a color in `palette`, the `Css.ts` file will automatically have utility methods added like:
|
|
259
|
-
|
|
260
|
-
```typescript
|
|
261
|
-
get green() { return this.add("color", "green"); }
|
|
262
|
-
get bgGreen() { return this.add("backgroundColor", "green"); }
|
|
263
|
-
get bGreen() { return this.add("borderColor", "green"); }
|
|
264
|
-
|
|
265
|
-
```
|
|
266
|
-
|
|
267
|
-
### Per-Project Utility Methods
|
|
268
|
-
|
|
269
|
-
In the same `index.ts`, projects can add their own new abbreviations/utility methods:
|
|
270
|
-
|
|
271
|
-
```typescript
|
|
272
|
-
const sections = {
|
|
273
|
-
ourSection: () => [newMethod("someAbbreviation", { color: "#000000" })],
|
|
274
|
-
};
|
|
275
|
-
```
|
|
276
|
-
|
|
277
|
-
Will result in `Css.ts` having a line that looks like:
|
|
278
|
-
|
|
279
|
-
```typescript
|
|
280
|
-
// ourSection
|
|
281
|
-
get someAbbreviation() { return this.add("color", "#000000"); }
|
|
282
|
-
```
|
|
283
|
-
|
|
284
|
-
Which can then be used as `Css.m2.someAbbreviation.$`.
|
|
285
|
-
|
|
286
|
-
Besides adding one-off additional methods, if your project wants to replace a whole section of Truss's out-of-the-box methods, you can do this via:
|
|
287
|
-
|
|
288
|
-
```typescript
|
|
289
|
-
const sections = {
|
|
290
|
-
// Prefer app-specific border radiuses
|
|
291
|
-
borderRadius: () => newMethodsForProp("borderRadius", {
|
|
292
|
-
br4: "4px",
|
|
293
|
-
br8: "8px",
|
|
294
|
-
br16: "16px",
|
|
295
|
-
}),
|
|
296
|
-
};
|
|
297
|
-
```
|
|
298
|
-
|
|
299
|
-
Where `borderRadius` matches the name of the section in Truss's [sections](https://github.com/homebound-team/truss/tree/main/src/sections) directory (which generally matches Tachyon's organization).
|
|
300
|
-
|
|
301
|
-
### Forking
|
|
302
|
-
|
|
303
|
-
At the end of the day, Truss is small and hackable such that forking it to make the abbreviations "strict Tachyons" or "strict Tailwinds" or "whatever best fits your project/conventions/styles" should be easy and is kosher/encouraged.
|
|
304
|
-
|
|
305
|
-
The core Truss feature of "make a TypeScript DSL with a bunch of abbreviations" is also basically done, so it's unlikely you will miss out on some future/forthcoming amazing features by forking.
|
|
306
|
-
|
|
307
|
-
And, even if so, the coupling between Truss and your application code is limited to the `Css.abbreviations.$` lines that should be extremely stable even if/as the core of Truss evolves.
|
|
308
|
-
|
|
309
|
-
## Why This Approach?
|
|
310
|
-
|
|
311
|
-
Truss's approach is "Tachyons-ish" (or Tailwinds-ish), insofar as having short/cute utility class definitions.
|
|
312
|
-
|
|
313
|
-
However, the abbreviations are runtime resolved to object-style CSS-in-JS rules that are then injected into the DOM by Emotion (or your CSS-in-JS framework of choice), as if the rules had originally been written long-form.
|
|
314
|
-
|
|
315
|
-
The benefits of this approach are:
|
|
316
|
-
|
|
317
|
-
- We get the brevity + "inline-ness" of Tachyons/Tailwinds.
|
|
318
|
-
|
|
319
|
-
- It delivers critical CSS, i.e. we don't need the large static TW/Tachyons CSS files.
|
|
320
|
-
|
|
321
|
-
(My reading of projects like [tachyons-styled-react](https://github.com/tachyons-css/tachyons-styled-react), from the creator of Tachyons, is that critical-ness is still important goal/improvement even for static-utility-class approaches like Tachyons.)
|
|
322
|
-
|
|
323
|
-
- Psuedo-selectors/breakpoints go through Emotion/the CSS-in-JS framework, which is simpler, more powerful, and reduces method/abbreviation bloat.
|
|
324
|
-
|
|
325
|
-
I.e. we don't need to suffix `-nl` for "not large" onto every single abbreviation.
|
|
326
|
-
|
|
327
|
-
- "Regular Emotion/CSS-in-JS" is easily/inherently available as an escape hatch for places where utility classes don't make sense.
|
|
328
|
-
|
|
329
|
-
It's very likely you'll need "not utility" styles at some point in your project, and because Truss's DSL is already going through Emotion/CSS-in-JS anyway, it means your one-off "not utility" styles will use the same/consistent CSS-in-JS output/generation pipeline.
|
|
330
|
-
|
|
331
|
-
This means you don't end up with mixed idioms of `className="mx2 black"` for 90% of your styles, but then "something different" like `css={...}` for the last 10%.
|
|
332
|
-
|
|
333
|
-
- Projects can easily tweak their preferred styles/abbreviations.
|
|
334
|
-
|
|
335
|
-
Granted, this is very similar in spirit to Tailwinds customization, but for Truss, the config process is "just change some TypeScript code and run `generate`", and doesn't involve any changes to your build/webpack/PostCSS/etc. setup.
|
|
336
|
-
|
|
337
|
-
## Themes
|
|
338
|
-
|
|
339
|
-
The word "theme" can mean either "static themes" (i.e. using the same consistent colors/fonts throughout your app, but the values themselves never really change) or "dynamic themes" (i.e. the user changing from light mode to dark mode).
|
|
340
|
-
|
|
341
|
-
For static themes, Truss's `index.ts`/`palette.ts` are specifically setup to centrally define your application's fonts, colors, etc. (see the "Configuration" section), so that they are consistently applied through your application.
|
|
342
|
-
|
|
343
|
-
For dynamic themes, Truss doesn't have any features dedicated explicitly to support them, but you can easily use CSS variables in your methods, i.e.:
|
|
344
|
-
|
|
345
|
-
```typescript
|
|
346
|
-
const palette = {
|
|
347
|
-
Primary: "var(--primary)",
|
|
348
|
-
Secondary: "var(--secondary)",
|
|
349
|
-
};
|
|
350
|
-
```
|
|
351
|
-
|
|
352
|
-
And then have your application handle setting the `--primary` / `--secondary` values as appropriate (i.e. by importing a `dark-mode.css` or `light-mode.css` which define the respective CSS variable values).
|
|
353
|
-
|
|
354
|
-
## Inspiration
|
|
355
|
-
|
|
356
|
-
Several libraries influenced Truss, specifically:
|
|
357
|
-
|
|
358
|
-
- [Typed Tailwinds](https://typed.tw) and [babel-plugin-tailwind-components](https://github.com/bradlc/babel-plugin-tailwind-components) are both "type-safe TypeScript utility-css DSLs".
|
|
359
|
-
|
|
360
|
-
In particular, the babel-plugin-tailwind-components insight of "if you just make `csstype`-compliant object literals, you can bring them to whatever CSS-in-JS framework you want" was a very useful/inspirational insight.
|
|
361
|
-
|
|
362
|
-
The main difference between Truss and both Typed.tw and babel-plugin-tailwind-components is that Truss doesn't try to "perfectly match Tachyons or Tailwinds" (see "Why This Approach?"). Specifically, both projects assume that a `tachyons.css` or `tailwinds.css` file is the source-of-truth for your project's rules (and so parse/generate the TypeScript code from that CSS file); however, with Truss your source-of-truth is Truss's out-of-the-box TypeScript rules + whatever customizations you make in your project's `truss/index.ts` file (so rules are defined directly in TypeScript).
|
|
363
|
-
|
|
364
|
-
- Facebook's XStyles for the "typed extension" idea
|
|
365
|
-
|
|
366
|
-
## Todo
|
|
367
|
-
|
|
368
|
-
- `npx -p @homebound/truss init` type experience for setup - inspired by [Storybook](https://storybook.js.org/docs/guides/quick-start-guide/)
|
|
369
|
-
- Support `number[]` increments as config
|
|
370
|
-
- Babel plugin that evaluates `Css...$` expressions at build-time
|
|
371
|
-
- I.e. see babel-plugin-tailwind-components and [typed.tw's implementation](https://github.com/dvkndn/typed.tw/tree/master/webpack-loader)
|
|
372
|
-
- Server-side generation; in theory this should just work?
|
|
373
|
-
- Add [goober](https://github.com/cristianbote/goober#css-prop) example
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../src/breakpoints.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAClC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAiDxB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"breakpoints.test.d.ts","sourceRoot":"","sources":["../src/breakpoints.test.ts"],"names":[],"mappings":""}
|
package/build/config.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B;;;;GAIG;AACH,oBAAY,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;AAE7D;;;;;;;;;;GAUG;AACH,MAAM,WAAW,MAAM;IACrB,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;;;OAMG;IACH,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEhC;;;;OAIG;IACH,KAAK,EAAE,UAAU,CAAC;IAElB,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAC;IAElB,6EAA6E;IAC7E,kBAAkB,EAAE,MAAM,CAAC;IAE3B,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kHAAkH;IAClH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,UAAU,CAAC,CAAC,CAAC;IAEtD,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAErC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAErC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;GAeG;AACH,oBAAY,eAAe,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,aAAa,EAAE,CAAC;AAElE;;GAEG;AACH,oBAAY,WAAW,GAAG,MAAM,CAAC;AAEjC;;;;;;GAMG;AACH,oBAAY,aAAa,GAAG,MAAM,CAAC;AAEnC,yDAAyD;AACzD,oBAAY,WAAW,GAAG,MAAM,CAAC;AAEjC,mDAAmD;AACnD,oBAAY,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAE5D,kFAAkF;AAClF,oBAAY,OAAO,GAAG,MAAM,CAAC,WAAW,EAAE,WAAW,EAAE,CAAC,CAAC"}
|
package/build/generate.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"generate.d.ts","sourceRoot":"","sources":["../src/generate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,OAAO,EAAE,MAAM,EAAwC,MAAM,UAAU,CAAC;AAKxE,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,UAAU,CAAC,CAStE,CAAC;AAEF,wBAAsB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAI5D"}
|
package/build/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,2BAA2B,EAC3B,mBAAmB,EACnB,cAAc,EACd,wBAAwB,EACxB,SAAS,GACV,MAAM,WAAW,CAAC"}
|
package/build/methods.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"methods.d.ts","sourceRoot":"","sources":["../src/methods.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,oBAAY,IAAI,GAAG,MAAM,UAAU,CAAC;AAEpC;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,GAAG,aAAa,CAI5E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,MAAM,UAAU,GACrB,aAAa,CAEf;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,IAAI,EAC9C,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,EACxC,QAAQ,GAAE,MAAM,GAAG,IAAW,EAC9B,SAAS,GAAE,OAAe,GACzB,aAAa,EAAE,CASjB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,aAAa,EAAE,CAMnE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,aAAa,CAIf;AAID,oBAAY,SAAS,GAAG,CAAC,MAAM,EAAE,IAAI,GAAG,MAAM,EAAE,CAAC,CAAC;AAElD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,GACpB,aAAa,EAAE,CAsBjB;AAED,iHAAiH;AACjH,wBAAgB,2BAA2B,CACzC,IAAI,EAAE,WAAW,EACjB,kBAAkB,EAAE,MAAM,GACzB,aAAa,EAAE,CAIjB;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW,CAE1D;AAED,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,EAAoC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"methods.test.d.ts","sourceRoot":"","sources":["../src/methods.test.ts"],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../src/sections/border.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAU5C,eAAO,MAAM,MAAM,EAAE,eAKpB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"border.js","sourceRoot":"","sources":["../../src/sections/border.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,sCAAuC;AAGvC,IAAM,UAAU,GAAiC;IAC/C,CAAC,IAAI,EAAE,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;IACtC,CAAC,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;IAC5C,CAAC,IAAI,EAAE,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;IAChD,CAAC,IAAI,EAAE,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAC;IAClD,CAAC,IAAI,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;CAC/C,CAAC;AAEK,IAAM,MAAM,GAAoB,cAAM,gBACxC,UAAU,CAAC,GAAG,CAAC,UAAC,EAAsB;;QAAtB,KAAA,aAAsB,EAArB,IAAI,QAAA,EAAE,KAAA,gBAAc,EAAb,KAAK,QAAA,EAAE,KAAK,QAAA;IACrC,OAAO,mBAAS,CAAC,IAAI,YAAI,GAAC,KAAK,IAAG,OAAO,EAAE,GAAC,KAAK,IAAG,KAAK,MAAG,CAAC;AAC/D,CAAC,CAAC;IACF,mBAAS,CAAC,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC;IAJf,CAK5C,CAAC;AALW,QAAA,MAAM,UAKjB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"borderColors.d.ts","sourceRoot":"","sources":["../../src/sections/borderColors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG5C,eAAO,MAAM,WAAW,EAAE,eAKzB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"borderColors.js","sourceRoot":"","sources":["../../src/sections/borderColors.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AACA,sCAA+C;AAExC,IAAM,WAAW,GAAoB,UAAC,EAAW;QAAT,OAAO,aAAA;IACpD,IAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAC7B,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,EAAY;YAAZ,KAAA,aAAY,EAAX,GAAG,QAAA,EAAE,KAAK,QAAA;QAAM,OAAA,CAAC,MAAI,GAAK,EAAE,KAAK,CAAC;IAAlB,CAAkB,CAAC,CAClE,CAAC;IACF,OAAO,2BAAiB,CAAC,aAAa,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AACtD,CAAC,CAAC;AALW,QAAA,WAAW,eAKtB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"borderRadius.d.ts","sourceRoot":"","sources":["../../src/sections/borderRadius.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG5C,eAAO,MAAM,YAAY,EAAE,eASvB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"borderRadius.js","sourceRoot":"","sources":["../../src/sections/borderRadius.ts"],"names":[],"mappings":";;;AACA,sCAA+C;AAExC,IAAM,YAAY,GAAoB;IAC3C,OAAA,2BAAiB,CAAC,cAAc,EAAE;QAChC,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,QAAQ;QACb,GAAG,EAAE,OAAO;QACZ,GAAG,EAAE,MAAM;QACX,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;KACjB,CAAC;AARF,CAQE,CAAC;AATQ,QAAA,YAAY,gBASpB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"borderStyles.d.ts","sourceRoot":"","sources":["../../src/sections/borderStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAK5C,eAAO,MAAM,WAAW,EAAE,eAUvB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"borderStyles.js","sourceRoot":"","sources":["../../src/sections/borderStyles.ts"],"names":[],"mappings":";;;AACA,sCAA+C;AAE/C,0CAA0C;AAC1C,iDAAiD;AAC1C,IAAM,WAAW,GAAoB;IAC1C,OAAA,2BAAiB,CACf,aAAa,EACb;QACE,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,OAAO;KACjB,EACD,IAAI,CACL;AATD,CASC,CAAC;AAVS,QAAA,WAAW,eAUpB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"borderWidths.d.ts","sourceRoot":"","sources":["../../src/sections/borderWidths.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C,eAAO,MAAM,WAAW,EAAE,eAQvB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"borderWidths.js","sourceRoot":"","sources":["../../src/sections/borderWidths.ts"],"names":[],"mappings":";;;AACA,sCAA+C;AAE/C,0CAA0C;AACnC,IAAM,WAAW,GAAoB;IAC1C,OAAA,2BAAiB,CACf,aAAa,EACb;QACE,GAAG,EAAE,KAAK;QACV,GAAG,EAAE,KAAK;KACX,EACD,IAAI,CACL;AAPD,CAOC,CAAC;AARS,QAAA,WAAW,eAQpB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"boxShadow.d.ts","sourceRoot":"","sources":["../../src/sections/boxShadow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,eAAO,MAAM,SAAS,EAAE,eAEvB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"boxShadow.js","sourceRoot":"","sources":["../../src/sections/boxShadow.ts"],"names":[],"mappings":";;;AAAA,sCAAuC;AAGhC,IAAM,SAAS,GAAoB,cAAM,OAAA;IAC9C,mBAAS,CAAC,YAAY,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;CAC/C,EAF+C,CAE/C,CAAC;AAFW,QAAA,SAAS,aAEpB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"coordinates.d.ts","sourceRoot":"","sources":["../../src/sections/coordinates.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C,eAAO,MAAM,WAAW,EAAE,eAGtB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"coordinates.js","sourceRoot":"","sources":["../../src/sections/coordinates.ts"],"names":[],"mappings":";;;AAAA,sCAAiD;AAGjD,IAAM,UAAU,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAExD,IAAM,WAAW,GAAoB,UAAC,MAAM;IACjD,OAAA,UAAU,CAAC,OAAO,CAAC,UAAC,CAAC;QACnB,OAAO,6BAAmB,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3C,CAAC,CAAC;AAFF,CAEE,CAAC;AAHQ,QAAA,WAAW,eAGnB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../src/sections/cursor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,eAAO,MAAM,MAAM,EAAE,eAKpB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"cursor.js","sourceRoot":"","sources":["../../src/sections/cursor.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,sCAA0D;AAGnD,IAAM,MAAM,GAAoB,cAAM,gBACxC,2BAAiB,CAAC,QAAQ,EAAE;IAC7B,aAAa,EAAE,SAAS;IACxB,gBAAgB,EAAE,aAAa;CAChC,CAAC,GAJyC,CAK5C,CAAC;AALW,QAAA,MAAM,UAKjB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/sections/display.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C,eAAO,MAAM,OAAO,EAAE,eAgBlB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"display.js","sourceRoot":"","sources":["../../src/sections/display.ts"],"names":[],"mappings":";;;AACA,sCAA+C;AAE/C,wEAAwE;AACjE,IAAM,OAAO,GAAoB;IACtC,OAAA,2BAAiB,CAAC,SAAS,EAAE;QAC3B,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,OAAO;QACX,GAAG,EAAE,cAAc;QACnB,GAAG,EAAE,cAAc;QACnB,EAAE,EAAE,OAAO;QACX,GAAG,EAAE,YAAY;QACjB,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,cAAc;QACxB,aAAa,EAAE,oBAAoB;QACnC,QAAQ;QACR,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,aAAa;QAClB,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,aAAa;KACnB,CAAC;AAfF,CAeE,CAAC;AAhBQ,QAAA,OAAO,WAgBf"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"flexbox.d.ts","sourceRoot":"","sources":["../../src/sections/flexbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAU5C,eAAO,MAAM,OAAO,EAAE,eAmFrB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"flexbox.js","sourceRoot":"","sources":["../../src/sections/flexbox.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,sCAA+C;AAE/C,4CAA4C;AAC5C,4EAA4E;AAC5E,EAAE;AACF,gFAAgF;AAChF,gFAAgF;AAChF,+EAA+E;AAC/E,oDAAoD;AAC7C,IAAM,OAAO,GAAoB,cAAM,gBACzC,2BAAiB,CAClB,MAAM,EACN;IACE,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;CACR,EACD,GAAG,CACJ,EACE,2BAAiB,CAClB,gBAAgB,EAChB;IACE,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,eAAe;IACrB,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,cAAc;CACrB,EACD,IAAI,CACL,EAEE,2BAAiB,CAClB,WAAW,EACX;IACE,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,QAAQ;IACb,GAAG,EAAE,UAAU;IACf,SAAS,EAAE,SAAS;CACrB,EACD,IAAI,CACL,EAEE,2BAAiB,CAClB,YAAY,EACZ;IACE,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,QAAQ;IACb,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,SAAS;CACf,EACD,IAAI,CACL,EAEE,2BAAiB,CAClB,WAAW;AACX,kEAAkE;AAClE;IACE,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,OAAO;CACb,EACD,IAAI,CACL,EAEE,2BAAiB,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAEjE,2BAAiB,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EACjD,2BAAiB,CAAC,YAAY,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAEnD,2BAAiB,CAClB,eAAe,EACf;IACE,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,aAAa;IACnB,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,gBAAgB;CACvB,EACD,IAAI,CACL,GAlF2C,CAmF7C,CAAC;AAnFW,QAAA,OAAO,WAmFlB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"floats.d.ts","sourceRoot":"","sources":["../../src/sections/floats.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C,eAAO,MAAM,KAAK,EAAE,eAQjB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"floats.js","sourceRoot":"","sources":["../../src/sections/floats.ts"],"names":[],"mappings":";;;AACA,sCAA+C;AAE/C,uEAAuE;AAChE,IAAM,KAAK,GAAoB;IACpC,OAAA,2BAAiB,CACf,OAAO,EACP;QACE,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,OAAO;KACZ,EACD,OAAO,CACR;AAPD,CAOC,CAAC;AARS,QAAA,KAAK,SAQd"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"fontWeight.d.ts","sourceRoot":"","sources":["../../src/sections/fontWeight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG5C,eAAO,MAAM,UAAU,EAAE,eAiBtB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"fontWeight.js","sourceRoot":"","sources":["../../src/sections/fontWeight.ts"],"names":[],"mappings":";;;AACA,sCAA+C;AAExC,IAAM,UAAU,GAAoB;IACzC,OAAA,2BAAiB,CACf,YAAY,EACZ;QACE,MAAM,EAAE,QAAQ;QAChB,CAAC,EAAE,MAAM;QACT,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;KACT,EACD,IAAI,CACL;AAhBD,CAgBC,CAAC;AAjBS,QAAA,UAAU,cAiBnB"}
|
package/build/sections/grid.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/sections/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAO5C,eAAO,MAAM,IAAI,EAAE,eAQlB,CAAC"}
|
package/build/sections/grid.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
3
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
4
|
-
if (!m) return o;
|
|
5
|
-
var i = m.call(o), r, ar = [], e;
|
|
6
|
-
try {
|
|
7
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
8
|
-
}
|
|
9
|
-
catch (error) { e = { error: error }; }
|
|
10
|
-
finally {
|
|
11
|
-
try {
|
|
12
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
13
|
-
}
|
|
14
|
-
finally { if (e) throw e.error; }
|
|
15
|
-
}
|
|
16
|
-
return ar;
|
|
17
|
-
};
|
|
18
|
-
var __spread = (this && this.__spread) || function () {
|
|
19
|
-
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
|
|
20
|
-
return ar;
|
|
21
|
-
};
|
|
22
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
23
|
-
exports.grid = void 0;
|
|
24
|
-
var methods_1 = require("../methods");
|
|
25
|
-
var grid = function (config) { return __spread([
|
|
26
|
-
methods_1.newParamMethod("gtc", "gridTemplateColumns"),
|
|
27
|
-
methods_1.newParamMethod("gtr", "gridTemplateRows"),
|
|
28
|
-
methods_1.newParamMethod("gr", "gridRow"),
|
|
29
|
-
methods_1.newParamMethod("gc", "gridColumn")
|
|
30
|
-
], methods_1.newIncrementMethods(config, "gap", "gap"), methods_1.newIncrementMethods(config, "rg", "rowGap"), methods_1.newIncrementMethods(config, "cg", "columnGap")); };
|
|
31
|
-
exports.grid = grid;
|
|
32
|
-
//# sourceMappingURL=grid.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/sections/grid.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,sCAIoB;AAEb,IAAM,IAAI,GAAoB,UAAC,MAAM,IAAK;IAC/C,wBAAc,CAAC,KAAK,EAAE,qBAAqB,CAAC;IAC5C,wBAAc,CAAC,KAAK,EAAE,kBAAkB,CAAC;IACzC,wBAAc,CAAC,IAAI,EAAE,SAAS,CAAC;IAC/B,wBAAc,CAAC,IAAI,EAAE,YAAY,CAAC;GAC/B,6BAAmB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,EACzC,6BAAmB,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,EAC3C,6BAAmB,CAAC,MAAM,EAAE,IAAI,EAAE,WAAW,CAAC,GAPF,CAQhD,CAAC;AARW,QAAA,IAAI,QAQf"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"heights.d.ts","sourceRoot":"","sources":["../../src/sections/heights.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG5C,eAAO,MAAM,MAAM,EAAE,eA+CpB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"heights.js","sourceRoot":"","sources":["../../src/sections/heights.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,sCAAoE;AAE7D,IAAM,MAAM,GAAoB,UAAC,MAAM,IAAK,gBAI9C,6BAAmB,CAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,CAAC,EAE1C,2BAAiB,CAClB,QAAQ,EACR;IACE,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,EACD,IAAI,CACL,EAEE,2BAAiB,CAClB,WAAW,EACX;IACE,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,OAAO;CAChB,EACD,IAAI,CACL;IACD,iEAAkE;GAE/D,2BAAiB,CAClB,WAAW,EACX;IACE,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,MAAM;CAChB,EACD,MAAM,CACP;IACD,mEAAoE;IA9CnB,CA+ClD,CAAC;AA/CW,QAAA,MAAM,UA+CjB"}
|