Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shoonia/parcel-transformer-css-to-string
Importing CSS files as a string to JavaScript (Support Parcel v2)
https://github.com/shoonia/parcel-transformer-css-to-string
css parcel-plugin parcel-transformer parcelv2 postcss
Last synced: about 1 month ago
JSON representation
Importing CSS files as a string to JavaScript (Support Parcel v2)
- Host: GitHub
- URL: https://github.com/shoonia/parcel-transformer-css-to-string
- Owner: shoonia
- License: mit
- Created: 2021-08-19T19:32:35.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-02-12T15:14:36.000Z (11 months ago)
- Last Synced: 2024-05-28T22:29:07.150Z (7 months ago)
- Topics: css, parcel-plugin, parcel-transformer, parcelv2, postcss
- Language: JavaScript
- Homepage:
- Size: 248 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# parcel-transformer-css-to-string
[](https://github.com/parcel-bundler/parcel)
[](https://github.com/shoonia/parcel-transformer-css-to-string/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/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](https://github.com/shoonia/parcel-plugin-css-to-string)
## Example
**styles.inline.css**
```css
.text {
color: #000000;
}
```
**index.js**
```js
import styles from './styles.inline.css';
document.body.insertAdjacentHTML('beforeend', `${styles}`);
```
**Result:**
```js
document.body.insertAdjacentHTML("beforeend",".text{color:#000}");
//# sourceMappingURL=index.js.map
```
## Install
```bash
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](https://en.wikipedia.org/wiki/Glob_(programming)) pattern for `*.inline.css` files that will be inlined as a string into JavaScript.
**.parcelrc**
```json
{
"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**
```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**
```js
{
"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**
```css
.text {
color: #000000;
}
```
**index.js**
```js
import styles from 'bundle-text:./styles.css';
document.body.insertAdjacentHTML('beforeend', `${styles}`);
```
**Reslut:**
```js
function e(e){return e&&e.__esModule?e.default:e}document.body.insertAdjacentHTML("beforeend",`${e(".text{color:#000}")}`);
//# sourceMappingURL=index.js.map
```
## License
[MIT](./LICENSE)