Make gls- namespace optional.

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 _Change is the essence._
 
+## 1.1.0
+* Remove all the `gls-` prefixes from the mixin files under the `library` folder and make prefix usage optional (`gls-` prefix still can ben use).
+
 ## 0.0.1
 * Changelog created!

CONTRIBUTING.md

@@ -19,7 +19,6 @@ Please examine the code and match the style with the code you write (**Prettier*
 * Use `@charset "UTF-8";` line in every Sass related files to avoid any potential issues with character encoding.
 * Use **camelCase** naming convention for function names only and start with two underscore characters (e.g. `__remify`).
 * Use **kebab-case** naming convention for the rest of the code.
-* Use `gls-` namespace for mixins (**not for the file names**) (e.g. `gls-new-mixin`).
 * Use `map-for-`prefix for the map names (e.g. `$map-for-directions`).
 * Use `list-of-` prefix for the list names (e.g. `$list-of-colors`).
 * Don't use single quotes unless you have to.
@@ -37,12 +36,22 @@ In the entire library, only the function names are following the camelCase namin
 
 ### Mixins
 
-The mixin files should be placed in the **library** folder and they must follow the kebab-case naming convention. Use `gls-` namespace for mixin names (**not for the file names**) as in the example below:
+The mixin files should be placed in the **library** folder and they must follow the kebab-case naming convention.
 
-    @mixin gls-your-mixin($parameter) {
+    @mixin your-mixin($parameter) {
       // Your code!
     }
 
+After you create a mixin run following command to test it:
+
+    npm test
+
+If the test pass run following command to generate your mixin's prefixed version:
+
+    gulp start
+
+**Important Note:** You must have Gulp installed globally on your machine.
+
 ### Lists
 
 The list files should be placed in the **lists** folder, and the name of the list must start with the `list-of` prefix.

README.md

@@ -1,6 +1,6 @@
 <p>
   <a href="https://gerillass.com" target="_blank">
-    <img src="https://gerillass.com/images/github/gerillass_logo_sassy.svg">:link:
+    <img src="https://gerillass.com/images/github/gerillass_logo_sassy.svg">
   </a>
 </p>
 
@@ -26,6 +26,7 @@ Hope you’ll enjoy using it!
   - [Using with Gulp](#using-with-gulp)
   - [Using with Grunt](#using-with-grunt)
   - [Cloning the Repository from Github](#cloning-the-repository-from-github)
+- [Namespace Usage](#namespace-usage)
 - [Vendor Prefix Support](#vendor-prefix-support)
 - [Experimenting](#experimenting)
 - [Testing](#testing)
@@ -119,6 +120,10 @@ Including to the project:
 
     @import '{folder_path}/gerillass/scss/gerillass';
 
+## Namespace Usage
+
+You can use Gerillass with or without `gls-` namespace. It is optional, but I strongly recommend you to use it to prevent having conflicts with other Sass libraries or frameworks like Bootstrap.
+
 ## Vendor Prefix Support
 
 Because of the vast usage of bundlers like [Gulp](https://gulpjs.com/), [Grunt](https://gruntjs.com/), [Webpack](https://webpack.js.org/), etc.(these frameworks run some other plugins like Autoprefixer to support vendor prefixes), Gerillass doesn't provide vendor prefix support.

gulpfile.js

@@ -1,13 +1,34 @@
-const { series, src, dest, watch } = require("gulp");
+const { series, src, dest } = require("gulp");
+const concat = require("gulp-concat");
+const replace = require("gulp-replace");
+const header = require("gulp-header");
 
-const rename = require("gulp-rename");
+function gather_mixins(done) {
+  return src(["scss/library/**/*.scss"])
+    .pipe(concat("_gerillass-prefix.scss"))
+    .pipe(dest("scss"));
+  done();
+}
 
+function del_charset(done) {
+  return src("scss/_gerillass-prefix.scss")
+    .pipe(replace('@charset "UTF-8";', ''))
+    .pipe(dest("scss"));
+  done();
+}
+
+function add_charset(done) {
+  return src("scss/_gerillass-prefix.scss")
+    .pipe(header('@charset "UTF-8";'))
+    .pipe(dest("scss"));
+  done();
+}
 
-function namify(done) {
-  return src("./scss/_gerillass.scss")
-    .pipe(rename({ prefix: "_gls-", basename: "gerillass", extname: ".scss" }))
-    .pipe(dest("./scss"));
+function add_prefix(done) {
+  return src("scss/_gerillass-prefix.scss")
+    .pipe(replace('@mixin ', "@mixin gls-"))
+    .pipe(dest("scss"));
   done();
 }
 
-exports.start = series(namify);
+exports.start = series(gather_mixins, del_charset, add_charset, add_prefix);