v1.0.0

[james0r]

First release. All basic store functionality and build system complete.

---

This discussion was created from the release v1.0.0.

[1dagranholm]

Hi! I have cloned your starter theme and got everything working locally. But when I try to view the theme in the Shopify store, all CSS is missing. What could be the issue? I have tried to run npm run deploy:dev but still no compiled Tailwind css. I have the theme/code connected through Github app and have correct info in .toml file.

[james0r]

Have you build your project yet with npm run build or npm run deploy:env ?

When you run one of these build/deploy commands the Vite Shopify plugin generates a snippet file called vite.liquid in your /snippets directory that is imported within /layout/theme.liquid and imports your theme.css and theme.js bundles.

It's likely you havn't run one of those commands yet.

[1dagranholm]

Yes I have tried npm run build and pushed it through git.

I don't see any script that is npm run deploy:env?

My vite.liquid have changed when I tried the build command but still no styles in Shopify store when I view the theme.

[1dagranholm]

Yes the starter theme seem really nice and is looking well locally, I just need to get it working in the store.

I have no Github actions or some continuous deployment flow going on.

The vite.liquid has changed to below in my store files after build, it's among snippets as it should.

{% comment %}
  IMPORTANT: This snippet is automatically generated by vite-plugin-shopify.
  Do not attempt to modify this file directly, as any changes will be overwritten by the next build.
{% endcomment %}
{% assign path = vite | replace: '~/', '../' | replace: '@/', '../' %}
{% if path == "/frontend/entrypoints/theme.js" or path == "theme.js" %}
  <script src="{{ 'theme.03a7001c.min.js' | asset_url | split: '?' | first }}" type="module" crossorigin="anonymous"></script>
  {{ 'theme.7399ad2e.min.css' | asset_url | split: '?' | first | stylesheet_tag: preload: preload_stylesheet }}
{% endif %}

[james0r]

Weird. You're missing the import for your styles. That's definitely the culprit.

Is your css entryfile in /frontend/entrypoints ? It must be there to be automatically picked up by the Vite Shopify plugin.

[1dagranholm]

Yes something seems to not be right for sure..

Yes, it's there. Haven't changed any structure in the project, just added some fonts, tailwind config, css, snippets etc.

[james0r]

What version of the Shopify Vite plugin are you using? 2.2.1?

[james0r]

I havn't tested Slayed with anything newer.

[1dagranholm]

        "vite": "^4.5.0",
        "vite-plugin-page-reload": "^0.1.0",
        "vite-plugin-shopify": "^2.2.1"

[james0r]

what's the output of npm run build?

[1dagranholm]

❯ npm run build

> [email protected] build
> run-s vite:build


> [email protected] vite:build
> cross-env NODE_ENV=production vite build

vite v4.5.2 building for production...
✓ 53 modules transformed.
assets/icon-select-chevron.47913abd.min.svg    0.16 kB │ gzip:  0.15 kB
assets/manifest.json                           1.46 kB │ gzip:  0.39 kB
assets/Sora-Regular.94138682.min.ttf          57.80 kB
assets/Sora-Medium.15d635c9.min.ttf           57.92 kB
assets/Sora-Bold.969307b8.min.ttf             57.94 kB
assets/Sora-Light.ab9f76b3.min.ttf            57.97 kB
assets/Sora-SemiBold.d3f71f8d.min.ttf         57.98 kB
assets/Sora-ExtraLight.30950a9d.min.ttf       58.03 kB
assets/theme.7399ad2e.min.css                 17.87 kB │ gzip:  4.68 kB
assets/theme.0cf51f1b.min.css                 38.72 kB │ gzip:  6.69 kB
assets/prodify.bbca58c6.min.js                 5.59 kB │ gzip:  1.66 kB │ map:  14.32 kB
assets/theme.03a7001c.min.js                 169.06 kB │ gzip: 53.93 kB │ map: 599.67 kB
✓ built in 1.97s

[james0r]

Might be related to the fact that you have two CSS bundles there. I only have one. Have you imported CSS in your Javascript bundle or added another CSS file somewhere?

[1dagranholm]

I have added some extra css-files to theme.css

@import "tailwindcss/base";
@import "../css/base.css";

@import "tailwindcss/components";
@import "../css/components.css";

@import "tailwindcss/utilities";
@import "../css/utilities.css";

@import "../css/global.css";

@import "../css/product.css";
@import "../css/top-marquee.css";

They consist of standard Tailwind CSS.

Also I have added my fonts in global.css

.some-unused-class {
    --im-not-tree-shaken: 1;
}

body {
    @apply font-sora;
}

@font-face {
    font-family: "Sora";
    src: url("@/fonts/Sora-Extralight.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 200;
}

[1dagranholm]

The second css is Swiper css that I have imported as a bundle in theme.js

// Swiper
import Swiper from "swiper";
import { Navigation, Scrollbar } from "swiper/modules";
import "swiper/swiper-bundle.css";

[1dagranholm]

But the styles didn't work in my store before I started using Swiper either...

[james0r]

Let me see your /assets/manifest.json.

Should look relatively like this

{
  "frontend/entrypoints/theme.css": {
    "file": "theme.2a481907.min.css",
    "isEntry": true,
    "src": "frontend/entrypoints/theme.css"
  },
  "frontend/entrypoints/theme.js": {
    "dynamicImports": [
      "frontend/js/prodify.js"
    ],
    "file": "theme.8e436a75.min.js",
    "isEntry": true,
    "src": "frontend/entrypoints/theme.js"
  },
  "frontend/fonts/OpenSans-Regular.woff": {
    "file": "OpenSans-Regular.952da0dc.min.woff",
    "src": "frontend/fonts/OpenSans-Regular.woff"
  },
  "frontend/fonts/OpenSans-Regular.woff2": {
    "file": "OpenSans-Regular.10e0df1f.min.woff2",
    "src": "frontend/fonts/OpenSans-Regular.woff2"
  },
  "frontend/js/prodify.js": {
    "file": "prodify.bbca58c6.min.js",
    "isDynamicEntry": true,
    "src": "frontend/js/prodify.js"
  }
}

[1dagranholm]

Sure, it loks like this:

{
  "assets/icon-select-chevron.svg": {
    "file": "icon-select-chevron.47913abd.min.svg",
    "src": "assets/icon-select-chevron.svg"
  },
  "frontend/entrypoints/theme.css": {
    "file": "theme.7399ad2e.min.css",
    "src": "frontend/entrypoints/theme.css"
  },
  "frontend/entrypoints/theme.js": {
    "css": [
      "theme.7399ad2e.min.css"
    ],
    "dynamicImports": [
      "frontend/js/prodify.js"
    ],
    "file": "theme.03a7001c.min.js",
    "isEntry": true,
    "src": "frontend/entrypoints/theme.js"
  },
  "frontend/fonts/Sora-Bold.ttf": {
    "file": "Sora-Bold.969307b8.min.ttf",
    "src": "frontend/fonts/Sora-Bold.ttf"
  },
  "frontend/fonts/Sora-ExtraLight.ttf": {
    "file": "Sora-ExtraLight.30950a9d.min.ttf",
    "src": "frontend/fonts/Sora-ExtraLight.ttf"
  },
  "frontend/fonts/Sora-Light.ttf": {
    "file": "Sora-Light.ab9f76b3.min.ttf",
    "src": "frontend/fonts/Sora-Light.ttf"
  },
  "frontend/fonts/Sora-Medium.ttf": {
    "file": "Sora-Medium.15d635c9.min.ttf",
    "src": "frontend/fonts/Sora-Medium.ttf"
  },
  "frontend/fonts/Sora-Regular.ttf": {
    "file": "Sora-Regular.94138682.min.ttf",
    "src": "frontend/fonts/Sora-Regular.ttf"
  },
  "frontend/fonts/Sora-SemiBold.ttf": {
    "file": "Sora-SemiBold.d3f71f8d.min.ttf",
    "src": "frontend/fonts/Sora-SemiBold.ttf"
  },
  "frontend/js/prodify.js": {
    "file": "prodify.bbca58c6.min.js",
    "isDynamicEntry": true,
    "src": "frontend/js/prodify.js"
  }
}

[1dagranholm]

I will check and let you know!

How should a proper vite.liquid look when working?

[james0r]

I will check and let you know!

How should a proper vite.liquid look when working?

It should definitely include at least 1 css bundle. Yours has none.

[squidiw]

@james0r with the new setup will @1dagranholm need to add the code below to her theme.liquid file?
{%- liquid render 'vite-tag' with 'theme.css' render 'vite-tag' with 'theme.js' -%}

[1dagranholm]

Everything worked as it should after I updated https://github.com/barrel/shopify-vite/tree/main/packages/vite-plugin-shopify#adding-scripts-and-styles-to-your-theme (and all vite pkgs as they rely on eachother versions).

And I included vite-tag.liquid instead of vite.liquid in theme.liquid just as @squidiw said.

Thanks for your assistance @james0r and a great starter theme @james0r! :)

[james0r]

Yeah that might have been an issue with one of vite-plugin-shopify's point releases that you were using. That config option I had set should definitely have worked since the API had never changed and is still the same.

At any rate, was a good time to bump packages to Vite v5 so I did that and all the dependencies.

I also just changed the Vite config to use the default vite-tag.liquid just to avoid any inconsistencies.

https://github.com/james0r/slayed/releases/tag/v1.1.1 This release should be all caught up with Vite.