From f21d7b7ad2f5bacd4997cc82793f90f2e4c82337 Mon Sep 17 00:00:00 2001 From: Chris Friedberg Date: Mon, 14 Oct 2024 13:22:55 -0700 Subject: [PATCH 1/3] fix: postCss searches folders recursively #68 --- package-lock.json | 4 +- scripts/build/postCss.mjs | 125 +++++++++++++++++++++++--------------- 2 files changed, 77 insertions(+), 52 deletions(-) diff --git a/package-lock.json b/package-lock.json index 377815a..ee700cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@aurodesignsystem/auro-library", - "version": "2.9.0", + "version": "2.10.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@aurodesignsystem/auro-library", - "version": "2.9.0", + "version": "2.10.0", "license": "Apache-2.0", "dependencies": { "handlebars": "^4.7.8", diff --git a/scripts/build/postCss.mjs b/scripts/build/postCss.mjs index 54c51b2..8268b31 100644 --- a/scripts/build/postCss.mjs +++ b/scripts/build/postCss.mjs @@ -1,63 +1,88 @@ +import fs from 'fs/promises'; +import path from 'path'; +import { fileURLToPath } from 'url'; import autoprefixer from 'autoprefixer'; import postcss from 'postcss'; import comments from 'postcss-discard-comments'; -import path from 'path'; -import fs from 'fs'; -const __dirname = new URL('.', import.meta.url).pathname; -const directoryPath = path.join(__dirname, '../src'); +// Get the directory path +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); -/** - * Default postCSS run - * Locates all CSS files within the directory and loop - * through the standardProcessor() function. - */ -fs.readdir(directoryPath, function (err, files) { - //handling error - if (err) { - return console.log('Unable to scan directory: ' + err); - } - //listing all files using forEach - files.forEach(function (file) { - if (file.includes(".css")) { - standardProcessor(file); +// Define possible directory paths +const possiblePaths = [ + path.join(__dirname, '../src'), + path.join(__dirname, '../components'), + '/components' +]; + +// Find the first existing directory +export async function findExistingDirectory(paths) { + for (const dir of paths) { + try { + await fs.access(dir); + return dir; + } catch (error) { + console.log(error); } - }); -}); + } + throw new Error('No valid directory found'); +} /** - * The standardProcessor function applies tokens for fallback selectors - * and completes a post cleanup. - * @param {string} file + * Recursively process CSS files in a directory and its subdirectories + * @param {string} dir - Directory to process */ -function standardProcessor(file) { - fs.readFile(`src/${file}`, (err, css) => { - postcss([autoprefixer, comments]) - .use(comments({ - remove: function(comment) { return comment[0] == "@"; } - })) - .process(css, { from: `src/${file}`, to: `src/${file}` }) - .then(result => { - fs.writeFile(`src/${file}`, result.css, () => true) - }) - }); +export async function processCssFiles(dir) { + try { + // Read contents of directory + const files = await fs.readdir(dir, { withFileTypes: true }); + for (const file of files) { + const fullPath = path.join(dir, file.name); + // If it's a directory, recursively process it + if (file.isDirectory()) { + await processCssFiles(fullPath); + // If it's a CSS file, process it + } else if (path.extname(file.name).toLowerCase() === '.css') { + await processPostCss(fullPath); + } + } + } catch (err) { + console.error('Processing failed:', err); + } } /** - * ALTERNATE script: - * The following is a static builder for rendering one - * CSS file at a time if that is required. + * Process CSS file(s) with PostCSS + * Applies autoprefixer and removes comments starting with '@' + * @param {string} filePath - Full path of CSS file to process */ -// fs.readFile('src/style.css', (err, css) => { -// postcss([autoprefixer, comments]) -// .use(comments({ -// remove: function(comment) { return comment[0] == "@"; } -// })) -// .process(css, { from: 'src/style.css', to: 'src/style.css' }) -// .then(result => { -// fs.writeFile('src/style.css', result.css, () => true) -// if ( result.map ) { -// fs.writeFile('src/style.map', result.map, () => true) -// } -// }) -// }); \ No newline at end of file +export async function processPostCss(filePath) { + try { + // Read CSS file + const css = await fs.readFile(filePath, 'utf8'); + // Process CSS with PostCSS plugins + const result = await postcss([ + autoprefixer, + comments({ + remove: comment => comment[0] === '@' + }) + ]).process(css, { from: filePath, to: filePath }); + // Write processed CSS back to the file + await fs.writeFile(filePath, result.css); + console.log(`Processed: ${filePath}`); + } catch (err) { + console.error(`Error processing ${filePath}:`, err); + } +} + +// Init +(async () => { + try { + const directoryPath = await findExistingDirectory(possiblePaths); + console.log(`Processing CSS files in: ${directoryPath}`); + await processCssFiles(directoryPath); + } catch (error) { + console.error('Error:', error.message); + } +})(); \ No newline at end of file From a243abb3bc0c4839ea865ea4291efc28550ce5e4 Mon Sep 17 00:00:00 2001 From: Chris Friedberg Date: Mon, 14 Oct 2024 13:49:27 -0700 Subject: [PATCH 2/3] chore: removes unnecessary path #68 --- scripts/build/postCss.mjs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/scripts/build/postCss.mjs b/scripts/build/postCss.mjs index 8268b31..95dba45 100644 --- a/scripts/build/postCss.mjs +++ b/scripts/build/postCss.mjs @@ -12,8 +12,7 @@ const __dirname = path.dirname(__filename); // Define possible directory paths const possiblePaths = [ path.join(__dirname, '../src'), - path.join(__dirname, '../components'), - '/components' + path.join(__dirname, '../components') ]; // Find the first existing directory From 08d5399121a17d617a724f0876e7c328676c11ea Mon Sep 17 00:00:00 2001 From: Chris Friedberg Date: Mon, 14 Oct 2024 15:39:35 -0700 Subject: [PATCH 3/3] chore: continues if dir not found, fixes path #68 --- scripts/build/postCss.mjs | 56 ++++++++++++--------------------------- 1 file changed, 17 insertions(+), 39 deletions(-) diff --git a/scripts/build/postCss.mjs b/scripts/build/postCss.mjs index 95dba45..0b61c66 100644 --- a/scripts/build/postCss.mjs +++ b/scripts/build/postCss.mjs @@ -1,73 +1,49 @@ -import fs from 'fs/promises'; -import path from 'path'; -import { fileURLToPath } from 'url'; import autoprefixer from 'autoprefixer'; import postcss from 'postcss'; import comments from 'postcss-discard-comments'; +import path from 'path'; +import fs from 'fs/promises'; -// Get the directory path -const __filename = fileURLToPath(import.meta.url); -const __dirname = path.dirname(__filename); - -// Define possible directory paths -const possiblePaths = [ +const __dirname = new URL('.', import.meta.url).pathname; +const directories = [ path.join(__dirname, '../src'), path.join(__dirname, '../components') ]; -// Find the first existing directory -export async function findExistingDirectory(paths) { - for (const dir of paths) { - try { - await fs.access(dir); - return dir; - } catch (error) { - console.log(error); - } - } - throw new Error('No valid directory found'); -} - /** * Recursively process CSS files in a directory and its subdirectories * @param {string} dir - Directory to process */ -export async function processCssFiles(dir) { +async function processCssFiles(dir) { try { - // Read contents of directory const files = await fs.readdir(dir, { withFileTypes: true }); for (const file of files) { const fullPath = path.join(dir, file.name); - // If it's a directory, recursively process it if (file.isDirectory()) { await processCssFiles(fullPath); - // If it's a CSS file, process it } else if (path.extname(file.name).toLowerCase() === '.css') { await processPostCss(fullPath); } } } catch (err) { - console.error('Processing failed:', err); + console.error(`Processing failed for directory ${dir}:`, err); } } /** - * Process CSS file(s) with PostCSS + * Process CSS file with PostCSS * Applies autoprefixer and removes comments starting with '@' * @param {string} filePath - Full path of CSS file to process */ -export async function processPostCss(filePath) { +async function processPostCss(filePath) { try { - // Read CSS file const css = await fs.readFile(filePath, 'utf8'); - // Process CSS with PostCSS plugins const result = await postcss([ autoprefixer, comments({ remove: comment => comment[0] === '@' }) ]).process(css, { from: filePath, to: filePath }); - // Write processed CSS back to the file await fs.writeFile(filePath, result.css); console.log(`Processed: ${filePath}`); } catch (err) { @@ -75,13 +51,15 @@ export async function processPostCss(filePath) { } } -// Init +// Main execution (async () => { - try { - const directoryPath = await findExistingDirectory(possiblePaths); - console.log(`Processing CSS files in: ${directoryPath}`); - await processCssFiles(directoryPath); - } catch (error) { - console.error('Error:', error.message); + for (const dir of directories) { + try { + await fs.access(dir); + console.log(`Processing CSS files in: ${dir}`); + await processCssFiles(dir); + } catch (error) { + console.log(`Directory not found or not accessible: ${dir}`); + } } })(); \ No newline at end of file