Skip to content

Commit

Permalink
Adding PostCSS-LTR
Browse files Browse the repository at this point in the history
  • Loading branch information
Skrypt committed Jan 10, 2025
1 parent 743f9ba commit 5d4a1eb
Show file tree
Hide file tree
Showing 49 changed files with 814 additions and 11,502 deletions.
90 changes: 62 additions & 28 deletions .scripts/assets-build-tool/min.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import chalk from "chalk";
import path from "path";
import swc from "@swc/core";
import { transform } from "lightningcss";
import postcss from "postcss";
import postcssRTLCSS from "postcss-rtlcss";
import { Mode, Source } from "postcss-rtlcss/options";

let action = process.argv[2];
const config = JSON5.parse(
Expand Down Expand Up @@ -137,10 +140,62 @@ glob(config.source).then((files) => {
);
throw err;
});
}
else if (fileInfo.ext === ".css") {
} else if (fileInfo.ext === ".css") {
let reader = await fs.readFile(file, "utf8");

if (config.generateRTL) {
const rtlTarget = path.join(
dest,
path.parse(target).name + ".css"
);

const options = {
mode: Mode.combined,
from: Source.css,
};

const result = await postcss([
postcssRTLCSS(options),
]).process(reader, { from: file });
reader = result.css;

console.log(
`RTL (${chalk.gray("from")}, ${chalk.cyan(
"to"
)})`,
chalk.gray(rtlTarget),
chalk.cyan(rtlTarget)
);
}

const copyTarget = path.join(
dest,
path.parse(target).base
);

await fs.outputFile(copyTarget, reader).then(() => {
console.log(
`Copied (${chalk.gray(
"from"
)}, ${chalk.cyan("to")})`,
chalk.gray(file),
chalk.cyan(target)
)
})
.catch((err) => {
console.log(
`${chalk.red(
"Error copying"
)} (${chalk.gray("from")}, ${chalk.cyan(
"to"
)})`,
chalk.gray(file),
chalk.cyan(target),
chalk.red(err)
);
throw err;
});

let { code, map } = transform({
filename: "style.css",
code: Buffer.from(reader),
Expand All @@ -153,7 +208,10 @@ glob(config.source).then((files) => {
dest,
path.parse(target).name + ".min.css"
);
fs.outputFile(minifiedTarget, code);
await fs.outputFile(
minifiedTarget,
code.toString()
);
console.log(
`Minified (${chalk.gray("from")}, ${chalk.cyan(
"to"
Expand All @@ -168,7 +226,7 @@ glob(config.source).then((files) => {
dest,
path.parse(target).name + ".map"
);
fs.outputFile(mappedTarget, map);
await fs.outputFile(mappedTarget, (output.map.replace(/(?:\\[rn])+/g, "\\n")) + "\n");
console.log(
`Mapped (${chalk.gray("from")}, ${chalk.cyan(
"to"
Expand All @@ -177,30 +235,6 @@ glob(config.source).then((files) => {
chalk.cyan(mappedTarget)
);
}

fs.copy(file, target)
.then(() =>
console.log(
`Copied (${chalk.gray(
"from"
)}, ${chalk.cyan("to")})`,
chalk.gray(file),
chalk.cyan(target)
)
)
.catch((err) => {
console.log(
`${chalk.red(
"Error copying"
)} (${chalk.gray("from")}, ${chalk.cyan(
"to"
)})`,
chalk.gray(file),
chalk.cyan(target),
chalk.red(err)
);
throw err;
});
} else {
console.log(
"Trying to minify a file with an extension that is not allowed."
Expand Down
2 changes: 2 additions & 0 deletions .scripts/assets-build-tool/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
"parcel": "2.13.3",
"parcel-config-vue2": "^0.1.3",
"parcel-transformer-vue2": "^0.1.7",
"postcss": "8.4.49",
"postcss-rtlcss": "5.6.0",
"sass": "^1.83.1",
"vue-hot-reload-api": "^2.3.4"
},
Expand Down
223 changes: 151 additions & 72 deletions .scripts/assets-build-tool/sass.mjs
Original file line number Diff line number Diff line change
@@ -1,97 +1,176 @@
import fs from "fs-extra";
import { glob } from 'glob'
import { glob } from "glob";
import JSON5 from "json5";
import chalk from "chalk";
import path from "path";
import { transform } from "lightningcss";
import * as sass from "sass";
import postcss from "postcss";
import postcssRTLCSS from "postcss-rtlcss";
import { Mode, Source } from "postcss-rtlcss/options";

let action = process.argv[2];
const config = JSON5.parse(Buffer.from(process.argv[3], "base64").toString("utf-8"));
const config = JSON5.parse(
Buffer.from(process.argv[3], "base64").toString("utf-8")
);
const dest = config.dest ?? config.basePath + "/wwwroot/Styles/";

if (config.dryRun) {
action = "dry-run";
action = "dry-run";
}

// console.log(`sass ${action}`, config);

glob(config.source).then((files) => {
if (files.length == 0) {
console.log(chalk.yellow("No files to copy", config.source));
return;
}

const destExists = fs.existsSync(dest);

if (destExists) {
const stats = fs.lstatSync(dest);
if (!stats.isDirectory()) {
console.log(chalk.red("Destination is not a directory"));
console.log("Files:", files);
console.log("Destination:", dest);
return;
if (files.length == 0) {
console.log(chalk.yellow("No files to copy", config.source));
return;
}
console.log(chalk.yellow(`Destination ${dest} already exists, files may be overwritten`));
}

let baseFolder;
const destExists = fs.existsSync(dest);

if (config.source.indexOf("**") > 0) {
baseFolder = config.source.substring(0, config.source.indexOf("**"));
}
if (destExists) {
const stats = fs.lstatSync(dest);
if (!stats.isDirectory()) {
console.log(chalk.red("Destination is not a directory"));
console.log("Files:", files);
console.log("Destination:", dest);
return;
}
console.log(
chalk.yellow(
`Destination ${dest} already exists, files may be overwritten`
)
);
}

files.forEach((file) => {
file = file.replace(/\\/g, "/");
let relativePath;
let baseFolder;

if (baseFolder) {
relativePath = file.replace(baseFolder, "");
} else {
relativePath = path.basename(file);
if (config.source.indexOf("**") > 0) {
baseFolder = config.source.substring(0, config.source.indexOf("**"));
}

const target = path.join(dest, relativePath);

if (action === "dry-run") {
console.log(`Dry run (${chalk.gray("from")}, ${chalk.cyan("to")})`, chalk.gray(file), chalk.cyan(target));
} else {
fs.stat(file).then(async (stat) => {
if (!stat.isDirectory()) {
let fileInfo = path.parse(file);

if (fileInfo.ext === ".scss") {
const cssResult = await sass.compileAsync(file);

if (cssResult) {
const normalTarget = path.join(dest, path.parse(target).name + ".css");
fs.outputFile(normalTarget, cssResult.css);
console.log(`Tranpiled (${chalk.gray("from")}, ${chalk.cyan("to")})`, chalk.gray(file), chalk.cyan(normalTarget));

let { code, map } = transform({
filename: "style.css",
code: Buffer.from(cssResult.css),
minify: true,
sourceMap: true,
});

if (code) {
const minifiedTarget = path.join(dest, path.parse(target).name + ".min.css");
fs.outputFile(minifiedTarget, code);
console.log(`Minified (${chalk.gray("from")}, ${chalk.cyan("to")})`, chalk.gray(file), chalk.cyan(minifiedTarget));
}

if (map) {
const mappedTarget = path.join(dest, path.parse(target).name + ".css.map");
fs.outputFile(mappedTarget, map);
console.log(`Mapped (${chalk.gray("from")}, ${chalk.cyan("to")})`, chalk.gray(file), chalk.cyan(mappedTarget));
}
}
} else {
console.log("Trying to transpile a SASS file with an extension that is not allowed.");
}
files.forEach((file) => {
file = file.replace(/\\/g, "/");
let relativePath;

if (baseFolder) {
relativePath = file.replace(baseFolder, "");
} else {
relativePath = path.basename(file);
}
});
}
});

const target = path.join(dest, relativePath);

if (action === "dry-run") {
console.log(
`Dry run (${chalk.gray("from")}, ${chalk.cyan("to")})`,
chalk.gray(file),
chalk.cyan(target)
);
} else {
fs.stat(file).then(async (stat) => {
if (!stat.isDirectory()) {
let fileInfo = path.parse(file);

if (fileInfo.ext === ".scss") {
const scssResult = await sass.compileAsync(file, {
sourceMap: true,
sourceMapIncludeSources: false,
});

/* if (scssResult.sourceMap) {
const mappedTarget = path.join(
dest,
path.parse(target).name + ".scss.map"
);
fs.outputFile(mappedTarget, JSON5.stringify(scssResult.sourceMap));
console.log(
`Mapped (${chalk.gray(
"from"
)}, ${chalk.cyan("to")})`,
chalk.gray(file),
chalk.cyan(mappedTarget)
);
} */

if (scssResult.css) {
const normalTarget = path.join(
dest,
path.parse(target).name + ".css"
);
await fs.outputFile(normalTarget, scssResult.css);
console.log(
`Tranpiled (${chalk.gray("from")}, ${chalk.cyan(
"to"
)})`,
chalk.gray(file),
chalk.cyan(normalTarget)
);

if (config.generateRTL) {
const options = {
mode: Mode.combined,
};

const result = await postcss([
postcssRTLCSS(options),
]).process(scssResult.css, { from: file });

await fs.outputFile(normalTarget, result.css);
scssResult.css = result.css;
console.log(
`RTL (${chalk.gray("from")}, ${chalk.cyan(
"to"
)})`,
chalk.gray(normalTarget),
chalk.cyan(normalTarget)
);
}

let { code, map } = transform({
code: Buffer.from(scssResult.css),
minify: true,
sourceMap: true,
});

if (code) {
const minifiedTarget = path.join(
dest,
path.parse(target).name + ".min.css"
);
fs.outputFile(minifiedTarget, code);
console.log(
`Minified (${chalk.gray(
"from"
)}, ${chalk.cyan("to")})`,
chalk.gray(normalTarget),
chalk.cyan(minifiedTarget)
);
}

if (map) {
const mappedTarget = path.join(
dest,
path.parse(target).name + ".css.map"
);
fs.outputFile(mappedTarget, map);
console.log(
`Mapped (${chalk.gray(
"from"
)}, ${chalk.cyan("to")})`,
chalk.gray(normalTarget),
chalk.cyan(mappedTarget)
);
}
}
} else {
console.log(
"Trying to transpile a SASS file with an extension that is not allowed."
);
}
}
});
}
});
});

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 5d4a1eb

Please sign in to comment.