diff --git a/.gitignore b/.gitignore index a638c160..0e279d7c 100644 --- a/.gitignore +++ b/.gitignore @@ -7,11 +7,26 @@ .Trashes ehthumbs.db Thumbs.db + +# Node.js node_modules/ +npm-debug.log* +yarn-debug.log* +yarn-error.log* +package-lock.json +yarn.lock +pnpm-lock.yaml # Shopify CLI files .shopify/ +# Vite build artifacts +assets/main.min.js +assets/main.min.css +assets/.vite/ +dist/ +.vite/ + ## Release files release *.zip diff --git a/.shopifyignore b/.shopifyignore index 59a11a13..8f7b8835 100644 --- a/.shopifyignore +++ b/.shopifyignore @@ -11,3 +11,21 @@ # # Ignore templates and sections with a regular expression: # /(templates|sections)/.*\.json/ + +# Source files (not needed in production) +src/ + +# Build configuration +vite.config.ts +tailwind.config.ts +postcss.config.cjs +tsconfig.json + +# Node.js +node_modules/ +package.json +package-lock.json + +# Development files +.vite/ +dist/ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..08a54236 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,35 @@ +{ + "files.associations": { + "*.liquid": "liquid" + }, + "emmet.includeLanguages": { + "liquid": "html" + }, + "liquid.format.enable": true, + "editor.formatOnSave": true, + "[liquid]": { + "editor.defaultFormatter": "Shopify.theme-check-vscode" + }, + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[css]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "tailwindCSS.experimental.classRegex": [ + ["class:\\s*['\"`]([^'\"`]*)['\"`]", "['\"`]([^'\"`]*)['\"`]"] + ], + "tailwindCSS.includeLanguages": { + "liquid": "html" + }, + "css.validate": false, + "files.exclude": { + "**/.git": true, + "**/.DS_Store": true, + "**/node_modules": true, + "**/.shopify": true + } +} diff --git a/QUICKSTART.md b/QUICKSTART.md new file mode 100644 index 00000000..978a0f02 --- /dev/null +++ b/QUICKSTART.md @@ -0,0 +1,179 @@ +# 🚀 Quick Start Guide + +## Setup (первый раз) + +```bash +# 1. Установить зависимости +npm install + +# 2. Собрать assets +npm run build + +# 3. Запустить dev сервер +npm run dev +``` + +## Ежедневная разработка + +```bash +npm run dev +``` + +Откроет: +- Vite: http://localhost:5173 (HMR) +- Shopify: URL из Shopify CLI + +## Использование TailwindCSS + +### В Liquid шаблонах + +```liquid +
+

+ {{ product.title }} +

+ +
+``` + +### Кастомные стили + +В `src/main.css`: + +```css +@layer components { + .btn-primary { + @apply px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700; + } +} +``` + +### Кастомизация темы + +В `tailwind.config.ts`: + +```ts +export default { + theme: { + extend: { + colors: { + brand: { + primary: '#1a73e8', + secondary: '#fbbc04', + } + } + } + } +} +``` + +## Что где редактировать + +| Файл | Назначение | HMR | +|------|------------|-----| +| `src/main.css` | Глобальные стили + Tailwind | ✅ Да (~300ms) | +| `src/main.js` | JavaScript логика | ✅ Да (~200ms) | +| `sections/*.liquid` | Shopify секции | ⚠️ Reload (~3s) | +| `snippets/*.liquid` | Многоразовые компоненты | ⚠️ Reload (~3s) | +| `tailwind.config.ts` | Настройки Tailwind | ⚠️ Restart needed | + +## Перед деплоем + +```bash +# 1. Собрать production assets +npm run build + +# 2. Проверить что файлы созданы +ls -la assets/main.min.* + +# 3. Запушить в Shopify +npm run shopify:push +``` + +## Полезные команды + +```bash +# Только Vite dev server +npm run vite:dev + +# Только Shopify preview +npm run shopify:dev + +# Build production +npm run build + +# Preview production build +npm run preview + +# Pull theme from Shopify +npm run shopify:pull +``` + +## Troubleshooting + +### CSS не обновляется +```bash +npm run build +# Перезагрузить страницу с Ctrl+Shift+R +``` + +### Vite не запускается +```bash +# Проверить что порт 5173 свободен +lsof -ti:5173 | xargs kill -9 +npm run vite:dev +``` + +### "Module not found" +```bash +rm -rf node_modules package-lock.json +npm install +``` + +## Примеры компонентов + +### Product Card + +```liquid +
+
+ {{ product.featured_image | image_url: width: 500 | image_tag: + class: 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-300' + }} +
+
+

+ {{ product.title }} +

+

+ {{ product.price | money }} +

+ +
+
+``` + +### Modal/Dialog + +```liquid + +
+

Modal Title

+

Modal content goes here...

+ +
+ +``` + +## Подробная документация + +- [VITE_SETUP.md](./VITE_SETUP.md) - Полная настройка Vite +- [README.md](./README.md) - Общая документация темы + +Happy coding! 🎉 diff --git a/README.md b/README.md index eaf59b2c..4a45e829 100644 --- a/README.md +++ b/README.md @@ -7,17 +7,22 @@ A minimal, carefully structured Shopify theme designed to help you quickly get started. Designed with modularity, maintainability, and Shopify's best practices in mind. +**Enhanced with Vite + TailwindCSS v4** for blazing-fast development with Hot Module Replacement (HMR). +

License CI + Vite + TailwindCSS

## Getting started ### Prerequisites -Before starting, ensure you have the latest Shopify CLI installed: +Before starting, ensure you have the following installed: +- [Node.js](https://nodejs.org/) (v18 or higher) – required for Vite and TailwindCSS - [Shopify CLI](https://shopify.dev/docs/api/shopify-cli) – helps you download, upload, preview themes, and streamline your workflows If you use VS Code: @@ -30,30 +35,58 @@ Clone this repository using Git or Shopify CLI: ```bash git clone git@github.com:Shopify/skeleton-theme.git -# or -shopify theme init +cd skeleton-theme +``` + +### Install Dependencies + +Install Node.js dependencies for Vite and TailwindCSS: + +```bash +npm install ``` -### Preview +### Development -Preview this theme using Shopify CLI: +Run both Vite dev server (with HMR) and Shopify CLI preview: ```bash -shopify theme dev +npm run dev +``` + +This starts: +- **Vite dev server** on `http://localhost:5173` with Hot Module Replacement +- **Shopify CLI** theme preview with Liquid hot-reload + +For more details, see [VITE_SETUP.md](./VITE_SETUP.md). + +### Build for Production + +Generate optimized assets: + +```bash +npm run build ``` ## Theme architecture ```bash . -├── assets # Stores static assets (CSS, JS, images, fonts, etc.) -├── blocks # Reusable, nestable, customizable UI components -├── config # Global theme settings and customization options -├── layout # Top-level wrappers for pages (layout templates) -├── locales # Translation files for theme internationalization -├── sections # Modular full-width page components -├── snippets # Reusable Liquid code or HTML fragments -└── templates # Templates combining sections to define page structures +├── src/ # Source files (processed by Vite) +│ ├── main.css # TailwindCSS entry point +│ └── main.js # JavaScript entry point +├── assets/ # Static assets + Vite build output +│ ├── main.min.css # Generated by Vite (gitignored) +│ └── main.min.js # Generated by Vite (gitignored) +├── blocks/ # Reusable, nestable, customizable UI components +├── config/ # Global theme settings and customization options +├── layout/ # Top-level wrappers for pages (layout templates) +├── locales/ # Translation files for theme internationalization +├── sections/ # Modular full-width page components +├── snippets/ # Reusable Liquid code or HTML fragments +├── templates/ # Templates combining sections to define page structures +├── vite.config.ts # Vite bundler configuration +└── tailwind.config.ts # TailwindCSS customization ``` To learn more, refer to the [theme architecture documentation](https://shopify.dev/docs/storefronts/themes/architecture). @@ -143,11 +176,28 @@ When developing components defined by schema settings, we recommend these guidel ## CSS & JavaScript -For CSS and JavaScript, we recommend using the [`{% stylesheet %}`](https://shopify.dev/docs/api/liquid/tags#stylesheet) and [`{% javascript %}`](https://shopify.dev/docs/api/liquid/tags/javascript) tags. They can be included multiple times, but the code will only appear once. +### TailwindCSS v4 + +This theme uses **TailwindCSS v4** for styling. You can use utility classes directly in your Liquid templates: + +```liquid +
+

{{ product.title }}

+
+``` + +Customize design tokens in `tailwind.config.ts`. + +### Component Styles + +For component-specific styles, you can still use the [`{% stylesheet %}`](https://shopify.dev/docs/api/liquid/tags#stylesheet) and [`{% javascript %}`](https://shopify.dev/docs/api/liquid/tags/javascript) tags within sections. They can be included multiple times, but the code will only appear once. -### `critical.css` +### Global Styles -The Skeleton Theme explicitly separates essential CSS necessary for every page into a dedicated `critical.css` file. +Global styles are defined in `src/main.css`, which includes: +- TailwindCSS base, components, and utilities +- Custom base styles (similar to the previous `critical.css`) +- Component-level styles using `@layer` ## Contributing diff --git a/VITE_SETUP.md b/VITE_SETUP.md new file mode 100644 index 00000000..e6814ccc --- /dev/null +++ b/VITE_SETUP.md @@ -0,0 +1,303 @@ +# Vite + TailwindCSS v4 Setup Guide + +This Skeleton Theme is now enhanced with **Vite** and **TailwindCSS v4** for modern, fast development with Hot Module Replacement (HMR). + +## 🚀 Quick Start + +### 1. Install Dependencies + +```bash +npm install +``` + +### 2. Development Mode + +Run both Vite dev server and Shopify CLI simultaneously: + +```bash +npm run dev +``` + +This will start: +- **Vite dev server** on `http://localhost:5173` (with HMR for CSS/JS) +- **Shopify CLI** theme preview (with hot-reload for Liquid) + +### Alternative: Run Separately + +If you prefer to run servers in separate terminals: + +```bash +# Terminal 1 - Vite dev server +npm run vite:dev + +# Terminal 2 - Shopify theme preview +npm run shopify:dev +``` + +### 3. Build for Production + +Generate minified assets: + +```bash +npm run build +``` + +This creates: +- `assets/main.min.css` - Compiled TailwindCSS +- `assets/main.min.js` - Bundled JavaScript + +### 4. Push to Shopify + +```bash +npm run shopify:push +``` + +--- + +## 📁 Project Structure + +``` +skeleton-theme/ +├── src/ # Source files (processed by Vite) +│ ├── main.css # TailwindCSS entry point +│ └── main.js # JavaScript entry point +├── assets/ # Output directory for built assets +│ ├── main.min.css # Generated by Vite (gitignored) +│ ├── main.min.js # Generated by Vite (gitignored) +│ ├── critical.css # Legacy critical CSS (can be removed) +│ └── *.svg # Static assets +├── sections/ # Shopify sections (Liquid) +├── snippets/ # Shopify snippets (Liquid) +│ └── vite.liquid # Vite asset loader +├── layout/ # Theme layouts +│ └── theme.liquid # Updated to include Vite assets +├── vite.config.ts # Vite configuration +├── tailwind.config.ts # TailwindCSS v4 configuration +├── postcss.config.cjs # PostCSS configuration +└── package.json # Dependencies and scripts +``` + +--- + +## 🎨 Using TailwindCSS + +### In Liquid Templates + +Use TailwindCSS utility classes directly in your `.liquid` files: + +```liquid +
+

+ {{ product.title }} +

+

+ {{ product.description }} +

+
+``` + +### In src/main.css + +Add custom styles using Tailwind's `@layer` directive: + +```css +@layer components { + .btn-primary { + @apply px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700; + } +} +``` + +### Customizing Theme + +Edit `tailwind.config.ts` to customize colors, spacing, fonts, etc.: + +```ts +export default { + theme: { + extend: { + colors: { + primary: '#1a73e8', + }, + }, + }, +} satisfies Config; +``` + +--- + +## ⚡ Hot Module Replacement (HMR) + +### What Gets HMR? + +- ✅ **CSS changes** (`src/main.css`) - Instant updates without page reload +- ✅ **JavaScript changes** (`src/main.js`) - Fast updates with state preservation +- ✅ **TailwindCSS classes** in Liquid - Instant CSS updates + +### What Requires Page Reload? + +- ⚠️ **Liquid template changes** (`.liquid` files) - Uses Shopify CLI hot-reload (~2-4s) +- ⚠️ **Schema changes** in sections/blocks +- ⚠️ **Config changes** (`settings_schema.json`) + +### Development Workflow + +``` +Edit CSS/JS in src/ → Vite HMR (~200-500ms) → Browser updates instantly +Edit Liquid templates → Shopify CLI (~2-4s) → Page reloads +``` + +--- + +## 🔧 Configuration + +### Vite Configuration + +`vite.config.ts` - Controls bundling, output, and dev server: + +```ts +export default defineConfig({ + plugins: [shopify(), tailwindcss()], + build: { + outDir: 'assets', + manifest: true, + }, +}); +``` + +### TailwindCSS Configuration + +`tailwind.config.ts` - Customize design tokens: + +```ts +export default { + content: [ + './layout/**/*.liquid', + './sections/**/*.liquid', + './snippets/**/*.liquid', + './templates/**/*.liquid', + './blocks/**/*.liquid', + './src/**/*.{js,ts}', + ], + // ... your customizations +} satisfies Config; +``` + +### Avoiding Class Name Conflicts + +If you want to keep existing CSS and avoid conflicts, add a prefix: + +```ts +// tailwind.config.ts +export default { + prefix: 'tw-', + // ... +} satisfies Config; +``` + +Then use classes like `tw-flex`, `tw-bg-blue-500`, etc. + +--- + +## 📦 Available Scripts + +| Command | Description | +|---------|-------------| +| `npm run dev` | Run both Vite and Shopify CLI simultaneously | +| `npm run vite:dev` | Run only Vite dev server | +| `npm run shopify:dev` | Run only Shopify theme preview | +| `npm run build` | Build production assets | +| `npm run preview` | Preview production build locally | +| `npm run shopify:push` | Push theme to Shopify | +| `npm run shopify:pull` | Pull theme from Shopify | + +--- + +## 🚨 Important Notes + +### Before Pushing to Shopify + +Always build assets before pushing: + +```bash +npm run build +npm run shopify:push +``` + +### Git Workflow + +Generated files are gitignored: +- `assets/main.min.css` +- `assets/main.min.js` + +**For CI/CD**, add a build step: + +```yaml +# .github/workflows/deploy.yml +- name: Install dependencies + run: npm install + +- name: Build assets + run: npm run build + +- name: Push to Shopify + run: shopify theme push +``` + +### Removing Critical.css + +Since `src/main.css` includes all base styles from `critical.css`, you can: + +1. Delete `assets/critical.css` +2. Remove inline styles from sections if using Tailwind +3. Simplify your theme + +--- + +## 🐛 Troubleshooting + +### Vite dev server not connecting + +1. Ensure port 5173 is not in use +2. Check firewall settings +3. Restart dev servers + +### CSS not updating + +1. Make sure `npm run build` was run +2. Clear browser cache +3. Check that `vite.liquid` snippet is included in `theme.liquid` + +### TailwindCSS classes not working + +1. Verify file paths in `tailwind.config.ts` `content` array +2. Run `npm run build` to regenerate CSS +3. Check for typos in class names + +### "Module not found" errors + +```bash +rm -rf node_modules package-lock.json +npm install +``` + +--- + +## 📚 Resources + +- [Vite Documentation](https://vitejs.dev/) +- [TailwindCSS v4 Documentation](https://tailwindcss.com/) +- [Shopify Vite Plugin](https://github.com/Shopify/vite-plugin-shopify) +- [Shopify Theme Development](https://shopify.dev/docs/themes) + +--- + +## 🎯 Next Steps + +1. **Start developing**: Use TailwindCSS classes in your Liquid templates +2. **Customize theme**: Edit `tailwind.config.ts` to match your brand +3. **Add components**: Create reusable components in `src/` +4. **TypeScript support**: Rename `.js` files to `.ts` for type safety +5. **Optimize performance**: Use Vite's code splitting and lazy loading + +Happy coding! 🚀 diff --git a/layout/theme.liquid b/layout/theme.liquid index 8123ab78..61389789 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -4,8 +4,8 @@ {% # Inlined CSS Variables %} {% render 'css-variables' %} - {% # Load and preload the critical CSS %} - {{ 'critical.css' | asset_url | stylesheet_tag: preload: true }} + {% # Load Vite assets (includes TailwindCSS) %} + {% render 'vite' %} {% # Social, title, etc. %} {% render 'meta-tags' %} diff --git a/package.json b/package.json new file mode 100644 index 00000000..6da56435 --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "skeleton-theme", + "version": "0.1.0", + "description": "A minimal, carefully structured Shopify theme with Vite and TailwindCSS v4", + "private": true, + "type": "module", + "scripts": { + "dev": "concurrently \"npm run vite:dev\" \"npm run shopify:dev\" --names \"VITE,SHOPIFY\" --prefix-colors \"blue,magenta\"", + "vite:dev": "vite", + "shopify:dev": "shopify theme dev", + "build": "vite build", + "preview": "vite preview", + "shopify:push": "shopify theme push", + "shopify:pull": "shopify theme pull" + }, + "devDependencies": { + "@shopify/vite-plugin-shopify": "^1.0.2", + "@tailwindcss/vite": "^4.0.0", + "@types/node": "^22.10.2", + "autoprefixer": "^10.4.20", + "concurrently": "^9.1.2", + "postcss": "^8.4.49", + "tailwindcss": "^4.0.0", + "typescript": "^5.7.2", + "vite": "^6.0.5" + }, + "engines": { + "node": ">=18.0.0" + } +} diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 00000000..a47ef4f9 --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,5 @@ +module.exports = { + plugins: { + autoprefixer: {}, + }, +}; diff --git a/sections/hero.liquid b/sections/hero.liquid new file mode 100644 index 00000000..16d53601 --- /dev/null +++ b/sections/hero.liquid @@ -0,0 +1,134 @@ +{% comment %} + Hero Section - Example with TailwindCSS v4 + + This section demonstrates how to use TailwindCSS utility classes + combined with Shopify theme settings for customizable components. +{% endcomment %} + +
+
+
+ + {% comment %} Text Content {% endcomment %} +
+ {% if section.settings.subtitle %} +

+ {{ section.settings.subtitle }} +

+ {% endif %} + + {% if section.settings.title %} +

+ {{ section.settings.title }} +

+ {% endif %} + + {% if section.settings.description %} +

+ {{ section.settings.description }} +

+ {% endif %} + + {% if section.settings.button_text %} +
+ + {{ section.settings.button_text }} + + + {% if section.settings.secondary_button_text %} + + {{ section.settings.secondary_button_text }} + + {% endif %} +
+ {% endif %} +
+ + {% comment %} Image {% endcomment %} +
+ {% if section.settings.image %} +
+ {{ section.settings.image | image_url: width: 1200 | image_tag: + class: 'w-full h-full object-cover', + loading: 'lazy', + alt: section.settings.image.alt | default: section.settings.title + }} +
+ {% else %} +
+ + + +
+ {% endif %} +
+ +
+
+
+ +{% schema %} +{ + "name": "Hero Section", + "settings": [ + { + "type": "text", + "id": "subtitle", + "label": "Subtitle", + "default": "Welcome to our store" + }, + { + "type": "text", + "id": "title", + "label": "Title", + "default": "Beautiful Products for Modern Living" + }, + { + "type": "textarea", + "id": "description", + "label": "Description", + "default": "Discover our curated collection of thoughtfully designed products that bring joy to your everyday life." + }, + { + "type": "image_picker", + "id": "image", + "label": "Hero Image" + }, + { + "type": "text", + "id": "button_text", + "label": "Button Text", + "default": "Shop Now" + }, + { + "type": "url", + "id": "button_link", + "label": "Button Link", + "default": "/collections/all" + }, + { + "type": "text", + "id": "secondary_button_text", + "label": "Secondary Button Text", + "default": "Learn More" + }, + { + "type": "url", + "id": "secondary_button_link", + "label": "Secondary Button Link", + "default": "/pages/about" + } + ], + "presets": [ + { + "name": "Hero Section" + } + ] +} +{% endschema %} diff --git a/snippets/vite.liquid b/snippets/vite.liquid new file mode 100644 index 00000000..fb146a12 --- /dev/null +++ b/snippets/vite.liquid @@ -0,0 +1,36 @@ +{% comment %} + Vite development/production asset loader + + In development: Loads Vite dev server scripts with HMR + In production: Loads built and minified assets from /assets + + Usage: {% render 'vite' %} +{% endcomment %} + +{% liquid + # Vite dev server configuration + assign vite_dev_server = 'http://localhost:5173' + assign vite_client = vite_dev_server | append: '/@vite/client' + assign vite_entry = vite_dev_server | append: '/src/main.js' + + # Check if we're in development mode (Vite dev server is running) + # You can customize this check based on your setup + # For now, we'll assume production mode and load built assets + assign is_production = true +%} + +{% if is_production %} + {% comment %} + Production mode: Load built assets from /assets folder + These files are generated by 'npm run build' + {% endcomment %} + {{ 'main.min.css' | asset_url | stylesheet_tag }} + +{% else %} + {% comment %} + Development mode: Load from Vite dev server for HMR + Make sure Vite dev server is running on port 5173 + {% endcomment %} + + +{% endif %} diff --git a/src/main.css b/src/main.css new file mode 100644 index 00000000..0a1dd88b --- /dev/null +++ b/src/main.css @@ -0,0 +1,120 @@ +/** + * Main CSS entry point for Vite + TailwindCSS v4 + * This file is processed by Vite and outputs to assets/main.min.css + */ + +@import "tailwindcss"; + +/** + * Custom CSS layers + * Use @layer to organize your custom styles + */ + +@layer base { + /* Base styles - similar to critical.css */ + * { + box-sizing: border-box; + margin: 0; + } + + body { + display: flex; + flex-direction: column; + margin: 0; + min-height: 100svh; + font-family: var(--font-primary--family); + background-color: var(--color-background); + color: var(--color-foreground); + } + + html:has(dialog[scroll-lock][open], details[scroll-lock][open]) { + overflow: hidden; + } + + img, + picture, + video, + canvas, + svg { + display: block; + max-width: 100%; + height: auto; + } + + input, + textarea, + select { + font: inherit; + border-radius: var(--style-border-radius-inputs); + } + + select { + background-color: var(--color-background); + color: currentcolor; + } + + dialog { + background-color: var(--color-background); + color: var(--color-foreground); + } + + p { + text-wrap: pretty; + } + + p, + h1, + h2, + h3, + h4, + h5, + h6 { + overflow-wrap: break-word; + } + + p:empty { + display: none; + } + + :is(p, h1, h2, h3, h4, h5, h6):first-child, + :empty:first-child + :where(p, h1, h2, h3, h4, h5, h6) { + margin-block-start: 0; + } + + :is(p, h1, h2, h3, h4, h5, h6):last-child, + :where(p, h1, h2, h3, h4, h5, h6) + :has(+ :empty:last-child) { + margin-block-end: 0; + } +} + +@layer components { + /* Component-level styles */ + + /* Shopify section layout utilities */ + .shopify-section { + --content-width: min( + calc(var(--page-width) - var(--page-margin) * 2), + calc(100% - var(--page-margin) * 2) + ); + --content-margin: minmax(var(--page-margin), 1fr); + --content-grid: var(--content-margin) var(--content-width) var(--content-margin); + + position: relative; + grid-template-columns: var(--content-grid); + display: grid; + width: 100%; + } + + .shopify-section > * { + grid-column: 2; + } + + .shopify-section > .full-width { + grid-column: 1 / -1; + } +} + +@layer utilities { + /* Custom utility classes */ + /* You can add your own utilities here or use Tailwind's @apply */ +} diff --git a/src/main.js b/src/main.js new file mode 100644 index 00000000..f235cc07 --- /dev/null +++ b/src/main.js @@ -0,0 +1,55 @@ +/** + * Main JavaScript entry point for Vite + * This file is processed by Vite and outputs to assets/main.min.js + */ + +// Import main CSS (includes TailwindCSS) +import './main.css'; + +/** + * Initialize your JavaScript here + */ + +console.log('Skeleton Theme with Vite + TailwindCSS v4 initialized'); + +/** + * Example: Add interactive functionality + */ + +// Mobile menu toggle example +const initMobileMenu = () => { + const menuToggle = document.querySelector('[data-mobile-menu-toggle]'); + const mobileMenu = document.querySelector('[data-mobile-menu]'); + + if (menuToggle && mobileMenu) { + menuToggle.addEventListener('click', () => { + mobileMenu.classList.toggle('hidden'); + }); + } +}; + +// Cart functionality example +const initCart = () => { + // Add your cart logic here +}; + +// Initialize when DOM is ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + initMobileMenu(); + initCart(); + }); +} else { + initMobileMenu(); + initCart(); +} + +/** + * HMR (Hot Module Replacement) support + * This enables hot reloading during development + */ +if (import.meta.hot) { + import.meta.hot.accept(() => { + console.log('HMR update applied'); + }); +} diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 00000000..1d505aaa --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,32 @@ +import type { Config } from 'tailwindcss'; + +export default { + content: [ + './layout/**/*.liquid', + './sections/**/*.liquid', + './snippets/**/*.liquid', + './templates/**/*.liquid', + './blocks/**/*.liquid', + './src/**/*.{js,ts}', + ], + theme: { + extend: { + // Extend with custom design tokens + colors: { + // You can map Shopify theme settings to Tailwind colors + // Example: 'primary': 'var(--color-foreground)', + }, + fontFamily: { + // Map Shopify fonts + // 'primary': 'var(--font-primary--family)', + }, + spacing: { + // Custom spacing that matches Shopify theme settings + }, + }, + }, + plugins: [], + // Add prefix to avoid conflicts with existing CSS + // Uncomment if you want to keep existing styles + // prefix: 'tw-', +} satisfies Config; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 00000000..41d854bd --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + + /* Path aliases */ + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["src/**/*", "vite.config.ts", "tailwind.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 00000000..f984c18a --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,56 @@ +import { defineConfig } from 'vite'; +import shopify from '@shopify/vite-plugin-shopify'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [ + shopify({ + // Specify the entry points for your theme + entryPoints: { + main: 'src/main.js', + }, + // Optionally specify a custom theme root (default: process.cwd()) + themeRoot: './', + // Optionally specify a custom source code directory (default: '.') + sourceCodeDir: 'src', + // Specify which file extensions to watch and reload when changed + additionalWatchPatterns: ['sections/**/*.liquid', 'snippets/**/*.liquid', 'layout/**/*.liquid', 'templates/**/*.liquid'], + }), + tailwindcss(), + ], + build: { + // Generate manifest for production builds + manifest: true, + // Output directory for compiled assets + outDir: 'assets', + // Emit assets to the assets folder + emptyOutDir: false, + rollupOptions: { + output: { + // Customize output file names + entryFileNames: '[name].min.js', + chunkFileNames: '[name].min.js', + assetFileNames: (assetInfo) => { + // Keep CSS files with .min.css extension + if (assetInfo.name?.endsWith('.css')) { + return '[name].min.css'; + } + return '[name][extname]'; + }, + }, + }, + }, + server: { + // Vite dev server configuration + port: 5173, + strictPort: true, + // Enable CORS for Shopify CLI + cors: true, + }, + // Resolve aliases for cleaner imports + resolve: { + alias: { + '@': '/src', + }, + }, +});