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.

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

Closed
wants to merge 2 commits into from

Conversation

MadLittleMods
Copy link
Owner

@MadLittleMods MadLittleMods commented Apr 12, 2023

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

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
mixins({
mixins: {
'cursor-hand': cursorHandMixin,
'toggle-checkbox-enclosed': toggleCheckboxEnclosedMixin
}
}),
nestedcss,
//nestedcss,
Copy link
Owner Author

@MadLittleMods MadLittleMods Apr 12, 2023

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

"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

@@ -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

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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant