Will i run in to any problems cutting SASS out of the pipleline?

[dan-gamble]

I'm looking to replace Sass complete with PostCSS. I personally find it much better to work with.

I've got everything working hunky dory with something along the lines of:

    extends: {
      dev: {
        resolve: {
          alias
        },
        module: {
          rules: [
            {
              test: /\.css$/,
              use: [
                'style-loader',
                { loader: 'css-loader', options: { importLoaders: 1 } },
                'postcss-loader'
              ]
            }
          ]
        }
      },
      prod: {
        resolve: {
          alias
        },
        module: {
          rules: [
            {
              test: /\.css$/,
              exclude: ['node_modules', 'assets/static/'],
              use: extractStyles.extract({
                fallback: 'style-loader',
                use: [
                  {
                    loader: 'css-loader',
                    options: {importLoaders: 2, sourceMap: true},
                  },
                  'postcss-loader'
                ]
              })
            }
          ]
        },
        plugins: [
          extractStyles
        ]
      }
    }

Along with:

module.exports = ({ file, options, env }) => ({
  parser: file.extname === '.sss' ? 'sugarss' : false,
  plugins: {
    'postcss-easy-import': {},
    'postcss-sassy-mixins': {},
    'postcss-nested': {},
    'postcss-custom-properties': {},
    'postcss-custom-media': {},
    'postcss-media-minmax': {},
    'postcss-custom-selectors': {},
    // Niceties
    'postcss-inline-svg': {
      path: 'src/assets/svg/'
    },
    'postcss-brand-colors': {},
    'postcss-property-lookup': {},
    'postcss-lh': {
      rhythmUnit: 'vr'
    },
    'postcss-pxtorem': {},
    'postcss-will-change': {},
    'postcss-round-subpixels': {},
    'postcss-hexrgba': {},
    'autoprefixer': {},
    'cssnano': env === 'production'
  }
})

yarn start seems to work completely fine as does yarn deploy. I'll also add i'm not looking to add themes to the Shopify theme store, these would solely be for clients / personal use.

My sole question is, will this:

import '../../css/theme.css'
// import '../../styles/theme.scss'
// import '../../styles/theme.scss.liquid'

Cause me any problems over the lifetime of a project? I'm relatively new to Shopify and even more so to Slate. I can't forsee any problems, just thought i'd ask the experts here!

[dan-gamble]

Would love some Shopify dev specific input from @t-kelly or @chrisberthe if any of you have some spare time 😊

[t-kelly]

Hey @dan-gamble -- sorry this issue got buried in my notifications.

Happy that you're giving pure PostCSS a shot. The only thing I would watch out for is the our IE11 polyfill for CSS variables -> Liquid variables. This is only needed if you need Liquid values in your CSS, which is typically needed if you're allowing your theme to be editable via the Theme editor.

Otherwise you should be in the clear!

[dan-gamble]

No worries Thomas.

Thanks for your insight, currently we don't do this as we build bespoke on a per client basis and don't give them control in the settings for various reasons.

Think i'll give this a whirl on my next project.

Before coming to work on Shopify i was PostCSS all the way so eager to see how it can make my Shopify development easier.

Thanks for your answer!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.