Skip to content

Update playground to use the latest postcss-css-variables@0.19.0 #134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 2 commits into from
Closed

Update playground to use the latest postcss-css-variables@0.19.0 #134

wants to merge 2 commits into from

Conversation

MadLittleMods
Copy link
Owner

@MadLittleMods MadLittleMods commented Apr 12, 2023 •
edited
Loading

Update playground to use the latest postcss-css-variables@0.19.0

Reference: Last time we updated the playground, #111

Todo

  • Update to postcss@^8 because it's a breaking change in the latest versions of postcss-css-variables
  • Run the playground npm build and push the static file build
  • Update the gh-pages branch

Dev notes

npm run jspm -- install npm:postcss@^8

npm run jspm -- install npm:postcss-css-variables@latest

// Doesn't have a new version that supports postcss@^8 so remove for now (at least to get the build working)
npm run jspm -- remove postcss-inline-comment
// Doesn't seem to be used anywhere so can remove
npm run jspm -- remove postcss-safe-parser

npm run jspm -- install npm:postcss-mixins@latest
npm run jspm -- install npm:autoprefixer@latest
npm run jspm -- install npm:postcss-nested@latest

To fix the nanoid issue you get after installing postcss@^8:

npm run build -> ENOENT: no such file or directory, open 'postcss-css-variables\playground\jspm_packages\npm\nanoid@3.3.6\non-secure.js' 
$ cd ./playground/
$ npm run build

> postcss-css-variables-playground@0.1.0 build
> gulp

[03:56:35] Using gulpfile ~\Documents\GitHub\postcss-css-variables\playground\gulpfile.js
[03:56:35] Starting 'default'...
[03:56:35] Starting 'build-clean'...
[03:56:35] Finished 'build-clean' after 6.15 ms
[03:56:35] Starting 'build-setup'...
[03:56:40] 'build-setup' errored after 5.22 s
[03:56:40] (SystemJS) ENOENT: no such file or directory, open 'postcss-css-variables\playground\jspm_packages\npm\nanoid@3.3.6\non-secure.js'
        Error: ENOENT: no such file or directory, open 'postcss-css-variables\playground\jspm_packages\npm\nanoid@3.3.6\non-secure.js'
        Error loading C:/Users/MLM/Documents/GitHub/postcss-css-variables/playground/jspm_packages/npm/nanoid@3.3.6/non-secure.js as "nanoid/non-secure" from C:/Users/MLM/Documents/GitHub/postcss-css-variables/playground/jspm_packages/npm/postcss@8.4.21/lib/input.js
[03:56:40] 'default' errored after 5.23 s
[03:56:41] Error in plugin "run-sequence(build-setup)"
Message:
    (SystemJS) ENOENT: no such file or directory, open 'postcss-css-variables\playground\jspm_packages\npm\nanoid@3.3.6\non-secure.js'
        Error: ENOENT: no such file or directory, open 'postcss-css-variables\playground\jspm_packages\npm\nanoid@3.3.6\non-secure.js'
        Error loading C:/Users/MLM/Documents/GitHub/postcss-css-variables/playground/jspm_packages/npm/nanoid@3.3.6/non-secure.js as "nanoid/non-secure" from C:/Users/MLM/Documents/GitHub/postcss-css-variables/playground/jspm_packages/npm/postcss@8.4.21/lib/input.js
Details:
    originalErr: Error: ENOENT: no such file or directory, open 'postcss-css-variables\playground\jspm_packages\npm\nanoid@3.3.6\non-secure.js'

Stack:
(SystemJS) ENOENT: no such file or directory, open 'postcss-css-variables\playground\jspm_packages\npm\nanoid@3.3.6\non-secure.js'
        Error: ENOENT: no such file or directory, open 'postcss-css-variables\playground\jspm_packages\npm\nanoid@3.3.6\non-secure.js'
        Error loading C:/Users/MLM/Documents/GitHub/postcss-css-variables/playground/jspm_packages/npm/nanoid@3.3.6/non-secure.js as "nanoid/non-secure" from C:/Users/MLM/Documents/GitHub/postcss-css-variables/playground/jspm_packages/npm/postcss@8.4.21/lib/input.js

Fix:

$ cp ./playground/jspm_packages/npm/nanoid@3.3.6/non-secure/index.js ./playground/jspm_packages/npm/nanoid@3.3.6/non-secure.js

$ vim ./playground/jspm_packages/npm/nanoid@3.3.6/non-secure.js
// Change the `exports` to `module.exports`
module.exports = { nanoid, customAlphabet }

One problem I don't know how to fix is jspm-loader-css still using postcss@6 and that project looks abandoned and I've forgotten why I use the MeoMix/jspm-loader-css fork:

Which means I'm stuck at this error relating to loading our CSS and postcss@6 in the stack trace:

npm run build -> Error on fetch for postcss-css-variables-playground/postcss/playground.css at file:///postcss-css-variables/playground/src/postcss/playground.css 
npm run build

> postcss-css-variables-playground@0.1.0 build
> gulp

[04:15:16] Using gulpfile ~\Documents\GitHub\postcss-css-variables\playground\gulpfile.js
[04:15:16] Starting 'default'...
[04:15:16] Starting 'build-clean'...
[04:15:16] Finished 'build-clean' after 4.33 ms
[04:15:16] Starting 'build-setup'...
[04:15:18] 'build-setup' errored after 2.42 s
[04:15:18] Error on fetch for postcss-css-variables-playground/postcss/playground.css at file:///postcss-css-variables/playground/src/postcss/playground.css
        Loading postcss-css-variables-playground/js/components/PlaygroundApp.js
        Loading postcss-css-variables-playground/js/main.js
        Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (file:///postcss-css-variables/playground/jspm_packages/npm/postcss@6.0.1/lib/processor.js:145:15)
    at new Processor (file:///postcss-css-variables/playground/jspm_packages/npm/postcss@6.0.1/lib/processor.js:51:25)
    at postcss (file:///postcss-css-variables/playground/jspm_packages/npm/postcss@6.0.1/lib/postcss.js:73:10)
    at Core.load (file:///postcss-css-variables/playground/jspm_packages/npm/css-modules-loader-core@1.1.0/lib/index.js:51:39)
    at file:///postcss-css-variables/playground/jspm_packages/github/MeoMix/jspm-loader-css@master/src/abstractLoader.js!transpiled:33:46
[04:15:18] 'default' errored after 2.43 s
[04:15:18] Error in plugin "run-sequence(build-setup)"
Message:
    Error on fetch for postcss-css-variables-playground/postcss/playground.css at file:///postcss-css-variables/playground/src/postcss/playground.css
        Loading postcss-css-variables-playground/js/components/PlaygroundApp.js
        Loading postcss-css-variables-playground/js/main.js
        [object Object] is not a PostCSS plugin
Details:
    originalErr: Error: [object Object] is not a PostCSS plugin

Stack:
Error on fetch for postcss-css-variables-playground/postcss/playground.css at file:///postcss-css-variables/playground/src/postcss/playground.css
        Loading postcss-css-variables-playground/js/components/PlaygroundApp.js
        Loading postcss-css-variables-playground/js/main.js
        Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (file:///postcss-css-variables/playground/jspm_packages/npm/postcss@6.0.1/lib/processor.js:145:15)
    at new Processor (file:///postcss-css-variables/playground/jspm_packages/npm/postcss@6.0.1/lib/processor.js:51:25)
    at postcss (file:///postcss-css-variables/playground/jspm_packages/npm/postcss@6.0.1/lib/postcss.js:73:10)
    at Core.load (file:///postcss-css-variables/playground/jspm_packages/npm/css-modules-loader-core@1.1.0/lib/index.js:51:39)
    at file:///postcss-css-variables/playground/jspm_packages/github/MeoMix/jspm-loader-css@master/src/abstractLoader.js!transpiled:33:46

@MadLittleMods
Fix primordials with gulp
a3716bd 
Error:
```
ReferenceError: primordials is not defined
```

Fix from https://stackoverflow.com/a/58394828/796832
@MadLittleMods MadLittleMods changed the title Update playground to use the latest postcss-css-variables Update playground to use the latest postcss-css-variables@0.19.0 Apr 12, 2023
MadLittleMods
MadLittleMods commented Apr 12, 2023
View reviewed changes
playground/css.js
mixins({
mixins: {
'cursor-hand': cursorHandMixin,
'toggle-checkbox-enclosed': toggleCheckboxEnclosedMixin
}
}),
nestedcss,
//nestedcss,
Copy link
Owner Author

@MadLittleMods MadLittleMods Apr 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just trying to get the build to work for now.

TODO: Uncomment before merge

MadLittleMods
MadLittleMods commented Apr 12, 2023
View reviewed changes
playground/package.json
"postcss-inline-comment": "npm:postcss-inline-comment@^3.0.0",
"postcss-mixins": "npm:postcss-mixins@^6.0.1",
"postcss-nested": "npm:postcss-nested@^2.1.0",
"postcss-safe-parser": "npm:postcss-safe-parser@^3.0.1",
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed postcss-safe-parser because it doesn't seemed used anywhere

MadLittleMods
MadLittleMods commented Apr 12, 2023
View reviewed changes
playground/package.json
@@ -14,12 +14,9 @@
"localforage": "npm:localforage@^1.2.2",
"lodash.throttle": "npm:lodash.throttle@^4.1.1",
"object-assign": "npm:object-assign@^4.1.1",
"postcss": "npm:postcss@^6.0.8",
"postcss-css-variables": "npm:postcss-css-variables@0.14.0",
"postcss-inline-comment": "npm:postcss-inline-comment@^3.0.0",
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed postcss-inline-comment because it doesn't have a new version that supports postcss@^8

@MadLittleMods
Copy link
Owner Author

MadLittleMods commented Apr 12, 2023 •
edited
Loading

Closing as there are too many roadblocks to get this going (see the Dev notes section in the description)

Probably easier just to migrate to the new hot bundler that will break in 5 years

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@MadLittleMods