Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tailwind CSS (postcss plugin) does not work via gatsby-plugin-postcss-sass #3208

Closed
01ivr3 opened this issue Dec 14, 2017 · 7 comments
Closed
Labels
stale? Issue that may be closed soon due to the original author not responding any more. type: question or discussion Issue discussing or asking a question about Gatsby

Comments

@01ivr3
Copy link

01ivr3 commented Dec 14, 2017

Description

The Tailwind CSS postcss plugin does not work when loaded via gatsby-plugin-postcss-sass

Install both plugins to a stock Gatsby site, include tailwindcss in gatsby-config.js as documented, and then add either @tailwind preflight; or @tailwind utilities; to a css file in ./src, this should inject Tailwind's base and/or utility classes into the output css. Instead Gatsby Develop displays the following error: Module build failed: TypeError: atRule.before is not a function

Tailwind CSS seems to work fine via webpack 3 with the following dependencies

        "cross-env": "^5.1",
        "css-loader": "^0.28.7",
        "extract-text-webpack-plugin": "^3.0.2",
        "postcss": "^6.0.14",
        "postcss-cssnext": "^3.0.2",
        "postcss-loader": "^2.0.8",
        "style-loader": "^0.19.0",
        "tailwindcss": "^0.2.2",
        "webpack": "^3.8.1"

I'm not sure what versions of postcss gatsby-plugin-postcss-sass is using.

Is gatsby-plugin-postcss-sass the preferred method for loading PostCSS plugins on a Gatsby v1 site?

I've had no issues so far using cssnext via gatsby-plugin-post-sass

Environment

Gatsby version: 1.9.127
Node.js version: 8.9.3
Operating System: macos 10.13.2

File contents:

gatsby-config.js:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "gatsby": "^1.9.127",
    "gatsby-link": "^1.6.30",
    "gatsby-plugin-react-helmet": "^1.0.8",
    "gatsby-plugin-postcss-sass": "^1.0.15"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.8.2",
    "tailwindcss": "^0.3.0"
  }
}

package.json:

var tailwindcss = require('tailwindcss');

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-postcss-sass`,
      options: {
        postCssPlugins: [
          tailwindcss('./tailwind-config.js')
        ],
        precision: 8, // SASS default: 5
      },
    },
  ],
}

no change to gatsby-node.js, gatsby-browser.js or gatsby-ssr.js

Actual result

 ERROR  Failed to compile with 1 errors                                                                     19:37:56

 error  in ./src/layouts/index.css

Module build failed: TypeError: atRule.before is not a function
    at css.walkAtRules.atRule (/Users/ojs/Sites/gatsby-tailwind/node_modules/tailwindcss/lib/lib/substituteTailwindPreflightAtRule.js:14:14)
    at /Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/container.js:308:28
    at /Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/container.js:148:26
    at Root.each (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/container.js:114:22)
    at Root.walk (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/container.js:147:21)
    at Root.walkAtRules (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/container.js:306:25)
    at /Users/ojs/Sites/gatsby-tailwind/node_modules/tailwindcss/lib/lib/substituteTailwindPreflightAtRule.js:9:9
    at LazyResult.run (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:274:20)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:189:32)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)

 @ ./src/layouts/index.css 4:14-120 13:2-17:4 14:20-126

Expected behavior

Tailwind CSS base styles and/or utility classes injected into output CSS

Steps to reproduce

1. npm install i -D gatsby-plugin-postcss-sass tailwindcss

2. add to gatsby-config.js

{
      resolve: `gatsby-plugin-postcss-sass`,
      options: {
        postCssPlugins: [
          tailwindcss('./tailwind-config.js')
        ],
        precision: 8, // SASS default: 5
      },

3. add @tailwind preflight; or @tailwind utilities; to any .css file in ./src

@01ivr3
Copy link
Author

01ivr3 commented Dec 16, 2017

Seems Gatsby (v1.9.127) processes .css through postcss-cssnext out-of-the-box via its default webpack.config.js

postcss(wp) {
return [
require(`postcss-import`)({ addDependencyTo: wp }),
require(`postcss-cssnext`)({ browsers: program.browserslist }),
require(`postcss-browser-reporter`),
require(`postcss-reporter`),

with the following dependencies
"postcss-browser-reporter": "^0.5.0",
"postcss-cssnext": "^2.8.0",
"postcss-import": "^8.2.0",
"postcss-loader": "^0.13.0",
"postcss-reporter": "^1.4.1",

gatsby-plugin-postcss-sass then appears to be a fork of gatsby-plugin-sass which adds an optional config of postcss plugins to processing .sass
case `build-css`: {
config.loader(`sass`, {
test: sassFiles,
exclude: sassModulesFiles,
loader: ExtractTextPlugin.extract([`css?minimize`, sassLoader]),
})

Current v2 branch has updated postcss dependencies
"postcss-browser-reporter": "^0.5.0",
"postcss-cssnext": "^3.0.2",
"postcss-flexbugs-fixes": "^3.0.0",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.6",
"postcss-reporter": "^1.4.1",

but loading postcss plugins now seems moved to webpack-utils.js
postcss: ({
plugins,
browsers = DEFAULT_BROWSERS,
...rest
} = {}) => {
return {
loader: require.resolve(`postcss-loader`),
options: {
ident: `postcss-${++ident}`,
sourceMap: !PRODUCTION,
plugins: loader => {
plugins =
(typeof plugins === `function` ? plugins(loader) : plugins) || []
return [
flexbugs,
autoprefixer({ browsers, flexbox: `no-2009` }),
...plugins,

and I no longer see postcss-cssnext included.

Apologies to anyone reading this. I'm not too familiar with Webpack or Gatsby's plugin API. Just trying to unravel what's going on ;)

@ooloth
Copy link
Contributor

ooloth commented Jan 16, 2018

@01ivr3 Just curious - were you ever able to get Tailwind working with Gatsby? I'm having trouble merging it into the postCSS pipeline via gatsby-node.js as well.

I'd be fine using it without Sass if that make it easier...

Hope you got there in the end!

@01ivr3
Copy link
Author

01ivr3 commented Jan 21, 2018

@ooloth I posted a reply about this on you issue tailwindlabs/discuss#100

@ooloth
Copy link
Contributor

ooloth commented Feb 9, 2018

In case anyone finds it helpful, I posted my current CLI workaround for running Sass + Tailwinds + PurgeCSS with Gatsby here on StackOverflow.

It's a bit more cumbersome than a Webpack solution, but it demonstrates a way to use any PostCSS plugins you like with Gatsby via postcss.config.js and postcss-cli.

Hope it helps!

@magicspon
Copy link
Contributor

This is resolved in gatsby v2
tailwindlabs/discuss#100 (comment)

@kakadiadarpan kakadiadarpan added the type: question or discussion Issue discussing or asking a question about Gatsby label Sep 27, 2018
@kakadiadarpan
Copy link
Contributor

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

@kakadiadarpan kakadiadarpan added the stale? Issue that may be closed soon due to the original author not responding any more. label Sep 27, 2018
@kakadiadarpan
Copy link
Contributor

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stale? Issue that may be closed soon due to the original author not responding any more. type: question or discussion Issue discussing or asking a question about Gatsby
Projects
None yet
Development

No branches or pull requests

6 participants