search

MadLittleMods / postcss-css-variables

PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation
https://madlittlemods.github.io/postcss-css-variables/playground/
Other
536 stars 62 forks source link

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

Closed MadLittleMods closed 1 year ago

MadLittleMods commented 1 year ago

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

Reference: Last time we updated the playground, https://github.com/MadLittleMods/postcss-css-variables/pull/111

Todo

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' ```sh $ 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 ```sh 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 commented 1 year ago

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