parcel-plugin-css-to-string
v2.5.5
Published
Importing CSS files as a string to JavaScript
Downloads
451
Maintainers
Readme
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
optionminify
. If you use PostCSS config then you need addedcssnano
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"
}
}