Update preset (#171)

Author: montalvomiguelo

docs/guide/index.md

@@ -15,6 +15,13 @@ The recommended and most straightforward approach to get started with Shopify Vi
 npx @preset/cli apply barrel/shopify-vite --path preset
 ```
 
+The preset automatically sets up Vite and Tailwind CSS in your theme. You may add any of the following flags to customize the preset:
+
+| Flag                | Description                                                            |
+| ------------------- | ---------------------------------------------------------------------- |
+| `--no-base`         | Skip installing Vite                                                   |
+| `--no-tailwindcss`  | Skip installing Tailwind CSS                                           |
+
 More information about the preset can be found on its [repository](https://github.com/barrel/shopify-vite/tree/main/preset).
 
 ::: info

preset/package.json

@@ -8,7 +8,7 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@preset/core": "^0.11.0",
+    "@preset/core": "^0.11.3",
     "@types/node": "^18.15.3",
     "tsconfig": "workspace:*"
   }

preset/preset.ts

@@ -90,39 +90,41 @@ async function installTailwind (): Promise<void> {
   await installPackages({
     title: 'install Tailwind CSS',
     for: 'node',
-    install: ['tailwindcss', 'autoprefixer', 'postcss'],
+    install: ['tailwindcss', '@tailwindcss/vite'],
     dev: true
   })
 
   await group({
     title: 'extract Tailwind scaffolding',
     handler: async () => {
-      await extractTemplates({
-        title: 'extract Tailwind CSS config',
-        from: 'tailwind'
-      })
-
       await editFiles({
-        title: 'remove placeholder CSS',
+        title: 'add Tailwind CSS imports',
         files: 'frontend/entrypoints/main.css',
         operations: [
-          { type: 'remove-line', match: /charset/ }
+          {
+            skipIf: (content) => content.includes('tailwind'),
+            type: 'update-content',
+            update: (content) => content.replace('@charset "utf-8";', '@import "tailwindcss" source("../..");')
+          }
         ]
       })
 
       await editFiles({
-        title: 'add Tailwind CSS imports',
-        files: 'frontend/entrypoints/main.css',
+        title: 'register Tailwind CSS plugin',
+        files: 'vite.config.js',
         operations: [
           {
-            skipIf: (content) => content.includes('tailwind'),
+            skipIf: (content) => content.includes('import tailwindcss from \'@tailwindcss/vite\''),
             type: 'add-line',
+            match: /import shopify from 'vite-plugin-shopify'/,
+            position: 'after',
             lines: [
-              '@tailwind base;',
-              '@tailwind components;',
-              '@tailwind utilities;'
-            ],
-            position: 'prepend'
+              'import tailwindcss from \'@tailwindcss/vite\''
+            ]
+          },
+          {
+            type: 'update-content',
+            update: (content) => content.replace('shopify()', 'shopify(),\n    tailwindcss()')
           }
         ]
       })

preset/templates/default/.shopifyignore

@@ -1,17 +1 @@
-package.json
-jsconfig.json
-package-lock.json
-frontend/
-vite.config.js
-tailwind.config.cjs
-postcss.config.cjs
-.gitignore
-.prettierignore
-.prettierrc.json
-.theme-check.yml
-.vscode/
-*.md
-translation.yml
-node_modules
-.git/
-.github/
+assets/.vite/*