feat: add CSS, SCSS, and Stylus processing (resolves #27) #30

greatislander · 2020-09-28T14:20:05Z

Adds Eleventy-based compilation and automatic prefixing for CSS, SCSS or Stylus stylesheets.

For more information see the documentation.

package.json

src/assets/styles/style.css

src/assets/styles/style.scss

src/assets/styles/style.styl

src/assets/styles/styles.11ty.js

jobara · 2020-09-30T18:48:41Z

src/assets/styles/styles.11ty.js

+        return new Promise((resolve, reject) => {
+            const config = {
+                file: options.entryPath,
+                sourceMap: !isProd ? 'out.map' : false,


Why not always output the source map. It would make debugging the production site easier, and shouldn't affect performance if the debugger is off, if I'm not mistaken.

Because the source map is embedded, it would affect performance. See next comment.

jobara · 2020-09-30T18:48:57Z

src/assets/styles/styles.11ty.js

+            const config = {
+                file: options.entryPath,
+                sourceMap: !isProd ? 'out.map' : false,
+                sourceMapEmbed: !isProd || false,


In dev environments the source map is provided both as a separate file and embedded? Also is the default actually needed. Shouldn't the result of !isProd be enough?

For some strange reason, the Sass JS API requires you to provide a string filename value for sourceMap even if it is being embedded. No separate file is generated if the sourceMapEmbed value is true.

jobara · 2020-09-30T18:50:04Z

src/assets/styles/styles.11ty.js

+                file: options.entryPath,
+                sourceMap: !isProd ? 'out.map' : false,
+                sourceMapEmbed: !isProd || false,
+                outputStyle: isProd ? 'compressed' : 'expanded'


If we have a source map, I think we should be able to always compress the output. Or is the issue that you want to see easily view the generated CSS source in the editor?

Yes, the idea is to be able to look at the generated CSS in the editor.

jobara · 2020-09-30T18:54:48Z

src/assets/styles/styles.11ty.js

+    // Compile Stylus to CSS.
+    async compileStylus(options) {
+        return new Promise((resolve, reject) => {
+            const sourceMap = isProd ? false : { inline: true };


same comments as above about source maps.

Same issue— because it's inlined it does affect performance.

Instead of inline can we have a separate file generated?

It's not possible with the method I'm using, which writes the generated CSS to a single output file using Eleventy. If separate map files are required, that would require a different approach entirely.

Could you expand on this a bit further? For example what is preventing having separate files (e.g. related to CSS preprocessor compiler, configuration, 11ty, etc.)? What's the benefit of having it combined?

An *.11ty.js file maps to a single output file. See: https://www.11ty.dev/docs/languages/javascript/

That output path is defined in the data() method here: https://github.com/fluid-project/fluidic-11ty/pull/30/files/8b004c5046de41a0c7821439c3525ddc75f624b5#diff-f94be944bbcca875207aad9633811196abeafd7c3b838a505b6db1bdd81c1850R36

If we wanted to generate multiple output files, we couldn't use Eleventy to run a preprocessor but would have to rework this asset pipeline to use some other method (probably Webpack as is used for JavaScript in #31).

jobara · 2020-09-30T18:56:22Z

src/assets/styles/styles.11ty.js

+
+    // Process CSS with PostCSS.
+    async processCss(options) {
+      const from = options.entryPath || 'undefined';


Is this supposed to be the string of undefined or the undefined value? Also is it necessary to convert all falsey types to that?

Looks like it should actually be false rather than 'undefined': https://twitter.com/PostCSS/status/910791172976758784

jobara · 2020-09-30T18:59:31Z

src/assets/styles/styles.11ty.js

+      let css;
+      switch (options.fileType) {
+        case 'css':
+          css = await this.processCss({str: options.str});


Is it possible to just pass in the options object here, as it also has a top level str property, or do other properties conflict?

I figured out a way to simplify this and use options directly.

src/assets/styles/styles.11ty.js

Embed SCSS contents in source map

Simplify return statement.

greatislander · 2020-10-01T14:08:53Z

@jobara I'm still getting linting errors (I tried updating to your PR version of fluid-grunt-lint-all to no avail). Any ideas or anything you can see on your end?

EDIT: resolved in fd8a862

jobara · 2020-10-14T14:30:05Z

src/assets/styles/README.md

@@ -0,0 +1,11 @@
+# CSS Compilation and Processing
+
+The [Javascript template file](https://www.11ty.dev/docs/languages/javascript/) found at [`src/assets/styles/styles.11ty.js`](https://github.com/fluid-project/fluidic-11ty/blob/c6e82aa65ae828b01298f4c36e24b4de38f135c0/src/assets/styles/styles.11ty.js) handles compilation of [Sass (`.scss`)](http://sass-lang.com) or [Stylus (`.styl`)](https://stylus-lang.com) files and processes the resulting CSS using [PostCSS](https://postcss.org) and [Autoprefixer](https://github.com/postcss/autoprefixer). It will also process plain CSS using [PostCSS](https://postcss.org) and [Autoprefixer](https://github.com/postcss/autoprefixer) for projects where you don't want or need to use a CSS preprocessor.


I'm thinking the URL to styles.11ty.js should be a relative path that way it is always pointing at the correct version of the file.

Resolved in 25e711d.

jobara · 2020-10-14T15:18:34Z

src/assets/styles/styles.11ty.js

+    // Display an error overlay when CSS build fails.
+    // this brilliant idea is taken from Mike Riethmuller / Supermaya
+    // @see https://github.com/MadeByMike/supermaya/blob/master/site/utils/compile-scss.js
+    renderError(error) {
+        return `
+        /* Error compiling stylesheet */
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+        html,
+        body {
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            font-family: monospace;
+            font-size: 1.25rem;
+            line-height:1.5;
+        }
+        body::before {
+            content: "";
+            background: #000;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0.7;
+            position: fixed;
+        }
+        body::after {
+            content: "${cssesc(error)}";
+            white-space: pre;
+            display: block;
+            top: 0;
+            padding: 30px;
+            margin: 50px;
+            width: calc(100% - 100px);
+            color:#721c24;
+            background: #f8d7da;
+            border: solid 2px red;
+            position: fixed;
+        }`;
+    }


I'm not sure if this was inspired by or if it was copied with some slight modifications. You may need to include the license information from the original and make a note of it in the README or other appropriate location. You can see Infusion for an example.

Resolved in 28aa79d.

jobara · 2020-10-14T15:21:05Z

src/assets/styles/styles.11ty.js

+            const fileType = entryPath.split(".").pop();
+            const str = fs.readFileSync(entryPath, "utf8");
+            const css = await this.compile({fileType, entryPath, str});
+            return await this.minify(css);


I think you can just return this.minify(css) without using await. If I'm not mistaken it will return the promise from this.minify if you use await, I suppose it will return a new promise which will resolve with the result of this.minify.

Resolved in 3bbeccd.

feat: add CSS, SCSS, and Stylus processing (resolves #27)

004e0cf

greatislander added the enhancement New feature or request label Sep 28, 2020

greatislander added this to the 0.1.0 milestone Sep 28, 2020

greatislander self-assigned this Sep 28, 2020

greatislander added this to In progress in 1.0.0 via automation Sep 28, 2020

greatislander added 2 commits September 28, 2020 11:20

fix: remove commented-out passthrough copy

c6e82aa

docs: add styles readme

e2f2ab9

greatislander requested review from BlueSlug, jhung and jobara September 28, 2020 15:35

greatislander marked this pull request as ready for review September 28, 2020 15:35

chore(deps): remove unused Grunt packages

5485ca0

amb26 reviewed Sep 29, 2020

View reviewed changes

package.json Outdated Show resolved Hide resolved

fix: add cross-env

933b2c5

greatislander requested a review from amb26 September 29, 2020 14:07

greatislander mentioned this pull request Sep 29, 2020

Add CSS processing configuration fluid-project/eleventy-plugin-fluid#3

Closed

greatislander added 3 commits September 30, 2020 12:02

Merge branch 'upstream' into css-processing

69080ce

Merge branch 'upstream' into css-processing

a2deacd

chore(deps): update package-lock.json

8b004c5

jobara reviewed Sep 30, 2020

View reviewed changes

package.json Outdated Show resolved Hide resolved

jobara reviewed Sep 30, 2020

View reviewed changes

src/assets/styles/style.css Show resolved Hide resolved

jobara reviewed Sep 30, 2020

View reviewed changes

src/assets/styles/style.scss Outdated Show resolved Hide resolved

jobara reviewed Sep 30, 2020

View reviewed changes

src/assets/styles/style.styl Outdated Show resolved Hide resolved

jobara reviewed Sep 30, 2020

View reviewed changes

src/assets/styles/styles.11ty.js Outdated Show resolved Hide resolved

jobara reviewed Sep 30, 2020

View reviewed changes

src/assets/styles/styles.11ty.js Outdated Show resolved Hide resolved

jobara reviewed Sep 30, 2020

View reviewed changes

src/assets/styles/styles.11ty.js Outdated Show resolved Hide resolved

greatislander added 7 commits September 30, 2020 16:09

fix: normalize case for production check

f60e2b7

fix: expand lint configuration

7ad471e

fix: ignore README files in src folders

e08f4cf

Embed SCSS contents in source map

fix: remove unnecessary default

402eed3

fix: PostCSS 'from' option should be false if path is not set

b164383

fix: resolve source map issue with PostCSS

d1da1f3

fix: resolve typo in environment variable

bd501cd

Simplify return statement.

greatislander requested a review from jobara October 1, 2020 13:37

greatislander added 3 commits October 1, 2020 10:42

Merge branch 'upstream' into css-processing

82a465e

fix: use double quotes

b6eb366

Merge branch 'upstream' into css-processing

5bd31d4

greatislander added 3 commits October 1, 2020 11:42

fix: resolve ESLint errors

fd8a862

Merge branch 'upstream' into css-processing

a338063

Merge branch 'upstream' into css-processing

34ee5e5

jobara reviewed Oct 14, 2020

View reviewed changes

docs: use relative URL to point to configuration file

25e711d

greatislander requested a review from jobara October 14, 2020 14:35

jobara reviewed Oct 14, 2020

View reviewed changes

greatislander added 2 commits October 14, 2020 12:26

fix: remove unnecessary await

3bbeccd

docs: add credits for included techniques

28aa79d

greatislander requested a review from jobara October 14, 2020 15:35

Merge branch 'upstream' into css-processing

e670263

greatislander added the mothballed A PR that is indefinitely suspended, but not cancelled outright, and may resume label Oct 14, 2020

greatislander closed this Oct 14, 2020

1.0.0 automation moved this from In progress to Done Oct 14, 2020

greatislander deleted the css-processing branch October 21, 2020 12:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add CSS, SCSS, and Stylus processing (resolves #27) #30

feat: add CSS, SCSS, and Stylus processing (resolves #27) #30

greatislander commented Sep 28, 2020 •

edited

jobara Sep 30, 2020

greatislander Oct 1, 2020

jobara Sep 30, 2020

greatislander Oct 1, 2020

jobara Sep 30, 2020 •

edited

greatislander Oct 1, 2020

jobara Sep 30, 2020

greatislander Oct 1, 2020

jobara Oct 1, 2020

greatislander Oct 1, 2020

jobara Oct 14, 2020

greatislander Oct 14, 2020

jobara Sep 30, 2020

greatislander Oct 1, 2020 •

edited

jobara Sep 30, 2020

greatislander Oct 1, 2020

greatislander commented Oct 1, 2020 •

edited

jobara Oct 14, 2020

greatislander Oct 14, 2020

jobara Oct 14, 2020

greatislander Oct 14, 2020

jobara Oct 14, 2020

greatislander Oct 14, 2020

		@@ -0,0 +1,11 @@
		# CSS Compilation and Processing

		The [Javascript template file](https://www.11ty.dev/docs/languages/javascript/) found at [`src/assets/styles/styles.11ty.js`](https://github.com/fluid-project/fluidic-11ty/blob/c6e82aa65ae828b01298f4c36e24b4de38f135c0/src/assets/styles/styles.11ty.js) handles compilation of [Sass (`.scss`)](http://sass-lang.com) or [Stylus (`.styl`)](https://stylus-lang.com) files and processes the resulting CSS using [PostCSS](https://postcss.org) and [Autoprefixer](https://github.com/postcss/autoprefixer). It will also process plain CSS using [PostCSS](https://postcss.org) and [Autoprefixer](https://github.com/postcss/autoprefixer) for projects where you don't want or need to use a CSS preprocessor.

feat: add CSS, SCSS, and Stylus processing (resolves #27) #30

feat: add CSS, SCSS, and Stylus processing (resolves #27) #30

Conversation

greatislander commented Sep 28, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jobara Sep 30, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greatislander Oct 1, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greatislander commented Oct 1, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greatislander commented Sep 28, 2020 •

edited

jobara Sep 30, 2020 •

edited

greatislander Oct 1, 2020 •

edited

greatislander commented Oct 1, 2020 •

edited