Plan for Modular Sass?

[f15gdsy]

Hi, do you have plan for modular sass? Like supporting local scope?

[screendriver]

Hi,
good question. I am not the absolute expert in SASS so I don't know local scope exactly. But yes, I want to implement almost everything that is possible to get this plugin feature complete as possible.

[aaronroberson]

@f15gdsy Are you referring to @import of partials (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials) or are you referring to variable scope and content blocks (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_scope_and_content_blocks)?

[abubics]

Sounds more like a CSS modules thing?

[Silviu-Marian]

in sass-inject

import postCSSlocalByDefault from 'postcss-modules-local-by-default'
import postCSSextractImports from 'postcss-modules-extract-imports'
import postCSSscope from 'postcss-modules-scope'
import postCSSvalues from 'postcss-modules-values'
import PostCSSparser from './parser.js'
import resolvePath from './resolve-path.js'

new compile function in the same file

async function compile (scss, styleUrl) {
  // compile module
  const content = scss.content
  const responseText = content.responseText
  if (typeof content === 'string' && content === '' ||
      typeof responseText !== 'undefined' && responseText === '') {
    return ''
  }
  const sass = await importSass
  let { status, text, formatted } = await new Promise(res => {  // eslint-disable-line
    sass.compile(content, scss.options, res)
  })
  if (status !== 0) {
    throw formatted
  }

  // rewrite urls and copy assets if enabled
  const pluginOptions = System.sassPluginOptions || {}
  if (pluginOptions.rewriteUrl) {
    const CssUrlRewriterModule = await System.import('css-url-rewriter-ex', __moduleName)
    const CssUrlRewriter = CssUrlRewriterModule.default
    const urlRewriter = new CssUrlRewriter({ root: System.baseURL })
    text = urlRewriter.rewrite(styleUrl, text)
  }

  const postcss = await System.import('postcss', __moduleName)
  const postCSSPlugins = [
    postCSSvalues,
    postCSSlocalByDefault,
    postCSSextractImports,
    postCSSscope
  ]

  // apply autoprefixer if enabled
  if (pluginOptions.autoprefixer) {
    const autoprefixerOptions = pluginOptions.autoprefixer instanceof Object
      ? pluginOptions.autoprefixer
      : undefined

    const autoprefixer = await System.import('autoprefixer', __moduleName)
    postCSSPlugins.push(autoprefixer(autoprefixerOptions))
  }

  //
  const postCSSparser = new PostCSSparser()
  postCSSPlugins.push(postCSSparser.plugin)

  // Run
  const { css } = await postcss(postCSSPlugins).process(text, { from: '/' })
  text = css

  // inject module and remove old module
  injectStyle(text, styleUrl)

  // return an empty module in the module pipeline itself
  return `export default ${JSON.stringify(postCSSparser.exportTokens)}`
}

parser.js is here:
https://raw.githubusercontent.com/css-modules/css-modules-loader-core/62f4d1970f1a441100fb1da509a2cb585a488b4f/src/parser.js

the only tweak there is the plugin line which no longer goes up the whole tree

plugin( css, result, ...rest ) {
    return new Promise(res => res())
      .then( _ => this.linkImportedSymbols( css ) )
      .then( _ => this.extractExports( css ) )
  }

there's no speed improvement in removing it

maybe a hash would help