punkfairie/punkfairie.github.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SCSS -> PostCSS

Browse source
This commit is contained in:
marleyrae 2023-06-29 21:05:45 -07:00
parent 4cf00c6845
commit 1abd43a2ac
13 changed files with 106 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
.eleventy.js
View file

@ -1,11 +1,26 @@
const fs = require('fs')
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(require('eleventy-sass'), {
postcss: require('postcss')([
require('postcss-preset-env'),
require('cssnano'),
]),
eleventyConfig.on('eleventy.before', async () => {
const cssSrc = './src/style/style.css'
const cssDest = './dist/style.css'
fs.readFile(cssSrc, (err, css) => {
require('postcss')([
require('postcss-import-ext-glob'),
require('postcss-import'),
require('postcss-preset-env'),
require('cssnano'),
])
.process(css, {from: cssSrc, to: cssDest})
.then(res => {
fs.writeFile(cssDest, res.css, () => true)
})
})
})
eleventyConfig.addWatchTarget('./src/style/**/*.css')
eleventyConfig.addPlugin(require('eleventy-plugin-automatic-noopener'), {
noreferrer: true,
})

6
.idea/cssdialects.xml Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="CssDialectMappings">
<file url="PROJECT" dialect="PostCSS" />
</component>
</project>

96
package-lock.json generated
View file

@ -15,8 +15,9 @@
"@11ty/eleventy": "^2.0.1",
"cssnano": "^6.0.1",
"eleventy-plugin-automatic-noopener": "^2.0.2",
"eleventy-sass": "^2.2.3",
"postcss": "^8.4.24",
"postcss-import": "^15.1.0",
"postcss-import-ext-glob": "^2.1.1",
"postcss-preset-env": "^8.5.1"
}
},
@ -1862,30 +1863,6 @@
}
}
},
"node_modules/eleventy-sass": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/eleventy-sass/-/eleventy-sass-2.2.3.tgz",
"integrity": "sha512-XmrG//wTJVxV1gwdl923cxBHBv3LrzF0vvUd0AMx8D6Rydfw25Zkwp7P1lMeTZ9BnCNrKDSzK/NH8bUN2eevJw==",
"dev": true,
"dependencies": {
"debug": "^4.3.3",
"kleur": "^4.1.4",
"sass": "^1.49.7"
},
"peerDependencies": {
"@11ty/eleventy": "^1.0.0 || ^2.0.0-canary.12 || ^2.0.0-beta.1",
"eleventy-plugin-clean": "^1.1.0",
"eleventy-plugin-rev": "^1.1.1"
},
"peerDependenciesMeta": {
"eleventy-plugin-clean": {
"optional": true
},
"eleventy-plugin-rev": {
"optional": true
}
}
},
"node_modules/encodeurl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@ -1987,6 +1964,12 @@
"node": ">=8.6.0"
}
},
"node_modules/fast-sort": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/fast-sort/-/fast-sort-3.4.0.tgz",
"integrity": "sha512-c/cMBGA5mH3OYjaXedtLIM3hQjv+KuZuiD2QEH5GofNOZeQVDIYIN7Okc2AW1KPhk44g5PTZnXp8t2lOMl8qhQ==",
"dev": true
},
"node_modules/fastq": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@ -2293,12 +2276,6 @@
"node": ">= 0.10"
}
},
"node_modules/immutable": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
"integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
"dev": true
},
"node_modules/inflight": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@ -3460,6 +3437,37 @@
"postcss": "^8.4"
}
},
"node_modules/postcss-import": {
"version": "15.1.0",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
"integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
"dev": true,
"dependencies": {
"postcss-value-parser": "^4.0.0",
"read-cache": "^1.0.0",
"resolve": "^1.1.7"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"postcss": "^8.0.0"
}
},
"node_modules/postcss-import-ext-glob": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/postcss-import-ext-glob/-/postcss-import-ext-glob-2.1.1.tgz",
"integrity": "sha512-qd4ELOx2G0hyjgtmLnf/fSVJXXPhkcxcxhLT1y1mAnk53JYbMLoGg+AFtnJowOSvnv4CvjPAzpLpAcfWeofP5g==",
"dev": true,
"dependencies": {
"fast-glob": "^3.2.12",
"fast-sort": "^3.2.0",
"postcss-value-parser": "^4.2.0"
},
"peerDependencies": {
"postcss": "^8.2.0"
}
},
"node_modules/postcss-initial": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
@ -4292,6 +4300,15 @@
}
]
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
"dev": true,
"dependencies": {
"pify": "^2.3.0"
}
},
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@ -4383,23 +4400,6 @@
"queue-microtask": "^1.2.2"
}
},
"node_modules/sass": {
"version": "1.63.6",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
"integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
"dev": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/section-matter": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",

7
package.json
View file

@ -4,8 +4,8 @@
"description": "",
"main": "index.html",
"scripts": {
"dev": "npx @11ty/eleventy --serve",
"build": "npx @11ty/eleventy"
"dev": "rm -rf dist && npx @11ty/eleventy --serve",
"build": "rm -rf dist && npx @11ty/eleventy"
},
"keywords": [],
"author": "",
@ -14,8 +14,9 @@
"@11ty/eleventy": "^2.0.1",
"cssnano": "^6.0.1",
"eleventy-plugin-automatic-noopener": "^2.0.2",
"eleventy-sass": "^2.2.3",
"postcss": "^8.4.24",
"postcss-import": "^15.1.0",
"postcss-import-ext-glob": "^2.1.1",
"postcss-preset-env": "^8.5.1"
},
"dependencies": {

2
src/index.liquid
View file

@ -7,7 +7,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Marley Rae</title>
<link rel="stylesheet" href="/scss/style.css">
<link rel="stylesheet" href="/style.css">
</head>
<body class="Body">

6
src/scss/layout/_Body.scss
View file

@ -1,6 +0,0 @@
@use '../theme';
.Body {
background: theme.$purple;
background: linear-gradient(135deg, theme.$purple 0%, theme.$pink 100%);
}

3
src/scss/layout/_Site.scss
View file

@ -1,3 +0,0 @@
.Site {
}

1
src/scss/layout/_index.scss
View file

@ -1 +0,0 @@
@forward 'Body';

1
src/scss/style.scss
View file

@ -1 +0,0 @@
@use 'layout';

6
src/style/layout/Body.css Normal file
View file

@ -0,0 +1,6 @@
@layer layout {
.Body {
background: var(--c-purple);
background: linear-gradient(135deg, var(--c-purple) 0%, var(--c-pink) 100%);
}
}

5
src/style/layout/Site.css Normal file
View file

@ -0,0 +1,5 @@
@layer layout {
.Site {
}
}

4
src/style/style.css Normal file
View file

@ -0,0 +1,4 @@
@import 'theme.css';
@import 'layout/Body.css';
@import 'layout/Site.css';

22
src/scss/_theme.scss → src/style/theme.css
View file

@ -8,8 +8,10 @@
&colors
\* -------------------------------------------------------------------------- */
$pink: rgba(244, 114, 182, 1);
$purple: rgba(192, 132, 252, 1);
:root {
--c-pink: rgba(244, 114, 182, 1);
--c-purple: rgba(192, 132, 252, 1);
}
/* -------------------------------------------------------------------------- *\
&type sizing
@ -18,14 +20,14 @@ $purple: rgba(192, 132, 252, 1);
/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
--step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
--step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
--step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
--step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
--step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
--step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
--step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
--t-step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
--t-step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
--t-step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
--t-step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
--t-step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
--t-step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
--t-step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
--t-step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
}
/* -------------------------------------------------------------------------- *\