shopify-accelerate-app 1.1.6 → 1.1.8

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/tailwind/tailwind-base.css +74 -74
  3. package/src/tailwind/tailwind-watch.ts +14 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shopify-accelerate-app",
3
- "version": "1.1.6",
3
+ "version": "1.1.8",
4
4
  "description": "Shopify App development with full Typescript Support",
5
5
  "author": "Felix Tellmann",
6
6
  "license": "MIT",
package/src/tailwind/tailwind-base.css CHANGED
@@ -64,82 +64,82 @@
64
64
  --radius-full: 9999px;
65
65
 
66
66
  /* ---- Font Size ---- */
67
- --font-size-8: 9px;
68
- --font-size-8--line-height: 1.55;
69
- --font-size-9: 9px;
70
- --font-size-9--line-height: 1.5;
71
- --font-size-10: 10px;
72
- --font-size-10--line-height: 1.5;
73
- --font-size-11: 11px;
74
- --font-size-11--line-height: 1.5;
75
- --font-size-12: 12px;
76
- --font-size-12--line-height: 1.5;
77
- --font-size-13: 13px;
78
- --font-size-13--line-height: 1.5;
79
- --font-size-14: 14px;
80
- --font-size-14--line-height: 1.5;
81
- --font-size-15: 15px;
82
- --font-size-15--line-height: 1.5;
83
- --font-size-16: 16px;
84
- --font-size-16--line-height: 1.5;
85
- --font-size-17: 17px;
86
- --font-size-17--line-height: 1.5;
87
- --font-size-18: 18px;
88
- --font-size-18--line-height: 1.45;
89
- --font-size-19: 19px;
90
- --font-size-19--line-height: 1.45;
91
- --font-size-20: 20px;
92
- --font-size-20--line-height: 1.45;
93
- --font-size-21: 21px;
94
- --font-size-21--line-height: 1.45;
95
- --font-size-22: 22px;
96
- --font-size-22--line-height: 1.4;
97
- --font-size-23: 23px;
98
- --font-size-23--line-height: 1.4;
99
- --font-size-24: 24px;
100
- --font-size-24--line-height: 1.4;
101
- --font-size-xs: 12px;
102
- --font-size-xs--line-height: 16px;
103
- --font-size-sm: 14px;
104
- --font-size-sm--line-height: 20px;
105
- --font-size-base: 16px;
106
- --font-size-base--line-height: 24px;
107
- --font-size-lg: 18px;
108
- --font-size-lg--line-height: 28px;
109
- --font-size-xl: 20px;
110
- --font-size-xl--line-height: 28px;
111
- --font-size-2xl: 24px;
112
- --font-size-2xl--line-height: 32px;
113
- --font-size-3xl: 30px;
114
- --font-size-3xl--line-height: 36px;
115
- --font-size-4xl: 36px;
116
- --font-size-4xl--line-height: 36px;
117
- --font-size-5xl: 48px;
118
- --font-size-5xl--line-height: 1;
119
- --font-size-6xl: 60px;
120
- --font-size-6xl--line-height: 1;
121
- --font-size-7xl: 72px;
122
- --font-size-7xl--line-height: 1;
123
- --font-size-8xl: 96px;
124
- --font-size-8xl--line-height: 1;
125
- --font-size-9xl: 144px;
126
- --font-size-9xl--line-height: 1;
67
+ --text-8: 9px;
68
+ --text-8--line-height: 1.55;
69
+ --text-9: 9px;
70
+ --text-9--line-height: 1.5;
71
+ --text-10: 10px;
72
+ --text-10--line-height: 1.5;
73
+ --text-11: 11px;
74
+ --text-11--line-height: 1.5;
75
+ --text-12: 12px;
76
+ --text-12--line-height: 1.5;
77
+ --text-13: 13px;
78
+ --text-13--line-height: 1.5;
79
+ --text-14: 14px;
80
+ --text-14--line-height: 1.5;
81
+ --text-15: 15px;
82
+ --text-15--line-height: 1.5;
83
+ --text-16: 16px;
84
+ --text-16--line-height: 1.5;
85
+ --text-17: 17px;
86
+ --text-17--line-height: 1.5;
87
+ --text-18: 18px;
88
+ --text-18--line-height: 1.45;
89
+ --text-19: 19px;
90
+ --text-19--line-height: 1.45;
91
+ --text-20: 20px;
92
+ --text-20--line-height: 1.45;
93
+ --text-21: 21px;
94
+ --text-21--line-height: 1.45;
95
+ --text-22: 22px;
96
+ --text-22--line-height: 1.4;
97
+ --text-23: 23px;
98
+ --text-23--line-height: 1.4;
99
+ --text-24: 24px;
100
+ --text-24--line-height: 1.4;
101
+ --text-xs: 12px;
102
+ --text-xs--line-height: 16px;
103
+ --text-sm: 14px;
104
+ --text-sm--line-height: 20px;
105
+ --text-base: 16px;
106
+ --text-base--line-height: 24px;
107
+ --text-lg: 18px;
108
+ --text-lg--line-height: 28px;
109
+ --text-xl: 20px;
110
+ --text-xl--line-height: 28px;
111
+ --text-2xl: 24px;
112
+ --text-2xl--line-height: 32px;
113
+ --text-3xl: 30px;
114
+ --text-3xl--line-height: 36px;
115
+ --text-4xl: 36px;
116
+ --text-4xl--line-height: 36px;
117
+ --text-5xl: 48px;
118
+ --text-5xl--line-height: 1;
119
+ --text-6xl: 60px;
120
+ --text-6xl--line-height: 1;
121
+ --text-7xl: 72px;
122
+ --text-7xl--line-height: 1;
123
+ --text-8xl: 96px;
124
+ --text-8xl--line-height: 1;
125
+ --text-9xl: 144px;
126
+ --text-9xl--line-height: 1;
127
127
 
128
128
  /* ---- Line Height ---- */
129
- --line-height-none: 1;
130
- --line-height-tight: 1.25;
131
- --line-height-snug: 1.375;
132
- --line-height-normal: 1.5;
133
- --line-height-relaxed: 1.625;
134
- --line-height-loose: 2;
135
- --line-height-3: 12px;
136
- --line-height-4: 16px;
137
- --line-height-5: 20px;
138
- --line-height-6: 24px;
139
- --line-height-7: 28px;
140
- --line-height-8: 32px;
141
- --line-height-9: 36px;
142
- --line-height-10: 40px;
129
+ --leading-none: 1;
130
+ --leading-tight: 1.25;
131
+ --leading-snug: 1.375;
132
+ --leading-normal: 1.5;
133
+ --leading-relaxed: 1.625;
134
+ --leading-loose: 2;
135
+ --leading-3: 12px;
136
+ --leading-4: 16px;
137
+ --leading-5: 20px;
138
+ --leading-6: 24px;
139
+ --leading-7: 28px;
140
+ --leading-8: 32px;
141
+ --leading-9: 36px;
142
+ --leading-10: 40px;
143
143
 
144
144
  /* ---- Columns ---- */
145
145
  --columns-auto: auto;
package/src/tailwind/tailwind-watch.ts CHANGED
@@ -18,7 +18,7 @@ const generateInputCSS = (base_css_path: string, user_css_path: string): string
18
18
  const important = process.env.SHOPIFY_ACCELERATE_TAILWIND_IMPORTANT;
19
19
 
20
20
  // Build the @import "tailwindcss" line with options
21
- // In v4, preflight is disabled by importing individual layers without preflight.css
21
+ // In v4, we import theme, preflight, and utilities as individual layers
22
22
  const tailwind_import_options: string[] = [];
23
23
  if (prefix) {
24
24
  tailwind_import_options.push(`prefix(${prefix})`);
@@ -26,11 +26,12 @@ const generateInputCSS = (base_css_path: string, user_css_path: string): string
26
26
 
27
27
  // Resolve tailwindcss paths to absolute so they work from the generated file's location
28
28
  const tw_theme_path = path.join(package_root, "node_modules/tailwindcss/theme.css").replace(/\\/g, "/");
29
+ const tw_preflight_path = path.join(package_root, "node_modules/tailwindcss/preflight.css").replace(/\\/g, "/");
29
30
  const tw_utilities_path = path.join(package_root, "node_modules/tailwindcss/utilities.css").replace(/\\/g, "/");
30
31
 
31
32
  let tailwind_import: string;
32
33
  if (important || tailwind_import_options.length > 0) {
33
- // When disabling preflight or using prefix/important, import layers individually
34
+ // When using prefix/important, import layers individually with options
34
35
  const theme_options = prefix ? ` prefix(${prefix})` : "";
35
36
  const utilities_options_parts: string[] = [];
36
37
  if (prefix) utilities_options_parts.push(`prefix(${prefix})`);
@@ -40,24 +41,27 @@ const generateInputCSS = (base_css_path: string, user_css_path: string): string
40
41
  tailwind_import = [
41
42
  `@layer theme, base, components;`,
42
43
  `@import "${tw_theme_path}" layer(theme)${theme_options} source(none);`,
43
- `/* Preflight intentionally omitted */`,
44
+ `@import "${tw_preflight_path}" layer(base) source(none);`,
44
45
  `/* Utilities are NOT in a @layer so they keep normal cascade priority (like v3) and can override other libraries */`,
45
- `@import "${tw_utilities_path}"${utilities_options} source(none);`,
46
+ `@import "${tw_utilities_path}"${utilities_options};`,
46
47
  ].join("\n");
47
48
  } else {
48
- // No prefix or important — still skip preflight
49
+ // No prefix or important — simple imports
49
50
  tailwind_import = [
50
51
  `@layer theme, base, components;`,
51
52
  `@import "${tw_theme_path}" layer(theme) source(none);`,
52
- `/* Preflight intentionally omitted */`,
53
+ `@import "${tw_preflight_path}" layer(base) source(none);`,
53
54
  `/* Utilities are NOT in a @layer so they keep normal cascade priority (like v3) and can override other libraries */`,
54
- `@import "${tw_utilities_path}" source(none);`,
55
+ `@import "${tw_utilities_path}";`,
55
56
  ].join("\n");
56
57
  }
57
58
 
58
- // Source paths for content detection
59
- const extension_path = process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH ?? "";
60
- const source_directive = extension_path ? `@source "${extension_path}/**/*.{html,liquid,js,json}";` : "";
59
+ // Source paths for content detection — resolve to absolute so they work from the generated file's location
60
+ const extension_path_raw = process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH ?? "";
61
+ const extension_path_abs = extension_path_raw ? path.resolve(root_dir, extension_path_raw).replace(/\\/g, "/") : "";
62
+ const source_directive = extension_path_abs ? `@source "${extension_path_abs}/**/*.{html,liquid,js,json}";` : "";
63
+
64
+ console.log({ source_directive });
61
65
 
62
66
  // Safelist equivalent via @source inline()
63
67
  const safelist_prefix = prefix ? `${prefix}:` : "";