parcel-plugin-css-to-string

parcel-plugin-css-to-string

Importing CSS files as a string to JavaScript.

Transform plugin for Parcel v1

Support Parcel v2: parcel-transformer-css-to-string

styles.css

.text {
  color: #162D3D;
}

index.js

import styles from "./styles.css";

console.log(styles); // ".text{color:#162D3D}"

Install

npm i --save-dev parcel-plugin-css-to-string
# or
yarn add -D parcel-plugin-css-to-string

How to use

I'm recommending to use the custom extension to your styles which will be imported as a string. It will help to escape conflicts with .css files for global styles or css-modules. The default asset type css.

You can add the list of your custom extensions to .parcelrc config. Syntax highlight custom extension

For example: styles.cssx.

.parcelrc

{
  "parcel-plugin-css-to-string": {
    "assetType": ["cssx"]
  }
}

Example

Web component styles via the Shadow DOM

my-app
├── src
│   ├── styles.cssx
│   └── index.js
└── .parcelrc

src/styles.cssx

.title {
  text-align: center;
}

src/index.js

import styles from "./styles.cssx";

const root = document.createElement("div");

root.innerHTML = `
<style>${styles}</style>
<div>
  <h1 class="title">Hello!</h1>
</div>
`;

class MyWebComponent extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: "open" }).appendChild(root);
  }
}

window.customElements.define("my-web-component", MyWebComponent);

Plugin options

your .parcelrc

{
  "parcel-plugin-css-to-string": {
    "assetType": ["css"],
    "minify": true,
    "enableCSS": false
  }
}

or package.json

{
  "name": "my_package",
  "description": "",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {
    "parcel-bundler": "^1.x",
    "parcel-plugin-css-to-string": "^2.x"
  },
+  "parcel-plugin-css-to-string": {
+    "assetType": ["css"],
+    "minify": true,
+    "enableCSS": false
+  }
}

Name	Type	Default	Description
assetType	{Array<string>}	["css"]	List of asset types imported to javascript as a string.
minify	{Boolean}	true	on/off minification
enableCSS	{Boolean}	false	on/off the generation of CSS files

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: .postcssrc (JSON), .postcssrc.js, or postcss.config.js.

.postcssrc config omit .parcelrc option minify. If you use PostCSS config then you need added cssnano plugin to minify production build.

.postcssrc

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

Developer tools

You can configure how the IDE will parse the files with custom extension.

VS Code

Add to the root folder of your project a new folder .vscode with file settings.json

my-app
├── .vscode
│   └── settings.json
├── src
│   ├── styles.cssx
│   └── index.js
└── .parcelrc

.vscode/settings.json

{
  "files.associations": {
    "*.cssx": "css",
    ".parcelrc": "json",
    ".postcssrc": "json"
  }
}

• VS Code: Language Identifiers

License

MIT