Support CSS options in Vite projects #2245
Conversation
|
Oxygen deployed a preview of your
Learn more about Hydrogen's GitHub integration. |
There was a problem hiding this comment.
Just a few minor questions on the code. While testing it though, I run h2 setup css in the skeleton template, and I get this error when trying to start the project with npm run dev:
Not sure if the node_modules got messed up in the mono repo with the npm install, so I cd into the root and run npm install again. Then trying to start the dev server in the starter template, it appears to work, but I get these new errors:
examples/subscriptions/package.json
Outdated
| "@remix-run/react": "^2.9.2", | ||
| "@shopify/cli": "3.61.2", | ||
| "@shopify/cli-hydrogen": "^8.1.0", | ||
| "@shopify/hydrogen": "2024.4.3", | ||
| "@shopify/remix-oxygen": "^2.0.4", | ||
| "graphql": "^16.6.0", | ||
| "graphql-tag": "^2.12.6", | ||
| "isbot": "^3.6.6", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@remix-run/dev": "^2.9.2", | ||
| "@remix-run/eslint-config": "^2.9.2", | ||
| "@shopify/mini-oxygen": "^3.0.3", | ||
| "@shopify/oxygen-workers-types": "^4.0.0", | ||
| "@shopify/prettier-config": "^1.1.2", | ||
| "@total-typescript/ts-reset": "^0.4.2", | ||
| "@types/eslint": "^8.4.10", | ||
| "@types/react": "^18.2.22", | ||
| "@types/react-dom": "^18.2.7", | ||
| "eslint": "^8.20.0", | ||
| "eslint-plugin-hydrogen": "0.12.2", | ||
| "postcss": "^8.4.21", | ||
| "postcss-import": "^15.1.0", | ||
| "postcss-preset-env": "^8.2.0", | ||
| "prettier": "^2.8.4", | ||
| "typescript": "^5.2.2" | ||
| }, |
There was a problem hiding this comment.
Was it intentional to add all of this?
There was a problem hiding this comment.
This is because the branch is not updated. I had to remove tailwind@v3 from this example but it has now been turned into a diff, so we can remove this part.
| "@vanilla-extract/css": "^1.15.2" | ||
| }, | ||
| "devDependencies": { | ||
| "@vanilla-extract/css": "^1.11.0" | ||
| "@vanilla-extract/vite-plugin": "^4.0.10" |
There was a problem hiding this comment.
Interesting that @vanilla-extra/css went from being a devDependency to a direct dependency.
There was a problem hiding this comment.
Yeah that's what it's shown in the docs: https://vanilla-extract.style/documentation/getting-started/
I guess it doesn't really matter since this is just an app that is not published to NPM.
| @@ -109,6 +125,7 @@ export async function runInit( | |||
| options.path ??= './hydrogen-quickstart'; | |||
| options.routes ??= true; | |||
| options.shortcut ??= true; | |||
| options.styling ??= 'tailwind'; | |||
There was a problem hiding this comment.
Nice, tailwind default for quickstart.
| // doesn't match, but `export default {plugins:[]}` does. | ||
| // And `export default defineConfig({plugins:[]})` matches too. |
There was a problem hiding this comment.
Interesting how it supports both usecases.
|
I tested Vanilla Extract, CSS modules, PostCSS (using Only tailwind v4 alpha, doesn't work. Inside skeleton template
|
|
The first issue is likely related to this bug in NPM: npm/cli#4828 The second issue (postcss related), I think it's related to have tailwind v3 and v4 both installed locally. Will try to update this PR to ensure it's only Tailwind v4 there. |
This one is now fixed after solving deps issues.
Unfortunately, this one seems trickier. Not sure if we can make it work in the monorepo 🤔 |
|
/snapit |
|
The NPM bug also affects standalone projects and it doesn't seem to be possible to fix from within the CLI without creating bigger issues (e.g. removing package-lock). This only affects the 
Running |
Needs #2240 merged first.
--stylingflag for theinitcommand.h2 setup css.🎩 :
h2 setup cssin the skeleton project.h2 initmight not be showing up due to an issue with the bundled CLI. I'm debugging this atm.