Update Tailwind to 1.0.0

knowler commented 5 years ago

I’ve begun updating the Tailwind stubs for its 1.0.0 release based on the draft upgrade guide.

TODO:

[x] Explicitly set heading default styles
[x] Explicitly set list default styles
[x] Use addBase for setting base styles (e.g. heading sizes)

brandontamm commented 5 years ago

You're probably already on it, but FYI Tailwind v1.0 is coming out of beta tomorrow or Monday. I'm currently on an old version and want to use this updated version. Any way I can git clone Sage with the 1.0.0 beta or add your branch with 1.0.0 as a dependency to my project to update the codebase? Per Adam, no major changes from 1.0.0-beta..

knowler commented 5 years ago

UPDATE: the following are not upgrade instructions for Tailwind 1.0 in Sage. They are instructions for testing out this PR on presumably a fresh install of Sage. Proceed at your own risk.

@brandontamm Set this in your composer.json:

"require-dev": {
  "roots/sage-installer": "dev-tailwind-1.0.0"
}

Then run:

# Updates Sage installer
$ composer update --dev roots/sage-installer

# Select Tailwind
$ ./vendor/bin/sage preset

I might be able to get around to finishing this PR, but I can’t promise we’ll get it into Sage 9 anytime soon. We’ve been moving our focus to Sage 10 which uses Laravel Mix, so Tailwind support will be 100% easier.

If you do find anything that needs to be changed, let us know or make a PR targeting this branch.

knowler commented 5 years ago

Re-running the preset will replace everything in here (the styles only if you tell it to). So you might want to make a backup of those files if you don’t already have them committed.

brandontamm commented 5 years ago

I guess I do have one error upon when running yarn commands...

ERROR in ./node_modules/cache-loader/dist/cjs.js!./node_modules/css-loader?{"sourceMap":false}!./nodemodules/postcss-loader/lib?{"config":{"path":"/Users/btamm/Sites/begreatsports/begreatsports/themes/resources/assets/build","ctx":{"open":true,"copy":"images/*/","proxyUrl":"http://localhost:3000","cacheBusting":"[name][hash:8]","paths":{"root":"/Users/btamm/Sites/begreatsports/begreatsports/themes","assets":"/Users/btamm/Sites/begreatsports/begreatsports/themes/resources/assets","dist":"/Users/btamm/Sites/begreatsports/begreatsports/themes/dist"},"enabled":{"sourceMaps":true,"optimize":false,"cacheBusting":false,"watcher":true},"watch":["app//*.php","config/*/.php","resources/views//*.php"],"entry":{"main":["./scripts/main.js","./styles/main.scss"],"customizer":["./scripts/customizer.js"]},"publicPath":"/var/www/html/web/app/themes/begreatsports/dist/","devUrl":"http://begreatsports.local","env":{"production":false,"development":true},"manifest":{}}},"sourceMap":false,"plugins":[{"version":"6.0.23","plugins":[null,null,null],"postcssPlugin":"tailwind","postcssVersion":"6.0.23"},null]}!./node_modules/resolve-url-loader?{"sourceMap":false,"silent":true,"absolute":false,"fail":false,"keepQuery":false,"attempts":0,"debug":false,"root":null,"includeRoot":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"sourceComments":true}!./node_modules/import-glob!./resources/assets/styles/main.scss Module build failed: Syntax Error

(34:3) @apply cannot be used with .text-primary because .text-primary either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .text-primary exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

32 | / line 14, resources/assets/styles/common/_global.scss / 33 | a {

34 | @apply text-primary no-underline border-b border-transparent; | ^ 35 | transition: 0.2s ease; } 36 | / line 19, resources/assets/styles/common/_global.scss /

brandontamm commented 5 years ago

Looks like that particular error is just a result of the v1 change to the tailwind config... I found an error though prior to that when I run yarn command:

warning " > stylelint-webpack-plugin@0.10.5" has incorrect peer dependency "webpack@^1.13.2 || ^2.7.0 || ^3.11.0 || ^4.4.0".

multiple errors later on ..

brandontamm commented 5 years ago

To rule out any issues that may have arose from my custom environment .. I spun up a vanilla environment, downloaded vanilla sage theme v9.0.9 and ran the commands you listed above..I still got the same errors and I believe there are dependency issues related to the stylelint-webpack-plugin...

Were you able to successfully upgrade to v1.0.0 using your commands on vanilla sage v9.0.9?

Here is the full terminal output in a pastebin - https://pastebin.com/5bmDQk4Z

brandontamm commented 5 years ago

And one more time for good measure :) - https://pastebin.com/wsjvAi4a

knowler commented 5 years ago

@brandontamm I guess I hadn’t bumped the Tailwind version in package.json since I was waiting until it was closer to release. A good chunk of the errors you were experiencing was because of that. Now I have the package version set to 1.0.0 which might not work, but at least NPM/Yarn should prompt you to install an available version. I also fixed all the colours and I made a plugin which accounts for the global styles (uses theme values to override Tailwind’s base styles — I think that’s pretty great).

As far as I’m concerned, this is ready for review/merge once Tailwind 1.0.0 releases.

brandontamm commented 5 years ago

Excellent! I noticed the commits and was kind of learning along with you when you were adding to the configuration and plugin. I really like the revamp on the config and plugins!

Brandon Tamm Sent from Mobile

On May 10, 2019, at 2:31 AM, Nathan Knowler notifications@github.com wrote:

@brandontamm I guess I hadn’t bumped the Tailwind version in package.json since I was waiting until it was closer to release. A good chunk of the errors you were experiencing was because of that. Now I have the package version set to 1.0.0 which might not work, but at least NPM/Yarn should prompt you to install an available version. I also fixed all the colours and I made a plugin which accounts for the global styles (uses theme values to override Tailwind’s base styles — I think that’s pretty great).

As far as I’m concerned, this is ready for review/merge once Tailwind 1.0.0 releases.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

brandontamm commented 5 years ago

Still getting all the errors on a vanilla Sage installation. I was able to select v1.0.0-beta8

brandontamm commented 5 years ago

https://pastebin.com/Wag5G31R

knowler commented 5 years ago

Does node-sass work on other projects? This doesn't look like an issue with anything I've done Tailwind related.

knowler commented 5 years ago

Tailwind 1.0.0 is released now. I ran a test with the official release and everything is running fine.

brandontamm commented 5 years ago

Can you share the dependency versions you are using for sage? I am using:

npm v12.1.0
yarn 1.16.0
webpack 4.31.0

knowler commented 5 years ago

@brandontamm Can you move your issue over to our discourse — it’s not related to Tailwind 1.0.0 being implemented into Sage. I am using the latest Node LTS release (10.15.3) as installed with NVM. See our getting started documentation to properly set up your development environment to use Sage. Also it looks like you are using an unsupported version of webpack with Sage 9.

roots / sage-installer

Update Tailwind to 1.0.0 #36