quasar

1
const path = require('node:path')
2
const sass = require('sass')
3
const rtl = require('postcss-rtlcss')
4
const postcss = require('postcss')
5
const cssnano = require('cssnano')
6
const autoprefixer = require('autoprefixer')
7

8
const buildConf = require('./build.conf')
9
const buildUtils = require('./build.utils')
10
const prepareDiff = require('./prepare-diff')
11

12
const nano = postcss([
13
  cssnano({
14
    preset: [ 'default', {
15
      mergeLonghand: false,
16
      convertValues: false,
17
      cssDeclarationSorter: false,
18
      reduceTransforms: false
19
    } ]
20
  })
21
])
22

23
const sassUseRE = /@use\s+['"][^'"]+['"]/g
24

25
function moveUseStatementsToTop (code) {
26
  const useStatements = code.match(sassUseRE)
27

28
  return useStatements === null
29
    ? code
30
    : Array.from(new Set(useStatements)).join('\n')
31
      + '\n'
32
      + code.replace(sassUseRE, '')
33
}
34

35
function getConcatenatedContent (src, noBanner) {
36
  return new Promise(resolve => {
37
    let code = ''
38
    const banner = noBanner !== true
39
      ? buildConf.banner
40
      : ''
41

42
    src.forEach(file => {
43
      code += buildUtils.readFile(file) + '\n'
44
    })
45

46
    code = code
47
      // remove imports
48
      .replace(/@import\s+'[^']+'[\s\r\n]+/g, '')
49
      // remove comments
50
      .replace(/(\/\*[\w'-.,`\s\r\n*@]*\*\/)|(\/\/[^\r\n]*)/g, '')
51
      // remove unnecessary newlines
52
      .replace(/[\r\n]+/g, '\r\n')
53

54
    resolve(
55
      banner + moveUseStatementsToTop(code)
56
    )
57
  })
58
}
59

60
function generateUMD (code, middleName, ext = '') {
61
  return buildUtils.writeFile(`dist/quasar${ middleName }${ ext }.css`, code, true)
62
    .then(code => nano.process(code, { from: void 0 }))
63
    .then(code => buildUtils.writeFile(`dist/quasar${ middleName }${ ext }.prod.css`, code.css, true))
64
}
65

66
function renderAsset (cssCode, middleName = '') {
67
  return postcss([ autoprefixer ]).process(cssCode, { from: void 0 })
68
    .then(code => {
69
      code.warnings().forEach(warn => {
70
        console.warn(warn.toString())
71
      })
72
      return code.css
73
    })
74
    .then(code => Promise.all([
75
      generateUMD(code, middleName),
76
      postcss([ rtl({}) ]).process(code, { from: void 0 })
77
        .then(code => generateUMD(code.css, middleName, '.rtl'))
78
    ]))
79
}
80

81
function generateBase (source) {
82
  const src = path.join(__dirname, '..', source)
83
  const sassDistDest = path.join(__dirname, '../dist/quasar.sass')
84

85
  const result = sass.renderSync({ file: src })
86

87
  // remove @charset declaration -- breaks Vite usage
88
  const cssCode = result.css.toString().replace('@charset "UTF-8";', '')
89
  const depsList = result.stats.includedFiles
90

91
  return Promise.all([
92
    renderAsset(cssCode),
93

94
    getConcatenatedContent(depsList)
95
      .then(code => buildUtils.writeFile(sassDistDest, code))
96
  ])
97
}
98

99
function generateAddon (source) {
100
  const src = path.join(__dirname, '..', source)
101

102
  const result = sass.renderSync({ file: src })
103
  const cssCode = result.css.toString()
104

105
  return renderAsset(cssCode, '.addon')
106
}
107

108
module.exports = function (withDiff) {
109
  if (withDiff === true) {
110
    prepareDiff('dist/quasar.sass')
111
  }
112

113
  Promise
114
    .all([
115
      generateBase('src/css/index.sass'),
116
      generateAddon('src/css/flex-addon.sass')
117
    ])
118
    .catch(e => {
119
      console.error(e)
120
      process.exit(1)
121
    })
122
}
123