New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

inline-sass

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

inline-sass

[![npm version](https://badge.fury.io/js/inline-sass.svg)](https://badge.fury.io/js/inline-sass) [![Module type: ESM](https://img.shields.io/badge/module%20type-esm-brightgreen)](https://nodejs.org/api/esm.html)

latest

npm

Version: 1.2.0

Version published: 3 years ago

Weekly downloads: 2

Maintainers: 1

Weekly downloads

Created: 4 years ago

Source

Inline Sass

Inline Sass stylesheets into HTML style attributes — useful in emails and other lo-fi HTML authoring situations.

A thin wrapper for inline-css and Sass.

Use

file.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <link rel="stylesheet" href="sass.scss" />
  </head>
  <body>
    <div id="ex">Hello world</div>
  </body>
</html>

sass.scss:

#ex {
  color: red;
}

import inlineSass from 'inline-sass';

inlineSass('/path/to/file.html')
  .then((result) => console.log(String(result)))
  .catch(console.error);

Console:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <div id="ex" style="color: red;">Hello world</div>
  </body>
</html>

API

Passes through all arguments to inline-css. Plus:

deleteTempDir

Type: boolean
Default: true

Whether or not to delete the temporary directory of transpiled CSS.

How it works

inline-sass transpiles any linked .sass or .scss files into a temporary directory, re-writing the <link> tags in the HTML to refer to the temporary .css files (but storing the original href in the data-original-href attribute). At the end of the run, the temporary directory is deleted. Unless overridden by another value, the directory containing the HTML file will be passed as the url option to inline-css.

It is also possible to pass literal HTML as the first argument to inline-sass, in which case the options object must contain an url value to act as a basepath for any relative references in the <link> tags:

import inlineSass from `inline-sass`;

inlineSass(
  `<html>
    <head
      <title>Literal HTML</title>
      <link rel="stylesheet" href="styles/sass.scss"/>
    </head>
    <body>
      <div id="ex">Hello World</div>
    </body>
  </html>`,
  'file:///path/to/my'
)
  .then(result => console.log(String(result)))
  .catch(console.error);

In this case, Sass would attempt to transpile the file /path/to/my/styles/sass.scss. A concrete example of this approach can be found in @battis/inline-sass-to-clipboard.

FAQs

What is inline-sass?

Is inline-sass popular?

Is inline-sass well maintained?

Package last updated on 08 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install