1 | import { code, md } from '@kalamazoo/docs';
|
2 |
|
3 | export default md`
|
4 | ## Migrate from @kalamazoo/util-shared-styles
|
5 |
|
6 | ### Reasons to migrate
|
7 |
|
8 | 1. The @kalamazoo/util-shared-styles package is now unmaintained and will not represent the ADG styles.
|
9 | 2. Feature requests are not accepted for @kalamazoo/util-shared-styles anymore.
|
10 | 3. The @kalamazoo/theme package is the source of truth for ADG styling.
|
11 |
|
12 |
|
13 | ### Following the guide
|
14 |
|
15 | Keeping up with value *Be the change you seek* we migrated all the core packages and css-packs. While migrating these
|
16 | package we came up with two migration paths. One is for the usage of util-shared-styles as css-in-js solution
|
17 | and other is for usage in less files.
|
18 |
|
19 | ### Migrating the CSS-IN-JS styles
|
20 |
|
21 | In util-shared-styles we used to style the component as follows:
|
22 |
|
23 | ${code`
|
24 | import styled from 'styled-components';
|
25 | import { akGridSizeUnitless } from '@kalamazoo/util-shared-styles';
|
26 |
|
27 | const Header = styled.h1\`
|
28 | margin-right: \${akGridSizeUnitless * 4} px;
|
29 | \`;
|
30 | `}
|
31 |
|
32 | The above style can be written with the theme package as:
|
33 |
|
34 | ${code`
|
35 | import styled from 'styled-components';
|
36 | import { gridSize } from '@kalamazoo/theme';
|
37 |
|
38 | const Header = styled.h1\`
|
39 | margin-right: \${gridSize() * 4}px;
|
40 | \`;
|
41 | `}
|
42 |
|
43 | We have a code mod that will replace all the usage of util-shared-styles with theme in the javascript files.
|
44 | Please see [codemod-util-shared-styles-to-theme](https:
|
45 | and go through readme for details.
|
46 |
|
47 | ### Migrating the less styles
|
48 |
|
49 | With the existing tooling we cannot consume the @kalamazoo/theme package in less files. Therefore, building
|
50 | our own tools was the only option.
|
51 |
|
52 | We have build tools that can generate static styles from JS at build time. Since we are headed in css-in-js
|
53 | direction this is the best bet. Please see [evaluate-inner-styles](https:
|
54 | and go through readme for details.
|
55 |
|
56 | In util-shared-styles we used to create styles in less files as follows:
|
57 |
|
58 | ${code`
|
59 | // styles.less
|
60 | @import '../node_modules/@kalamazoo/util-shared-styles/src/grid.less';
|
61 |
|
62 | .header{
|
63 | margin-right: (@ak-grid-size * 1.5)
|
64 | }
|
65 | `}
|
66 |
|
67 | The above styles can be written in js files using theme package as:
|
68 |
|
69 | ${code`
|
70 | // styles.js
|
71 | import evaluateInner from 'evaluate-inner-styles';
|
72 | import { gridSize } from '@kalamazoo/theme';
|
73 |
|
74 | export default evaluateInnerStyles()\`
|
75 | .header: {
|
76 | margin-right: \${gridSize() * 1.5}px;
|
77 | }
|
78 | \`
|
79 | `}
|
80 |
|
81 | Additionally, in less we use the less compiler to compile the less styles as follows:
|
82 |
|
83 | ${code`
|
84 | lessc styles.less styles.css
|
85 | `}
|
86 |
|
87 | The above functionality can be achieved using the following script:
|
88 |
|
89 | ${code`
|
90 | // Get the default exported styles from styles.js
|
91 | import styleSheet from '../styles';
|
92 |
|
93 | // Write the styles to styles.css on disk
|
94 | await writeFile(path.join(DIST, 'styles.css'), styleSheet);
|
95 | `}
|
96 |
|
97 | ***( This is just the structure, please see [css-reset/js-to-css.js](https:
|
98 | for a working implementation )***
|
99 | `;
|
100 |
|
\ | No newline at end of file |