Tailwind v2 and Sage 9

[abgregs]

@knowler @octoxan Here is minimal reproduction I made. I followed your install instructions on a fresh project. After installing, yarn build compiles successfully with no issues. Then, the only other thing I did is throw a file in the fonts folder and attempt to define a new @font-face rule in main.scss and I get the same error.

https://github.com/abgregs/sage-test

Module build failed: ModuleBuildError: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The “from” argument must be of type string. Received undefined
at validateString (internal/validators.js:121:11)
at Object.relative (path.js:1053:5)
at Object.loader (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/file-loader/dist/index.js:78:72)
at Object.loader (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/url-loader/dist/index.js:127:19)
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/webpack/lib/NormalModule.js:195:19
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at runSyncOrAsync (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
at iterateNormalLoaders (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:205:4
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
at processTicksAndRejections (internal/process/task_queues.js:75:11)

error in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The “from” argument must be of type string. Received undefined
at validateString (internal/validators.js:121:11)
at Object.relative (path.js:1053:5)
at Object.loader (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/file-loader/dist/index.js:78:72)
at Object.loader (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/url-loader/dist/index.js:127:19)
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/webpack/lib/NormalModule.js:195:19
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at runSyncOrAsync (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
at iterateNormalLoaders (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array. (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:40:15)
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:77:9
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)

[knowler]

Thanks for creating that! I pulled it and got the same error (I reinstalled the Node modules with Node 12).

My first guess is that it’s an issue with file-loader. Out of curiosity, created a vanilla Sage 9 project and copied the font stuff over. I got a different error.

▷ yarn build
yarn run v1.22.10
$ webpack --progress --config resources/assets/build/webpack.config.js
 95% emitting

 ERROR  Failed to compile with 2 errors                                                                                   3:58:06 PM

 error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: Error: resolve-url-loader: CSS error
  predicate must return an absolute path or the result of calling next()
  at file:///Users/knowler/code/roots/sage-9/resources/assets/styles/main.scss:9446:3
    at encodeError (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:219:12)
    at onFailure (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:176:14)
    at /Users/knowler/code/roots/sage-9/node_modules/webpack/lib/NormalModule.js:195:19
    at /Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at onFailure (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:176:5)

 @ multi ./scripts/main.js ./styles/main.scss

 error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: Error: resolve-url-loader: CSS error
  predicate must return an absolute path or the result of calling next()
  at file:///Users/knowler/code/roots/sage-9/resources/assets/styles/main.scss:9446:3
    at encodeError (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:219:12)
    at onFailure (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:176:14)
    at /Users/knowler/code/roots/sage-9/node_modules/webpack/lib/NormalModule.js:195:19
    at /Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at onFailure (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:176:5)

                    Asset     Size  Chunks             Chunk Names
          scripts/main.js   243 kB       0  [emitted]  main
    scripts/customizer.js  3.24 kB       1  [emitted]  customizer
      scripts/main.js.map   396 kB       0  [emitted]  main
scripts/customizer.js.map  3.08 kB       1  [emitted]  customizer
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This should have worked so I think there’s another underlying issue with the webpack config. I will continue to investigate this.

[ciromattia]

I got it working on a Sage 9 install upgrading the following packages to those versions:

"autoprefixer": "^10.1.0",
"postcss": "^8.2.1",
"postcss-loader": "^4.0.4",
"tailwindcss": "^2.0.2",

I had also to remove some “wrong” classes on the generated preset, mainly on _form.scss.
Now I’m looking to get rid of SCSS and use PostCSS only.

[abgregs]

@ciromattia @knowler Hmm. Those changes didn’t work for me. They didn’t seem to cause any other issues, so I left them and then looked at downgrading resolve-url-loader and file-loader to previous versions or before breaking changes as those seemed most likely to be responsible based on the error message I was still getting.

The one change that removed any errors was moving to file-loader@5.1.0, which allowed me to successfully compile, however despite having no errors and the styles being applied, I’m not actually seeing the font display. In other words, the styles are applied and the font file appears to have loaded, but there is no actual change in appearance to the text itself. See attached. This font should be bold and set to Raleway but instead still has the same Tailwind defaults I had been seeing previously.

Should look like

Hoping I’m not creating too big a mess here with version or dependency issues for these different packages. @ciromattia Your fonts were imported without error and on the front end they show up as expected?

[strarsis]

This PR may fix the issue: https://github.com/roots/sage/pull/2603

[abgregs]

@strarsis Thanks, I bumped file-loader down to 4.3.0 corresponding to the version used in that PR and fonts and Tailwind are working as expected for me without any issue.

[joshb]

Working Sage 9, Webpack 5 and Tailwind 2.0.2 repo available here with updated theme installation instructions. Browsersync works again!

***IGNORE, there are issues

-The thread that lead to this. Thanks for all the help @strarsis

Sage 9 browsersync not updating right

@strarsis - thanks for all of that… I literally just put together my own working repo here: Everything works fine on mine. I just tried yours and on yarn watch it returns this error: [webpack-cli] ReferenceError: merge is not defined I updated the theme installation instructions as well. Theme installation Clone this repo and update the publicPath and devUrl in config.json # @ resources/assets/config.json { "entry": { "main": [ "./scripts/main.js", "./styles/main.scss" …

[ciromattia]

(switching from this thread)

After further investigation, RTFM and some mangling with webpack5 I got a completely working Sage 9 / TailwindCSS 2 / Webpack 5 / PostCSS 8 setup.
It’s a quite heavily customized sage install, so your mileage may vary, the main customizations are:

• needs Node 10+ (webpack 5 requirement)
• it’s TailwindCSS-tailored so if you want Bootstrap back you have to restore almost oll the styles and even jquery dependency
• yeah, jquery is no more a dependency
• it’s CSS-based so if you want to use SASS you have to rename the styles, though webpack config should support it out-of-the-box (but I made no tests); PostCSS manages imports, nesting and autoprefixing and TailwindCSS every other feature, so you should ask yourself if you really need SASS with an utility-first framework
• uses webpack 5 new Assets Modules so file-loader and url-loader are gone for good

@joshb the watcher should be fully working, if you want to try it out.

The branch is 9-webpack5-tailwind2

ciromattia/sage

[joshb]

@ciromattia

I just setup your fork and at first I was still getting the reloading browsers looping thing… but it appears to have gone away for now:

[Browsersync] Reloading Browsers... (buffered 83 events)
[Browsersync] Reloading Browsers... (buffered 6 events)
[Browsersync] Reloading Browsers... (buffered 131 events)

Other than that, blade files are updating quickly and css files are injecting! Great news! It will be a little strange not running scss when needed but otherwise, this is nice. Thanks.

I’ll report back if I have issues with the browsersync loop thingymabobber.

[ciromattia]

I just got an issue with sage JS route mechanism not firing when watching, it’s an issue with the vanilla JS I changed in main.js so if your JS isn’t working change the last snippet in main.js with the following:

if (document.readyState !== 'loading') {
  routes.loadEvents();
} else {
  document.addEventListener('DOMContentLoaded', () => {
    routes.loadEvents();
  }, false);
}

[elisabeth]

Thank you! This is exactly what I was thinking of trying to build today, but this is so much better.

[strarsis]

So this is an interference of the sage routing with browser sync?

[ciromattia]

@strarsis with JQuery everything works flawlessly probably the ready() function does something under the hood, but I was trying to get rid of jQuery.
I assume that browsersync for some reason doesn’t emit DOMDocumentLoaded event, so I tried with the “update” method and it works:

if (document.readyState !== 'loading') {
  routes.loadEvents();
}

[grzesiek1owline]

I am testing this starter but unfortunately there is a problem. During yarn build: production purgecss removes almost all styles. The yarn build command loads all, even unused, styles. Tested on node12 and node14. Can you help me?

[strarsis]

Are you using Sage 9, the Sage 9.1 update branch or Sage 10?

[ciromattia]

Going further with development I had some issues with PurgeCSS as managed by webpack, so I switched to the Tailwind-integrated one.

On the latest versions in my branch you can see I commented everything about PurgeCSS in resources/assets/build/webpack.config.optimize.js and switched on the purge section in resources/assets/styles/tailwind.config.js.

Did you follow this configuration?

[grzesiek1owline]

Yes. I download last repo, use composer , yarn and yarn build. I dont change anything.

[pi43r]

I came across the same issue after I finished building the whole site and realized that I never tested production.
The error seems to be that the purge arguments are set relative to the tailwind config, while it should be relative to the root folder. I am not sure if this is only a Windows/WSL problem, though.
So this fixed it in tailwind.config.js:

purge: [
      './app/**/*.php',
      './resources/views/**/*.php',
      './resources/assets/scripts/**/*.js',
    ],

[l77]

Thanks, file-loader@5.1.0 worked for me!

[l77]

@l77

5.1.0

but also had problems with font appearances - 4.3.0 worked