Skip to content

Inline Sass stylesheets into HTML style attributes

License

Notifications You must be signed in to change notification settings

battis/inline-sass

Repository files navigation

Inline Sass

npm version Module type: ESM

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.

About

Inline Sass stylesheets into HTML style attributes

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published