Parcel-transformer-css-to-string NPM

parcel-transformer-css-to-string

Importing CSS files as a string to JavaScript.

Transform plugin for Parcel v2

Support Parcel v1: parcel-plugin-css-to-string

Example

styles.inline.css

.text {
  color: #000000;
}

index.js

import styles from './styles.inline.css';

document.body.insertAdjacentHTML('beforeend', `<style>${styles}</style>`);

Result:

document.body.insertAdjacentHTML("beforeend","<style>.text{color:#000}</style>");
//# sourceMappingURL=index.js.map

Install

npm i parcel-transformer-css-to-string
# or
yarn add -D parcel-transformer-css-to-string

How to use

Add the plugin to transformers section in your .parcelrc.

In example use a Glob pattern for *.inline.css files that will be inlined as a string into JavaScript.

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.inline.css": [
      "parcel-transformer-css-to-string"
    ]
  }
}

Minify config

You can configure minify CSS in production build, where custom configuration can be set by creating cssnano.config.js file

cssnano.config.js

module.exports = {
  preset: [
    "default",
    {
      calc: false,
      discardComments: {
        removeAll: true,
      },
    },
  ],
}

PostCSS

You can configure CSS transforming with PostCSS creating a configuration file using one of these names (in that priority): .postcssrc (JSON), .postcssrc.json, .postcssrc.js, or postcss.config.js.

If you use PostCSS config then you need added cssnano plugin to minify production build.

.postcssrc

{
  "plugins": {
    "postcss-import": {},
    "autoprefixer": {},
    "cssnano": {}
  }
}

Alternative

You can use official build-in named pipelines bundle-text:. In this case Parcel create a JavaScript module.

style.css

.text {
  color: #000000;
}

index.js

import styles from 'bundle-text:./styles.css';

document.body.insertAdjacentHTML('beforeend', `<style>${styles}</style>`);

Reslut:

function e(e){return e&&e.__esModule?e.default:e}document.body.insertAdjacentHTML("beforeend",`<style>${e(".text{color:#000}")}</style>`);
//# sourceMappingURL=index.js.map