diff --git a/README.md b/README.md index 9aa32a19..3ee59262 100644 --- a/README.md +++ b/README.md @@ -2,46 +2,71 @@ *Just more mixins and functions with SCSS for more productive projects.* -## Getting Started -NPM -``` -npm i -D sass-pire -``` +`sass-pire` is a lightweight and versatile library of SCSS mixins and functions designed to simplify your development workflow. Whether you're managing styles for a large-scale project or just need handy utilities, `sass-pire` helps you write cleaner, more efficient SCSS. + +--- -Yarn +## Installation +### NPM +```bash +npm i -D sass-pire ``` + +### Yarn +```bash yarn add sass-pire --dev ``` +--- + ## Usage -After installing `sass-pire` using your favorite package manager, you can import it into any `SCSS` file you want and use it easily. -Example: -If you are at `index.scss` file, you can import the `sass-pire.scss` using `@import` statement: -``` -@import "/path/to/root/directory/node_modules/sass-pire/src/sass-pire.scss"; -``` +After installing `sass-pire` using your favorite package manager, you can import it into any SCSS file. -Or by using `@use` statement: +### Recommended Approach +```scss +@use "sass-pire" as *; ``` -@use "/path/to/root/directory/node_modules/sass-pire/src/sass-pire.scss" as *; + +### Configure Load Path +Make sure to add the `--load-path=node_modules` flag in your `sass` command in `package.json`: +```json +"scripts": { + "watch:sass": "sass --load-path=node_modules --watch ./src/index.scss" +} ``` +### Deprecation Notice +The `@import` statement will be deprecated in future versions of `Sass`. We strongly recommend using the `@use` statement instead. + +--- + ## Features -* `Mixins` with its vendor prefixes. -* Useful `Functions` to use easily. -* `Media queries` with a sufficient amount of screens to match all of it. +- **`Reusable Mixins`**: Predefined mixins with `vendor prefixes` for cross-browser compatibility. +- **`Utility Functions`**: Handy functions to streamline calculations and style definitions. +- **`Media Queries`**: Ready-to-use breakpoints for responsive design. +- **Using [`reset-zone`](https://www.npmjs.com/package/reset-zone) for resetting styles.** +- **Add `utility classes` to your HTML elements.** -## Contribute -You can contribute to `sass-pire` by making a fork of this repository and cloning it in your local device. +--- -It is very important to make a `new branch` to your `feature` or `solve a bug` or `solve an issue`. +## Contribution -## Do you want more features? -Please, set a new issue and labeled it as `Feature` and insert what you want. +Contributions are welcome! Here’s how you can help: +1. Fork the repository and clone it to your local machine. +2. Create a new branch for your feature, bug fix, or issue resolution. +3. Submit a pull request describing your changes. +--- + +## Feature Requests + +Have an idea for a new feature? Open an issue, label it as `Feature`, and describe your suggestion. We'd love to hear your ideas! + +--- ## License + [MIT](https://github.com/Black-Axis/sass-pire/blob/master/LICENSE.md) diff --git a/build/constants.js b/build/constants.js index 167448c0..a20f0e4d 100644 --- a/build/constants.js +++ b/build/constants.js @@ -98,7 +98,7 @@ const getSettingsText = (packageJsonObject) => { const CONFIG = { BANNER_PATH: 'src/mixins/general/_banner.scss', SETTINGS_PATH: 'src/abstract/_settings.scss', - MAIN_INDEX_PATH: 'src/sass-pire.scss' + MAIN_INDEX_PATH: 'index.scss', }; module.exports = { diff --git a/build/index.js b/build/index.js index 79fc0f89..49a76b08 100644 --- a/build/index.js +++ b/build/index.js @@ -105,7 +105,7 @@ const BuildLibrary = (function () { * * It returns a string of SCSS code that contains all variables or lists * * which are used, as library developers, to compile them in some use cases * * in the whole library. - * + * * @access private * * @returns {string} The content of the settings file. @@ -227,7 +227,9 @@ const BuildLibrary = (function () { */ static updateVersion(filePath, newVersion) { try { - let content = fs.readFileSync(filePath, 'utf8'); + const fullPath = path.resolve(process.cwd(), filePath); + + let content = fs.readFileSync(fullPath, 'utf8'); content = content.replace( /\/\/ @version .+/, diff --git a/src/sass-pire.scss b/index.scss similarity index 91% rename from src/sass-pire.scss rename to index.scss index 64397c41..36f6a7ca 100644 --- a/src/sass-pire.scss +++ b/index.scss @@ -18,30 +18,30 @@ // * The "abstract" module may contain abstract styles or variables used // * throughout the project. // @see abstract -@forward "abstract"; +@forward "./src/abstract"; // * forwarding the "functions" module. // * The "functions" module likely contains custom Sass functions for use // * in stylesheets. // @see functions -@forward "functions"; +@forward "./src/functions"; // * forwarding the "mixins" module. // * The "mixins" module probably contains reusable Sass mixins. // @see mixins -@forward "mixins"; +@forward "./src/mixins"; // * forwarding the "helpers" module. // * The "helpers" module may contain helper classes or functions for // * simplifying styles. // @see helpers -@forward "helpers"; +@forward "./src/helpers"; // * forwarding the "development-utils" module. // * The "development-utils" module might contain utilities helpful // * during development. // @see development-utils -@forward "development-utils"; +@forward "./src/development-utils"; // * There is a utility module for the sass-pire library // * We need to import it to use the sass-pire library diff --git a/package.json b/package.json index 5e1f33bd..bbe24bac 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,18 @@ "sass-library", "scss-library" ], + "files": [ + "src/**/*.scss", + "index.scss", + "LICENSE.md", + "README.md" + ], + "exports": { + "sass": "./index.scss", + "import": "./index.scss" + }, + "style": "./index.scss", + "sass": "./index.scss", "repository": { "url": "https://github.com/Black-Axis/sass-pire", "type": "git"