@umoa/saascfm-css 0.1.1 → 0.1.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/README.md +4 -4
- package/package.json +1 -1
- package/templates/js/saascfm-css/RULES.md +2 -2
- package/templates/js/saascfm-css/_component.tokens.js +5 -5
- package/templates/js/saascfm-css/tokens/border.tokens.js +1 -1
- package/templates/js/saascfm-css/tokens/navigation.tokens.js +1 -1
- package/templates/js/saascfm-css/tokens/status.tokens.js +1 -1
- package/templates/js/saascfm-css/tokens/surface.tokens.js +1 -1
- package/templates/ts/saascfm-css/RULES.md +2 -2
- package/templates/ts/saascfm-css/_component.tokens.ts +5 -5
- package/templates/ts/saascfm-css/tokens/border.tokens.ts +1 -1
- package/templates/ts/saascfm-css/tokens/navigation.tokens.ts +1 -1
- package/templates/ts/saascfm-css/tokens/status.tokens.ts +1 -1
- package/templates/ts/saascfm-css/tokens/surface.tokens.ts +1 -1
package/README.md
CHANGED
|
@@ -8,12 +8,12 @@ Vite plugin that scans your source and generates only the utility classes you us
|
|
|
8
8
|
npm i -D @umoa/saascfm-css
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
Works with TypeScript or plain JavaScript.
|
|
11
|
+
Works with TypeScript or plain JavaScript. If you are not on TypeScript, use `vite.config.js`, the `js` template (import it with `.js`) and `main.js`, and set `"type": "module"` in your `package.json`. The package ships ESM and CommonJS, so it loads whether or not your `package.json` has `"type": "module"`.
|
|
12
12
|
|
|
13
13
|
```js
|
|
14
14
|
// vite.config.js (or .ts)
|
|
15
15
|
import cssModule from '@umoa/saascfm-css'
|
|
16
|
-
import * as colors from './src/saascfm-css/_component.tokens'
|
|
16
|
+
import * as colors from './src/saascfm-css/_component.tokens.ts'
|
|
17
17
|
|
|
18
18
|
export default defineConfig({
|
|
19
19
|
plugins: [cssModule({ colorsModule: colors })],
|
|
@@ -64,10 +64,10 @@ src/saascfm-css/
|
|
|
64
64
|
RULES.md how the folder works, adding tokens, migrating
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
-
Then point the plugin at it
|
|
67
|
+
Then point the plugin at it. Use the file extension (`.ts` or `.js`); Vite 8's native config loader requires it. In TypeScript projects, `allowImportingTsExtensions` must be enabled in the `tsconfig` that covers `vite.config.ts`.
|
|
68
68
|
|
|
69
69
|
```ts
|
|
70
|
-
import * as colors from './src/saascfm-css/_component.tokens'
|
|
70
|
+
import * as colors from './src/saascfm-css/_component.tokens.ts'
|
|
71
71
|
|
|
72
72
|
plugins: [cssModule({ colorsModule: colors })]
|
|
73
73
|
```
|
package/package.json
CHANGED
|
@@ -19,7 +19,7 @@ The folder belongs to your app. The plugin never imports it by path; you pass `_
|
|
|
19
19
|
|
|
20
20
|
```ts
|
|
21
21
|
import cssModule from '@umoa/saascfm-css'
|
|
22
|
-
import * as colors from './src/saascfm-css/_component.tokens'
|
|
22
|
+
import * as colors from './src/saascfm-css/_component.tokens.js'
|
|
23
23
|
|
|
24
24
|
plugins: [cssModule({ colorsModule: colors })]
|
|
25
25
|
```
|
|
@@ -89,7 +89,7 @@ A token value can be a primitive (`P['neutral-900']`), a primitive name as a str
|
|
|
89
89
|
## Adding a token file
|
|
90
90
|
|
|
91
91
|
1. Create `tokens/my-feature.tokens.js`
|
|
92
|
-
2. `import { PRIMITIVES as P } from '../primitives'`
|
|
92
|
+
2. `import { PRIMITIVES as P } from '../primitives.js'`
|
|
93
93
|
3. `export const MY_FEATURE_TOKENS = { 'bg-banner': P['brand-50'] }`
|
|
94
94
|
4. Import it in `_component.tokens.js` and spread it into `TOKENS`
|
|
95
95
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { NAVIGATION_TOKENS } from './tokens/navigation.tokens'
|
|
2
|
-
import { STATUS_TOKENS } from './tokens/status.tokens'
|
|
3
|
-
import { SURFACE_TOKENS } from './tokens/surface.tokens'
|
|
4
|
-
import { BORDER_TOKENS } from './tokens/border.tokens'
|
|
1
|
+
import { NAVIGATION_TOKENS } from './tokens/navigation.tokens.js'
|
|
2
|
+
import { STATUS_TOKENS } from './tokens/status.tokens.js'
|
|
3
|
+
import { SURFACE_TOKENS } from './tokens/surface.tokens.js'
|
|
4
|
+
import { BORDER_TOKENS } from './tokens/border.tokens.js'
|
|
5
5
|
|
|
6
|
-
import { PRIMITIVES } from './primitives'
|
|
6
|
+
import { PRIMITIVES } from './primitives.js'
|
|
7
7
|
|
|
8
8
|
export const TOKENS = {
|
|
9
9
|
...NAVIGATION_TOKENS,
|
|
@@ -19,7 +19,7 @@ The folder belongs to your app. The plugin never imports it by path; you pass `_
|
|
|
19
19
|
|
|
20
20
|
```ts
|
|
21
21
|
import cssModule from '@umoa/saascfm-css'
|
|
22
|
-
import * as colors from './src/saascfm-css/_component.tokens'
|
|
22
|
+
import * as colors from './src/saascfm-css/_component.tokens.ts'
|
|
23
23
|
|
|
24
24
|
plugins: [cssModule({ colorsModule: colors })]
|
|
25
25
|
```
|
|
@@ -89,7 +89,7 @@ A token value can be a primitive (`P['neutral-900']`), a primitive name as a str
|
|
|
89
89
|
## Adding a token file
|
|
90
90
|
|
|
91
91
|
1. Create `tokens/my-feature.tokens.ts`
|
|
92
|
-
2. `import { PRIMITIVES as P } from '../primitives'`
|
|
92
|
+
2. `import { PRIMITIVES as P } from '../primitives.ts'`
|
|
93
93
|
3. `export const MY_FEATURE_TOKENS = { 'bg-banner': P['brand-50'] }`
|
|
94
94
|
4. Import it in `_component.tokens.ts` and spread it into `TOKENS`
|
|
95
95
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { NAVIGATION_TOKENS } from './tokens/navigation.tokens'
|
|
2
|
-
import { STATUS_TOKENS } from './tokens/status.tokens'
|
|
3
|
-
import { SURFACE_TOKENS } from './tokens/surface.tokens'
|
|
4
|
-
import { BORDER_TOKENS } from './tokens/border.tokens'
|
|
1
|
+
import { NAVIGATION_TOKENS } from './tokens/navigation.tokens.ts'
|
|
2
|
+
import { STATUS_TOKENS } from './tokens/status.tokens.ts'
|
|
3
|
+
import { SURFACE_TOKENS } from './tokens/surface.tokens.ts'
|
|
4
|
+
import { BORDER_TOKENS } from './tokens/border.tokens.ts'
|
|
5
5
|
|
|
6
|
-
import { PRIMITIVES } from './primitives'
|
|
6
|
+
import { PRIMITIVES } from './primitives.ts'
|
|
7
7
|
|
|
8
8
|
export const TOKENS = {
|
|
9
9
|
...NAVIGATION_TOKENS,
|