plugin function syntac about ember-cli-postcss HOT 13 CLOSED

@datajohnny thanks for helping me sort through this issue. I'm glad you're able to use Tailwind now. I've just merged in all the changes and published v3.6.0 so you don't have to use the git branch version I specified above. Cheers.

from ember-cli-postcss.

Hi @datajohnny, currently you can use the function syntax with plugins defined in the filter step as it uses broccoli-postcss. The compile step uses broccoli-postcss-single.

Does this work for your use case?

from ember-cli-postcss.

Hi @jeffjewiss, I dont think it does I was trying to implement this new postcss framework called tailwind and without the compile it doesnt parse it. Here is my options hash:

postcssOptions: {
      compile: {
        enabled: false, // defaults to true
        browsers: ['last 3 versions'], // this will override config found in config/targets.js
        plugins: []
      },
      filter: {
        enabled: true, // defaults to false
        browsers: ['last 3 versions'], // this will override config found in config/targets.js
        include: ['styles/app.css'],
        exclude: [],
        plugins: [
          require('tailwindcss')('./tailwind.js')
        ]
      }
    }

from ember-cli-postcss.

Thanks for the additional info.

What error output are you getting when trying to build your app? Is it that it can't find the config file?

If so, I think the issue here is that filter runs as a postprocess step. Your app files will be copied to tmp folders by broccolli, meaning your tailwind.js file won't live at that location anymore.

Does it work with the default config, if you do require('tailwindcss')()?

Does it work with the default config (empty options), but using the compile step?

from ember-cli-postcss.

When I use these options:

postcssOptions: {
      compile: {
        plugins: [
          { module: require('postcss-cssnext') },
          { module: require('tailwindcss')('./tailwind.js') }
        ]
      },
    }

I get this errror:

TypeError: plugin.module is not a function

If I just use the cssnext one it works fine

from ember-cli-postcss.

Does it work if you just do?

postcssOptions: {
      compile: {
        plugins: [
          { module: require('postcss-cssnext') },
          { module: require('tailwindcss') }
        ]
      },
    }

from ember-cli-postcss.

tailwind requires the path as a curry func

from ember-cli-postcss.

I took a look at the source for tailwind, and you can see here:

const lazyConfig = () => {
    if (_.isUndefined(config)) {
      return require('../defaultConfig')
}

that if no config is provided it uses the default. My suspicion is that the issue is related to trying to require your config, so I was hoping you could verify this by trying to use the default config.

from ember-cli-postcss.

@jeffjewiss I tested how u mentioned and I get the following error:

TypeError: Path must be a string. Received { from: '/Users/johnny/Projects/testy/tmp/postcss_compiler-input_base_path-Zu7KrRVh.tmp//app/styles/app.css',
  to: '/Users/johnny/Projects/testy/tmp/postcss_compiler-output_path-3MPqAasb.tmp//assets/testy.css',
  map: {},
  browsers:
   [ 'ie 9',
     'last 1 Chrome versions',
     'last 1 Firefox versions',
     'last 1 Safari versions' ] }
    at assertPath (path.js:28:11)
    at Object.resolve (path.js:1186:7)

from ember-cli-postcss.

Okay thanks for trying that, I'll need to investigate this further. Cheers.

from ember-cli-postcss.

thanks for the help

from ember-cli-postcss.

Okay, so I have a demo Ember app using Tailwind here: https://github.com/jeffjewiss/ember-tailwind-example

The gist of it is that you'll need to change your package.json to have:

"ember-cli-postcss": "jeffjewiss/ember-cli-postcss#support-plugin-function",

and then you can do:

postcssOptions: {
      compile: {
        enabled: true,
        plugins: [
          require('tailwindcss')('./app/styles/tailwind.js'),
        ]
      }
}

The options for Tailwind behave a bit differently than most Postcss plugins, so I left a proposal about potentially updating them.

Otherwise, I'll be able to make changes to broccoli-postcss-single and release a new version of ember-cli-postcss with this change. I'd like to wait and see if Tailwind will update, but in the meantime you should be able to use the above settings for your app.

from ember-cli-postcss.

yeah that did it for me, thank you soo much for your help

from ember-cli-postcss.