wrap-css

One ring to rule them all

wrap-css is a cli package, for wrapping your CSS/SCSS selector and applying changes on the fly

Features

• SCSS compatible
• Wrap a list of .css, .scss files
• Chose export folder
• Scope your wrappers
• Wrap whole selctor or each part of it
• Build files on changes

Install

Install the package

npm i @ysione/wrap-css

Afterwards in root folder create a config file

npx @ysione/wrap-css init

This will generate next file

module.exports = {
  watch: ["index.css"],
  export: "modified",
  modifiers: [
    {
      name: "",
      prefix: "",
      sufix: "",
      wrapperPrefix: "",
      wrapperSufix: "",
    },
  ],
}

Set path to your .css, .scss files, chose path for export and use one of the commads:

// to wrap selector
npx @ysione/wrap-css wrap

// to watch files for changes and rebuild export files
npx @ysione/wrap-css watch

Configuration

Default export

module.exports = {
  watch: ["index.css"],
  export: "modified",
  modifiers: [
    {
      name: "",
      prefix: "",
      sufix: "",
      wrapperPrefix: "",
      wrapperSufix: "",
    },
  ],
}

Config

| property | type | description | | :-------: | :--------: | :------------------------------------------------------ | | watch | string[] | An array of paths to .css, .scss files | | export | string | Path in your root directory for exporting files | | modifiers | Modifier[] | Each modifier will be applied to files from watch array |

Modifier

| property | type | description | | :-----------: | :------: | :--------------------------------------------------------------------------------------------------- | | name | string | Name for export file | | prefix | string | String for the beginnig of selector | | sufix | string | String for the end of selector | | wrapperPrefix | string[] | Strings for the beginnig of file | | wrapperSufix | string[] | Strings for the end of file | | each | boolean | Defines whether script will wrap whole selector, or each part of the selector | | scope | string[] | A modifier can be scoped to apply changes to specific types of selectors, such as class, element |

Example

SCSS

• wrap-css removes all @import and @use lines to escape path resolving problems, therefore please move them to the wrapperPrefix or wrapperSufix
• Move your maps to a different file, so they don't get duplicated

config

module.exports = {
  watch: ["./styles/index.scss"],
  export: "modified",
  modifiers: [
    {
      name: "Kujiro",
      prefix: "#{$bpName}\\:",
      sufix: "",
      wrapperPrefix: [
        "/*\r\n",
        "       .\r\n",
        '      ":"\r\n',
        '    ___:____      |"\\/"|\r\n',
        "  ,'        `.    \\  /\r\n",
        "  |  O        \\___/ |\r\n",
        "~^~^~^~^~^~^~^~^~^~^~^~^~\r\n",
        "*/\r\n",
        "\r\n",
        '@import "../../styles/config.scss";\r\n',
        "\r\n",
        "@each $bpName, $value in $breakpoints {\r\n",
        "@media (min-width: $value) {\r\n",
      ],
      wrapperSufix: ["}\r\n", "}\r\n"],
    },
  ],
}

index.scss

@import "config.scss";

//display
@each $name, $value in $display {
  .#{$name} {
    display: $value;
  }
}

Kujiro.scss

/*
       .
      ":"
    ___:____      |"\/"|
  ,'        `.    \  /
  |  O        \___/ |
~^~^~^~^~^~^~^~^~^~^~^~^~
*/

@import "../../styles/config.scss";

@each $bpName, $value in $breakpoints {
  @media (min-width: $value) {
    //display
    @each $name, $value in $display {
      .#{$bpName}\:#{$name} {
        display: $value;
      }
    }
  }
}

CSS

config

module.exports = {
  watch: ["index.css"],
  export: "modified",
  modifiers: [
    {
      name: "Kujiro",
      prefix: "whale-",
      sufix: "-swim",
      wrapperPrefix: [
        "/*\r\n",
        "       .\r\n",
        '      ":"\r\n',
        '    ___:____      |"\\/"|\r\n',
        "  ,'        `.    \\  /\r\n",
        "  |  O        \\___/ |\r\n",
        "~^~^~^~^~^~^~^~^~^~^~^~^~\r\n",
        "*/\r\n",
      ],
      wrapperSufix: "",
    },
  ],
}

index.css

.content {
  width: 100%;
  font-size: 1rem;
}

.header {
  display: flex;
}

p {
  margin: 0;
  padding: 0;
}

Kujiro.css

/*
       .
      ":"
    ___:____      |"\/"|
  ,'        `.    \  /
  |  O        \___/ |
~^~^~^~^~^~^~^~^~^~^~^~^~
*/

.whale-content-swim {
  width: 100%;
  font-size: 1rem;
}

.whale-header-swim {
  display: flex;
}

whale-p-swim {
  margin: 0;
  padding: 0;
}

Scoped Example

config

module.exports = {
  watch: ["index.css"],
  export: "modified",
  modifiers: [
    {
      name: "Kujiro",
      prefix: "whale-",
      sufix: "-swim",
      wrapperPrefix: [
        "/*\r\n",
        "       .\r\n",
        '      ":"\r\n',
        '    ___:____      |"\\/"|\r\n',
        "  ,'        `.    \\  /\r\n",
        "  |  O        \\___/ |\r\n",
        "~^~^~^~^~^~^~^~^~^~^~^~^~\r\n",
        "*/\r\n",
      ],
      wrapperSufix: "",
      scope: ["class"],
    },
  ],
}

index.css

.content {
  width: 100%;
  font-size: 1rem;
}

.header {
  display: flex;
}

p {
  margin: 0;
  padding: 0;
}

Kujiro.css

/*
       .
      ":"
    ___:____      |"\/"|
  ,'        `.    \  /
  |  O        \___/ |
~^~^~^~^~^~^~^~^~^~^~^~^~
*/

.whale-content-swim {
  width: 100%;
  font-size: 1rem;
}

.whale-header-swim {
  display: flex;
}

p {
  margin: 0;
  padding: 0;
}