Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shoonia/parcel-plugin-css-to-string
Importing CSS files as a string to JavaScript (Support Parcel v1)
https://github.com/shoonia/parcel-plugin-css-to-string
css parcel-bundler parcel-plugin webcomponents
Last synced: about 2 months ago
JSON representation
Importing CSS files as a string to JavaScript (Support Parcel v1)
- Host: GitHub
- URL: https://github.com/shoonia/parcel-plugin-css-to-string
- Owner: shoonia
- License: mit
- Created: 2019-10-18T09:58:07.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-02-21T13:16:30.000Z (11 months ago)
- Last Synced: 2024-10-31T20:43:08.622Z (2 months ago)
- Topics: css, parcel-bundler, parcel-plugin, webcomponents
- Language: JavaScript
- Homepage:
- Size: 2.1 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# parcel-plugin-css-to-string
[](https://github.com/shoonia/parcel-plugin-css-to-string/actions)
[](https://www.npmjs.com/package/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](https://github.com/shoonia/parcel-transformer-css-to-string)
**styles.css**
```css
.text {
color: #162D3D;
}
```
**index.js**
```js
import styles from "./styles.css";
console.log(styles); // ".text{color:#162D3D}"
```
## Install
```bash
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](#developer-tools)
For example: `styles.cssx`.
**.parcelrc**
```json
{
"parcel-plugin-css-to-string": {
"assetType": ["cssx"]
}
}
```
## Example
Web component styles via the Shadow DOM
```bash
my-app
├── src
│ ├── styles.cssx
│ └── index.js
└── .parcelrc
```
**src/styles.cssx**
```css
.title {
text-align: center;
}
```
**src/index.js**
```js
import styles from "./styles.cssx";
const root = document.createElement("div");
root.innerHTML = `
${styles}
Hello!
`;
class MyWebComponent extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: "open" }).appendChild(root);
}
}
window.customElements.define("my-web-component", MyWebComponent);
```
## Plugin options
your `.parcelrc`
```json
{
"parcel-plugin-css-to-string": {
"assetType": ["css"],
"minify": true,
"enableCSS": false
}
}
```
or `package.json`
```diff
{
"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}` | `["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**
```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**
```js
{
"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`
```bash
my-app
├── .vscode
│ └── settings.json
├── src
│ ├── styles.cssx
│ └── index.js
└── .parcelrc
```
**.vscode/settings.json**
```json
{
"files.associations": {
"*.cssx": "css",
".parcelrc": "json",
".postcssrc": "json"
}
}
```
- [VS Code: Language Identifiers](https://code.visualstudio.com/docs/languages/identifiers)
## License
[MIT](./LICENSE)