diff --git a/CHANGELOG.md b/CHANGELOG.md index 519af81..0856de4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 0.6.0 + +* Added a scoped css file that can coexist with other styling systems. + ## 0.5.0 * Added the `menubar`/`menu` component. diff --git a/README.md b/README.md index 2171095..749d114 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ It does not ship with any JavaScript, so it is compatible with your frontend fra ## Installation / Usage -The easiest way to use 7.css is to import it from [unpkg](https://unpkg.com/). +Directly via [unpkg](https://unpkg.com/): ```html @@ -36,11 +36,13 @@ The easiest way to use 7.css is to import it from [unpkg](https://unpkg.com/). ``` -Alternatively, you can grab 7.css from [npm](https://www.npmjs.com/package/7.css). +Via [npm](https://www.npmjs.com/package/7.css): -`npm install 7.css` +```sh +npm install 7.css +``` -Usage: +Then import it as below: ```javascript import "7.css/dist/7.css"; diff --git a/build.js b/build.js index 5de1f4a..e291793 100644 --- a/build.js +++ b/build.js @@ -7,33 +7,44 @@ const hljs = require("highlight.js"); const mkdirp = require("mkdirp"); const path = require("path"); const postcss = require("postcss"); +const plugins = [ + require("postcss-import"), + require("postcss-nested"), + require("postcss-css-variables"), + require("postcss-calc"), + require("postcss-copy")({ dest: "dist", template: "[name].[ext]" }), + require("cssnano"), +]; const { homepage, version } = require("./package.json"); -const postcssParser = postcss() - .use(require("postcss-import")) - .use(require("postcss-nested")) - .use(require("postcss-css-variables")) - .use(require("postcss-calc")) - .use(require("postcss-copy")({ dest: "dist", template: "[name].[ext]" })) - .use(require("cssnano")); +const parser = postcss(plugins); -function buildCSS() { +const parserWithPrefix = postcss([ + ...plugins, + require("postcss-prefix-selector")({ + prefix: ".win7", + transform: (prefix, selector, prefixed) => + ["body", ".surface"].includes(selector) ? selector + prefix : prefixed, + }), +]); + +async function buildCSS(usePrefix) { const input = `/*! 7.css v${version} - ${homepage} */\n` + fs.readFileSync("gui/index.scss"); - return postcssParser - .process(input, { - from: "gui/index.scss", - to: "dist/7.css", - map: { inline: false }, - }) - .then((result) => { - mkdirp.sync("dist"); - fs.writeFileSync("dist/7.css", result.css); - fs.writeFileSync("dist/7.css.map", result.map.toString()); - }); + const targetFile = usePrefix ? "dist/7.scoped.css" : "dist/7.css"; + + const result = await (usePrefix ? parserWithPrefix : parser).process(input, { + from: "gui/index.scss", + to: targetFile, + map: { inline: false }, + }); + + mkdirp.sync("dist"); + fs.writeFileSync(targetFile, result.css); + fs.writeFileSync(targetFile + ".map", result.map.toString()); } function buildDocs() { @@ -85,10 +96,14 @@ function buildDocs() { ); } -function build() { - buildCSS() - .then(buildDocs) - .catch((err) => console.log(err)); +async function build() { + try { + await buildCSS(); + await buildCSS(true); + buildDocs(); + } catch (err) { + console.error(err); + } } module.exports = build; diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 36794a4..27c3ca9 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -55,6 +55,12 @@