https://github.com/unlight/babel-plugin-postcss
Replace import from css expression to lit-element's css tag function
https://github.com/unlight/babel-plugin-postcss
babel-plugin babel-plugin-import babel-plugin-postcss
Last synced: 11 months ago
JSON representation
Replace import from css expression to lit-element's css tag function
- Host: GitHub
- URL: https://github.com/unlight/babel-plugin-postcss
- Owner: unlight
- License: mit
- Created: 2020-02-10T18:17:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-03-21T21:27:53.000Z (about 4 years ago)
- Last Synced: 2025-03-25T05:41:40.271Z (about 1 year ago)
- Topics: babel-plugin, babel-plugin-import, babel-plugin-postcss
- Language: TypeScript
- Homepage:
- Size: 90.8 KB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-postcss
Replace import from css by content transformed by postcss
## Examples
Input:
```ts
import style1 from './style.css';
import style2 from './style.css'; // options: { tagged: ['css', 'lit-element'] }
```
Output:
```ts
var style1 = '/* style.css content */';
import { css } from 'lit-element';
var style2 = css`
/* style.css content */
`;
```
## Install
1. `npm install --save-dev babel-plugin-postcss`
2. Add `['babel-plugin-postcss', { options }]` to plugins section of babel config.
## Options
#### test
Regular expression or function which test importee for being parsed as style file (css).
Type: `RegExp | Function`
Default: `/\.css$/`
Example: `/\.css$/` only `.css` imports will be parsed
#### postcss
If value is truthy css content will be processed by postcss,
postcss config will be loaded by `postcss-load-config`.
Type: `undefined | boolean`
Default: `undefined`
#### tagged
Wrap css content to tagged template, array of two elements. First is tagged function,
second is module where import the tagged function from.
Type: `undefined | [string, string]`
Default: `undefined`
Example: `['css', 'lit-element']`
Input:
```ts
import style3 from './style3.css';
```
Output:
```ts
import { css } from 'lit-element';
var style2 = css`
/* style3.css content */
`;
```