feat: scoped version of stylesheet

khang-nd · May 14, 2022 · f64787d · f64787d
1 parent f36c532
commit f64787d
Show file tree

Hide file tree

Showing 6 changed files with 258 additions and 44 deletions.
diff --git 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
@@ -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
 <!DOCTYPE html>
@@ -36,11 +36,13 @@ The easiest way to use 7.css is to import it from [unpkg](https://unpkg.com/).
 </html>
 ```
 
-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
@@ -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
@@ -55,6 +55,12 @@
   <aside>
     <ul class="tree-view">
       <li><a href="#intro">Intro</a></li>
+      <li>
+        <a href="#install">Installation</a>
+        <ul>
+          <li><a href="#scoping">Scoping</a></li>
+        </ul>
+      </li>      
       <li>
         <details open>
           <summary><a href="#components">Components</a></summary>
@@ -150,6 +156,7 @@
       This means 7.css is compatible with your frontend framework of choice.
     </p>
 
+    <h2 id="install">Installation / Usage</h2>
     <p>
       The fastest way to use 7.css is to import it from unpkg.
     </p>
@@ -164,6 +171,27 @@
     <p><em>Usage</em></p>
     <pre style="max-width: fit-content">import "7.css/dist/7.css";</pre>
 
+    <h3 id="scoping">Scoping</h3>
+
+    <p>In case you need 7.css to coexist with another CSS/styling framework, you may use the <code>7.scoped.css</code>
+      stylesheet instead to scope the styling within a <code>win7</code> class.</p>
+
+    <p>unpkg:</p>
+    <pre>https://unpkg.com/7.css/dist/7.scoped.css</pre>
+
+    <p>or npm:</p>
+    <pre>import "7.css/dist/7.scoped.css"</pre>
+    </ul>
+
+    <p>Then in your code, wrap the component with <code>.win7</code>:</p>
+
+    <%- example(`
+    <div class="win7">
+      <button>A Win7-styled button</button>
+    </div>`) %>
+
+    <p>Also note that using the scoped stylesheet will eliminate the scrollbar styling as well.</p>
+
     <h2 id="components">Components</h2>
 
     <!-- Template -->