Next release ?

[Jonathan-Scapin]

Hi,
I noticed the latest release is from May 2024.

Do you plan having a new one soon?

I am more focused on updating from Vite 5 to 7 since I managed to do it on my end and remove all the deprecation warning about DartCSS. I think it might be helpful to the community to have it from your repo directly.

Thank you for your feedback.

[timohubois]

@Jonathan-Scapin many Thanks for opening this discussion!

We’re planning to release a new version soon that will include fixes for the compatibility issues first:

• PR #609
• PR #610

Regarding Vite and other dependencies, I’ve already started working on this. It’s not fully finished yet, but we have it on track. Currently, I haven’t found a good solution for handling global imports that works reliably with Vite 7 without requiring a major SCSS refactor and the introduction of @use. We’ll need to discuss possible solutions within the team first.

If anyone has already tackled and solved this challenge, we’d be happy to hear more about your approach.

[Jonathan-Scapin]

Thanks a lot for your reply and the details!
On my side, I’ve set up a Node script that automatically generates a central SCSS file with @ use and a unique namespace per component. This helps me handle the migration more easily and avoid maintaining all the imports manually.
Maybe this approach could also help you move forward on this topic.

import fs from 'fs'
import path from 'path'

const componentsDir = path.resolve('./Components')
const outputFile = path.resolve('./assets/admin.generated.scss')
const variablesFileName = '_variables.scss'

function getAllStyleFiles (dir) {
  let files = []
  const entries = fs.readdirSync(dir, { withFileTypes: true })

  for (const entry of entries) {
    const fullPath = path.join(dir, entry.name)

    if (entry.isDirectory()) {
      files = files.concat(getAllStyleFiles(fullPath))
    } else if (entry.isFile() && entry.name.endsWith('_style.scss')) {
      const dirPath = path.dirname(fullPath)
      const componentName = path.basename(dirPath) // folder name for unique namespace
      const variablesPath = path.join(dirPath, variablesFileName)
      if (fs.existsSync(variablesPath)) {
        const relativeVarPath = path.relative(path.dirname(outputFile), variablesPath)
          .replace(/\\/g, '/')
          .replace(/\.scss$/, '')
        files.push(`@use '${relativeVarPath}' as *;`)
      }
      let baseName = path.basename(fullPath, '.scss')
      if (baseName.startsWith('_')) baseName = baseName.slice(1)
      const relativePath = path.relative(path.dirname(outputFile), path.join(dirPath, baseName))
        .replace(/\\/g, '/')
      files.push(`@use '${relativePath}' as ${componentName};`)
    }
  }

  return files
}

const importLines = getAllStyleFiles(componentsDir)
fs.writeFileSync(outputFile, importLines.join('\n') + '\n')

console.log(`File generated with ${importLines.length} imports (with unique namespace) : ${outputFile}`)