Skip to content

Commit 823081f

Browse files
DerKatzeLPDerKatzeLP
committed
Exchange deprecated dependency
Adjust Readme
1 parent b108aac commit 823081f

4 files changed

Lines changed: 114 additions & 114 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,8 @@ CSSOrganizer will sort all properties by this given order.
110110

111111
CSSOrganizer relies on the following external library:
112112

113-
- [css](https://www.npmjs.com/package/css)
113+
- [adobe/css-tools](https://github.com/adobe/css-tools)
114+
- ~~[css](https://www.npmjs.com/package/css)~~ (before v1.2.0)
114115

115116
## Contributing
116117

‎cssOrganizer.js‎

Lines changed: 102 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import { log } from 'console'
2-
import css from 'css'
3-
import { readFileSync } from 'fs'
4-
import fsp from 'fs/promises'
5-
import path, { join } from 'path'
1+
import { log } from "console"
2+
import css from "@adobe/css-tools"
3+
import { readFileSync } from "fs"
4+
import fsp from "fs/promises"
5+
import path, { join } from "path"
66

77
// Sorts a rules group based on properties
88
function customSort(declarations) {
9-
return declarations.sort((a, b) => allProps.indexOf(a.property) - allProps.indexOf(b.property))
9+
return declarations.sort(
10+
(a, b) => allProps.indexOf(a.property) - allProps.indexOf(b.property)
11+
)
1012
}
1113

1214
function sortStyleBlock(styleContent) {
@@ -19,25 +21,28 @@ function sortStyleBlock(styleContent) {
1921
return css.stringify(parsed)
2022
}
2123

22-
async function replaceStyleInVueSFC(filePath, vueFileName = 'xyz.vue') {
24+
async function replaceStyleInVueSFC(filePath, vueFileName = "xyz.vue") {
2325
try {
2426
// Read the current content of the Vue file
25-
let htmlContent = await fsp.readFile(filePath, 'utf-8')
27+
let htmlContent = await fsp.readFile(filePath, "utf-8")
2628

2729
// Search for the <style> tag
28-
const styleStart = htmlContent.search('<style.*>')
30+
const styleStart = htmlContent.search("<style.*>")
2931
if (styleStart === -1) return
30-
const styleStartString = htmlContent.match('<style.*>')[0]
32+
const styleStartString = htmlContent.match("<style.*>")[0]
3133
const styleStartStringLength = styleStartString.length
32-
const styleEnd = htmlContent.indexOf('</style>')
34+
const styleEnd = htmlContent.indexOf("</style>")
3335

3436
// Check if <style> was found
3537
if (styleStart !== -1 && styleEnd !== -1) {
3638
// Extract the content of the <style> tag
37-
const styleContent = htmlContent.substring(styleStart + styleStartStringLength, styleEnd)
39+
const styleContent = htmlContent.substring(
40+
styleStart + styleStartStringLength,
41+
styleEnd
42+
)
3843

3944
// Sort the style content
40-
const sortedStyleContent = '\n' + sortStyleBlock(styleContent) + '\n'
45+
const sortedStyleContent = "\n" + sortStyleBlock(styleContent) + "\n"
4146

4247
// Replace the current content of the <style> tag with the new content
4348
htmlContent =
@@ -46,16 +51,20 @@ async function replaceStyleInVueSFC(filePath, vueFileName = 'xyz.vue') {
4651
htmlContent.substring(styleEnd)
4752

4853
// Write the updated content back to the file
49-
await fsp.writeFile(filePath, htmlContent, 'utf-8')
54+
await fsp.writeFile(filePath, htmlContent, "utf-8")
5055

5156
if (config.showLogFiles)
52-
console.log('--> File \x1b[33m' + vueFileName + '\x1b[0m has been edited')
57+
console.log(
58+
"--> File \x1b[33m" + vueFileName + "\x1b[0m has been edited"
59+
)
5360
} else {
5461
// <style> not found
55-
console.error('\x1b[31mThe content of ' + vueFileName + ' was not found.\x1b[0m')
62+
console.error(
63+
"\x1b[31mThe content of " + vueFileName + " was not found.\x1b[0m"
64+
)
5665
}
5766
} catch (error) {
58-
console.error('Error updating the file ' + vueFileName, error.message)
67+
console.error("Error updating the file " + vueFileName, error.message)
5968
}
6069
}
6170

@@ -65,7 +74,9 @@ async function processVueFilesRecursively(folderPath) {
6574
const fileNames = await fsp.readdir(folderPath)
6675

6776
// Filter only files with the extension ".vue"
68-
const vueFiles = fileNames.filter((fileName) => path.extname(fileName) === '.vue')
77+
const vueFiles = fileNames.filter(
78+
(fileName) => path.extname(fileName) === ".vue"
79+
)
6980

7081
// Process each Vue file in the current folder
7182
for (const vueFile of vueFiles) {
@@ -84,11 +95,15 @@ async function processVueFilesRecursively(folderPath) {
8495
}
8596
}
8697
if (config.showLogFolders) {
87-
console.log(`====> Folder \x1b[33m${folderPath}\x1b[0m has been processed.`)
88-
console.log(`- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `)
98+
console.log(
99+
`====> Folder \x1b[33m${folderPath}\x1b[0m has been processed.`
100+
)
101+
console.log(
102+
`- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `
103+
)
89104
}
90105
} catch (error) {
91-
console.error('\x1b[31mError processing Vue files:\x1b[0m', error.message)
106+
console.error("\x1b[31mError processing Vue files:\x1b[0m", error.message)
92107
}
93108
}
94109

@@ -98,23 +113,25 @@ async function processCssFilesRecursively(folderPath) {
98113
const fileNames = await fsp.readdir(folderPath)
99114

100115
// Filter only files with the extension ".css"
101-
const cssFiles = fileNames.filter((fileName) => path.extname(fileName) === '.css')
116+
const cssFiles = fileNames.filter(
117+
(fileName) => path.extname(fileName) === ".css"
118+
)
102119

103120
// Process each CSS file in the current folder
104121
for (const cssFile of cssFiles) {
105122
const filePath = path.join(folderPath, cssFile)
106123

107124
// Read the CSS file
108-
const styleContent = await fsp.readFile(filePath, 'utf-8')
125+
const styleContent = await fsp.readFile(filePath, "utf-8")
109126

110127
// Sort the style blocks
111128
const sortedStyleContent = sortStyleBlock(styleContent)
112129

113130
// Write the updated content back to the file
114-
await fsp.writeFile(filePath, sortedStyleContent, 'utf-8')
131+
await fsp.writeFile(filePath, sortedStyleContent, "utf-8")
115132

116133
if (config.showLogFiles)
117-
console.log('--> File \x1b[33m' + cssFile + '\x1b[0m has been edited')
134+
console.log("--> File \x1b[33m" + cssFile + "\x1b[0m has been edited")
118135
}
119136

120137
// Also search through all subfolders
@@ -129,51 +146,67 @@ async function processCssFilesRecursively(folderPath) {
129146
}
130147

131148
if (config.showLogFolders) {
132-
console.log(`====> Folder \x1b[33m${folderPath}\x1b[0m has been processed.`)
133-
console.log(`- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `)
149+
console.log(
150+
`====> Folder \x1b[33m${folderPath}\x1b[0m has been processed.`
151+
)
152+
console.log(
153+
`- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `
154+
)
134155
}
135156
} catch (error) {
136-
console.error('\x1b[31mError processing CSS files:\x1b[0m', error.message)
157+
console.error("\x1b[31mError processing CSS files:\x1b[0m", error.message)
137158
}
138159
}
139160

140161
function organizeVuePart(config, projectRoot) {
141-
console.log('---------------------------------------------------------------')
142-
console.log('CSSOrganizer - START - Vue Files')
162+
console.log("---------------------------------------------------------------")
163+
console.log("CSSOrganizer - START - Vue Files")
143164

144165
// Construct the absolute path
145166
const vueAbsolutePath = join(projectRoot, config.vueFolderPath)
146167

147168
processVueFilesRecursively(vueAbsolutePath)
148-
.then(() => console.log('\x1b[32mVue Process completed successfully\x1b[0m'))
149-
.catch((error) => console.error('\x1b[31mError processing Vue:\x1b[0m', error))
169+
.then(() =>
170+
console.log("\x1b[32mVue Process completed successfully\x1b[0m")
171+
)
172+
.catch((error) =>
173+
console.error("\x1b[31mError processing Vue:\x1b[0m", error)
174+
)
150175
.finally(() => {
151-
console.log('CSSOrganizer - END - Vue Files')
152-
console.log('---------------------------------------------------------------')
176+
console.log("CSSOrganizer - END - Vue Files")
177+
console.log(
178+
"---------------------------------------------------------------"
179+
)
153180
if (config.sortCssFiles) {
154181
organizeCssPart(config, projectRoot)
155182
}
156183
})
157184
}
158185

159186
function organizeCssPart(config, projectRoot) {
160-
console.log('---------------------------------------------------------------')
161-
console.log('CSSOrganizer - START - CSS Files')
187+
console.log("---------------------------------------------------------------")
188+
console.log("CSSOrganizer - START - CSS Files")
162189

163190
// Construct the absolute path
164191
const cssAbsolutePath = join(projectRoot, config.cssFolderPath)
165192

166193
processCssFilesRecursively(cssAbsolutePath)
167-
.then(() => console.log('\x1b[32mCSS Process completed successfully\x1b[0m'))
168-
.catch((error) => console.error('\x1b[31mError processing CSS:\x1b[0m', error))
194+
.then(() =>
195+
console.log("\x1b[32mCSS Process completed successfully\x1b[0m")
196+
)
197+
.catch((error) =>
198+
console.error("\x1b[31mError processing CSS:\x1b[0m", error)
199+
)
169200
.finally(() => {
170-
console.log('CSSOrganizer - END - CSS Files')
171-
console.log('---------------------------------------------------------------')
201+
console.log("CSSOrganizer - END - CSS Files")
202+
console.log(
203+
"---------------------------------------------------------------"
204+
)
172205
})
173206
}
174207

175208
function runCssOrganizer(config, projectRoot) {
176-
console.log('\x1b[33mPath to project root\x1b[0m', projectRoot)
209+
console.log("\x1b[33mPath to project root\x1b[0m", projectRoot)
177210

178211
if (config.sortVueFiles) {
179212
organizeVuePart(config, projectRoot)
@@ -183,41 +216,53 @@ function runCssOrganizer(config, projectRoot) {
183216
}
184217

185218
// Navigate to the root directory of the project
186-
const projectRoot = process.cwd().split('node_modules')[0]
187-
if (projectRoot.endsWith('/')) {
219+
const projectRoot = process.cwd().split("node_modules")[0]
220+
if (projectRoot.endsWith("/")) {
188221
projectRoot = projectRoot.slice(0, -1)
189222
}
190223

191224
// Get grouping settings
192225
let grouping = null
193226
try {
194-
grouping = JSON.parse(readFileSync(projectRoot + 'grouping.cssorg.json'))
227+
grouping = JSON.parse(readFileSync(projectRoot + "grouping.cssorg.json"))
195228
} catch {
196229
try {
197-
grouping = JSON.parse(readFileSync('./grouping.json'))
230+
grouping = JSON.parse(readFileSync("./grouping.json"))
198231
} catch {
199-
console.log('\x1b[47m\x1b[31m# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #')
200-
console.error('# Could not load grouping file. #')
201-
console.error('# Please add a valid grouping.cssorg.json #')
202-
console.log('# Add the file to your root folder: ./grouping.cssorg.json #')
203-
console.log('# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #\x1b[0m')
232+
console.log(
233+
"\x1b[47m\x1b[31m# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #"
234+
)
235+
console.error(
236+
"# Could not load grouping file. #"
237+
)
238+
console.error(
239+
"# Please add a valid grouping.cssorg.json #"
240+
)
241+
console.log("# Add the file to your root folder: ./grouping.cssorg.json #")
242+
console.log(
243+
"# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #\x1b[0m"
244+
)
204245
process.exit(0)
205246
}
206247
}
207248

208249
// Get config
209250
let config = null
210251
try {
211-
config = JSON.parse(readFileSync(projectRoot + 'config.cssorg.json'))
252+
config = JSON.parse(readFileSync(projectRoot + "config.cssorg.json"))
212253
} catch {
213254
try {
214-
config = JSON.parse(readFileSync('./config.json'))
255+
config = JSON.parse(readFileSync("./config.json"))
215256
} catch {
216-
console.log('\x1b[47m\x1b[31m# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #')
217-
console.error('# Could not load config file. #')
218-
console.error('# Please add a valid config.cssorg.json #')
219-
console.log('# Add the file to your root folder: ./config.cssorg.json #')
220-
console.log('# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #\x1b[0m')
257+
console.log(
258+
"\x1b[47m\x1b[31m# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #"
259+
)
260+
console.error("# Could not load config file. #")
261+
console.error("# Please add a valid config.cssorg.json #")
262+
console.log("# Add the file to your root folder: ./config.cssorg.json #")
263+
console.log(
264+
"# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #\x1b[0m"
265+
)
221266
process.exit(0)
222267
}
223268
}

‎package-lock.json‎

Lines changed: 8 additions & 54 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)