search

babichjacob / sapper-firebase-typescript-graphql-tailwindcss-actions-template

A template that includes Sapper for Svelte, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions
MIT License
106 stars 14 forks source link

opacity:100% in dev gets turned into opacity:1% in production #19

Closed 98mux closed 4 years ago

98mux commented 4 years ago

All my :global(){} css/svelte code does not seem to be included in the production css bundle when running npm run prod

It does work for npm run dev thought.

Also interestingly, opacity:100% in dev gets turned into opacity:1% in production

This also happens on a brand new project. I tested it by changing this in index.svelte

<style>
    .centerer {
        @apply flex-1 flex flex-col items-center justify-center;
        opacity:100%; //In production this will make the text and button invinsible because it is turned into opacity:1%
    }
    :global(body){
        height:262px;
    }
</style>
babichjacob commented 4 years ago

First part of the issue is dependent on upstream https://github.com/babichjacob/sapper-postcss-template/issues/18

Second part, I'll need to try to reproduce but I can't even guess why that would be happening.

98mux commented 4 years ago

You are five steps ahead of me! Again thanks for this amazing template. That opacity thing was so random of me to find haha. It does not seem to happen on things like width or height etc

babichjacob commented 4 years ago

Part 1 of this was solved upstream, and now here in 810c7a2d4aecd765d467e2b4fe724130b5308f56 🎉 .

Part 2, I've just realized, seems to be a mistake on your part. Opacities should be written as decimals, like 0.50, not percentages like 100%. Can you check that?

Or find a property that does use percentages that this problem happens for?

98mux commented 4 years ago

You're right! It is a mistake on my part. opacity:1 works. Still funky how it acts with percentages with opacity but then again it doesn't matter.

Good job on solving the global issue! :rocket: :100: