Skip to content

Instantly share code, notes, and snippets.

View newbornfrontender's full-sized avatar
🐣
Time to code

Infant Frontender newbornfrontender

🐣
Time to code
  • Russia
View GitHub Profile
@newbornfrontender
newbornfrontender / postcss.js
Created January 5, 2019 17:03
Babel (plugin) - PostCSS - Tagged templates
const postcss = require('postcss');
const postcssrc = require('postcss-load-config');
const deasyncPromise = require('deasync-promise');
const expressionsRegex = /__QUASI_EXPR_(\d+)__/g;
const splitExpressions = (css) => {
let found;
const matches = [];
while ((found = expressionsRegex.exec(css)) !== null) {
@newbornfrontender
newbornfrontender / index.html
Created January 4, 2019 13:26
ES modules (examples)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="modulepreload" href="log.js"></link>
</head>
<body>
@newbornfrontender
newbornfrontender / index.js
Created January 3, 2019 11:19
ES Literals (PostCSS)
// const css = (code) => code;
// const style = css`
// p { color: red; }
// `;
// -----------------------------------------------------------------------------
// const style = /* css */ `
// p { color: red; }
@newbornfrontender
newbornfrontender / index.html
Created January 1, 2019 18:22
Test shadow-parts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
my-app::part(test-item) {
color: red;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<my-app></my-app>
if (!process.env.ROLLUP_WATCH) process.env.BABEL_ENV = 'production';
module.exports = {
presets: [
[
'@babel/env',
{
modules: false,
targets: {
@newbornfrontender
newbornfrontender / babel.config.js
Created December 27, 2018 15:46
Rollup - Babel and Terser - sample
module.exports = {
presets: [
[
'@babel/env',
{
modules: false,
// loose: true,
targets: {
esmodules: true,
@newbornfrontender
newbornfrontender / postcss-in-css.js
Created December 24, 2018 13:43
Rollup postcssInCss (forEach)
import { readFile, writeFile } from 'fs';
import postcssrc from 'postcss-load-config';
import postcss from 'postcss';
// export default (ctx = {}) => ({
// name: 'postcss-in-css',
// buildEnd: () =>
// readFile(ctx.from, (err, css) =>
// postcssrc(ctx).then(({ plugins, options }) => {
@newbornfrontender
newbornfrontender / compile-css.js
Created December 24, 2018 11:56
Compile PostCSS
const postcssLoadConfig = require('postcss-load-config');
const postcss = require('postcss');
const code = ``;
postcssLoadConfig().then(({ plugins, options }) => {
postcss(plugins)
.process(code, options)
.then(({ css }) => console.log(css));
});
@newbornfrontender
newbornfrontender / postcss.config.js
Created December 23, 2018 08:19
My test postcss.config.js
module.exports = ({ production }) => ({
plugins: {
'postcss-preset-env': {
stage: 0,
features: {
'nesting-rules': {},
},
autoprefixer: production && {